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

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 copier et renommer chaque fichier .env.dist en .env 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 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 :

...

[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
[cardscard] npm run back:cardscard -- run build exited with code 0
[card-eu] npm run back:card-eu -- 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
[statistics] npm run back:statistics -- run build exited with code 0
[features] npm run back:features -- run build exited with code 0
[notifications] npm run back:notifications -- run build exited with code 0
[contact-us] npm run back:contact-us -- run build exited with code 0
[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

...

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 :

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

...

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/app-theme/resources 

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ésPour 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/app-theme/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 natives du périphérique (appareil photo, annuaire des contacts, etc...).

Android

Éditer le fichier android/app/src/main/AndroidManifest.xml et y coller le contenu suivant (remplacer l'existant) :

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.

Ajouter la conf Firebase

De même que pour Android, pour que le projet démarre correctement, l'application a besoin d'un minimum de configuration Firebase pour la gestion des notifications.
Copiez le fichier src/environments/firebase/ios/GoogleService-Info.plist.dist dans le répertoire ios/App/App/ et renommez-le GoogleService.plist

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/app-theme/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/app-theme/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 natives du périphérique (appareil photo, annuaire des contacts, etc...).

Android

Éditer le fichier android/app/src/main/AndroidManifest.xml et y coller le contenu suivant (remplacer l'existant) :

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

<?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:largeScreensnormalScreens="true"
                    android:xlargeScreenslargeScreens="true"
 />

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

...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleDevelopmentRegion</key>
	<string>fr</string>
	<key>CFBundleDisplayName</key>
  <string>Esup-Multi</string>
	<key>CFBundleExecutable</key>
	<string>$(EXECUTABLE_NAME)</string>
	<key>CFBundleIdentifier</key>
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
	<key>CFBundleInfoDictionaryVersion</key>
	<string>6.0</string>
	<key>CFBundleName</key>
	<string>$(PRODUCT_NAME)</string>
	<key>CFBundlePackageType</key>
	<string>APPL</string>
	<key>CFBundleShortVersionString</key>
	<string>$(MARKETING_VERSION)</string>
	<key>CFBundleVersion</key>
	<string>$(CURRENT_PROJECT_VERSION)</string>
	<key>FirebaseMessagingAutoInitEnabled</key>
  <string>NO</string>
  <key>ITSAppUsesNonExemptEncryption</key>
  <false/>
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>mailto</string>
  </array>
	<key>LSRequiresIPhoneOS</key>
	<true/>
	<key>NSCameraUsageDescription</key>
  <string>L'application a besoin de l'appareil photo pour permettre le scan de code-barre</string>
  <key>NSContactsUsageDescription</key>
  <string>L'application a besoin d'accéder à votre répertoire pour vous permettre d'ajouter un contact depuis la recherche dans l'annuaire</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>L'application a besoin de connaitre votre position afin d'améliorer la présentation des services</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>L'application a besoin de la bibliothèque de photos pour permettre de stocker temporairement le scan de code-barre</string>
	<key>UILaunchStoryboardName</key>
	<string>LaunchScreen</string>
	<key>UIMainStoryboardFile</key>
	<string>Main</string>
	<key>UIRequiredDeviceCapabilities</key>
	<array>
		<string>armv7</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UISupportedInterfaceOrientations~ipad</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<true/>
</dict>
</plist>

Tester les apps

Tester l'app Web

Pour tester l'app en mode Web sur un navigateur, il est nécessaire d'avoir le client ionic d'installé sur la machine locale :

$ npm install -g @ionic/cli

Exécutez ensuite la commande suivante à la racine du client :

$ ionic serve

Le projet devrait alors se compiler et se lancer automatiquement sur une page de votre navigateur par défaut, joignable à l'adresse : http://localhost:8100

...

	<key>UIViewControllerBasedStatusBarAppearance</key>
	<true/>
</dict>
</plist>

Tester les apps

Tester l'app Web

Pour tester l'app en mode Web sur un navigateur, il est nécessaire d'avoir le client ionic d'installé sur la machine locale :

$ npm install -g @ionic/cli

Exécutez ensuite la commande suivante à la racine du client :

$ ionic serve

Le projet devrait alors se compiler et se lancer automatiquement sur une page de votre navigateur par défaut, joignable à l'adresse : http://localhost:8100

Tester l'app Android

Pour tester l'app sur Android, il faut ouvrir le projet dans Android Studio. Pour cela, exécutez la commande suivante :

$ npx capacitor open android

Une fois le projet ouvert dans Android Studio, il suffit de sélectionner le périphérique virtuel dans la barre de menu en haut, et de cliquer sur le bouton 'Run app' (triangle vert).
Android Studio va alors compiler le projet et le lancer dans un émulateur simulant le périphérique sélectionné.

Image Added

Tester l'app iOS

Pour tester l'app sur AndroidiOS, il faut ouvrir le projet dans Android StudioXCode. Pour cela, exécutez la commande suivante :

$ npx capacitor open androidios

Configuration des notifications

Une fois le projet ouvert dans Android Studio, il suffit de sélectionner le périphérique virtuel dans la barre de menu en haut, et de cliquer sur le bouton 'Run app' (triangle vert).
Android Studio va alors compiler le projet et le lancer dans un émulateur simulant le périphérique sélectionné.

Image Removed

Tester l'app iOS

Pour tester l'app sur iOS, il faut ouvrir le projet dans XCode. Pour cela, exécutez la commande suivante :

$ npx capacitor open ios

XCode, il faut configurer le projet pour autoriser les notifications.
Sélectionnez le projet App dans l'explorer à gauche, cliquez sur la target App, switchez sur l'onglet Signing & Capabilities et cliquez sur + Capability.

Cherchez Push Notifications et ajouter la capability en double cliquant dessus.

Image Added

Ajoutez également la capability Background Modes en sélectionnant la case Remote notifications

Image Added

Pour finir, XCode n'importe pas automatiquement les fichiers collés dans le dossier App en dehors de l'éditeur. Il faut alors lier le fichier de configuration Firebase au projet.
Faites un clic droit sur le dossier App/ dans le menu de gauche et cliquez sur Add Files to "App"... Ajoutez alors le fichier GoogleService-Info.plist

Image Added

Démarrer l'application

Pour lancer le buildUne fois le projet ouvert dans XCode, il suffit de sélectionner le périphérique virtuel dans la barre de menu en haut, et de cliquer sur le bouton 'Run' (triangle blanc).
XCode va alors compiler le projet et le lancer dans un émulateur simulant le périphérique sélectionné.

...