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
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.
Cette commande n'est à initier qu'une seule fois sur le projet. Elle n'est plus nécessaire par la suite.
Build des sources Angular
Pour pouvoir générer le package Android, il faut au préalable builder l'app Angular.
Le build Angular se fait en 2 étapes :
- build des modules
- build de l'app
Pour build tous les modules en 1 commande :
npm run module:build-all
Pour build un module en particulier
npm run module:build {nom_module}
Pour build l'app Angular
npx ng build [--configuration={environment}]
A l'issue de ces builds, votre projet devrait comporter 2 dossiers contenant les sources compilées et minifiées : www/ (= core Angular) et dist/ (= modules)
Pour faciliter cette étape, l'application Multi met à disposition une commande qui permet de lancer le build complet :
npm run build [-- --configuration={environment}]
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]
Important
Si vous avez passé un environnement à Angular au moment du build, il est impératif d'ajouter l'option --no-build lors de la synchronisation des fichiers.
Sans quoi ionic relancera le build Angular sans prendre en compte l'environnement en question.
Plus d'infos sur l'utilisation des environnements ici : Configurer plusieurs environnements de développement
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
Todo