Installation Quickstart

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

Le Backend

Configuration des variable d'environnement

=> 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

Démarrer la gateway et les microservices

Dans la gateway et chaque microservice :

$ npm start

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 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 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/

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.

Ajout des autorisations et personnalisation du Manifest

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/

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.

Ajout des autorisations et personnalisation du Manifest

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

Tester les apps

Tester l'app Web

Tester l'app Android

Ouvrir ensuite le projet dans Android Studio via la commande suivante :

$ npx capacitor open android

Tester l'app iOS

Ouvrir ensuite le projet dans XCode via la commande suivante :

$ npx capacitor open ios