| Sommaire |
|---|
Nom de l'app, bundle ID et Version
Dans le fichier /dev/user-frontend-ionic/capacitor.ts paramétrer :
- appId : Un identifiant unique de l'application qui devra correspondre à celui déclaré sur les stores
- appName : Le nom de l'application
| Bloc de code |
|---|
const config: CapacitorConfig = {
appId: 'fr.esupportail.mobile.multi',
appName: 'Esup-Multi', |
Chemins vers le backend
Dans le fichier /dev/user-frontend-ionic/src/environments/environment.ts paramétrer :
- apiEndpoint : l'URL du backend. Il s'agit de celle du µService main.
| Bloc de code |
|---|
export const environment = {
...
tenants: [
{
apiEndpoint: 'http://localhost:3000',
...
}
...
}; |
Modules
voir le détail pour chaque module Paramétrage des modules
Langues
Dans le fichier /dev/user-frontend-ionic/src/environments/environment.ts paramétrer :
- languages : Les langues proposées dans l'application
- defaultLanguage : la langue par défaut
| Bloc de code |
|---|
export const environment = {
[...]
languages: ['fr', 'en'],
defaultLanguage: 'fr',
[...]
}; |
Titre de l'application et numéro de version
Dans le fichier /dev/user-frontend-ionic/src/environments/environment.ts paramétrer :
- appTitle : Titre de l'application
- appVersion : version de l'app
| Bloc de code |
|---|
export const environment = {
[...]
appTitle: 'Titre de l\'application',
appVersion: '1.0.1'
[...]
}; |
| Remarque |
|---|
Le numéro de version tel qu'il est spécifié dans le fichier environment.ts ne sera utilisé que dans la version PWA du client. |
Firebase pour les notifications
Firebase Cloud Messaging (FCM) est un outil de Google qui permet de faire de la notification push sur plusieurs types de plateforme (Android, iOs, Web).
Vous trouverez plus d'information sur comment ajouter Firebase à votre projet, et notamment comment récupérer les fichiers nécessaires ici : https://capawesome.io/blog/the-push-notifications-guide-for-capacitor/
Ajouter les fichiers requis
Pour activer firebase vous trouverez dans le répertoire /dev/user-frontend-ionic/src/environments le sous-repertoire firebase et l'arborescence suivante :
| Bloc de code |
|---|
firebase
|--android
|--ios
|--web |
Y placer les fichiers téléchargés depuis Firebase pour iOs et Android.
Pour les notifications web, dans /dev/user-frontend-ionic/src/environments/firebase/web dupliquer et renommer le fichier firebase-environment.pwa.json.dist en firebase-environment.pwa.json et compléter avec les informations fournies par firebase.
Une fois complété, il devra ressembler à cela :
| Bloc de code |
|---|
{
"apiKey": "",
"authDomain": "universite-lorraine.firebaseapp.com",
"projectId": "universite-lorraine",
"storageBucket": "universite-lorraine.appspot.com",
"messagingSenderId": "123456789",
"appId": "1:123456789azerty987654321qsdfg",
"measurementId": "G-A1Z2E3R4T5",
"vapidKey": "xxxx la cle fournie xxxx"
} |
Configurer Multi pour qu'il prenne en compte les fichiers Firebase
Décommenter les deux lignes dans le fichier /dev/user-frontend-ionic/src/environments/environment.ts
| Bloc de code |
|---|
import firebasePwaEnvironment from './firebase/web/firebase-environment.pwa.json';
export const environment = {
[...]
firebase: firebasePwaEnvironment,
[...]
}; |
Ionic propose des options supplémentaires grâce à un plugin FirebaseMessaging déclaré dans le fichier /dev/user-frontend-ionic/capacitor.ts
| Bloc de code |
|---|
plugins: {
FirebaseMessaging: {
presentationOptions: ['badge', 'sound', 'alert'],
}, |
Tour guidé
Dans le fichier /dev/user-frontend-ionic/src/environments/environment.ts paramétrer :
- guidedTourEnabled : Activer ou non le tour guidé true/false
| Bloc de code |
|---|
export const environment = {
[...]
guidedTourEnabled: true
}; |
Pour personnaliser le tour guidé, consultez Personnalisation du thème.
SI vous souhaitez éventuellement supprimer les sources liées au tour guidé pour réduire la taille de votre application, vous pouvez supprimer les répertoires suivants :
- /dev/user-frontend-ionic/src/theme/app-theme/assets/guided-tour/
- /dev/user-frontend-ionic/src/theme/app-theme/i18n/guided-tour/
- /dev/user-frontend-ionic/src/theme/app-theme/guided-tour/
Il faudra aussi penser à retirer le module de la commande de build npm, dans le fichier package.json
