Messenger-Plattform

Beispielerlebnis für Messenger API-Unterstützung für Instagram – Original Coast Clothing

Original Coast Clothing (OC) ist eine fiktive Bekleidungsmarke zur Darstellung wichtiger Features der Instagram-Plattform, um ein hervorragendes Kundenerlebnis zu realisieren. Inspiriert durch diese Demo kann jeder ein fantastisches Erlebnis für die Messenger API-Unterstützung für Instagram erstellen, das Automatisierungsfunktionen und Live-Support umfasst. Bereitgestellt werden auch Open-Source-Code für die App und ein Leitfaden dazu, wie du das Erlebnis in deiner lokalen Umgebung oder auf deinem Remote-Server bereitstellen kannst. Es gibt außerdem ein begleitendes Beispielerlebnis für Messenger.

Probiere es direkt aus, indem du Nachrichten an @originalcoastclothing sendest oder einen Beitrag kommentierst.

Plattform-Features

Dieses Erlebnis umfasst die im Folgenden aufgeführten Plattform-Features. Wenn du dich zur Bereitstellung des Erlebnisses auf deiner Seite entscheidest, verwendet der Code alle Features, nämlich:

Dieses Erlebnis auf Instagram bereitstellen

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

Der Code, mit dem dieses Erlebnis läuft, ist Open-Source-Code. Auf diese Weise kann jeder mit der Entwicklung eines fantastischen Messaging-Erlebnisses loslegen.

Der Code ist unter BSD-Lizenz freigegeben. Du kannst ihn also für deine Zwecke uneingeschränkt nutzen. Der Code liegt zur Referenz auf GitHub bereit.

Voraussetzungen für die Bereitstellung einer Instagram-App

Setup-Schritte

Ziel dieses Abschnitts ist es, sich alle Zugriffsschlüssel und IDs zu beschaffen, die benötigt werden, damit die Instagram-App erfolgreich Nachrichten senden und empfangen kann. Bevor du loslegst, stelle sicher, dass du alle der oben genannten Anforderungen erfüllst. An diesem Punkt solltest du bereits über eine Seite, eine registrierte Facebook-App und ein professionelles Instagram-Konto verfügen.

Wenn du gerade eine neue Facebook-App erstellt hast, befindet sie sich wahrscheinlich noch im Entwicklungsmodus. Hinweis: Apps in diesem Modus dürfen Nachrichten nur an Personen senden, die mit der App verbunden sind (Admins, Entwickler und Tester). Du kannst in diesem Modus mit dem Leitfaden fortfahren, aber nachdem die App für die Öffentlichkeit bereit ist, muss sie den App-Review-Prozess durchlaufen, um eine instagram_manage_messages-Berechtigung zu erhalten. Weitere Informationen findest du unter App Review.

  1. Konfiguriere deine Instagram-Integration, indem du die Dokumentation Erste Schritte befolgst.
  2. Füge einige Instagram-Testkonten hinzu, die du verwendest, um das Erlebnis zu testen.

An diesem Punkt solltest du über Folgendes verfügen:

  • App-ID
  • App-Geheimcode
  • Seiten-ID
  • Seiten-Zugriffsschlüssel
  • Instagram-Konto, das mit der Seite verknüpft ist
  • Instagram-Konten, die als Testkonten registriert sind

Installation

Voraussetzungen:

  • Node 10.x oder höher
  • Einen Server für deinen Code Verfügbare Optionen:
    • Lokaler Tunneldienst wie ngrok
    • Remote-Serverdienst wie Heroku oder Glitch
    • Dein eigener Webserver

Ein-Klick-Bereitstellung mit Heroku oder Glitch

Mit den folgenden Buttons kann das Erlebnis automatisch in Heroku oder Glitch bereitgestellt werden. Du erhältst eine Aufforderung, zum Abschließen der Einrichtung die nötigen Umgebungsvariablen einzugeben.

Auf Heroku bereitstellenAuf Glitch bereitstellen

Lokal mit ngrok bereitstellen

Ein Tunneldienst setzt deinen lokalen Webserver einer externen URL aus, die durch Facebook-Webhooks erreicht werden kann. Es gibt zahlreiche Dienste dieser Art. In diesem Beispiel verwenden wir ngrok.

1. Repository klonen

Klone das Repository auf dem lokalen Rechner:

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

2. Tunneldienst installieren

Sofern noch nicht geschehen, installiere ngrok mittels Download oder über die Befehlszeile:

$ npm install -g ngrok

Fordere im Verzeichnis dieses Repositorys einen Tunnel zu deinem lokalen Server mit deinem bevorzugten Port an.

$ ngrok http 3000

Der Bildschirm sollte den ngrok-Status darstellen:

Session Status                online
Account                       Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln 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

Notiere die https-URL des externen Servers, die an deinen lokalen Computer weitergeleitet wird. Im obigen Beispiel lautet sie https://1c3b838deacb.ngrok.io.

3. Abhängigkeiten installieren

Öffne einen neuen Terminal-Tab, ebenfalls im Repository-Verzeichnis.

$ npm install

Alternativ kannst du Yarn verwenden:

$ yarn install

4. ENV-Datei einrichten

Kopiere die Datei .sample.env nach .env

$ cp .sample.env .env

Bearbeite die .env-Datei, um alle Werte für deine App und Seite hinzuzufügen.

5. App lokal ausführen

$ node app.js

In deinem Browser unter http://localhost:3000 solltest du nun auf die Standardseite deiner Anwendung zugreifen können.

Vergewissere dich, dass du auch über die externe URL aus Schritt 2 auf die Anwendung zugreifen kannst.

Über Heroku bereitstellen

1. Repository klonen

Klone das Repository auf dem lokalen Rechner:

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

2. Heroku CLI installieren

Sollte das Verzeichnis noch kein Git-Repository sein, erstelle eines:

$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"

3. Heroku CLI installieren

Sofern noch nicht vorhanden, lade das Heroku-CLI herunter und installiere es.

4. Per CLI eine App erstellen

$ heroku apps:create

Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git

Achte auf den Namen, den deine App erhält. In diesem Beispiel lautete er mystic-wind-83.

5. Umgebungsvariablen einrichten

Suche im Dashboard der Heroku-App nach deiner App und richte die Konfigurationsvariablen nach den Kommentaren in der Datei .sample.env ein.

Alternativ kannst du die Umgebungsvariablen wie folgt über die Befehlszeile einrichten:

$ heroku config:set PAGE_ID=XXXX

6. Code in Heroku bereitstellen

$ git push heroku master

7. Protokollausgabe anzeigen

$ heroku logs --tail

Webhook verbinden

Nachdem nun dein Server läuft, befindet sich dein Webhook-Endpunkt im Pfad /webhook. Im Heroku-Beispiel oben wäre dies http://mystic-wind-83.herokuapp.com/webhook.

Richte deinen Webhook ein, indem du den [Leitfaden zu Messenger-Plattform-Webhooks] befolgst (https://developers.facebook.com/docs/messenger-platform/webhooks

Nach Validierung des Webhook-Abonnements abonniere die folgenden Events:

  • comments
  • messages
  • messaging_postbacks

Teste die Webhooks durch Klicken auf die „Test“-Buttons neben den abonnierten Events. Du solltest die Test-Events in der Protokollausgabe deines Servers sehen.

Testen, ob dein App-Setup erfolgreich ist

Versuche, eine Nachricht an das mit deiner Seite verbundene Instagram-Konto zu senden oder einen Beitrag zu kommentieren, während du mit der Rolle „Instagram-Tester“ bei einem Konto angemeldet bist.

Wenn du eine Antwort auf deine Nachricht bei Instagram siehst, hast du deine App vollständig eingerichtet. Voilà!

Problembehebung

Die App antwortet nur mir, aber niemandem sonst

Die Facebook-App befindet sich wahrscheinlich noch im Entwicklungsmodus. Du kannst eine Person als Tester*in der App hinzufügen. Wenn sie zustimmt, kann die App ihr eine Nachricht zusenden. Wenn du fertig bist, kannst du die instagram_manage_messages-Berechtigung hinzufügen, um jedem beliebigen Nutzer antworten zu können.

Andere Probleme

Enthält dieser Leitfaden Fehler? Informiere uns, indem du ein Problem meldest