esup-multi

Arborescence des pages

Vous regardez une version antérieure (v. /wiki/spaces/ESUPMULTI/pages/1340637207/Installation+Quickstart) 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. 19) afficher la version suivante »

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

TODO

 Ecrire la doc ! 

Build et test sur 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.

Ajout des autorisations et personnalisation du Manifest

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 ?

Build et test sur iOS

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 :

$ 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.

Ajout des autorisations et personnalisation du Manifest

TODO

 Ecrire la doc ! 

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 ?

Logo et spashscreen

TODO

 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 :

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

cd /dev/user-frontend-ionic
npx capacitor-assets generate --assetPath /src/theme/default/resources


  • Aucune étiquette