...
- Android Studio + JDK pour l'app Android
- Xcode + CocoaPods à jour (MacOS uniquement) pour l'app iOS
- Avoir un backend fonctionnel, démarré et accessible depuis la machine locale ou le périphérique qui seront utilisés pour les tests
- Avoir une instance du CMS headless fonctionnelle, démarrée et accessible depuis le backend ET la machine locale ou le périphérique qui seront utilisés pour les tests
Parametrages minimal de l'application cliente
...
- prebuild (exécuté automatiquement avant build) :
npm run module:build-all => va compiler les différents modules Angular présents dans le dossier projects/ et les placer dans un dossier dist/ - build :
ng build => va compiler l'app Angular et les assets associés présents dans le dossier src/ et les placer dans un dossier www/
Build et test sur navigateur
| Avertissement |
|---|
|
Ecrire la doc ! |
Build et test sur Android
Ajouter le support d'Android
...
| Remarque |
|---|
Cette commande n'est à exécuter qu'une seule fois sur le projet. Elle permet d'initier les fichiers nécessaires au build d'une app Android |
Copier les sources
Pour ajouter les assets et sources du projet compilés, il est nécessaire d'exécuter la commande suivante :
| Bloc de code |
|---|
$ npx capacitor sync android |
Cette commande va copier les fichiers de l'app Angular compilés dans le dossier android/ (équivalent de la commande npx capacitor copy android) en plus de faire correspondre les différents plugins Capacitor mis en place sur le projet avec les différentes fonctionnalités natives Android.
Ajout des autorisations et personnalisation du Manifest
| Avertissement |
|---|
|
Ecrire la doc ! |
Tester l'app Android
Ouvrir ensuite le projet dans Android Studio via la commande suivante :
| Bloc de code |
|---|
$ npx capacitor open android |
| Avertissement |
|---|
|
- détaille-t-on l'exécution du projet dans un émulateur Android ? Et si oui, jusqu'à quel niveau ?
- détaille-t-on l'exécution du projet sur un périphérique externe ? Et si oui, jusqu'à quel niveau ?
|
Build et test sur iOS
| Avertissement |
|---|
Les tests sur périphérique iOS externe ou même émulateur ne sont possible que depuis une machine tournant sur macOS (nécessite l'utilisation de XCode) |
Ajouter le support d'iOS
Pour ajouter le support d'iOS au projet, il est nécessaire d'exécuter la commande suivante :
| Bloc de code |
|---|
$ npx capacitor add ios |
Cette commande va générer tous les fichiers nécessaires au build d'une application iOS et les placer dans un dossier ios/
Elle va également ajouter à ces fichiers, une copie des assets et des sources se trouvant dans www/
| Remarque |
|---|
Cette commande n'est à exécuter qu'une seule fois sur le projet. Elle permet d'initier les fichiers nécessaires au build d'une app iOSPour la suite, après modification des sources, il suffira simplement |
Copier les sources
Pour ajouter les assets et sources du projet compilés, il est nécessaire d'exécuter la commande suivante :
| Bloc de code |
|---|
$ npx capacitor sync ios |
Cette commande va copier les fichiers de l'app Angular compilés dans le dossier ios/ (équivalent de la commande npx capacitor copy ios) en plus de faire correspondre les différents plugins Capacitor mis en place sur le projet avec les différentes fonctionnalités natives iOS.
Ajout des autorisations et personnalisation du Manifest
| Avertissement |
|---|
|
Ecrire la doc ! |
Tester l'app iOS
Ouvrir ensuite le projet dans XCode via la commande suivante :
| Bloc de code |
|---|
$ npx capacitor open ios |
| Avertissement |
|---|
|
- détaille-t-on l'exécution du projet dans un émulateur iOS ? Et si oui, jusqu'à quel niveau ?
- détaille-t-on l'exécution du projet sur un périphérique externe ? Et si oui, jusqu'à quel niveau ?
pour synchroniser les modifications avec le dossier android/ :$ npx capacitor sync android |
Compilation Trapeze
Installer Trapeze (https://trapeze.dev/)
...
| Bloc de code |
|---|
cd /dev/user-frontend-ionic
npx trapeze run trapeze-config.yml -y |
Logo et spashscreen
| Avertissement |
|---|
|
Rebasculer la génération du splashscreen et logo dans les builds d'app natives |
Installer Capacitor Assets (https://github.com/ionic-team/capacitor-assets) avec la ligne de commande :
| Bloc de code |
|---|
npm install --save-dev @capacitor/assets |
Le logo et le splashscreen se trouvent par défaut dans /dev/user-frontend-ionic/src/theme/default/resources
Lancer la commande
| Bloc de code |
|---|
cd /dev/user-frontend-ionic
npx capacitor-assets generate --assetPath /src/theme/default/resources |
Compilation et lancement de l'app
Lancement de la pwa
Lancement des app mobiles