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 :
    <platform name="android">
            ...
        <icon density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
        <icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
        <icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
        <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
    </platform>
    <platform name="ios">
            ...
        <icon height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
        <icon height="57" src="res/icon/ios/icon-57.png" width="57" />
        <icon height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
        <icon height="72" src="res/icon/ios/icon-72.png" width="72" />
    </platform>

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. 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 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

["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 :

{

"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

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. Importez-les dans votre projet res/icon/android
  3. Ajouter des ressources dans config.xml pour les copier dans drawable comme notification_icon
    <platform name="android">
    ...
        <resource-file src="res/icon/android/drawable-mdpi/notification_icon.png" target="app/src/main/res/drawable-mdpi/notification_icon.png" />
        <resource-file src="res/icon/android/drawable-hdpi/notification_icon.png" target="app/src/main/res/drawable-hdpi/notification_icon.png" />
        <resource-file src="res/icon/android/drawable-xhdpi/notification_icon.png" target="app/src/main/res/drawable-xhdpi/notification_icon.png" />
        <resource-file src="res/icon/android/drawable-xxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxhdpi/notification_icon.png" />
        <resource-file src="res/icon/android/drawable-xxxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxxhdpi/notification_icon.png" />
    </platform>

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).