Dans cette page nous allons procéder à une installation quickstart de l'application c'est à dire que cette dernière...
- Fonctionnera de manière autonome avec des mock pas de connexion au SI
- Présentera la liste exhaustive des services qu'elle offre
- Ne proposera aucune personnalisation graphique
Cette installation vise plutôt le test de l'application ou la création d'un démonstrateur.
Récupération des sources
Cloner les sources disponibles sous gitHub https://github.com/univlorraine/esup-multi
git clone https://github.com/univlorraine/esup-multi.git
Le CMS Headless
=> va permettre de fournir du contenu dynamique au client mobile
TODO
Documenter l'installation du CMS et l'import des structures et data
Le Backend
Prérequis
Nécessite d'avoir Docker sur la machine de dev, notamment pour disposer des briques suivantes en local :
- Instance de Directus (cf. section Le CMS Headless)
- Serveur Nats
- Base Redis
Configuration des variable d'environnement
TODO
Mettre les mocks en place
TODO
Créer les fichiers .env.dist dans le main et les microservices
=> Lister tous les dossiers dans lesquels renommer le fichier .env.dist en .env (selon les modules qu'on aura décidé de mettre en place / activer côté client pour la démo)
Installer les dépendances
Dans la gateway et chaque microservice
$ npm ci
TODO
Voir si on ne met pas en place un script sh ou npm qui permet de tout installer en une commande
Démarrer la gateway et les microservices
Dans la gateway et chaque microservice :
$ npm start
TODO
Voir si on ne met pas en place un script sh ou npm qui permet de tout démarrer en une commande
Le Client
Prérequis
- 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
Paramétrages minimaux de l'application cliente
Dans /dev/user-frontend-ionic copier, coller et renommer le fichier capacitor.ts.dist en capacitor.ts. Ce fichier permet de paramétrer le nom de l'app et son identifiant, on laissera les valeur par défaut pour le quickstart.
Dans /dev/user-frontend-ionic/src/environments copier, coller et renommer le fichier environment.ts.dist en environment.ts. (Laisser les 2 lignes qui concernent firebase en commentaire)
Pour utiliser le thème par défaut disponible avec la démo, dans le sous-dossier /src/theme et renommer le fichier theme.scss.dist en theme.scss
Pour personnaliser tout ces éléments voir la documentation
Préparation des fichiers Ionic
Depuis dev/user-frontend-ionic/,
installer les dépendances :
$ npm ci
puis, préparer l'app :
$ npm run build
Cette commande va compiler les assets et préparer les fichiers pour le build des applications natives.
Elle va en fait exécuter 2 commandes :
- prebuild (exécuté automatiquement avant build) :
npm run module:build-all=> va compiler les différents modules Angular présents dans le dossierprojects/et les placer dans un dossierdist/ - build :
ng build=> va compiler l'app Angular et les assets associés présents dans le dossiersrc/et les placer dans un dossierwww/
Build des apps
Build appli web
Il n'y a rien de plus à faire à ce niveau car les fichiers compilés nécessaires au fonctionnement de l'application web ont été buildés via la commande npm run build ci-dessus.
Build Android
Ajouter le support d'Android
Pour ajouter le support d'Android au projet, il est nécessaire d'exécuter la commande suivante :
$ npx capacitor add android
Cette commande va générer tous les fichiers nécessaires au build d'une application Android et les placer dans un dossier android/
Elle va également ajouter à ces fichiers, une copie des assets et des sources se trouvant dans www/
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 :
$ 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.
Build iOS
Ajouter le support d'iOS
Pour ajouter le support d'iOS au projet, il est nécessaire d'exécuter la commande suivante :
$ 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/
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 iOS
Copier les sources
Pour ajouter les assets et sources du projet compilés, il est nécessaire d'exécuter la commande suivante :
$ 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.
Générer les splashscreens et les icônes
Les icônes et le splashscreens se trouvent par défaut dans /dev/user-frontend-ionic/src/theme/default/resources
Pour les ajouter dans les app natives Android et iOS, il est nécessaire d'exécuter la commande suivante :
$ npx capacitor-assets generate --assetPath src/theme/default/resources
Configurer les autorisations sur les périphériques
Suivant les modules que vous souhaiterez utiliser dans votre application, il peut parfois être nécessaire d'ajouter les autorisations nécessaires d'accès aux fonctionnalités native du périphérique (appareil photo, annuaire des contacts, etc...).
Android
Éditer le fichier android/app/main/AndroidManifest.xml et y coller le contenu suivant (remplacer l'existant) :
iOS
Éditer le fichier ios/App/App/Info.plist et y coller le contenu suivant (remplacer l'existant) :
Tester les apps
Tester l'app Web
TODO
Ecrire la doc !
Tester l'app Android
Ouvrir ensuite le projet dans Android Studio via la commande suivante :
$ npx capacitor open android
Questions ?
- 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 ?
Tester l'app iOS
Ouvrir ensuite le projet dans XCode via la commande suivante :
$ npx capacitor open ios
Questions ?
- 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 ?