esup-multi

Arborescence des pages

Vous regardez une version antérieure (v. /wiki/spaces/ESUPMULTI/pages/1407975444/Build+de+l+app+Android) de cette page.

afficher les différences afficher l'historique de la page

« Afficher la version précédente Vous regardez la version actuelle de cette page. (v. 11) afficher la version suivante »

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 ou iOS, 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

Pour générer le splashscreen et les icônes de l'application, Multi dispose d'un outil qui se nomme capacitor-assets.

Toute la procédure à suivre est indiquée sur la page suivante : Personnaliser le splashscreen et le logo

La génération de splashscreen et des icônes n'est à réaliser qu'une seule fois. Il n'est pas nécessaire de rejouer la commande à chaque build du client.

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

  • Aucune étiquette