Codez une application en temps réel avec NativeScript: notifications push

NativeScript est un framework permettant de créer des applications mobiles natives multiplateformes à l’aide de 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 Google Maps, base de données SQLite, intégration Firebase et notifications push. En cours de route, nous construisons une application de fitness avec des capacités en temps réel qui utilisera chacune de ces fonctionnalités.

Dans ce didacticiel, vous apprendrez à quel point il est facile d’ajouter des notifications push à votre application NativeScript avec le service Firebase Cloud Messaging.

Ce que vous allez créer

Reprenant le didacticiel précédent, vous ajouterez des notifications push à l’application. Une notification sera déclenchée lorsque l’utilisateur rompt son record actuel ou lorsqu’un de ses amis prend la première place loin d’eux.

Mise en place du projet

Si vous avez suivi le tutoriel précédent sur Firebase, vous pouvez simplement utiliser le même projet et créer les fonctionnalités que nous ajouterons dans ce tutoriel. Sinon, vous pouvez créer un nouveau projet et copier les fichiers de démarrage dans le dossier d’application de votre projet.

Après cela, vous devez également installer les plugins 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 façon de procéder en lisant la section sur Installation du plug-in Google Maps dans le didacticiel précédent.

Ensuite, installez la bibliothèque fecha pour le formatage des dates:

Après cela, vous devez également configurer le plugin Firebase. Assurez-vous de lire les sections suivantes dans le didacticiel précédent afin de pouvoir lancer l’application:

  • Lancer le projet
  • Configurer une application Firebase
  • Configurer une application Facebook
  • Installation du plug-in Firebase
  • Configurer l’intégration Facebook

Puisque nous avons déjà configuré le plugin Firebase dans le post précédent, il n’y a qu’un petit 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 exécution npm run config. Cette fois, sélectionnez à la fois l’authentification Facebook et la messagerie.

Une fois que c’est fait, ouvrez le firebase.nativescript.json dans le répertoire racine de votre projet et assurez-vous que messaging est réglé sur true:

Ensuite, ouvrez app / App_Resources / Android / AndroidManifest.xml et ajoutez les services suivants dans le <application>. Cela active le service de messagerie Firebase pour l’application:

Lancer le projet

Vous pouvez exécuter le projet en exécutant tns run android. Mais comme 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 emplacement. Vous pouvez lire comment procéder dans la section sur Lancer l’application dans le didacticiel précédent.

Si vous rencontrez des erreurs de construction, vous pouvez supprimer la plate-forme et réexécuter l’application:

Configuration des fonctions Firebase Cloud

Vous utiliserez Fonctions Firebase Cloud pour créer un serveur qui enverra les notifications push. Cette fonctionnalité Firebase est utilisée pour exécuter du code back-end 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 lorsqu’un nouvel utilisateur est ajouté via le Service d’authentification Firebase. Pour cette application, vous utiliserez Déclencheurs HTTP pour envoyer des notifications push lorsque l’application mobile fait une demande à un point de terminaison spécifique.

Pour utiliser Firebase Cloud Functions, vous devez d’abord installer le firebase-tools package dans le monde:

Ensuite, créez un nouveau dossier qui hébergera le code du serveur. Cela devrait être en dehors de votre dossier d’application. Dans ce dossier, installez le firebase-functions paquet:

Une fois installé, connectez-vous à Firebase en exécutant firebase login. 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:

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 didacticiel précédent:

configurer les fonctions Firebase

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 dans le répertoire. Le fichier sur lequel vous travaillerez est le fonctions / index.js fichier. Ouvrez ce fichier et vous verrez ce qui suit:

Décommentez le helloWorld et vous verrez les déclencheurs HTTP en action.

Exécutez ce qui suit pour déployer la fonction dans le cloud:

En relation :  Vous pouvez maintenant essayer l'application New Files Go de Google

Une fois le déploiement terminé, il devrait vous montrer l’URL où la fonction a été déployée:

déployer des fonctions Firebase

Accédez à cette URL à partir de votre navigateur pour voir la sortie “Bonjour de Firebase!”

Ajout du code serveur

Vous êtes maintenant prêt à ajouter le code pour la mise en œuvre des notifications push. Tout d’abord, vous allez ajouter le code du composant serveur, puis le code de l’application.

Ouvrez le fonctions / index.js fichier et videz son contenu.

Création de la fonction Firebase

Importez les packages Firebase dont vous aurez besoin:

Créer le init_push fonction. Notez que le déclencheur HTTP est appelé pour n’importe quelle méthode de requête, vous devez donc filtrer la méthode de requête que vous souhaitez traiter. Dans ce cas, nous voulons uniquement traiter POST demandes. Nous nous attendons à ce que l’application soumette le id, steps, et friend_ids comme données de demande.

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 sert à sécuriser le point de terminaison afin que tout le monde ne puisse pas déclencher des notifications push. (Bien sûr, une vraie application devrait avoir une bien meilleure sécurité back-end, 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 pour qu’elle renvoie tous les utilisateurs. Notez que Firebase ne fournit actuellement pas de moyen de renvoyer des enregistrements basés sur un tableau d’identifiants, nous devrons donc filtrer nous-mêmes les données pertinentes:

Ensuite, parcourez les résultats renvoyés par Firebase et créez un nouveau tableau qui héberge le friends_data. Une fois que cela est fait, triez le tableau en fonction du nombre d’étapes de chaque utilisateur. Celui avec le plus grand nombre de pas a le premier index.

Construire la charge utile de notification

Nous sommes maintenant prêts à déterminer qui recevra la notification et à construire la charge utile de notification. Qui est en premier lieu? Est-ce l’utilisateur actuel ou l’un de ses amis? Étant donné que l’utilisateur actuel aura également battu son propre record lorsqu’il battra le record global de celui qui occupe la première place, nous devons simplement vérifier si ce record a été battu.

Envoi de la notification

Enfin, envoyez la notification:

Mettre à jour le code de l’application

Auparavant, vous aviez configuré l’application pour qu’elle puisse recevoir des notifications push. Cette fois, vous ajouterez du code afin que votre application puisse traiter ces notifications push et les afficher à l’utilisateur.

Recevoir des notifications push

La première chose que vous devez faire pour recevoir des notifications push est de mettre à jour le firebase.init() fonction pour inclure un écouteur pour recevoir le jeton d’appareil:

Cette fonction ne s’exécute qu’une seule 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 d’appareil lorsque l’utilisateur se connecte pour la première fois. Si vous vous souvenez encore du didacticiel précédent, nous enregistrons les données de l’utilisateur dans Firebase la première fois qu’il se connecte.

En relation :  Hé les étudiants: comment obtenir Amazon Prime avec une remise importante

Ensuite, vous pouvez ajouter l’écouteur pour la réception des notifications. 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 sur Firebase

Firebase Cloud Messaging nécessite le jeton d’appareil lors de l’envoi d’une notification push à un appareil spécifique. Puisque nous utilisons déjà Firebase, nous allons simplement enregistrer le jeton de l’appareil avec les données utilisateur. Pour cela, vous devez modifier le code d’enregistrement des données de l’utilisateur pour inclure le jeton d’appareil que nous avons obtenu précédemment:

Déclenchement des notifications push

Les notifications push sont déclenchées lorsque l’une des deux choses se produit:

  • lorsque l’utilisateur bat son record actuel
  • quand l’un des amis de l’utilisateur bat son record et passe à la première place

Le premier est simple, il n’y a donc vraiment pas besoin de configuration supplémentaire. Mais pour le second, vous devez faire un peu de travail. Tout d’abord, vous devez modifier le code pour le moment où l’état d’authentification change. Juste après avoir extrait les ID d’amis du résultat Facebook, vous devez enregistrer les ID d’amis à l’aide des paramètres de l’application.

Ensuite, mettez à jour le code lorsque l’utilisateur arrête de suivre sa marche. Juste après le code de construction des données utilisateur pour la mise à jour de l’utilisateur, récupérez les ID d’amis à partir des paramètres de l’application et incluez-les dans l’objet qui contient les données de demande pour déclencher la notification push.

Envoyez la demande au point de terminaison Firebase Cloud Functions que vous avez créé précédemment. Une fois qu’une réponse réussie est renvoyée, alors seulement les données de l’utilisateur seront mises à jour dans la base de données Firebase.

Test des notifications push

Vous pouvez tester l’envoi de notifications push en désinstallant d’abord l’application de l’émulateur ou de l’appareil. Cela nous permet de déclencher correctement la fonction d’obtention du jeton d’appareil. Assurez-vous d’ajouter console.log pour sortir le jeton d’appareil:

Lorsque le jeton de périphérique est sorti dans la console NativeScript, copiez-le, cliquez sur le bouton Base de données sur le tableau de bord de votre application Firebase et ajoutez-le en tant que jeton d’appareil à tous les utilisateurs de l’application. Utilisation device_token comme nom de propriété.

Pour déclencher la notification push, vous pouvez utiliser boucle faire un POST demande au point de terminaison de la fonction Firebase:

Si vous n’avez pas installé curl, vous pouvez utiliser le Application Postman pour envoyer la demande. Utilisez les paramètres suivants pour la demande:

  • Méthode de demande: POST
  • URL: Votre point de terminaison de fonction Firebase
  • Clé des en-têtes: Content-type
  • Valeur des en-têtes: application/json
  • Corps:

Une fois déclenché, vous verrez une sortie similaire à ce qui suit:

notification push reçue

Si l’application n’est pas actuellement ouverte, vous verrez la notification dans la zone de notification:

notification push en dehors de l'application

Conclusion

Toutes nos félicitations! Vous avez enfin terminé l’application de fitness. Au cours de quatre didacticiels, vous avez créé une application NativeScript qui utilise Google Maps, SQLite, la base de données Firebase Realtime et Firebase Cloud Messaging. Vous disposez désormais d’une assez bonne base pour créer des applications NativeScript qui utilisent ces technologies.

Pour en savoir plus sur NativeScript ou d’autres technologies mobiles multiplateformes, assurez-vous de consulter certains de nos autres cours et tutoriels ici sur Envato Tuts +!

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.