Les notifications push Azure avec Cordova pour Android

microsoft_azure

Ceci est le premier post sur un retour d'expérience de l'intégration du service de notifications push de Microsoft, Azure Hub Notification, au sein d'une application Cordova pour les plateformes mobiles Android, IOS et Windows Phone 8. Je vais dans un premier temps me focaliser sur la plateforme Android et vous détailler les différentes étapes  pour déployer le service  côté mobile et plateforme Azure. Ce billet sera également l'occasion de vous faire part des difficultés rencontrées et solutions mises en place.

Pré-requis

Avant de vous lancer dans la mise en oeuvre des notifications Azure avec Cordova pour Android assurez vous d'avoir :

  • JDK 7
  • Ant
  • Un  compte Microsoft
  • Un compte Google 
  • Le SDK Android installé sur votre poste de développement
  • Le gestionnaire de packages npm installé
  • Installez le gestionnaire de librairie Javascript bower
  • Installez l'exécuteur de tâches Javascript grunt

nb : il se peut que votre application n'arrive pas tout de suite à s'inscrire auprès de votre hub Azure une fois ce dernier configuré. Il y a un délai d'attente pour l'activation qui peut être de 24h, c'est bon à savoir surtout si vous recevez un message du type "INVALID_SENDER" que vous avez tout vérifié 100 fois et vous ne voyez pas d'où cela peut provenir ;).

Mise en place du Hub Azure

Création du compte Azure

Avec votre compte Microsoft vous pourrez souscrire à une version d'évaluation de la plate forme Azure de 30 jours en créant un compte Azure à cette adresse http://azure.microsoft.com/fr-fr/pricing/free-trial/. Une fois que vous aurez rempli l'ensemble des informations demandées, dont un numéro de carte bancaire :D, vous pourrez accéder à votre console de gestion Azure.

Création d'un projet Google

Pour que votre application Android puisse recevoir des notifications push il vous faut créer un projet Google, activer l'API "Google Cloud Messaging" et générer une clé publique.

Création du projet

Une fois connecté avec votre compte Google vous pouvez créer un nouveau projet :

2015-04-16 10_48_52-Google Developers Console

Une fois votre projet créé, vous arriverez sur le tableau de bord dans lequel vous verrez l'identifiant du projet et le code du projet, ce dernier est important : il vous servira pour votre projet Cordova. Ensuite il vous faudra activer l'API pour les notifications, pour cela cliquez sur "API et authentification" puis "API". Dans le groupe "Mobile APIs" cliquez sur "Cloud Messaging for Android". 2015-04-16 10_53_33-Google Developers Console 2015-04-16 10_54_54-Google Developers Console

Maintenant vous avez besoin de créer une clé publique toujours dans la rubrique "API et Authentification" puis "Identifiants" cliquez sur le bouton "Créer une clé" .
2015-04-16 10_56_23-Google Developers Console

Dans la nouvelle fenêtre, cliquez sur le bouton "Clé de serveur", puis sur le bouton "Créer".

Votre clé est générée, elle vous servira lors de la configuration du hub Azure.

2015-04-16 10_57_16-Google Developers Console

Votre projet Google est prêt pour être utilisé dans la plateforme de notification Azure que nous allons configurer tout de suite.

Configuration du Hub Azure

Dans votre portail Azure cliquez sur le bouton "+ NOUVEAU" en bas à gauche de l'écran qui vous ouvrira un nouveau menu

2015-04-16 17_31_16-Service Bus - Microsoft Azure 2015-04-16 17_34_34-Service Bus - Microsoft Azure

Dans ce nouveau menu, cliquez sur "APP SERVICES" puis "SERVICE BUS" puis "HUB DE NOTIFICATION" et enfin "CRÉATION RAPIDE". Saisissez le nom de votre hub, le nom saisi met à jour le champ "nom de l'espace de noms" que vous pouvez également modifier manuellement. Pour terminer cliquez sur "CRÉER UN HUB DE NOTIFICATION" en bas à droite.

Votre nouvel espace de noms est créé, en cliquant sur son nom vous accéderez à un écran de présentation.

2015-04-16 17_47_34-Service Bus - Microsoft Azure

Cliquez sur le lien "HUBS DE NOTIFICATION" pour accéder à la liste de vos hubs.  

2015-04-16 17_49_38-Service Bus - Microsoft Azure

2015-04-17 10_36_53-Service Bus - Microsoft Azure

Cliquez sur le nom de votre hub et vous arriverez sur le "tableau de bord" de ce dernier vous permettant de le configurer avec les données de votre projet Google crée précédemment.

2015-04-17 10_41_09-Service Bus - Microsoft Azure

Dans le champ "CLE API GCM" vous devez saisir la clé publique que vous avez généré pour votre projet Google. Cliquez sur le bouton "Enregistrer" qui est apparu en bas de l'écran.

2015-04-17 11_00_38-Service Bus - Microsoft Azure

En revenant sur le "Tableau de bord" de votre hub vous pourrez obtenir vos chaînes de connexion à votre hub en cliquant sur le lien "Afficher la chaîne de connexion".

2015-04-17 11_04_28-Service Bus - Microsoft Azure

 

Une nouvelle fenêtre s'ouvre avec les deux chaînes de connexion, une pour recevoir et émettre des notifications "DefaultFullSharedAccessSignature", l'autre pour recevoir des notifications "DefaultListenSharedAccessSignature", c'est cette dernière que nous utiliserons dans notre projet Cordova.

2015-04-17 11_06_27-Service Bus - Microsoft Azure

Notre hub est prêt, en route pour Cordova!

Création du projet Cordova

Initialisation du projet

Pour la création de notre projet Cordova nous allons nous baser sur le framework Javascript de Google, AngularJS.

Afin de faciliter la création et l'initialisation de notre projet Cordova-AngularJS, je vous conseille de suivre ce tutoriel http://www.digitalaholic.com/how-to-setup-cordova-angularjs-app/ , qui vous permet en 5 minutes de vous mettre sur les rails

nb : il y a une correction à apporter au tutoriel  précédent ,vous ne devez pas donner comme identifiant à votre projet "com.example.angular-cordova"  mais "com.example.angularcordova" sinon vous aurez cette erreur "App id contains a reserved word, or is not a valid identifier."

Une fois votre projet initialisé, vous devriez avoir cette arborescence de dossier : 

2015-04-17 15_10_34-angular-cordova

Plugins

Par défaut votre projet n'a pas le plugin qui permet d'accéder au mobile, ce qui est assez gênant d'autant que nous avons besoin de savoir si le contexte mobile est bien démarré afin d'utiliser les notifications push. Il faut donc installer le plugin "device" en exécutant cette commande à la racine de votre projet :

Vous pouvez vérifier la liste de plugins installés avec la commande :

ngCordova

Pour faciliter la communication entre Cordova et AngularJS nous allons installer une librairie Javascript supplémentaire ngCordova.

bower install ngCordova

Dans le fichier "/app/index.html" dans le bloc "<!-- bower:js -->", dédié à l'ajout des fichiers javascript   via bower, nous ajoutons cette ligne

 

Enfin dans le fichier "/app/scripts/app.js" dans la définition de votre module "angularCordovaApp" il faut ajouter à la liste des injections "ngCordova".

Réception des notifications Azure

Pour permettre à votre application de recevoir des notifications émises depuis votre hub Azure, vous allez avoir besoin d'installer un plugin Cordova qui permettra à votre application d'inscrire les utilisateurs à votre plateforme de push.

A la racine de votre projet exécutez la commande :

cordova plugin add https://github.com/sgrebnov/cordova-plugin-azure-notificationhub.git

Nous allons modifier le contrôleur principal de l'application pour qu'il fasse l'inscription auprès de la plateforme Azure une fois le contexte de l'application démarré.

'use strict';

angular.module('angularCordovaApp')
.controller('MainCtrl', function($scope, cordova, $cordovaDevice) {

var platform = null;

var initAzure = function()
{
var connectionString = "[votre chaîne de connexion azure 'listen']";
notificationHubPath = "[le nom de votre hub]"; //ici le hub = cordovaazure

var GCM_NUM_PRJ = "[votre numéro de projet Google]";//le numéro de projet est affiché dans la rubrique "Présentation" de votre projet

var options = null;
if(platform==='android')
{
options = GCM_NUM_PRJ;
}

var hub = new WindowsAzure.Messaging.NotificationHub(notificationHubPath, connectionString, options);

hub.registerApplicationAsync().then(
function (result)
{
$scope.registrationOk = result.registrationId;
$scope.$apply();
},
function(error)
{
$scope.registrationKo = error;
$scope.$apply();
}
);

hub.onPushNotificationReceived = function (notification) {
//évènement à la réception d'une notification
$scope.notificationText = notification.message;
$scope.$apply();
};;
}
cordova.ready.then(function () {
platform = $cordovaDevice.getPlatform().toLowerCase();
initAzure();
});

});
app/scripts/contollers/main.js

Modifions également l'affichage de l'application

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="angularCordovaApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container">
      <div class="header">
        <h1 class="text-muted" style="text-align:center">Cordova Push Azure </h1>
      </div>
      <div ng-view=""></div>

    </div>

	<script type="text/javascript" src="cordova.js"></script>

    <!-- build:js(.) scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/services/cordova.js"></script>
        <!-- endbuild -->
</body>
</html>
app/index.html
<div  style="text-align:center">
  <h1>
    <img src="images/cordova.png" height="150px"> <img src="images/azure.png" height="150px">
  <h1>
  <h4 ng-if="!registrationOk && !registrationKo" style="color:gray">Connexion en cours...<h4>
  <h4 ng-if="registrationOk" style="color:green">Inscription azure ok! <h4>  
  <h4 ng-if="registrationOk" style="color:green">Registration id : {{registrationOk}}<h4>  
  <h4 ng-if="registrationKo" style="color:red">Inscription azure erreur!<h4>  
  <h4 ng-if="registrationKo" style="color:red">{{registrationKo}}<h4>  
  <div ng-if="notificationText">  
    <h3>
      Une nouvelle notification!  
    </h3>
    <p>  
    <i style="color:gray">{{notificationText}}</i>
    </p>
  </div>
</div>
app/views/main.html

Voilà notre projet est prêt à recevoir des notifications de notre hub Azure. Il ne reste plus qu'à tester!

Test des notifications

Déploiement du projet Cordova

Il faut en premier lieu packager vos sources avec une tâche grunt en exécutant la commande suivante à la racine de votre projet:

grunt build

Puis vous pouvez directement déployer et exécuter votre application sur votre mobile Android avec la ligne de commande suivante :

cordova run android

Ces deux commandes sont à exécuter à chaque redéploiement sur votre mobile.

L'application est exécutée sur votre mobile et elle tente d'inscrire votre mobile auprès de votre hub Azure afin de recevoir les notifications push.

Screenshot_2015-04-22-09-36-29

La plateforme Azure propose une console de débug qui vous permet d'envoyer des notifications de tests dans le bon format en fonction de la plateforme ciblée. En vous connectant à votre  console Azure sur votre hub, en cliquant sur le lien "DEBOGUER" vous accédez à un formulaire pour envoyer un message de test.

2015-04-17 17_33_47-

 

En cliquant sur l'icône en bas à droite en forme d'histogramme vert, vous verrez un message vous indiquant que votre message à bien été envoyé.

2015-04-17 17_35_33-Service Bus - Microsoft Azure

Et le résultat sur votre mobile

Screenshot_2015-04-22-09-48-33

Problème ... solution!

En testant l'application on se rend vite compte qu'il y a des choses qui ne fonctionnent pas comme nous le souhaiterions :

  • On ne voit pas la notification dans la barre de notifications
  • On ne reçoit pas de notifications quand l'application est éteinte
  • On ne reçoit pas de notifications quand l'application tourne en background

Pour palier à ces problèmes, une solution que j'ai trouvé est d'utiliser un autre plugin Cordova, qui permet de gérer les notifications push de façon plus générale. A la racine de votre projet exécutez la commande :

Maintenant si vous refaite un "grunt build" puis un "cordova run android" et que vous envoyez une notification via la page de "déboguer" de votre console Azure vous devriez obtenir ce résultat :

Screenshot_2015-04-22-10-52-13

Vous pouvez faire le test avec votre application complètement arrêtée ou en tâche de fond, vous recevrez toujours votre notification.

Astuce débogage

Vous pouvez déboguer votre application Cordova - AngularJS directement depuis votre poste de développement vers votre mobile en utilisant le logiciel GapDebug.

Pour faciliter le débogage je vous conseille vivement de désactiver la minification javascript dans la tâche grunt de build. Une façon simple de le faire est de remplacer la ligne

js: ['concat', 'uglifyjs'],

par

et d'exécuter votre tâche grunt comme ceci

grunt build --force

Conclusion

Comme vous pouvez le constater, l'utilisation des notifications via la plateforme Azure dans une application Cordova n'est pas particulièrement compliquée mais elle nécessite des phases de configuration assez longues dans lesquelles il peut être assez facile d'oublier une étape.

Je ferai prochainement plusieurs autres posts sur l'utilisation du push Azure avec Cordova pour vous montrer l'intégration pour IOS, Windows Phone 8 et quelques fonctionnalités que j'ai pu tester comme le passage de paramètres dans une notification  et l'utilisation des tags.

N'hésitez pas à faire des commentaires sur ce post, à apporter des corrections ou me poser des questions.

Références

Le tutoriel de Microsoft pour une première utilisation de hub Azure avec une application native Android http://azure.microsoft.com/en-us/documentation/articles/notification-hubs-android-get-started/. Attention préférez la version américaine du tutoriel car la version française n'est pas actualisée et peu comporter des erreurs.

Sources

Vous pouvez récupérer les sources du projet Cordova crée dans ce post via ce dépôt git https://github.com/dboujot/cordovaAzureAndroid. Toutes améliorations, corrections, suggestions sont les  bienvenues.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.