Configurer Capacitor

Capacitor est le moteur de Ionic qui permet de faire correspondre les méthodes Javascript et les fonctionnalités natives du téléphone (appareil photo, contacts, GPS, ...).
Il remplace aujourd'hui Cordova sur la plupart des projets Ionic.

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',
};

export default config;

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

• appId : Identifiant unique de l'application
  • = Bundle ID sous iOS
  • = Application ID sous Android
• appName : Nom de l'application sur les stores
• webDir : Répertoire contenant l'app Angular compilée

Ajouter le support d'Android sur le projet

...

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-dessousTodo

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 :

Bloc de code
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)

Remarque
Il se peut qu'à l'ouverture du projet, Studio vous propose de mettre à jour le plugin Gradle vers une version supérieur. Image Added Ne le faites pas ! La version de Gradle à utiliser sur le projet est configurée par Ionic au moment du build. Mettre à jour Gradle risquerait de casser le projet

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

Todo

Todo Checklist de re-déploiement

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. 

•  Configurer Capacitor en éditant le fichier capacitor.config.ts
•  Ajouter le support d'Android sur le projet
  

  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