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

Les variables d’environnement seront les suivantes :

  • JAVA_HOME : Racine JDK (ex C:\dev\java\jdk1.8)
  • ANDROID_HOME : root de votre SDK android (ex C:\dev\android\sdk)
  • GRADLE_USER_HOME : change le dépôt gradle home sans caractères spéciaux dans le chemin (ex C:\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 :

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 et res/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 :


    

  1. Créez votre compte Firebase https://firebase.google.com
    2. 

  2. Accès à la console pour ajouter votre projet, ex SimpliciteMobileMyProject
    3. 



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 dans platforms/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
    • 



https://console.firebase.google.com/u/0/project/simplicitemobilemyproject/settings/serviceaccounts/adminsdk


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 :


    

  1. Ajoutez un paramètre système public FIREBASE_LIBS
    2. 




["https://www.gstatic.com/firebasejs/5.5.3/firebase-app.js"

,"https://www.gstatic.com/firebasejs/5.5.3/firebase-messaging.js"]




    

  1. Ajoutez un paramètre système public pour initier Firebase sur la partie client :
    2. 





{

"apiKey": "AIzaSyB...",

"authDomain": "simplicitemobilemyproject.firebaseapp.com",

"databaseURL": "https://simplicitemobilemyproject.firebaseio.com",

"projectId": "simplicitemobilemyproject",

"storageBucket": "simplicitemobilemyproject.appspot.com",

"messagingSenderId": "134..."

}




    

  1. Ajoutez un parameter système public FIREBASE_VAPID_KEY pour authentifier le client
    2. 



Obtenez 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 :
    • 



    

  1. Générer vos icônes monochromes/transparentes : https://romannurik.github.io/AndroidAssetStudio/icons-notification.html
    2. 

  2. Importez-les dans votre projet res/icon/android
    3. 

  3. Ajouter des ressources dans config.xml pour les copier dans drawable comme notification_icon
    4. 



Voir également :



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 :



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 et package.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).
    •