NativeScript est un cadre permettant de créer des applications mobiles natives multiplates-formes utilisant XML, CSS et JavaScript. Dans cette série, nous essayons certaines des choses intéressantes que vous pouvez faire avec une application NativeScript: géolocalisation et intégration de Google Maps, base de données SQLite, intégration de Firebase et notifications push. En cours de route, nous construisons une application de mise en forme avec des fonctionnalités en temps réel utilisant chacune de ces fonctionnalités..
Dans ce didacticiel, vous découvrirez à quel point il est facile d’ajouter des notifications push à votre application NativeScript avec le service de messagerie en nuage Firebase..
Ce que vous allez créer
En reprenant le didacticiel précédent, vous allez ajouter des notifications push à l'application. Une notification sera déclenchée lorsque l'utilisateur rompt son enregistrement actuel ou lorsqu'un de ses amis lui prend la première place..
Mise en place du projet
Si vous avez suivi le didacticiel précédent sur Firebase, vous pouvez simplement utiliser le même projet et créer les fonctionnalités que nous ajouterons dans ce didacticiel. Sinon, vous pouvez créer un nouveau projet et copier les fichiers de démarrage dans le dossier d'applications de votre projet..
tns create fitApp --appid "com.yourname.fitApp"
Après cela, vous devez également installer les plug-ins de géolocalisation, Google Maps, SQLite et Firebase:
Une fois installé, vous devez configurer le plugin Google Maps. Vous pouvez lire les instructions complètes sur la procédure à suivre en lisant la section Installer le plugin Google Maps dans le tutoriel précédent.
Ensuite, installez la bibliothèque fecha pour les dates de formatage:
npm install --save fecha
Après cela, vous devez également configurer le plug-in Firebase. Assurez-vous de lire les sections suivantes du didacticiel précédent pour pouvoir exécuter l'application:
Lancer le projet
Configuration d'une application Firebase
Configurer une application Facebook
Installer le plugin Firebase
Configuration de l'intégration de Facebook
Comme nous avons déjà configuré le plug-in Firebase dans l'article précédent, il ne reste que peu de travail à faire pour configurer les notifications push..
Tout d’abord, vous devez reconfigurer le plugin en allant dans le node_modules / nativescript-plugin-firebase répertoire et en cours d'exécution npm run config. Cette fois, sélectionnez l’authentification Facebook et la messagerie..
Une fois cela fait, ouvrez le firebase.nativescript.json fichier dans le répertoire racine de votre projet et assurez-vous que Messagerie est réglé sur vrai:
Ensuite, ouvrez app / App_Resources / Android / AndroidManifest.xml et ajoutez les services suivants dans le . Cela active le service de messagerie Firebase pour l'application:
Lancer le projet
Vous pouvez exécuter le projet en exécutant tns courir android. Mais puisque cette application s'appuiera sur la fonctionnalité de géolocalisation, je vous recommande d'utiliser un émulateur GPS pour définir et modifier rapidement votre position. Vous pouvez en savoir plus sur la procédure à suivre dans la section Lancer l'application dans le tutoriel précédent.
Si vous rencontrez des erreurs de construction, vous pouvez supprimer la plate-forme et réexécuter l'application:
Vous utiliserez Firebase Cloud Functions pour créer un serveur qui enverra les notifications push. Cette fonctionnalité Firebase est utilisée pour exécuter du code d’arrière plan chaque fois qu’un événement spécifique se produit dans les fonctionnalités Firebase que vous utilisez. Par exemple, si de nouvelles données sont enregistrées dans la base de données en temps réel, ou si un utilisateur nouvellement ajouté via la commande Service d'authentification Firebase. Pour cette application, vous utiliserez des déclencheurs HTTP pour envoyer des notifications push lorsque l'application mobile envoie une demande à un point de terminaison spécifique..
Pour utiliser Firebase Cloud Functions, vous devez d’abord installer le logiciel outils de base de feu paquet globalement:
npm install -g firebase-tools
Créez ensuite un nouveau dossier contenant le code du serveur. Cela devrait être en dehors de votre dossier d'application. Dans ce dossier, installez le fonctions firebase paquet:
npm installe firebase-functions @ latest --save
Une fois installé, connectez-vous à Firebase en exécutant connexion firebase. Cela ouvre un nouvel onglet de navigateur qui vous permet de vous connecter avec votre compte Google. Suivez tout le processus et acceptez toutes les autorisations demandées.
Une fois connecté, vous pouvez maintenant initialiser les fonctions Firebase pour un projet Firebase spécifique:
fonctions init de firebase
Cela vous demandera si vous souhaitez configurer un projet par défaut ou non. Sélectionnez le projet Firebase que vous avez créé dans le précédent tutoriel:
Ensuite, il vous sera demandé si vous souhaitez installer les dépendances. Dis oui.
Une fois que toutes les dépendances ont été installées, vous devriez voir un firebase.json fichier et un les fonctions dossier à l'intérieur du répertoire. Le fichier sur lequel vous travaillerez est le fonctions / index.js fichier. Ouvrez ce fichier et vous verrez ce qui suit:
fonctions const = require ('firebase-functions'); // // Créer et déployer vos premières fonctions de cloud // // https://firebase.google.com/docs/functions/write-firebase-functions // // exports.helloWorld = functions.https.onRequest ((request , response) => // response.send ("Hello from Firebase!"); //);
Ne commentez pas le Bonjour le monde fonction, et vous verrez les déclencheurs HTTP en action.
Exécutez ce qui suit pour déployer la fonction sur le cloud:
firebase deploy --only functions
Une fois le déploiement terminé, il devrait vous montrer l'URL où la fonction a été déployée:
Accédez à cette URL à partir de votre navigateur pour voir le résultat "Hello from Firebase!"
Ajout du code serveur
Vous êtes maintenant prêt à ajouter le code pour implémenter les notifications push. Tout d'abord, vous allez ajouter le code pour le composant serveur, puis le code pour l'application.
Ouvrez le fonctions / index.js déposer et vider son contenu.
Création de la fonction Firebase
Importez les packages Firebase dont vous aurez besoin:
fonctions const = require ('firebase-functions'); // pour écouter les déclencheurs http const admin = require ('firebase-admin'); // pour accéder à la base de données en temps réel admin.initializeApp (functions.config (). firebase); // initialise le SDK d'administration Firebase
Créer le init_push une fonction. Notez que le déclencheur HTTP est appelé pour toute méthode de requête. Vous devez donc filtrer pour la méthode de requête que vous souhaitez traiter. Dans ce cas, nous voulons seulement traiter POSTER demandes. Nous nous attendons à ce que l'application soumette le identifiant, pas, et friend_ids comme les données de la demande.
exports.init_push = functions.https.onRequest ((demande, réponse) => if (request.method == 'POST') var id = request.body.id; // ID de l'utilisateur qui a effectué la demande ( Firebase Auth ID) var steps = parseInt (request.body.steps); // dernières étapes, pas encore enregistrées var friend_ids = request.body.friend_ids.split (','); friend_ids.push (id); // aussi inclure l'ID de l'utilisateur actuel // suivant: ajouter du code pour obtenir les données de l'utilisateur et de ses amis);
Obtenir les données de l'utilisateur et des amis
Ensuite, interrogez la base de données Firebase pour vérifier si l'ID utilisateur existe. Cela constitue un moyen de sécuriser le point final afin que personne ne puisse déclencher de notifications push. (Bien entendu, une véritable application devrait bénéficier d'une bien meilleure sécurité d’arrière-plan, afin que les utilisateurs ne puissent pas usurper leurs propres données ou celles de quelqu'un d’autre.)
Si l'utilisateur existe, interrogez à nouveau la base de données afin qu'elle renvoie tous les utilisateurs. Notez que Firebase ne fournit actuellement aucun moyen de renvoyer des enregistrements en fonction d'un tableau d'identifiants. Nous devrons donc filtrer les données pertinentes nous-mêmes:
admin.database (). ref ('/ users') .orderByChild ('id') .limitToFirst (1) .equalTo (id) .once ('valeur'). then (snapshot => var user_data = snapshot.val (); if (user_data) // récupère tous les utilisateurs de la base admin.database (). ref ('/ users') .once ('value'). then (snapshot => // next: ajoute du code pour obtenir les données de l'utilisateur actuel et celles de ses amis););
Ensuite, parcourez les résultats renvoyés par Firebase et créez un nouveau tableau contenant les friends_data. Une fois cette opération effectuée, triez le tableau en fonction du nombre d'étapes effectuées par chaque utilisateur. Celui qui a le plus grand nombre d'étapes a le premier index.
var friends_data = []; var current_user_data = null; var notification_data = ; var has_notification = false; var users = snapshot.val (); for (clé var chez les utilisateurs) var user_id = users [clé] .id; if (friend_ids.indexOf (user_id)! = -1 && id! = user_id) // les amis de l'utilisateur actuel friends_data.push (users [clé]); else if (id == user_id) // l'utilisateur actuel utilisateur_données en cours = utilisateurs [clé]; // trie par ordre décroissant en fonction du nombre d'étapes var tri_souris_amis = amis_data.sort (fonction (a, b) return b.steps - a.steps;); // next: ajout du code pour la construction de la charge de notification
Construire la charge de notification
Nous sommes maintenant prêts à déterminer qui recevra la notification et à construire la charge de notification. Qui est en première place? Est-ce l'utilisateur actuel ou l'un de ses amis? Etant donné que l'utilisateur actuel aura également battu son propre record lorsqu'il battra le record de celui qui occupe la première place, il suffit de vérifier si ce record a été battu.
if (steps> sort_friends_data [0] .steps) // avise un ami qui a été dépassé var diff_steps = steps - sort_friends_data [0] .steps; notification_data = charge utile: titre: 'Un de tes amis bat ton record', corps: 'Dommage, ton ami' + current_user_data.user_name + 'vient de te doubler de' + diff_steps + 'steps', device_token: saved_friends_data [ 0] .device_token; has_notification = true; else if (étapes> current_user_data.steps) // notifier l'utilisateur actuel var diff_steps = steps - current_user_data.steps; notification_data = charge utile: titre: 'Vous battez votre record!', corps: 'Bravo! Vous battez votre record actuel par '+ diff_steps +' steps! ' , device_token: current_user_data.device_token; has_notification = true; // next: ajout du code pour l'envoi de notifications push
Envoi de la notification
Enfin, envoyez la notification:
if (has_notification) var payload = notification: notification_data.payload; // envoi d'une notification push admin.messaging (). sendToDevice (notification_data.device_token, charge utile) .then (fonction (res) response.send (JSON.stringify ('has_notification': true)), // a informé l'application qu'une notification a été envoyée) .catch (function (error) response.send (JSON.stringify (error)); // envoie l'erreur de notification push à l'application); else response.send (JSON.stringify ('has_notification': false)); // informe l'application qu'une notification n'a pas été envoyée
Mise à jour du code d'application
Auparavant, vous avez configuré l'application de sorte qu'elle puisse recevoir les notifications push. Cette fois-ci, vous allez ajouter du code pour que votre application puisse traiter ces notifications push et les afficher à l'utilisateur..
Recevoir des notifications push
La première chose à faire pour recevoir des notifications push est de mettre à jour le firebase.init () fonction pour inclure un auditeur pour la réception du jeton de périphérique:
onPushTokenReceivedCallback: function (jeton) // l'enregistre temporairement dans les paramètres de l'application jusqu'à ce que // l'utilisateur se connecte pour la première fois applicationSettings.setString ('device_token', jeton); ,
Cette fonction ne s'exécutant qu'une fois, vous devez donc enregistrer le jeton localement à l'aide des paramètres de l'application. Plus tard, cela nous permettra d’obtenir le jeton de périphérique lorsque l’utilisateur se connectera pour la première fois. Si vous vous souvenez encore du didacticiel précédent, nous enregistrons les données de l'utilisateur sur Firebase lors de sa première connexion..
Ensuite, vous pouvez ajouter l'écouteur pour le moment où les notifications sont reçues. Cela affichera une boîte d’alerte qui utilise le titre et le corps du message comme contenu:
Enregistrement du jeton de périphérique dans Firebase
Firebase Cloud Messaging nécessite le jeton de périphérique lors de l'envoi d'une notification push à un périphérique spécifique. Comme nous utilisons déjà Firebase, nous allons simplement enregistrer le jeton de périphérique avec les données de l'utilisateur. Pour cela, vous devez éditer le code de sauvegarde des données de l'utilisateur afin d'inclure le jeton de périphérique que nous avons reçu précédemment:
if (firebase_result.value == null) var device_token = applicationSettings.getString ('device_token'); var user_data = 'uid': fb_result.uid, 'user_name': fb_result.name, 'profile_photo': fb_result.profileImageURL, 'device_token': device_token;
Déclenchement des notifications push
Les notifications push sont déclenchées lorsqu'une des deux choses suivantes se produit:
quand l'utilisateur casse son record actuel
quand l'un des amis de l'utilisateur bat son record et passe au premier rang
Le premier est facile, il n’ya donc vraiment pas besoin de configuration supplémentaire. Mais pour le second, vous devez faire un peu de travail. Tout d'abord, vous devez éditer le code lorsque l'état d'auth change. Immédiatement après l'extraction des identifiants d'amis du résultat de Facebook, vous devez les enregistrer en utilisant les paramètres de l'application..
// extraction des identifiants d'amis du résultat de Facebook var friends_ids = r.data.map (function (obj) return obj.id;); // sauvegarde les identifiants d'amis applicationSettings.setString ('friends_ids', JSON.stringify (friends_ids)); friends_ids.push (utilisateur [clé_utilisateur] .id);
Ensuite, mettez à jour le code lorsque l'utilisateur arrête de suivre son parcours. Juste après le code de construction des données utilisateur pour la mise à jour de l'utilisateur, obtenez les ID d'amis à partir des paramètres de l'application et incluez-les dans l'objet contenant les données de la demande permettant de déclencher la notification push..
// construit les données utilisateur pour mettre à jour la distance et les étapes de l'utilisateur var user_key = applicationSettings.getString ('user_key'); var user = applicationSettings.getString ('utilisateur'); var user_data = JSON.parse (utilisateur); user_data [user_key] .distance = total_distance; user_data [user_key] .steps = total_steps; // récupère les ID d'amis var friends_ids = JSON.parse (applicationSettings.getString ('friends_ids')); var request_data = 'id': user_data [user_key] .id, 'friend_ids': friends_ids.join (','), 'steps': total_steps;
Envoyez la demande au noeud final Firebase Cloud Functions que vous avez créé précédemment. Une fois qu'une réponse de succès est renvoyée, les données de l'utilisateur ne sont mises à jour que dans la base de données Firebase..
http.request (url: "https://us-central1-pushapp-ab621.cloudfunctions.net/init_push", méthode: "POST", en-têtes: "Content-Type": "application / json", content : JSON.stringify (request_data)). Then (fonction (réponse) var statusCode = response.statusCode; if (codeCode == 200) // met à jour les données de l'utilisateur sur Firebase firebase.update ('/ users', user_data );, fonction (e) console.log ('Une erreur s’est produite lors de l’initiation du push:', e););
Test des notifications push
Vous pouvez tester l'envoi de notifications push en désinstallant d'abord l'application de l'émulateur ou du périphérique. Cela nous permet de déclencher correctement la fonction d’obtention du jeton de périphérique. Assurez-vous d'ajouter console.log pour sortir le jeton de périphérique:
onPushTokenReceivedCallback: fonction (jeton) applicationSettings.setString ('device_token', jeton); console.log ('jeton de périphérique:', device_token); // <-- add this
Lorsque le jeton de périphérique est sorti dans la console NativeScript, copiez-le, cliquez sur le bouton Base de données dans le tableau de bord de votre application Firebase et ajoutez-le en tant que jeton de périphérique à tous les utilisateurs de l'application. Utilisation device_token comme nom de propriété.
Pour déclencher la notification push, vous pouvez utiliser curl pour créer une POSTER demande au noeud final de la fonction Firebase:
Si vous n'avez pas installé curl, vous pouvez utiliser l'application Postman pour envoyer la demande. Utilisez les paramètres suivants pour la demande:
Méthode de demande:POSTER
URL: Votre point de terminaison de fonction Firebase
Clé des en-têtes:Type de contenu
Valeur des en-têtes:application / json
Corps:
"id": "ID DE L'UTILISATEUR DE FIREBASE", "étapes": NUMBER_OF_STEPS, "Friend_ids": "COMMA, SEPARATED, FIREBASE, USER_ID" "
Une fois déclenché, vous verrez une sortie semblable à celle-ci:
Si l'application n'est pas encore ouverte, vous verrez la notification dans la zone de notification:
Conclusion
Toutes nos félicitations! Vous avez enfin terminé l'application de fitness. Au cours de quatre tutoriels, vous avez créé une application NativeScript qui utilise Google Maps, SQLite, la base de données Firebase Realtime et Firebase Cloud Messaging. Maintenant, vous avez une bonne base pour créer des applications NativeScript qui utilisent ces technologies.
Pour en savoir plus sur NativeScript ou d'autres technologies mobiles multiplates-formes, visitez certains de nos autres cours et tutoriels ici sur Envato Tuts.+!
Share
Accentsconagua
