Faire des applications avec Simplicité c’est bien ! L’avoir sur son mobile c’est encore mieux ! Afin de répondre à cette demande nous avons écrit un petit guide pour que vous puissiez avoir votre application au creux de votre main partout où vous allez ! Suivez le guide !
En suivant ce petit guide vous pourrez :
- Déposer votre application Play Store (Android).
- D’intégrer le site web réactif et prendre en charge HTML5/CSS3 dans une version mobile standlone.
- Envoyer à l’appareil mobile et au navigateur de bureau (Chrome) des notifications.
- Sélectionner des groupes d’utilisateurs depuis le back-end pour poster des messages (aux utilisateurs, ou aux groupes ou à tous les utilisateurs).
Afin de déployer notre application nous allons nous servir de Cordova.
Cordova est un framework open source développé par la fondation Apache et qui permet de créer des applications pour différentes plateformes. Ce framework permet en outre de déployer les applications sur les systèmes mobiles les plus populaires comme Android et IOS. Ce guide traitera du déploiement sur Android, la version pour IOS suivra bientôt .
Utilisation de Cordova®
il est nécessaire de se doter d’un environnement avec les prérequis suivant :
Java JDK 8
- Node.js : https://nodejs.org
- Android Studio et SDK : https://developer.android.com/studio
Les variables d’environnement seront les suivantes :
JAVA_HOME
: Racine JDK (exC:\dev\java\jdk1.8
)ANDROID_HOME
: root de votre SDK android (exC:\dev\android\sdk
)GRADLE_USER_HOME
: change le dépôt gradle home sans caractères spéciaux dans le chemin (exC:\dev\gradle
)- Ajouter à
PATH
- the studio gradle (ex
C:\dev\android\studio\gradle\gradle-4.6\bin
) - le répertoire bin du JDK (ex
C:\dev\java\jdk1.8\bin
)
Installer Cordova en ligne de commande
npm install -g cordova`
cordova --version
Pour IOS il est nécessaire d’installer un plugin qui nécessitera de télécharger Xcode sur votre machine.
npm i -g xcode
Créer votre application
cordova create myproject com.simplicite.mobile.myproject MyProjectName
cd myproject
Ajoutez les plateformes et plugins suivants
cordova platform add android
cordova platform add ios
cordova plugin add cordova-plugin-whitelist
cordova plugin add cordova-plugin-inappbrowser
Tester Android
Dans Android Studio, créez et lancé un émulateur puis rentrez les commandes suivantes :
cordova build android
cordova emulate android
Lancez votre appareil en mode debug :
- Voir https://developer.android.com/studio/run/device
- Voir https://developer.android.com/studio/debug/dev-options
cordova run android
Intégrer l’application hybride
Ouvrez votre répertoire de projet et personnalisez votre application avec les indications suivantes :
www/img/logo.png
est l’image utilisée par défaut pour l’image d’accueil (aussi appelé Splash Screen)- Tous les
res/icon/android
etres/icon/ios
avec vos logos. - Changez le js par défaut www/js/index.js
- Faite l’init du plugin Firebase afin d’enregistrer et de recevoir les notifications sur chaque appareil.
- Lancer la webapp à l’interieur d’un inAppBrowser
Le script www/js/index.js
(function() { var url = 'https://myproject.dev.simplicite.io'; var fireBaseToken, win, winReady; // Call the UI firebase handler function exec(d) { d = typeof(d)=="string" ? d : JSON.stringify(d); winReady && win.executeScript({ code: 'window.$ui.firebase(' + d + ');' }); } // Notify server with firebase token after login function syncFirebaseToken(token) { token = token || fireBaseToken; if (token) { fireBaseToken = token; exec({ token:token }); } } function error(e) { console.error(error); } // Firebase events function firebase() { // Notification : cordova-plugin-firebase var pfb = window.FirebasePlugin; if (pfb) { console.log("[FirebasePlugin] init"); //pfb.grantPermission(); pfb.getToken(syncFirebaseToken, error); pfb.onTokenRefresh(syncFirebaseToken, error); pfb.onNotificationOpen(function(m) { console.log("[FirebasePlugin] onNotificationOpen " + JSON.stringify(m)); exec(m); }, error); } } // Load Simplicite URL function open() { // In-app browser win = cordova.InAppBrowser.open(url + "?inapp=true", '_blank', 'location=no'); win.addEventListener('loadstop', function() { winReady = true; syncFirebaseToken(); }); //win.addEventListener('exit', function() {}); } // Cordova loaded function init() { var parentElement = document.getElementById('deviceready'); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); } function ready() { init(); firebase(); open(); } document.addEventListener("deviceready", ready, false); })();
Icones pour les applications
- Importez vos applications dans les dossiers suivants res/icon
- Changez le fichier xml pour faire correspondre les noms de fichiers :
Configuration de Firebase
Firebase est un programme édité par Google il permet entre autre d’envoyer des notifications directement sur les appareils et sur les navigateurs (Chrome). Très pratique pour notifier nous allons voir ici comment configurer l’outils.
La plateforme va utiliser différents paramètres :
FIREBASE
: pour activer le service sur la plate-forme et l’interface utilisateur.FIREBASE_PRIVATE_KEY
: configuration privée pour initialiser le service côté serveur.FIREBASE_TOKENS
: permet de stocker chaque périphérique utilisateur (bureau, mobile, tablette…).FIREBASE_CONFIG
: configuration publique côté client Web.FIREBASE_LIBS
: librairies publiques de Firebase à charger côté client.FIREBASE_VAPID_KEY
: clé publique pour l’authentification par firebase.
Enregistrer votre application sur Firebase :
- Créez votre compte Firebase https://firebase.google.com
- Accès à la console pour ajouter votre projet, ex
SimpliciteMobileMyProject
Ajoutez au projet l’application pour Android
- Avec le nom de votre paquet Cordova ( ex.
simplicite.mobile.myproject
). - Générez et téléchargez le fichier
google-services.json
à la racine de votre porjet local ; il est nécessaire de compiler le plugin firebase. - Et de copier
google-services.json
dansplatforms/android/app
en cas d’erreur de compilation.
Ajouter le plugin Firebase
Notification https://github.com/arnesson/cordova-plugin-firebase
cordova plugin add cordova-plugin-firebase
cordova run android
Envoyez un message avec la console
- Utiliser la console Google pour accéder à la section
Cloud Messaging
de votre projet. - Écrivez votre message
https://console.firebase.google.com/u/0/project/simplicitemobilemyproject/notification/compose
- Vérifiez sur votre appareil
Intégration avec le back-end
Afin de créer d’activer le service avec le back-end (Simplicité) mettez le paramètre système Firebase
= yes
. Sur l’interface utilisateur $ui.firebase
englobe tous les messages de Firebase :
- pour enregistrer l’utilisateur et l’appareil côté serveur (voir
FIREBASE_TOKENS
sur chaque utilisateur). - pour envoyer une notification aux utilisateurs (unique, groupes ou tous).
Pour la partie serveur voir GoogleFireBaseTools
:
- Vous devez générer votre première Service Account Key sur la console
puis placez vos identifiants privés dans le paramètre FIREBASE_PRIVATE_KEY
côté serveur :
{ "type": "service_account", "project_id": "simplicitemobilemyproject", "private_key_id": "41d94061ba24e55a0b74b5xxxxxxxxxxxxxx", "private_key": "-----BEGIN PRIVATE KEY-----nxxxxxxxxxxxn-----END PRIVATE KEY-----n", "client_email": "firebase-adminsdk-xxxxxx@simplicitemobilemyproject.iam.gserviceaccount.com", "client_id": "10898538xxxxxxxxxxxxx", "auth_uri": "https://accounts.google.com/o/oauth2/auth", "token_uri": "https://oauth2.googleapis.com/token", "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-xxxxxx%40simplicitemobilemyproject.iam.gserviceaccount.com" }
Intégration pour la partie Front-End (sur navigateur de bureau)
Pour recevoir un message au sein de la webapp, le navigateur a besoin de 2 paramètres :
- Ajoutez un paramètre système public
FIREBASE_LIBS
["https://www.gstatic.com/firebasejs/5.5.3/firebase-app.js" ,"https://www.gstatic.com/firebasejs/5.5.3/firebase-messaging.js"]
- Ajoutez un paramètre système public pour initier Firebase sur la partie client :
- voir https://firebase.google.com/docs/web/setup
- Ou accédez à la console / Project / Setup / Add Firebase to your Web application
{ "apiKey": "AIzaSyB...", "authDomain": "simplicitemobilemyproject.firebaseapp.com", "databaseURL": "https://simplicitemobilemyproject.firebaseio.com", "projectId": "simplicitemobilemyproject", "storageBucket": "simplicitemobilemyproject.appspot.com", "messagingSenderId": "134..." }
- Ajoutez un parameter système public
FIREBASE_VAPID_KEY
pour authentifier le clientObtenez la clé publique VAPID à partir de la paire de clés de la console Firebase / Configuration web :
BIDDmZgk5QSFd7Bf1sf2yfUrfi...
Attention, Firebase n’est pas chargé dans la webapp :
- Si
FIREBASE_CONFIG
n’est pas activé sur la plateforme - Si la webapp est intégrée dans inAppBrowser. Cordova inclut le plugin firebase et les événements en dehors du site.
Tests unitaires
Message JSON :
"data":{ "title": "hello", "body": "world", "priority": "high | normal | low" }Pour envoyer une notification à un appareil :
curl --header "Authorization: key=<cloud messaging server key>" --header "Content-type: application/json" -d '{"to":"<device token>", "data":{"title":"hello","body":"world","icon":"notification_icon"}}' https://fcm.googleapis.com/fcm/send
- Obtenez la clé du serveur sur votre console Firebase / Project Setup / Cloud Messaging / Server key Token (utilisez la clé longue, la clé courte est obsolète)
- Obtenez le token de périphérique stocké dans
FIREBASE_TOKENS
de l’utilisateur (ou connecté dans la console du navigateur).
Icones de notifications
- IOS ne supporte pas la personnalisation et utilise par défaut l’application de l’icône.
- Android supporte les icônes référencés dans notification :
- Générer vos icônes monochromes/transparentes : https://romannurik.github.io/AndroidAssetStudio/icons-notification.html
- Importez-les dans votre projet
res/icon/android
- Ajouter des ressources dans
config.xml
pour les copier dans drawable commenotification_icon
Voir également :
- https://github.com/arnesson/cordova-plugin-firebase/issues/764
- https://firebase.google.com/docs/reference/admin/java/reference/com/google/firebase/messaging/AndroidNotification.Builder.html#setIcon(java.lang.String)
Déployer sur le Google Play Store
En supposant que votre application fonctionne en mode debug sur votre appareil mobile, vous pouvez pousser votre APK signé sur le Play Store de Google.
Construire une release APK
cordova build --release android
L’APK non signé est généré dans votre répertoire android myproject/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk
Signez votre fichier APK
Créez un « keystore » avec les informations de votre entreprise :
- Avec Android Studio : https://developer.android.com/studio/publish/app-signing
- Avec l’outil de ligne de commande : https://www.linkedin.com/pulse/how-create-signed-android-apk-apache-cordovausing-cordova-ghatul/
cordova build android --release -- --keystore="path/to/keystore" --storePassword=xxxx --alias=key0 --password=xxxx
L’APK signé est généré dans votre repertoire Android
myproject/platforms/android/app/build/outputs/apk/release/app-release.apk
Téléchargez l’APK
Vous devrez changer de version à chaque fois que vous livrerez un nouvel APK :
- dans les fichiers racine
config.xml
etpackage.json
- reconstruire la version
Voir la documentation Google à ce sujet : https://support.google.com/googleplay/android-developer#topic=3450769
Attention le processus est un peu long la première fois que allez livrer votre APK :
- Signez en toute confidentialité, bref, classe PEGI 3, libre d’impôt….
- Créez l’application, téléchargez et validez votre APK
- Créer un groupe de test
- Publier en mode test : non visible sur le magasin public mais ici :
https://play.google.com/apps/testing/com.simplicite.mobile.myproject
- Promouvoir la production au moment de la mise en service :
https://play.google.com/store/apps/details?id=com.simplicite.mobile.mobile.myproject
Félicitations vous voilà donc avec une application Simplicité directement accessible sur votre terminal Android avec la possibilité d’envoyer des notifications à tout ou partie de vos usagers.
La version IOS arrive prochainement … 🙂
Limites connues
- Google
OAuth2
ne fonctionne pas dans le navigateur inAppBrowser pour des raisons de sécurité (uniquement via les navigateurs natifs Chrome ou Safari). - W3C
navigator.mediaDevices
n’est pas encore supporté par inAppBrowser (certaines autorisations CAMERA sont manquantes).
Laisser un commentaire