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.
Pour plus d'infos sur l'utilisation des environnements : Configurer plusieurs environnements de développement
Générer le splashscreen et les icônes
Todo
Multi permet de créer plusieurs fichiers de configuration suivant l'environnement que l'on souhaite cibler.
Environnements Angular
Angular permet de gérer plusieurs fichiers d'environnement dans le dossier user-frontend-ionic/src/environments/
Vous pouvez utiliser autant de fichiers de configuration que vous souhaitez, en les nommant comme vous le souhaitez.
L'avantage par exemple ici, est que pour chaque environnement on va pouvoir avoir une url différente pour l'apiEndpoint, development pointera vers le backend de dev, staging vers celui de preprod, prod vers celui de production...
On pourra également paramétrer les modules des fonctionnalités différemment suivant les environnements.
Chaque fichier d'environnement doit être déclaré dans le fichier user-frontend-ionic/angular.json sous "configurations"
"configurations": {
"development": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
Il est également possible pour chaque environnement de jouer sur les paramètres de build Angular, comme l'utilisation du compilateur AOT ou encore la taille max que ne doit pas dépasser le bundle.
Builder le client Angular en précisant l'environnement
Pour pouvoir utiliser un fichier d'environnement spécifique au moment du build Angular, il est nécessaire de le préciser dans la commande :
npm run build -- --configuration=[environment]
Où [environment] correspond au nom du bloc défini dans le fichier angular.json (et non le suffixe dans le nom du fichier environment.ts)
Important !
Si par la suite vous utilisez la commande ionic cap sync pour synchroniser votre bundle Angular avec les fichiers de l'app native, il est primordial de lui passer l'option --no-build
Sans quoi la commande sync va relancer le build Angular en reprenant le fichier environment.ts par défaut. Votre conf d'environnement sera alors écrasée !
Environnements Firebase
Il est également possible d'utiliser plusieurs fichiers de configuration Firebase en fonction de l'environnement. Cela peut particulièrement être utile lorsque que l'on veut effectuer des tests de notification sans avertir tous les utilisateurs qui utilisent l'application de production.
Dans src/environments/firebase/ sous chaque dossier propre à la plateforme, vous pouvez ajouter autant de fichiers que vous souhaitez selon vos environnements.
Pour exemple à l'Université de Lorraine, l'app de dev est branchée sur le firebase de dev et les app preprod et prod sont branchées sur la production.
Conf PWA
Pour la PWA, il convient de mettre à jour le chemin vers le fichier de configuration correspondant dans le fichier environment.ts
Par exemple, dans le fichier environment.developments.ts, on aura :
import firebasePwaEnvironment from './firebase/web/firebase-environment.pwa-development.json';
Conf applications mobiles
Pour les applications natives, il conviendra de copier le bon fichier dans l'arborescence du projet en renommant suivant le nom attendu :
ios/App/App/GoogleService-Info.plistandroid/app/google-services.json
Cette étape peut être simplifiée par l'utilisation de l'outil Trapèze.
Environnements Trapeze
Trapeze est un outil qui permet de modifier de l'information à chaud directement dans les fichiers des applications natives, sans avoir à rebuilder les dossiers avec ionic cap sync
Pour plus d'informations sur trapeze : https://trapeze.dev/
Dans le projet Multi, trapeze est principalement utilisé pour mettre à jour le numéro de version de l'application et pour copier le bon fichier Firebase suivant l'environnement.
Vous pouvez alors partir du fichier trapeze-config.ts.dist pour créer autant de conf souhaitées selon vos environnements
Vous pourrez ensuite exécuter la conf trapeze en fonction de l'environnement en précisant le fichier à utiliser :
VERSION_NAME="1.1.0" BUILD_NUMBER="7" npx trapeze run trapeze-config.[environment].yml
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