Evénements et notifications avec Firebase

Evénements et notifications avec Firebase

 

                 Après ce premier article présentant les fonctionnalités que nous propose firebase, nous avons décider de tester différentes fonctionnalité de celui-ci. Dans un premier temps nous verrons comment intégrée firebase dans vos application puis comment créer une notification dans vos application et pour finir de quel manière firebase récupére les différents évents réaliser par l’utilisateur sur l’application.

                 I) Intégration de firebase

                                  A) Sous Ionic

 

                 Du côté des applications hybrides créés avec ionic, nous avons la possibilité d’intégrer les modules livrés par Firebase. Ionic, en tant qu’outil basé sur TypeScript, une version compilée de JavaScript, permet de configurer de façon rapide nos applications pour démarrer avec le développement de tout ce qui est fourni par Firebase.

                 Actuellement, ionic, qui utilise la couche Angular pour la création d’interfaces et de fonctionnalités, et l’accès à Cordova pour des fonctionnalités natives sur le dispositif mobile, nous propose différentes façons de démarrer la configuration. Par exemple:

  • En utilisant les librairies proposées pour Angular qui donnent ainsi accès à certaines fonctionnalités de Firebase
  • En utilisant les librairies ionic native à installer avec les modules npm (Node modules) qui sont aussi intégrées sur ionic.

Configuration de firebase en JavaScript

 

                 Dans le premier cas, il faudra récupérer le script pour la connection puisque celui-là sera demandé pour la librairie AngularFire2 à utiliser.

                 Tout d’abord, la première tâche à faire est d’intégrer la librairie à notre projet Ionic avec npm. Cette librairie nous donne le module nécessaire à l’initialisation d’un objet Firebase qui contient le service.

Commande pour intégrer les modules

 

                 Une fois que les modules ont été bien installés, nous pouvons appeler dans le fichier app.module (de notre application ionic) le AngularModule.initialize() dont nous devons envoyer le paramètre, en forme d’objet any, obtenus tout à l’heure dans la console Firebase. Maintenant nous serons capable d’aller sur nos classes et appeler le même objet pour obtenir les services proposés dans cette librairie qui sont:

  • Angular Fire AuthModule: pour l’outil d’authentification dans l’app
  • Angular Fire DatabaseModule: module qui gère la base de données
  • Angular Fire StorageModule: permet le stockage de fichiers.

                 Pour les autres fonctions intégrées dans Firebase le développement des modules pour les gérer est encore en développement.

                 Par rapport au deuxième cas, dont les librairies natives pour ionic se chargent d’ajouter de façon native le modules nécessaires pour firebase (Android ou iOS), le json avec les configuration est chargé comme asset dans l’output soit l’APK pour android ou l’IPA pour iOS.

                 Alors pour accéder aux modules délivrés actuellement par Ionic on a:

  • FCM (Firebase Cloud Messaging) (Beta)
  • Firebase module
  • Firebase Analytics (Beta)

                 Nous devons intégrer dans les assets du projet ionic le fichier json qui contient l’information nécessaire pour la connection à la console. Ce fichier sera integré sur les packages correspondant lors du déploiement de l’application sur les dispositifs.

                 Après avoir intégré le fichier, nous pouvons ajouter à travers npm les librairies que nous souhaitons utiliser. Si le fichier json n’est pas dans les assets du projet, npm automatiquement donnera une erreur en demandant le json pour l’intégration correcte.

                 Pour être plus clair, lors de l’utilisation des classes fournies pour AngularFire, nous sommes en train de traiter notre objet Firebase dans le code Angular de l’application ionic, c’est à dire, on le fait dans la page angular affichée dans le WebView intégré pour l’hybride. Après, quand nous intégrons le module natif, ces modules se chargent de créer un objet Firebase qui est partout dans l’application.

                 Il faut remarquer qu’aujourd’hui on n’y a pas de librairies développées pour Ionic qui permettent de gérer toutes les fonctionnalités que Firebase met à votre disposition.

                                  B) Sous Android

 

                 Pour l’intégration de firebase dans vos projets, il faut tout d’abord avoir créé un sous la console firebase le projet. Lors de la création du projet sous la console, vous devrez remplir un nom de projet et définir sa région. Ensuite, il faut cliquer sur l’engrenage à côté de Project Overview et cliquer sur paramètres du projet. Pour cet exemple, on va choisir l’application android. Il suffit ensuite d’insérer le nom du package android et d’enregistrer le projet android puis de télécharger le fichier google-services.json et de l’insérer dans le fichier app de l’application. Il faut ensuite modifier les fichiers build gradle pour utiliser le plug-in Google charger par le fichier que vous venez d’ajouter.

                                 

                 Dans le fichier build.gradle au niveau du projet, il faut rajouter cette ligne dans les “dependencies”:

 

classpath ‘com.google.gms:google-services:3.1.0’

 

                 Ensuite dans le fichier build.gradle au niveau de l’application, à la fin du fichier :

 

apply plugin: ‘com.google.gms.google-services’,

                  puis  il ne reste plus qu’à synchroniser de nouveau le projet.

                 II) Réaliser une notification sous Android

 

                 Sous firebase, on peut envoyer 2 types de notification, une simple notification qui affiche un message sur l’écran du téléphone et aux clics affichant la première page de l’application. Pour réaliser ce type de notification sous android studio, il suffit d’ajouter les dépendances nécessaires dans le build gradle. Il a besoin en plus de 2 service, FirebaseMessagingService et FirebaseInstanceidService. Le premier service permet de vérifier que la notification push fonctionne bien et le second pour gérer la réception de la notification dans l’application. Ensuite, il suffit d’aller dans la console FireBase, dans la partie GROW puis notification, on envoie un nouveau message avec au moins la saisie du texte du message et le type d’utilisateur. On peut, tout de même, définir si on souhaite une date de disparition si l’utilisateur ne l’a pas ouvert où quand l’envoyer par exemple.

                 Le second type de notification que l’on peut envoyer sont des notifications personnalisées avec lesquelles, on peut envoyer une image ou encore choisir l’activité à afficher aux clics. Pour ce type de notification, en plus des dépendances nécessaires, il faut modifier le service FirebaseMessagingService qu’on a pu créer pour une simple notification. Après la vérification de l’état de l’application et la vérification des données reçues, on crée notre simple notification en y ajoutant les différents éléments souhaités. On y a ajouter aussi un intent contenant le nom de la page que l’on souhaite ouvrir et un boolean qui dit si oui ou non, on souhaite l’ouvrir au démarrage. Dans la page d’accueil, on vérifie s’il y a un “intent” et on vérifie la valeur booléenne s’il faut oui ou non l’ouvrir une activity et si oui laquelle. Dans la console firebase en plus il faut aller dans la partie Options avancées et rajouter les différentes clés valeur qu’on a pu définir précédemment.

                 On peut grâce à la console firebase savoir le nombre de personne ayant ouvert la notification, savoir le nombre d’appareil recevant le message et la plateforme fixée pour cette notification.

                 III) Récupération des événements sous firebase.

 

                 il existe 3 possibilités pour voir le flux d’événements sur la console firebase.

 

                                  1- par l’onglet Events

                 Sur cette page il est possible de voir tous les événements reçus durant une plage de date paramétrable sur la page. Un tableau répertorie les différents événements qui ont été déclenchés dans l’application et nous donne pour chacun d’eux le nombre d’événements et le nombre d’utilisateurs.

                 Si on clique sur un des événements on obtient une page de détails qui nous fournit des informations supplémentaires comme les données géographiques ou démographiques.

                 Il est possible d’ajouter des informations dans cette page de détails en configurant la création de rapports sur les paramètres de chaque événement. Les paramètres sélectionnés peuvent apparaître sous l’événement dans le tableau et sont exposés dans la page de détails.

                 Il est possible aussi d’activer les événements en tant que conversions ce qui permet une exploitation plus rapide. Le nombre d’événements en tant que conversion est limité à 10.

 

                                  2- par l’onglet StreamView

                 Cette page permet de voir les évènements perçus par firebase durant les 30 dernières minutes. Ils sont géolocalisés sur une carte. Par défaut, tous les événements sont affichés mais il est possible de les filtrer par événement, par zone géographique, ou par version d’application.

                 Il est aussi possible de voir les événements d’un utilisateur aléatoire. On peut ici aussi choisir une zone géographique ou une version de l’application et en plus changer d’utilisateur. Tous les événements de l’utilisateur sélectionné seront affichés.

                 On peut cliquer sur un événement dans le flux temporel afin d’obtenir des détails sur un événement en particulier

                 ou cliquer sur un type d’événement dans la liste des principaux événements afin d’obtenir la liste de ceux-ci avec le détail.

                                  3- par l’onglet DebugView

 

                 Cette page permet au développeur de débugger la configuration de l’application en temp réel. L’interface  est la même que la vue d’un utilisateur aléatoire. Il faut par contre activer le mode debuggage sur le device concerné. Cette activation se fait par la commande suivante sous le terminal de android studio.

 

adb shell setprop debug.firebase.analytics.app <nom_package>

 

                 Pour désactiver ce mode on utilise cette commande

 

adb shell setprop debug.firebase.analytics.app .none

 

                                  4- intégration dans android

 

  • déclarer un FirebaseAnalytics objet en début d’activité

                                  private FirebaseAnalytics mFirebaseAnalytics;

 

  • initialiser l’objet

                                  mFirebaseAnalytics = FirebaseAnalytics.getInstance(this);

 

  • envoyer un événement

                                  Bundle bundle = new Bundle();

                                  bundle.putString(FirebaseAnalytics.Param.ITEM_ID, id);

                                  bundle.putString(FirebaseAnalytics.Param.ITEM_NAME, name);

                                  bundle.putString(FirebaseAnalytics.Param.CONTENT_TYPE, “image”);

                                  mFirebaseAnalytics.logEvent(FirebaseAnalytics.Event.SELECT_CONTENT, bundle);

Les commentaires sont fermŽs !

«