Historique de la page

...

Cloner les sources disponibles sous gitHub GitHub https://github.com/univlorraine/esup-multi

git clone git@githubhttps://github.com:/univlorraine/esup-multi.git

...

Le CMS HeadLess va permettre de fournir du contenu dynamique au client mobile.

Plusieurs CMS sont possibles, celui par défaut est Wordpress.

Le Backend

Le backend doit disposer des briques suivantes (Voir l'installation des pré-requis) : 

• Une base MongoDB 
• Un serveur Nats
• Une base Redis
• Instance de Directus (cf. section Le CMS Headless)

Configuration des variables d'environnement

Esup-Multi s'accompagne d'un serveur de mocks visant à simuler les connecteurs qui devront être branchés sur le SI de l'établissement. Esup-multi est donc pré-paramétré pour fonctionner avec ces mocks et les paramètres par défaut des services à installer en pré-requis.

Dans dev/user-backend-nest copier et renommer chaque fichier .env.dist en .env pour :

• la gateway dans /main
• chaque µService dans /microservices/*

Dans chaque µService utilisant directus positionner la variable <MICRO_SERVICE_NAME>_DIRECTUS_API_BEARER_TOKEN avec le token obtenu pour le user directus (cf paragraphe précédent) dans le fichier .env

Exemple :

SOCIAL_NETWORK_SERVICE_DIRECTUS_API_BEARER_TOKEN=azertyqsdfg123456

Dans renseigner /main/.env et dans /microservices/auth/.env un secret pour les JWT dans la variable  AUTH_SERVICE_JWT_SECRET

AUTH_SERVICE_JWT_SECRET=secretsecret

Serveur de mock

L'application multi est fournie avec un serveur de mock. Il s'agit d'API qui renvoient des données statiques qui vous permettent d'émuler ce que retourneraient des connecteurs branchés sur votre système d'information.

L'URL de chaque mock est précisée par défaut dans le fichier .env du microservice sous la forme :

http://localhost:3099/mocking/<api_exemple>

Il n'y a donc rien de plus à configurer de ce côté-là.

Installation du CMS

Pour la mise en place de WordPress, se référer à la documentation suivante : Installer et configurer Wordpress

Notes :

• Le fichier docker-compose.yml est dans env/local/docker/wordpress
• Pour se connecter, les identifiants par défaut sont :
  • Identifiant : admin
  • Mot de passe : password

Installation du connecteur CMS

Le choix du CMS n'étant pas imposé, un connecteur est nécessaire pour le relier au reste du projet.

Le code source du connecteur est fourni dans le projet Esup-Multi, au niveau de l'arborescence dev/connectors/multi-cms-connector

Commencez par installer les dépendances du connecteur : npm ci 

Pour plus d'informations sur l'installation et la configuration du connecteur, se référer à la documentation suivante : Connecteur CMS Headless

Pour lancer le connecteur : npm start 

Le Backend

Le backend doit disposer des briques suivantes (Voir l'installation des pré-requis) : 

• Une base MongoDB 
• Un serveur Nats
• Une base Redis
• Un CMS
• Connecteur CMS

Configuration des variables d'environnement

Dans dev/user-backend-nest Dans dev/user-backend-mocks copier et renommer chaque fichier .env.dist en .env

Installer le serveur depuis /dev/user-backend-mocks/ avec la commande :

npm install

Puis démarrer le serveur avec la commande :

npm start

Installer les dépendances et build

Placez-vous à la racine du projet et installez les dépendances :

$ npm ci

puis lancez (toujours depuis la racine du projet) :

$ npm run build:back

Cette commande va, pour la gateway et chaque microservice, installer les dépendances et build.

pour :

• la gateway dans /main
• chaque µService dans /microservices/*

Dans chaque µService utilisant le CMS positionner la variable <MICRO_SERVICE_NAME>_SERVICE_CMS_CONNECTOR_API_BEARER_TOKEN  avec le token généré précédemment (voir Connecteur CMS Headless) dans le fichier .env, ainsi que l'URL du connecteur CMS sur la variable <MICRO_SERVICE_NAME>_SERVICE_CMS_CONNECTOR_API_URL .

Exemple :

SOCIAL_NETWORK_SERVICE_CMS_CONNECTOR_API_URL=http://localhost:4000
SOCIAL_NETWORK_SERVICE_CMS_CONNECTOR_API_BEARER_TOKEN=azertyqsdfg123456

Renseigner dans /main/.env et dans /microservices/auth/.env un secret pour les JWT dans la variable  AUTH_SERVICE_JWT_SECRET

AUTH_SERVICE_JWT_SECRET=secretsecret

Serveur de mock

L'application multi est fournie avec un serveur de mock. Il s'agit d'API qui renvoient des données statiques qui vous permettent d'émuler ce que retourneraient des connecteurs branchés sur votre système d'information. Esup-multi est donc pré-paramétré pour fonctionner avec ces mocks et les paramètres par défaut des services à installer en prérequis.

L'URL de chaque mock est précisée par défaut dans le fichier .env du microservice sous la forme :

http://localhost:3099/mocking/<api_exemple>

Il n'y a donc rien de plus à configurer de ce côté-là.

Dans dev/user-backend-mocks copier et renommer chaque fichier .env.dist en .env

Installer le serveur depuis /dev/user-backend-mocks/ avec la commande :

npm install

Puis démarrer le serveur avec la commande :

npm start

Installer les dépendances et build

Placez-vous à la racine du projet et installez les dépendances :

$ npm ci

puis lancez (toujours depuis la racine du projet) :

$ npm run build:back

Cette commande va, pour la gateway et chaque microservice, installer les dépendances et build.

[map] npm run back:map

[map] npm run back:map -- run build exited with code 0
[static-pages] npm run back:static-pages -- run build exited with code 0
[chatbot] npm run back:chatbot -- run build exited with code 0
[social-network] npm run back:social-network -- run build exited with code 0
[cards] npm run back:cards -- run build exited with code 0
[rss] npm run back:rss -- run build exited with code 0
[important-news] npm run back:important-news -- run build exited with code 0
[statisticsstatic-pages] npm run back:statisticsstatic-pages -- run build exited with code 0
[featureschatbot] npm run back:featureschatbot -- run build exited with code 0
[notificationssocial-network] npm run back:notificationssocial-network -- run build exited with code 0
[contact-uscard] npm run back:contact-uscard -- run build exited with code 0
[contactscard-eu] npm run back:contactscard-eu -- run build exited with code 0
[mainrss] npm run back:mainrss -- run build exited with code 0
[restaurantsimportant-news] npm run back:restaurantsimportant-news -- run build exited with code 0
[mail-calendarstatistics] npm run back:mail-calendarstatistics -- run build exited with code 0
[schedulefeatures] npm run back:schedulefeatures -- run build exited with code 0
[clockingnotifications] npm run back:clockingnotifications -- run build exited with code 0
[authcontact-us] npm run back:authcontact-us -- run build exited with code 0

Démarrer la gateway et les microservices

Deux modes de fonctionnement sont possibles :

...

[contacts] npm run back:contacts -- run build exited with code 0
[main] npm run 

...

back:main -- run build exited with code 0
[restaurants] npm run 

...

back:restaurants -- run build exited with code 0
[mail-calendar] npm run back:mail-calendar -- run build exited with code 0
[schedule] npm run back:schedule -- run build exited with code 0
[clocking] npm run back:clocking -- run build exited with code 0
[auth] npm run back:auth -- run build exited with code 0

Démarrer la gateway et les microservices

Deux modes de fonctionnement sont possibles :

• Normal :
  

  Bloc de code
  language bash
  npm run start:back

• Dev (redémarrage après modification) :

  Bloc de code
  language bash
  npm run start:back:dev

Ces commandes vont lancer en parallèle la gateway ainsi que tous les microservices.

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.config.ts.dist en capacitor.config.ts. Ce fichier permet de paramétrer le nom de l'app et son identifiant, on laissera les valeurs par défaut pour le quickstart. Copier, coller et renommer également le fichier angular.json.dist en angular.json. Ce fichier permet de paramétrer les chemins vers les assets, on laissera les valeurs 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 : 

• copier et renommer le répertoire /app-theme-dist en /app-theme
• copier et renommer le fichier theme.scss.dist en theme.scss

Pour personnaliser tous ces éléments, voir la documentation

Préparation des fichiers Ionic

Depuis

Ces commandes vont lancer en parallèle la gateway ainsi que tous les microservices.

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-ioniccopier, coller et renommer le fichier capacitor.config.ts.dist en capacitor.config.ts. Ce fichier permet de paramétrer le nom de l'app et son identifiant, on laissera les valeurs par défaut pour le quickstart. Copier, coller et renommer également le fichier angular.json.dist en angular.json. Ce fichier permet de paramétrer les chemins vers les assets, on laissera les valeurs 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 : 

• copier et renommer le répertoire /app-theme-dist en /app-theme
• copier et renommer le fichier theme.scss.dist en theme.scss

Pour personnaliser tous 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

/,

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.

Ajouter la conf Firebase

Pour que le projet démarre correctement, l'application a besoin d'un minimum de configuration Firebase pour la gestion des notifications.
Pour cela, copiez le fichier src/environments/firebase/android/google-service.json.dist dans le répertoire android/app/ et renommez-le google-services.json

Build iOS

Ajouter le support d'iOS

Pour ajouter le support d'iOS au projetPour ajouter les assets et sources du projet compilés, il est nécessaire d'exécuter la commande suivante :

$ npx capacitor syncadd androidios

Cette commande va copier générer tous 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.

Ajouter la conf Firebase

Pour que le projet démarre correctement, l'application a besoin d'un minimum de configuration Firebase pour la gestion des notifications.
Pour cela, copiez le fichier src/environments/firebase/android/google-service.json.dist dans le répertoire android/app/ et renommez-le google-services.json

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/

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/

Si vous utilisez la version 7 de Capacitor, la commande précédente risque d'échouer. Si c'est le cas, modifiez la version d'iOS dans le fichier ios/App/Podfile, par défaut ce sera la version à 14.0, ce n'est pas suffisant :

- platform :ios, '14.0'
+ platform :ios, '15.5'

puis lancez :

cd ios/App && pod update && cd -
npx cap update ios
cd ios/App && pod update && cd -  # pour vérifier que pour pod tout est bon

Copier les sources

Pour ajouter les assets et sources du projet compilés, il est nécessaire d'exécuter la commande suivante :

...

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools">

  <supports-screens android:smallScreens="false"
                    android:normalScreens="true"
                    android:largeScreens="true"
                    android:xlargeScreens="true" />

  <application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
    android:hardwareAccelerated="true">

    <activity
      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
      android:name="fr.esupportail.mobile.multi.MainActivity"
      android:label="@string/title_activity_main"
      android:theme="@style/AppTheme.NoActionBarLaunch"
      android:launchMode="singleTask"
      android:exported="true">

      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

    <provider
      android:name="androidx.core.content.FileProvider"
      android:authorities="${applicationId}.fileprovider"
      android:exported="false"
      android:grantUriPermissions="true">
      <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
    </provider>

    <meta-data
      android:name="firebase_messaging_auto_init_enabled"
      android:value="false" />
    <meta-data
      android:name="firebase_analytics_collection_enabled"
      android:value="false" />
  </application>

  <queries>
    <intent>
      <action android:name="android.intent.action.SENDTO" />
      <data android:scheme="mailto" />
    </intent>
  </queries>

  <!-- Features -->
  <uses-feature android:name="android.hardware.camera" />
  <uses-feature android:name="android.hardware.location.gps" />

  <!-- Permissions -->
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.READ_CONTACTS" />
  <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

  <!-- Override Libraries -->
  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />

</manifest>

...