Configurer Capacitor

Ajouter le support d'Android sur le projet

Pour pouvoir créer une app Android, il faut indiquer à Ionic que l'on souhaite le support natif Android

npx ionic capacitor add android

Un nouveau dossier android/ devrait apparaitre dans votre arborescence, contenant tous les fichiers propres au fonctionnement sur la plateforme.

...

Build des sources Angular

Build du package Android

Une fois le build Angular terminé. Il faut utiliser une commande Capacitor qui permet de synchroniser les données des fichiers www/ et dist/ avec le dossier de l'app native android/

npx ionic capacitor sync android [--no-build]

Ajouter les autorisations nécessaires pour les fonctionnalités natives

Pour ajouter les autorisations dans le fichier AndroidManifest.xml, il suffit de coller la balise de déclaration correspondante, au sein de la balise <manifest> (généralement juste avant la balise <application>).

Accès à l'appareil photo

<uses-permission android:name="android.permission.CAMERA" />

Accès aux photos

<uses-feature android:name="android.hardware.camera" />

Autoriser l'utilisation du plugin de scan des code-barres

<uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />

Accès à l'annuaire des contacts

<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />

Géolocalisation

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:name="android.hardware.location.gps" android:required="false" />

Internet

<uses-permission android:name="android.permission.INTERNET" />

Générer le splashscreen et les icônes

Ajouter le support de Firebase pour les notifications push

Pour pouvoir utiliser Firebase sur le projet, vous devez avoir préalablement configuré le projet pour : Configurer Firebase sur le client

Pour finaliser l'utilisation de Firebase sur votre client Android il ne reste alors plus qu'à copier le fichier google-services.json dans le répertoire android/app/

Cette procédure peut être automatisée en fonction de l'environnement à utiliser en utilisant l'outil Trapeze décrit ci-dessous

Utiliser Trapeze pour faciliter les modifications du package Android

Ouvrir le projet sous Android Studio pour tester l'application

Une fois le projet Android buildé, il ne reste plus qu'à l'ouvrir sous Android Studio. Pour cela, exécutez la commande :

npx ionic capacitor open android

L'IDE devrait alors s'ouvrir, affichant l'arborescence du projet.

Vous pouvez désormais testé le projet Android en sélectionnant le périphérique souhaité (émulateur ou device connecté) dans le menu déroulant en haut

Image Added

puis en cliquant sur le bouton Image Added (Run App)

Préparer l'App Bundle pour la diffusion sur le Play Store

Configurer les certificats

Générer un App Bundle signé

Publier l'application sur le Play Store

Publier l'application sur les stores

Checklist de (re)build

Vous trouverez ci-dessous la checklist des actions à effectuer pour build ou rebuild l'app native et la publier sur les stores.

En gris, les actions à n'effectuer qu'une seule fois.
Entre parenthèses, les actions facultatives.
Les autres actions sont à faire à chaque nouvelle release. 

...

A la racine du projet se trouve un fichier capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'fr.esupportail.mobile.multi',
  appName: 'Esup-Multi',
  webDir: 'www',
  plugins: {
    // eslint-disable-next-line @typescript-eslint/naming-convention
    SplashScreen: {
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: false,
      backgroundColor: '#ffffff',
    },
    // eslint-disable-next-line @typescript-eslint/naming-convention
    FirebaseMessaging: {
      presentationOptions: ['badge', 'sound', 'alert'],
    },
  },
};

export default config;

Il est important de bien configuré les variables se trouvant dans ce fichier car elles vont permettre d'identifier l'application sur les stores

• appId : Identifiant unique de l'application => fr.univlorraine.mobile.appUnivLorraine
  • = Bundle ID sous iOS
  • = Application ID sous Android
• appName : Nom friendly de l'application => UnivLorraine
• webDir : Répertoire contenant les assets Web compilés => www

• bundledWebRuntime : Indique s'il faut copier le runtime ou non dans le projet => false

•  Configurer Capacitor en éditant le fichier capacitor.config.ts
•  

• Ajouter le support d'Android sur le projet

...

Todo

Build des sources Angular

Todo

Build du package Android

Todo

Générer le splashscreen et les icônes

Todo

Ajouter le support de Firebase pour les notifications push

Todo

Utiliser Trapeze pour faciliter les modifications du package Android

Todo

Ouvrir le projet sous Android Studio pour tester l'application

Todo

Préparer l'App Bundle pour la diffusion sur le Play Store

Todo

Todo Checklist de re-déploiement

• 
  

  Bloc de code
  npx ionic capacitor add android

  
  
•  Build les sources d'Angular avec les modules
  

  Bloc de code
  npm run build [-- --configuration={environment}]

  
  
•  Synchronisation des sources Angular avec les packages natifs Android
  

  Bloc de code
  npx ionic capacitor sync android [--no-build]

  
  
•  Ajouter les autorisations pour les fonctionnalités natives dans le fichier AndroidManifest.xml
•  Générer le Splashscreen et les icônes de l'application avec l'outil capacitor-assets
•  (Ajouter la configuration Firebase en collant le fichier google-services.json dans le dossier android/app/)
•  Exécuter la configuration Trapeze pour mettre à jour les numéros de version et build + (copie des fichiers de configuration Firebase)
•  Ouvrir le projet dans Android Studio
  

  Bloc de code
  npx ionic capacitor open android

  
  
•  Vérifier que l'on retrouve bien le bon package_name, ainsi que les autorisations nécessaires dans le fichier AndroidManifest.xml
•  Vérifier que l'on retrouve bien les bonnes valeurs pour les attributs versionCode et versionName dans le fichier android/app/build.gradle
•  Configurer les certificats pour la signature du bundle
•  Générer l'App Bundle signé : menu > Build > Generate Signed Bundle
•  Déposer l'App Bundle app-release.aab généré dans le dossier android/app/release/ sur le Play Store

Todo