Teilen Sie:
){kind=small}
Ehemaliger Direktor für Entwicklerschulung bei Vonage. Mit einem Hintergrund als kreativer Entwickler, Produktmanager und Organisator von Hack-Days arbeitet Martyn seit 2012 als Befürworter der Technologie, nachdem er zuvor beim Rundfunk und bei großen Plattenfirmen tätig war. Er bildet Entwickler auf der ganzen Welt aus und unterstützt sie.
Erstellen eines Facebook Messenger Bot mit Dialogflow (API Tutorial)
Lesedauer: 17 Minuten
Beitrag aktualisiert von Amanda Cavallaro
In diesem Tutorial lernen Sie, wie Sie einen Facebook Messenger-Bot auf Ihrer Facebook-Seite erstellen können. Google Dialogflow und der Vonage Messages API.
Die Chatbot-App in diesem Beispiel nimmt eingehende Nachrichten über die Schaltfläche "Nachricht senden" auf einer Facebook-Seite oder über die Facebook Messenger-App entgegen. Beides funktioniert mit der Chatbot-Anwendung einwandfrei.
Die Nachrichten werden über unsere App an Google Dialogflow weitergeleitet. Dialogflow verwendet dann natürliche Sprachverarbeitung (NLP), um Antworten auf Fragen zu generieren. Unser Chatbot sendet diese Antworten dann zurück an Facebook Messenger über API.
In diesem Beispiel verwenden wir den vorgefertigten Small Talk-Agenten in Dialogflow. Wir werden den Small Talk-Agenten verwenden, um einen Facebook-Bot zu erstellen, der mit zwitschernden Antworten auf eingehende Fragen antwortet. Der Small Talk-Agent ist einfach zu bedienen und eignet sich hervorragend für Entwicklungszwecke.
Wir haben eine Schritt-für-Schritt-Anleitung für die Erstellung eines Facebook-Messenger-Bots mit einer Dialogflow-Integration unter Verwendung der Vonage Message API erstellt. Im gesamten Tutorial finden Sie Beispielcode, den Sie für die Erstellung Ihres Chatbots verwenden werden.
Sie können den Code von dieser Seite herunterladen GitHub Repository herunterladen.
Um einen Dialogflow-Bot für Facebook Messenger zu erstellen, benötigen Sie die folgenden Voraussetzungen:
A Facebook Account mit einer Marken-/Geschäftsseite, die Sie für Tests verwenden können
A Google Dialogflow ES Account
Node.js v12 oder höher
Ein kostenloses Vonage API-Konto
Um einen Bot mit Facebook Messenger, Dialogflow und der Messages API zu erstellen, befolge die folgenden Schritte:
Erstellen einer Skelettanwendung für den Facebook-Bot
Erstellen einer Nachrichtenanwendung in der Vonage-API
Verbinden Sie die Vonage Messages API mit Facebook
Senden Sie Facebook-Nachrichten an Dialogflow
Dialogflow-Antworten an Facebook senden
Testen Sie Ihren Facebook Messenger Bot
Der erste Schritt bei der Erstellung Ihres Facebook Messenger-Bots besteht darin, eine Rahmenanwendung zu erstellen.
Um Nachrichten von Facebook zu empfangen, müssen Sie zwei Webhooks einrichten, die es der App ermöglichen, Daten über Nachrichten und Zustellungsstatus zu empfangen.
Wir beginnen mit dem Aufbau der Basisanwendung mit diesen beiden Routen.
Initialisieren Sie in einem neuen Ordner eine neue Node.js-Anwendung, indem Sie
Als nächstes installieren Sie die Abhängigkeiten für das Projekt:
Außerdem werden wir das ausgezeichnete Nodemon und DotEnv Pakete, um unsere Anwendung am Laufen zu halten, während Änderungen vorgenommen werden, so dass Sie sie nicht ständig neu starten müssen. Installieren Sie diese als devDependencies.
Schließlich fügen Sie eine kleine Ordnerstruktur hinzu, indem Sie routes und controllers in der Wurzel Ihres Verzeichnisses anlegen.
Der GitHub-Code wird mit einer .env.sample Datei; kopieren Sie diese und benennen Sie sie um in env. Es wird von Ihnen erwartet, dass Sie die Werte zu den folgenden Schlüsseln hinzufügen.
VONAGE_API_KEY: Sie finden sie auf der Startseite des Vonage Dashboards, wenn Sie angemeldet sind.
VONAGE_API_SECRET: Wenn Sie angemeldet sind, finden Sie es auf dem Vonage-API-Dashboard.
VONAGE_APPLICATION_ID: Sie finden sie auf dem Vonage Dashboard innerhalb der Anwendung.
VONAGE_PRIVATE_KEY: Eine Datei, die vom Vonage Dashboard innerhalb der Anwendung heruntergeladen werden kann und Nachrichtenfunktionen enthält.
FACEBOOK_PAGE_ID: Sie finden diese Informationen in den Profileinstellungen. Sie finden sie direkt unter Zusammenfassung > Seiteninfo.
DIALOGFLOW_PROJECT_ID: Sie können die Projekt-ID sowohl in der Google Cloud Platform als auch unter der Registerkarte "Allgemein" der Einstellungen des Dialogflow-Projekts im Dialogflow ES-Dashboard finden. Hier ist eine alternative Möglichkeit, die Seiten-ID zu finden, die in den FAQs beschrieben wird.
DIALOGFLOW_SESSION_ID: Die Sitzungs-ID kann eine zufällig generierte Zeichenfolge oder eine gehashte Benutzerkennung sein. Ihre Länge sollte maximal 36 Zeichen betragen.
DIALOGFLOW_LANGUAGE_CODE: Sie können mehrere Sprachen auswählen; fügen Sie die Sprache hinzu, die Sie in Ihrem Dialogflow-Dashboard finden.
GOOGLE_APPLICATION_CREDENTIALS: Sie können hier einen Account-Schlüssel erstellen.
Koa ist ein Framework für Node.js, das von den Machern von Express. Es ist leichtgewichtig und bietet von Haus aus nur einen grundlegenden Satz von Funktionen, was es perfekt für die Erstellung eines kleinen Webhook-Servers macht, wie wir ihn hier benötigen.
Erstellen Sie die Hauptdatei für den Server, indem Sie in Ihrem Stammverzeichnis eine neue Datei namens server.js.
Fügen Sie in dieser neuen Datei den folgenden Code ein:
const Koa = require('koa');
const router = require('koa-route');
const bodyParser = require('koa-bodyparser');
const routes = require('./routes');
const port = process.env.PORT || 3000;
// Set up a new Koa app and tell it to use
// the bodyParser middleware for inbound requests
const app = new Koa();
app.use(bodyParser());
// Routes
app.use(router.post('/webhooks/status', routes.status));
app.use(router.post('/webhooks/inbound', routes.inbound));
// Have the app listen on a default port or 3000
app.listen(port, () => console.log(`App is waiting on port ${port}`));
Die Konstante routes Konstante wird verwendet, um die Routen in der Anwendung zu speichern und darauf zuzugreifen:
const routes = require('./routes');Wir benötigen auch eine neue Datei im Ordner routes Ordner mit dem Namen index.js. Erstellen Sie diese Datei und fügen Sie den folgenden Code hinzu:
const routes = {
inbound: async ctx => {
// Get the detail of who sent the message, and the message itself
const { from, message } = ctx.request.body;
console.log(from, message);
ctx.status = 200;
},
status: async ctx => {
const status = await ctx.request.body;
console.log(status);
ctx.status = 200;
}
};
module.exports = routes;
Führen Sie nun den folgenden Befehl aus, um den Server zu starten:
Die App wird auf Port 3000.
Benutzen Sie Ngrok, um diesen Port für die Welt zu öffnen und notieren Sie sich die URLs, die es für Sie erzeugt; sie sollten etwa so aussehen: https://f70f-82-10-85-156.ngrok.io
Hier ist eine praktische Anleitung für die Arbeit mit Ngrok wenn Sie es zum ersten Mal benutzen.
TLDR? Sie können Ngrok (falls installiert) starten, indem Sie diesen Befehl in einem separaten Terminal-Tab ausführen:
Als nächstes müssen Sie eine Messages-Applikation in Ihrem Vonage API Account erstellen. Mit dieser Anwendung können Sie Facebook und Dialogflow verbinden und Nachrichten zwischen ihnen senden.
Richten Sie eine neue Messages-Anwendung über das Vonage Dashboard.
Vergewissern Sie sich, dass Sie Folgendes anhängen /webhooks/inbound und /webhooks/status an die URL anhängen, die Sie von Ngrok erhalten, wenn Sie sie in das Formular einfügen (wie in der Abbildung unten).
Messages Webhook
Denken Sie daran, auch auf die Schaltfläche Öffentliches/privates Schlüsselpaar generieren Link. Dadurch wird eine Datei namens private.key.
Suchen Sie die Datei private.key Datei auf Ihrem System und verschieben Sie sie in den Stammordner Ihrer Anwendung.
Schließen Sie die Einrichtung der Anwendung ab, indem Sie auf die Schaltfläche Anwendung erstellen klicken, und schon ist die Konfiguration abgeschlossen.
Notieren Sie sich Ihre Anwendungs-ID; Sie benötigen sie im nächsten Schritt.
Damit Facebook von deiner neu erstellten Chatbot-App erfährt, musst du die Chatbot-Anwendung mit Facebook verbinden.
Zunächst müssen Sie ein JSON-Web-Token erstellen, um Facebook zu autorisieren, Ihre Anwendung zu nutzen, was Sie mit der Vonage CLI.
Öffnen Sie Ihr Terminal und stellen Sie sicher, dass Sie sich im Stammverzeichnis Ihres Anwendungsordners befinden.
Verwendung der Vonage CLIführen Sie den folgenden Befehl aus:
Achten Sie darauf, dass Sie VONAGE_APPLICATION_ID durch die ID der Anwendung, die Sie gerade erstellt haben.
Wenn Sie diesen Befehl ausführen, erhalten Sie eine große Zeichenfolge aus Buchstaben und Numbers - das ist Ihr JSON-Web-Token. Kopieren Sie das ganze Ding.
Sie können die JWT dann mit anzeigen:
Um Ihre Facebook-Seite mit Ihrer App zu verbinden, haben wir eine praktische Seite erstellt:
Führen Sie die folgenden Schritte aus:
Melden Sie sich mit Ihren Facebook-Anmeldedaten an.
Wählen Sie die Facebook-Seite aus, die Sie mit Ihrer Vonage-App verbinden möchten.
Klicken Sie auf . Einrichtung abschließen.
Wenn alles in Ordnung ist, erscheint ein grünes Dialogfenster, das Ihnen zu Ihrem Erfolg gratuliert und Ihnen die ID Ihrer Facebook-Seite mitteilt.
Notieren Sie sich diese ID.
Sie können den Inhalt Ihres JWTs verifizieren, indem Sie jwt.io.
Hinweis: Wenn ein Element hiervon geklärt werden muss, gibt es eine Anleitung zur Erstellung von JWTs für die Verwendung in diesem Kontext in unserem Facebook Messenger-Tutorial._
Deine Anwendung ist jetzt mit deiner Facebook-Seite verbunden.
Wenn Ihr Server noch läuft und Ngrok ihn immer noch der Welt zeigt, gehen Sie auf Ihre Facebook-Seite und suchen Sie den Nachrichten-Button.
Klicken Sie darauf, um das Messaging-Fenster zu öffnen und wunderbare Nachrichten zu versenden. Alternativ können Sie auch einfach mit Hallo'.
Jede von Ihnen gesendete Nachricht wird an den Inbound-Webhook weitergeleitet, den Sie bei der Einrichtung Ihrer Anwendung angegeben haben. Dies entspricht direkt der inbound Funktion in der routes.js Datei.
Derzeit ist die inbound Funktion so eingestellt, dass sie die from und message Teil dessen, was von Facebook gesendet wird, auf der Konsole zu protokollieren.
Sie sollten sehen, dass Ihre Nachrichten in der Konsole angezeigt werden.
Nun, da die Anwendung eingehende Nachrichten empfängt, ist es an der Zeit, diese Nachrichten an Dialogflow zu senden.
Im Ordner controllers Ordner eine neue Datei mit dem Namen dialogflow.js und fügen Sie den Inhalt der JavaScript-Datei controllers/dialogflow.js.
Die exportierte Funktion in der Datei bewirkt Folgendes:
Eine asynchrone Funktion namens
dialogflowHandlerwird instanziiert und akzeptiert einen Parameter namensquery.Ein Objekt namens
requestwird erstellt, das alle Schlüssel enthält, die Dialogflow erwartet.Das Anfrageobjekt wird an Dialogflow gesendet.
Die Antwort des Small Talk-Agenten, enthalten in
result[0].queryResult.fulfillmentTextenthalten ist, wird zurückgegeben.
const dialogflowHandler = async query => {
// Create a text query request object
const request = {
session: sessionPath,
queryInput: {
text: {
text: query,
languageCode: languageCode
}
}
};
// Send the text query over to Dialogflow and await the result
// using .catch to throw any errors
const result = await sessionClient
.detectIntent(request)
.catch(err => console.error('ERROR:', err));
// Pick out the response text from the returned array of objects
const reply = await result[0].queryResult.fulfillmentText;
// Return the reply
return reply;
};
module.exports = dialogflowHandler;
Um diese Funktion zu nutzen dialogflowHandler Funktion zu nutzen, öffnen Sie die routes/index.js Datei und fordern Sie sie oben an:
const dialogflowHandler = require('../controllers/dialogflow');Ändern Sie die inbound Funktion so, dass sie wie folgt aussieht:
inbound: async ctx => {
const { from, message } = await ctx.request.body;
console.log(from, message);
const dialogflowResponse = await dialogflowHandler(message.content.text);
console.log(dialogflowResponse);
ctx.status = 200;
};
Senden Sie eine neue Nachricht (z. B. "Hallo!") von Ihrer Facebook-Seite (oder über Ihre Facebook Messenger-App).
Diesmal sehen Sie, wie die eingehende Nachricht auf der Konsole protokolliert wird und wie die Antwort von Dialogflow zurückkommt.
Hinweis: Wenn Sie Hilfe bei der Einrichtung von Dialogflow benötigen, folgen Sie der SmallTalk Vorgefertigter Agent Anleitung.
Das letzte Puzzleteil besteht darin, die Dialogflow-Antwort über den Facebook Messenger-Bot an den Benutzer zu senden.
Die Vonage Messages API wird dies alles für uns erledigen.
Erstellen Sie eine neue Datei im Ordner controllers Ordner mit dem Namen vonage.js und füllen Sie sie mit dem Inhalt dieser Datei: controllers/vonage.js.
Die Hauptfunktion, die in dieser Datei exportiert wird, heißt messageResponder.
Diese Funktion verwendet die Vonage Node.js Client-Bibliothek um eine Nachricht an den Benutzer zurückzusenden.
Der Funktion wird ein Objekt namens message übergeben, das die id des Benutzers, an den die Antwort gesendet werden soll, und den dialogflowResponse (den Text, der in der Nachricht gesendet werden soll).
const messageResponder = async (message) => {
vonage.messages.send(
new MessengerText({
text: message.dialogflowResponse,
to: process.env.FACEBOOK_PAGE_ID, // Who the message goes to
from: $FB_RECIPIENT_ID, // Who the message comes from. The PSID of the user you want to reply to. The FB_RECIPIENT_ID is the PSID of the Facebook User you are messaging. This value is the from.id value you received in the inbound messenger event on your Inbound Message Webhook URL.
}),
(err, data) => {
if (err) {
throw new Error(err);
} else {
console.log(
`Replied to ${message.id} with '${message.dialogflowResponse}' (ID: ${
data.message_uuid
})`
);
}
}
);
};
Um diese Funktion zu nutzen messageResponder Funktion zu verwenden, importieren Sie sie in die routes/index.js Datei:
Am Anfang der Datei, unterhalb der require Anweisung für die dialogflow.js Datei, die zuvor erstellt wurde, Folgendes hinzu:
const messageResponder = require('../controllers/vonage');Fügen Sie dann in der inbound Funktion den folgenden Code direkt über der ctx.status = 200 Zeile ein:
messageResponder({ from, dialogflowResponse });
ctx.status = 200;Wie Sie sehen können, übergeben wir ein Objekt in messageResponder mit dem Inhalt von frommit der Antwort von Dialogflow ES.
Dadurch sieht das Objekt, das an die Funktion übergeben wird, wie folgt aus:
{
from: '111111111111', // ID of the user on Facebook that sent the message
dialogflowResponse: 'Greetings!'
}
Die Bühne ist bereitet. Mit dieser letzten Datei ist die Schleife geschlossen, und jede eingehende Nachricht sollte sofort eine Antwort erhalten. Jetzt können Sie Ihren Facebook Messenger-Bot und Ihre Dialogflow-Integration testen.
Senden Sie erneut eine Nachricht von Ihrer Facebook-Seite aus. Die Antwort von Dialogflow sollte nun im selben Fenster erscheinen!
Herzlichen Glückwunsch! Wenn Sie die Schritte in diesem Tutorial befolgt haben, haben Sie einen Facebook-Messenger-Bot erstellt, der von Dialogflow mit Hilfe der Vonage Messages API betrieben wird.
Der vorgefertigte Smalltalk Agent eignet sich hervorragend zum Testen, aber der nächste Schritt wäre hier, einen eigenen Agenten zu entwickeln, der dem Benutzer Wissen von einigem Wert vermitteln kann.
Weitere Informationen über den Aufbau von Dialogflow-Agenten finden Sie in den Dialogflow-Anleitungen.
Mit dem Code aus diesem Tutorial haben Sie bereits die Verbindung zwischen Facebook und Dialoglow, so dass Sie den mächtigsten Agenten aller Zeiten bauen können.
Wenn Sie Fragen zu diesem Blog-Beitrag haben, können Sie sich gerne an uns wenden auf unserem Vonage Community Slack oder schreiben Sie uns auf X, früher bekannt als Twitter.
Teilen Sie:
Ehemaliger Direktor für Entwicklerschulung bei Vonage. Mit einem Hintergrund als kreativer Entwickler, Produktmanager und Organisator von Hack-Days arbeitet Martyn seit 2012 als Befürworter der Technologie, nachdem er zuvor beim Rundfunk und bei großen Plattenfirmen tätig war. Er bildet Entwickler auf der ganzen Welt aus und unterstützt sie.