https://d226lax1qjow5r.cloudfront.net/blog/blogposts/santa-delivery-notifications-via-facebook-messenger-dr/Santa-Delivery-Notifications-via-Facebook-Messenger.png

Notifications de livraison du Père Noël via Facebook Messenger

Publié le May 11, 2021

Temps de lecture : 6 minutes

Avis d'obsolescence du produit

À partir du 31 août 2025, l'API Dispatch de Vonage sera fermée aux nouveaux utilisateurs, bien que le produit continue d'être pris en charge par les utilisateurs existants. Si vous souhaitez créer une application de messagerie avec une fonctionnalité de basculement, le basculement est désormais pris en charge directement dans l'API Messages.

Pour des informations générales sur la fonction de basculement des messages, veuillez vous référer à ce guide. Pour des conseils sur la migration de Dispatch API vers Messages API Failover, veuillez vous référer à ce guide.

Si vous avez d'autres questions concernant l'obsolescence de ce produit, veuillez nous nous contacter sur le Vonage Community Slack.

L'un des plus grands moments d'excitation pour moi à chaque Noël, lorsque je grandissais, était d'attendre de savoir si le Père Noël avait livré nos cadeaux. Chaque matin de Noël, mon père se rendait dans la pièce où se trouvait l'arbre de Noël pour vérifier si le Père Noël avait livré nos cadeaux. si "Le Père Noël était passé" avant que nous ne soyons autorisés à courir voir nos cadeaux.

Maintenant, en tant que père, c'est à moi qu'incombe la responsabilité de vérifier que le Père Noël est bien arrivé.

J'ai entendu parler de familles qui se lèvent à 4 heures du matin pour ouvrir les cadeaux ! Cela signifie que le Père Noël peut livrer dans certaines maisons très tôt le matin. Alors, que dois-je faire ? Suis-je censé sortir du lit et vérifier sous le sapin toutes les 30 minutes ? Moi qui me suis proclamé "évangéliste du web en temps réel", je ne suis pas très enthousiaste à l'idée de ce qui est en fait la version physique de l'interrogation HTTP. Non, non, ce n'est pas possible. J'ai donc décidé de construire un système de notification de livraison du Père Noël en utilisant l'API Dispatch de Nexmo avec Facebook Messenger comme canal de notification principal avec une solution de repli vers le SMS parce que je ne veux pas manquer cette notification.

Santa Delivery Notifications via Facebook MessengerSanta Delivery Notifications via Facebook Messenger

Dans ce billet, je vais passer en revue les composants utilisés et la façon dont ils s'assemblent pour offrir une solution de notification de livraison au Père Noël. Les détails du code ne seront pas abordés, mais vous pouvez trouver tout le code sur GitHub ainsi que les instructions pour exécuter votre propre instance de l'application.

Comment cela fonctionne-t-il ?

L'application utilise une combinaison d'une application Node.JS, de l'API Nexmo Dispatch API Nexmo Dispatch pour envoyer le message Facebook Messenger avec une solution de repli par SMS si le message n'est pas lu, une API Santa écrite par Steve Crow pour son article Suivre le Père Noël avec SMS et Java une page Facebook et l'application Facebook associée.

Connexion à Facebook

La première partie de l'application demande à l'utilisateur de se connecter à Facebook.

Facebook Login FlowFacebook Login Flow

Cette méthode utilise l'identifiant connexion Facebook qui s'appuie sur le Facebook JavaScript SDK.

Obtenir la localisation des utilisateurs

L'arrivée du Père Noël est déterminée par une combinaison de facteurs :

  1. Où se trouve l'utilisateur

  2. Où se trouve le Père Noël sur sa route de livraison

Location flowLocation flow

La localisation de l'utilisateur est déterminée à l'aide de l'API de géolocalisation du navigateur. API de géolocalisation du navigateur. Cette API renvoie uniquement les coordonnées de l'utilisateur en guise de meilleure estimation.

Les coordonnées sont envoyées au back-end Node.JS qui utilise l'API créée pour l'application de suivi du Père Noël par SMS. Suivre le Père Noël avec l'application SMS pour trouver la ville la plus proche des coordonnées.

Obtenir le numéro de téléphone de l'utilisateur pour le repli sur les SMS

Maintenant que l'application sait où se trouve l'utilisateur, nous devons savoir comment délivrer les notifications. Si le message Facebook Messenger n'est pas lu, l'API Dispatch de Nexmo se rabattra sur l'envoi du message par SMS. Nous avons donc besoin du numéro de téléphone de l'utilisateur pour ce repli.

Get user's phone number flowGet use's phone number flow

L'utilisateur doit saisir son numéro de téléphone et cliquer sur le bouton "Go". Lors du clic, le numéro de téléphone est envoyé au back-end Numbers et le numéro de téléphone est stocké pour cet utilisateur.

Une amélioration de la fonctionnalité actuelle consisterait à utiliser l'API Nexmo Number Insight API Nexmo Number Insight pour s'assurer que le numéro de téléphone est valide et l'API Verify API pour confirmer que l'utilisateur possède ce numéro de téléphone.

S'abonner à Facebook Messenger "Santa Delivery Notifications" (notifications de livraison du Père Noël)

La partie la plus délicate de l'ensemble de l'application a probablement été de pouvoir envoyer des messages à l'utilisateur sans qu'il doive d'abord envoyer un message à notre page Facebook.

Finalement, je suis tombé sur le plugin Send to Messenger plugin qui semble être conçu pour cela. Cependant, il ajoute quelques exigences supplémentaires concernant la mise en place d'une application Facebook et d'un webhook "opt_in" webhook.

J'ai également constaté que le bouton "Send to Messenger" ne s'affichait pas si l'utilisateur n'était pas déjà connecté à Facebook. Si vous jetez un coup d'œil au JavaScript côté client sur GitHub pour cette application, vous verrez que du code a été mis en place pour gérer quelques inconvénients liés à l'utilisation de ce plugin, notamment le fait de devoir recharger la page lorsque l'utilisateur se connecte à Facebook.

Confirm subscription flowConfirm subscription flow

Lorsque l'utilisateur clique sur le bouton "Send to Messenger" (que vous pouvez configurer pour qu'il dise plutôt "Subscribe"), cela déclenche le webhook "opt_in" configuré de Facebook. La charge utile du webhook contient le très important Page Scoped User ID qui est un identifiant unique pour l'utilisateur associé à une page Facebook.

À ce stade, nous enregistrons un abonnement officiel dans une base de données. Cette application utilise une instance MongoDB gérée par MLab.

Avec cet identifiant, l'application peut maintenant envoyer des messages à l'utilisateur à l'aide de l'API Nexmo Dispatch API. Pour confirmer l'abonnement, un message est envoyé à l'utilisateur pour l'informer qu'il s'est abonné et lui indiquer sa position.

Subscription confirmation dialogSubscription confirmation dialog

Vérifier l'emplacement du Père Noël et envoyer des notifications

Une fois l'abonnement enregistré, il ne reste plus qu'à surveiller l'emplacement du Père Noël à l'aide de l'API du Père Noël mentionnée précédemment.

Santa delivery notifications flowSanta delivery notifications flow

L'application utilise les coordonnées de l'utilisateur avec l'API, et lorsque l'API indique que le Père Noël s'éloigne de l'emplacement de l'utilisateur, nous savons que le Père Noël a dû livrer. away de l'emplacement de l'utilisateur, nous savons que le Père Noël a dû livrer. Ainsi, une notification de livraison du Père Noël est envoyée via Facebook Messenger à l'aide de l'API Dispatch de Nexmo. Si le message n'est pas lu dans un délai configurable (voir expiry_time dans la référence API), une notification par SMS est également envoyée.

Conclusion

Dans ce post, nous avons couvert comment une notification de livraison de Père Noël utilisant Facebook Messenger avec un fallback SMS peut être construite en utilisant l'API Dispatch de Nexmo. Jetez un coup d'œil au code sur GitHub ou soulever un problème (ou une pull request) si vous avez des idées pour améliorer l'application (voir aussi "Et ensuite" ci-dessous) ou si vous avez des questions.

Désormais, les parents et les tuteurs du monde entier peuvent dormir sur leurs deux oreilles, sachant qu'ils n'ont qu'à se lever pour vérifier si le Père Noël est arrivé, une fois qu'ils ont reçu la notification de livraison du Père Noël.

Où le prochain

  • Essayez l Dispatch API autonome

  • Ajouter l Number Insight API Number Insight à l'application pour vérifier le format du numéro ou même que le numéro de téléphone se trouve au même endroit que celui indiqué par l'API de géolocalisation.

  • Utiliser l'API Verify API pour s'assurer que l'utilisateur possède le numéro de téléphone qu'il enregistre.

  • Dites-nous ce que vous en pensez en tweetant à @NexmoDev

Partager:

https://a.storyblok.com/f/270183/400x400/73e68604be/phil-leggetter.jpg
Phil Leggetter

Phil is Head of Developer Relations at Hookdeck, an asynchronous messaging platform, and a proud Vonage alumni.