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

Weihnachtsmann-Benachrichtigungen über Facebook Messenger

Zuletzt aktualisiert am May 11, 2021

Lesedauer: 5 Minuten

Hinweis zur Produktverschlechterung

Ab dem 31. August 2025 wird die Vonage Dispatch API für neue Nutzer geschlossen, obwohl das Produkt für bestehende Nutzer weiterhin unterstützt wird. Wenn Sie eine Messaging-Anwendung mit Failover-Funktionalität erstellen möchten, wird Failover jetzt direkt in der Messages API unterstützt.

Allgemeine Informationen über die Funktion Messages Failover finden Sie in diesen Leitfaden. Eine Anleitung für die Migration von Dispatch API zu Messages API Failover finden Sie in diesen Leitfaden.

Wenn Sie weitere Fragen zu dieser Produktabkündigung haben, wenden Sie sich bitte kontaktieren Sie uns auf dem Vonage Community Slack.

Einer der aufregendsten Momente an Weihnachten war für mich, als ich aufwuchs, das Warten auf die Nachricht, ob der Weihnachtsmann unsere Geschenke gebracht hatte. Jeden Weihnachtsmorgen ging mein Vater in das Zimmer mit dem Weihnachtsbaum, um nachzusehen ob "ob der Weihnachtsmann da war", bevor wir zu unseren Geschenken rennen durften.

Jetzt bin ich als Vater dafür verantwortlich, zu überprüfen, ob der Weihnachtsmann auch wirklich kommt.

Ich habe von einigen Familien gehört, die morgens um 4 Uhr aufstehen, um die Geschenke zu öffnen! Das bedeutet, dass der Weihnachtsmann in manchen Haushalten schon sehr früh am Morgen liefern kann. Was soll ich also tun? Soll ich aufstehen und alle 30 Minuten unter dem Baum nachsehen? Als jemand, der sich früher als "Real-Time Web Evangelist" bezeichnet hat, bin ich nicht begeistert von dem Gedanken, dass es sich dabei um die physische Version von HTTP Polling handelt. Nein, nein, so geht das nicht. Also habe ich mich entschlossen, ein System zur Benachrichtigung über die Auslieferung von Weihnachtsgeschenken zu entwickeln, das die Nexmo Dispatch API mit dem Facebook Messenger als primärem Benachrichtigungskanal nutzt, mit Rückgriff auf SMS, weil ich diese Benachrichtigung nicht verpassen möchte.

Santa Delivery Notifications via Facebook MessengerSanta Delivery Notifications via Facebook Messenger

In diesem Beitrag gehe ich auf die verwendeten Komponenten ein und zeige, wie sie zusammenkommen, um eine Lösung für die Zustellungsbenachrichtigung für den Weihnachtsmann anzubieten. Auf Details des Codes werde ich nicht eingehen, aber Sie finden den gesamten Code auf GitHub zusammen mit einer Anleitung zum Ausführen Ihrer eigenen Instanz der Anwendung.

Wie es funktioniert

Die App verwendet eine Kombination aus einer Node.JS-Anwendung, der Nexmo Dispatch API um die Facebook Messenger-Nachricht mit SMS-Fallback zu senden, wenn die Nachricht nicht gelesen wird, eine Santa API, die von Steve Crow für seine Verfolgung des Weihnachtsmanns mit SMS und Java Blogpost geschrieben hat, eine Facebook-Seite und die dazugehörige Facebook-Applikation.

Anmeldung bei Facebook

Im ersten Teil der Anwendung wird der Benutzer aufgefordert, sich bei Facebook anzumelden.

Facebook Login FlowFacebook Login Flow

Dies verwendet die Facebook-Anmeldung Schaltfläche, die sich auf das Facebook JavaScript SDK.

Standort der Benutzer abfragen

Ob der Weihnachtsmann geliefert hat, wird anhand einer Kombination aus mehreren Faktoren ermittelt:

  1. Wo sich der Nutzer befindet

  2. Wo der Weihnachtsmann auf seiner Lieferroute ist

Location flowLocation flow

Der Standort des Nutzers wird über den Browser ermittelt Geolocation API. Diese gibt lediglich die Koordinaten des Nutzers als Best Guess zurück.

Die Koordinaten werden an das Node.JS-Backend gesendet, das die API verwendet, die für die Verfolgung des Weihnachtsmanns per SMS erstellt wurde, um die nächstgelegene Stadt für die Koordinaten zu finden.

Abrufen der Telefonnummer des Benutzers für SMS-Fallback

Da die Anwendung nun weiß, wo sich der Nutzer befindet, müssen wir wissen, wie wir die Benachrichtigungen zustellen. Wenn die Facebook-Messenger-Nachricht ungelesen bleibt, wird die Nexmo Dispatch API dazu übergehen, die Nachricht auch per SMS zuzustellen. Für diesen Fallback benötigen wir also die Telefonnummer des Nutzers.

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

Der Benutzer muss seine Telefonnummer eingeben und auf die Schaltfläche "Go" klicken. Beim Anklicken wird die Telefonnummer an das Node.JS-Backend gesendet und die Telefonnummer für diesen Benutzer gespeichert.

Eine Erweiterung der derzeitigen Funktionalität wäre die Verwendung der Nexmo Number Insight API um sicherzustellen, dass die Telefonnummer gültig ist und Verify API zu verwenden, um den Besitz der Telefonnummer durch den Nutzer zu bestätigen.

Abonnieren Sie die Facebook Messenger-Benachrichtigung "Weihnachtsmann-Lieferung".

Der wahrscheinlich schwierigste Teil der gesamten Anwendung war es, dem Nutzer Nachrichten zu senden, ohne dass er zuerst eine Nachricht an unsere Facebook-Seite senden musste.

Schließlich stieß ich auf das An Messenger senden-Plugin das für diesen Zweck eingerichtet zu sein scheint. Es stellt jedoch einige zusätzliche Anforderungen an die Einrichtung einer Facebook-Anwendung und einen "opt_in" Webhook.

Ich habe auch festgestellt, dass die Schaltfläche "An Messenger senden" nur dann angezeigt wird, wenn der Benutzer bereits bei Facebook angemeldet ist. Wenn Sie einen Blick auf das clientseitigen JavaScript auf GitHub für diese Anwendung anschaut, sieht man, dass es Code gibt, der einige Probleme bei der Verwendung dieses Plugins behebt, z. B. das Neuladen der Seite, wenn sich der Benutzer bei Facebook anmeldet.

Confirm subscription flowConfirm subscription flow

Wenn der Benutzer auf die Schaltfläche "An Messenger senden" klickt (die Sie so konfigurieren können, dass sie stattdessen "Abonnieren" lautet), wird der konfigurierte "opt_in"-Webhook von Facebook ausgelöst. Der Webhook-Payload enthält die wichtige Seitenabhängige Benutzer-ID die eine eindeutige ID für den mit einer Facebook-Seite verbundenen Benutzer ist.

An diesem Punkt speichern wir ein offizielles Abonnement in einer Datenbank. Diese Anwendung verwendet eine MongoDB-Instanz, die von MLab.

Mit dieser ID kann die Anwendung nun Nachrichten an den Benutzer senden, indem sie die Nexmo Dispatch API. Zur Bestätigung des Abonnements wird eine Nachricht gesendet, in der der Benutzer darüber informiert wird, dass er sich angemeldet hat und wo er sich befindet.

Subscription confirmation dialogSubscription confirmation dialog

Standort des Weihnachtsmanns prüfen und Benachrichtigungen senden

Mit dem gespeicherten Abonnement müssen Sie nur noch den Standort des Weihnachtsmanns mithilfe der bereits erwähnten Weihnachtsmann-API überwachen.

Santa delivery notifications flowSanta delivery notifications flow

Die Anwendung verwendet die Koordinaten des Benutzers mit der API, und wenn die API anzeigt, dass sich der Weihnachtsmann away vom Standort des Nutzers entfernt, wissen wir, dass der Weihnachtsmann geliefert haben muss. Daher wird über die Nexmo Dispatch API eine Benachrichtigung über die Lieferung des Weihnachtsmannes über den Facebook Messenger gesendet. Wenn die Nachricht nicht innerhalb einer konfigurierbaren Zeitspanne gelesen wird (siehe expiry_time in der API-Referenz) wird auch eine SMS-Benachrichtigung verschickt.

Schlussfolgerung

In diesem Beitrag haben wir beschrieben, wie eine Weihnachtsmann-Benachrichtigung mit Facebook Messenger und SMS-Fallback mit der Nexmo Dispatch API erstellt werden kann. Bitte werfen Sie einen Blick auf den Code auf GitHub oder eine Frage stellen (oder einen Pull-Request), wenn Sie Ideen haben, wie man die Anwendung verbessern kann (siehe auch "Wie geht es weiter" unten) oder wenn Sie Fragen haben.

Jetzt können Eltern und Erziehungsberechtigte auf der ganzen Welt ruhig schlafen, denn sie brauchen nur aufzustehen, um nachzusehen, ob der Weihnachtsmann geliefert hat, sobald sie die Benachrichtigung über die Lieferung des Weihnachtsmanns erhalten haben.

Wohin als nächstes

  • Probieren Sie die Dispatch API Eigenständig

  • Hinzufügen der Number Insight API in die Anwendung ein, um das Format der Nummer zu überprüfen oder um sicherzustellen, dass sich die Telefonnummer an dem Ort befindet, den die Geolocation-API angibt

  • Verwenden Sie die Verify API um sicherzustellen, dass der Benutzer Eigentümer der Telefonnummer ist, die er registriert

  • Lassen Sie uns wissen, was Sie denken, indem Sie tweeten unter @NexmoDev

Teilen Sie:

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.