Messenger-Plattform

Beispielerlebnis für Messenger mit Original Coast Clothing

Original Coast Clothing (OCC) ist eine fiktive Bekleidungsmarke zur Darstellung wichtiger Features der Messenger-Plattform. In diesem Leitfaden erfährst du, wie du den Code für diese Beispiel-App in deine lokale Umgebung oder auf den Remote-Server herunterlädst, damit du mehr über die Features von Messenger erfährst.

Um dir das gesamte Messenger-Erlebnis mit mehreren Zugangspunkten zu präsentieren, verfügt unser fiktives Unternehmen über die folgenden Features:

Plattform-Features

Diese Beispiel-App nutzt die folgenden Features:

Das Erlebnis im Messenger bereitstellen

Wenn du am Ende dieses Leitfadens angelangt bist, hast du eine komplette, funktionsfähige Messenger-App auf deinem Server, die Nachrichten von deiner Testseite beantwortet.

Bevor du beginnst

Voraussetzungen:

Wenn du gesonderte Umgebungen für Entwicklung, Staging und Produktion besitzt, benötigt jede dieser Umgebungen eine eigene Meta-App und Facebook-Seite.

Einrichtung in der lokalen Umgebung

Um die Beispiel-App in deiner lokalen Umgebung auszuführen, benötigst du NodeJS 10.x oder höher.

Schritt 1: Beispiel-App-Repository klonen

Klone das original-coast-clothing-Repository auf dem lokalen Rechner.

git clone https://github.com/fbsamples/original-coast-clothing.git
cd original-coast-clothing

Schritt 2: Codeabhängigkeiten installieren

yarn install

Schritt 3: Externe Adresse erhalten

Um Nachrichten zu empfangen, muss es möglich sein, eingehende Webhooks von unseren Servern zu erhalten.

Wenn du eine externe Adresse benötigst, verwende ngrok, da damit eine externe HTTPS-Adresse bereitgestellt wird, die einen Tunnel in deine NodeJS-App herstellt.

ngrok installieren

npm install -g ngrok

Einen Tunnel zu deinem lokalen Server mit deinem bevorzugten Port anfordern

ngrok http 3000

Der Bildschirm sollte den Status ngrok aufweisen:

Session Status                online
Account                       Redacted (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding                    https://1c3b838deacb.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
0       0       0.00    0.00    0.00    0.00

Notiere die https-URL des externen Servers, der die Weiterleitung an den lokalen Rechner vornimmt. Im obigen Beispiel lautet sie https://1c3b838deacb.ngrok.io.

Schritt 4: Webhooks und Messenger-Profil festlegen

Vorlage der Beispielumgebung in deine App kopieren

mv .sample.env .env

Deine Umgebungswerte hinzufügen

Bearbeite die Datei .env, um die Werte für deine Facebook-App-ID, deine Facebook-Seiten-ID, deinen Seiten-Zugriffsschlüssel und den App-Geheimcode hinzuzufügen. Lege den Wert von VERIFY_TOKEN auf einen zufälligen String fest. Die App verwendet ihn zur Validierung von API-Aufrufen.

Schritt 5: App ausführen

node app.js

Du müsstest jetzt deine App in deinem Browser unter http://localhost:3000 aufrufen können.

Schritt 6: App konfigurieren

Führe den folgenden Befehl aus, um die Webhook-Abonnementeinstellungen für deine App und das Seiten-Messenger-Profil zu konfigurieren. Beachte, dass du den in der .env-Datei eingetragenen VERIFY_TOKEN-Wert verwenden musst.

http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>

Schritt 7. App-Einrichtung testen

Sende von Facebook aus oder im Messenger eine Nachricht an deine Seite. Wenn dein Webhook ein Event empfängt, hast du deine App komplett eingerichtet.

Codeänderung durchführen

Bearbeite die Datei locales/en_US.json, indem du die Nachricht unter get_started.welcome, nämlich „Hallo {{userFirstName}}! Willkommen bei Original Coast Clothing ...“, änderst.

Bei jeder Änderung des Codes musst du am ersten Terminal den NodeJS-Server neu starten. Halte den Server mit Strg-C an und starte ihn wieder, um den neuen Code zu laden.

node app.js

Öffne deinen Messenger und sende deiner Seite das Wort „Hallo“. Du müsstest jetzt die neue Nachricht erhalten.

Heroku-Einrichtung

Eine Heroku-Instanz kann hilfreich sein, um die Produktions- oder Staging-Umgebung deiner Business-App oder Website zu hosten.

Schritt 1: Heroku-App erstellen

git init
heroku apps:create
# Creating app... done, ⬢ YOUR-APP-NAME
# Created http://YOUR-APP-NAME.herokuapp.com/ | git@heroku.com:YOUR-APP-NAME.git

Schritt 2: Den Code in Heroku bereitstellen

heroku git:remote -a YOUR-APP-NAME
git push heroku master

Schritt 3: Umgebungsvariablen festlegen

Rufe die Config Vars deiner App im Dashboard der Heroku-App unter „Einstellungen“ ab. Füge die Werte für deine Facebook-App-ID, deine Facebook-Seiten-ID, deinen Seiten-Zugriffsschlüssel und den App-Geheimcode hinzu und erstelle ein VERIFY_TOKEN.

Schritt 4: Webhooks und Messenger-Profil festlegen

Jetzt müsstest du auf die App zugreifen können. Verwende das als Config Vars erstellte VERIFY_TOKEN und rufe den /profile-Endpunkt auf.

https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

Optional Über die oben angegebene URL werden die IDs von hochgeladenen Personen zurückgegeben. Da sie im Speicher gehalten werden, musst du diese zurückgegebenen IDs als Config Vars hinzufügen, damit sie nach einem Neuladen nicht verloren sind.

heroku config:set PERSONA_BILLING=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_ORDER=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_SALES=<PERSONA_ID> -a YOUR-APP-NAME

Schritt 5: Deine App testen

Sende eine Nachricht von Facebook oder in Messenger an deine Seite. Wenn dein Webhook ein Event empfängt, hast du die App vollständig eingerichtet.

Problembehebung

Die App lokal ausführen

Nach der Ausführung von ngrok wird eine neue externe Adresse bereitgestellt. Aktualisiere die APP_URL-Adresse in der .env-Datei und führe dann den NodeJS-Server aus.

node app.js

Aktualisiere die Webhook-Adresse in den Facebook-App-Einstellungen. Gehe dazu zu http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>.

Meine Seite antwortet nur mir, aber niemandem sonst

Die Facebook-App befindet sich wahrscheinlich noch im Entwicklungsmodus. Du kannst jemanden als Tester der App hinzufügen. Wenn er zustimmt, kann die App ihm eine Nachricht zusenden. Wenn du fertig bist, kannst du die pages_messaging-Berechtigung hinzufügen, um beliebigen Nutzer*innen antworten zu können.

Mehr dazu