Telefonanrufe über WebSockets in einen Dialogflow Chatbot einbinden

Einführung

Dieses Tutorial zeigt Ihnen, wie Sie mit Dialogflow Essentials und einer Vonage WebSockets-Integration einen Telefonanruf an einen Dialogflow-Agenten tätigen können.

Das folgende Diagramm zeigt einen Überblick über die Architektur.

Diagram of the call

Voraussetzungen

Um die in den folgenden Schritten beschriebenen Aktionen durchführen zu können, müssen Sie eine Datei erstellen:

1. A Dialogflow-Konto

2. A Vonage API-Konto

Einen Dialogflow-Agenten erstellen

Dialogflow ist eine Software as a Service (SaaS) und eine Plattform für das Verstehen natürlicher Sprache, die für die Erstellung von dialogorientierten Benutzeroberflächen verwendet wird.

Ein Agent ist eine Dialogflow-Instanz, die Sie sich als Ihre Chatbot-Anwendung vorstellen können. Er ermöglicht es Ihnen, das, was die Benutzer sagen, auf Intentionen und sie mit Antworten zu versorgen.

Folgen Sie den Schritten

1. Öffnen Sie die Dialogflow-Konsole

2. Erstellen Sie einen Agenten, indem Sie ihm einen Namen geben, die Standardsprache einstellen, die Zeitzone wählen und auf die Schaltfläche zum Erstellen eines Agenten klicken. Die Schaltfläche kann entweder als Create oder Create Agent

3. Klicken Sie im Menü auf der linken Seite auf das Zahnradsymbol

4. Klicken Sie unter Google Project auf den Namen der Projekt-ID. Zum Beispiel, VonageDF Dies führt Sie zur Google Cloud-Konsole

Gif showing the steps to create the dialogflow Agent

Erstellen Sie ein Service-Konto in der Google Cloud-Konsole

Wir werden die grafische Benutzeroberfläche verwenden, um unser Google Cloud-Projekt und unsere Ressourcen über die Google Cloud-Konsole zu verwalten, wobei wir dasselbe Projekt verwenden, das in Dialogflow erstellt wurde. In den folgenden Schritten werden wir ein Service-Konto für die Zugriffskontrolle und Authentifizierung erstellen.

Folgen Sie den Schritten

1. Von der Google Cloud-Konsoleklicken Sie auf Go to project settings

2. Klicken Sie im Menü auf der linken Seite auf Service accounts

3. Klicken Sie in der oberen Leiste auf + Create Service Account

4. Geben Sie ihm einen Namen für den Service Account, den Sie sich merken können, z. B. VonageDF

5. Beschreibung eines Servicekontos hinzufügen

6. Klicken Sie auf Create and Continue

7. Unter Grant this service account access to projectfiltern und wählen Sie die Rolle Dialogflow API Admin

Gif showing the seven above steps while creating the Service Account

Sie werden nun zur Seite Servicekonten zurückgebracht

1. Klicken Sie auf die drei Punkte unter action

2. Klicken Sie auf Manage keys

3. Klicken Sie auf Add Key

4. Klicken Sie auf Create new Key

5. Wählen Sie JSON

6. Klicken Sie auf Create

7. Sie können sehen, dass eine .json Datei heruntergeladen wurde. Wir fügen diese Datei in das Dialogflow Reference Connection GitHub-Repository das wir im nächsten Schritt klonen werden

Gif showing the above steps to generate the keys

Einrichten der Dialogflow-Referenzverbindung

Die Dialogflow-Referenzverbindung macht Gebrauch von der WebSockets-Funktion der Voice API von Vonage. Wenn ein Sprachanruf aufgebaut wird, löst eine Voice API-Anwendung eine WebSocket-Verbindung mit der Dialogflow-Referenz-Verbindung. Sie streamt die Audiodaten zum und vom Voice-Anruf in Echtzeit.

In den folgenden Schritten werden wir zwei Optionen als Beispiele angeben. Verwendung von ngrok, um den Verbindungsserver zu tunneln, der mit unserem Dialogflow-Agenten interagiert, und ihn auf Heroku bereitzustellen.

Folgen Sie den Schritten

1. Klonen Sie das dialogflow-reference-connection-Repository von GitHub und ändern Sie das Verzeichnis git clone https://github.com/nexmo-community/dialogflow-reference-connection && cd dialogflow-reference-connection

2. Öffnen Sie den Code in Ihrem bevorzugten IDE oder Texteditor

3. Fügen Sie die .json Datei, die soeben heruntergeladen wurde, in das Stammverzeichnis des Projekts ein

4. Erstellen Sie eine .env Datei aus der .env.example

5. Befüllen Sie die Umgebungsvariablen: GCLOUD_PROJECT_ID=<TheProjectIdFoundOnDialogflow> GOOGLE_CLOUD_CREDENTIALS=<TheJSONFileYouDownloaded.json> Über das Terminal:

6. Installieren Sie die Abhängigkeiten npm install

7. Führen Sie die Datei Dialogflow Verbindungsserver node df-connecting-server.js Es gibt viele Bereitstellungsarten, z. B. App Engine, Heroku, Cloud Run.

In diesem Tutorium werden wir Beispiele mit der ngrok tunneln. Hier ist ein Link, der mehr über ngrok und Heroku.

Option 1: Beispiel mit ngrok

1. ausführen. ngrok http 5000

2. Notieren Sie sich die in der Konsole gefundene URL (z. B. xxxx.ngrok.io). Wir werden diese Informationen im Teil DF_CONNECTING_SERVER Argument der Einrichtung der Dialogflow Voice API Beispielanwendung' des Tutorials hinzufügen

The ngrok URL highlighted on the IDE

Option 2: Beispiel mit Heroku

1. Installieren Sie git

2. Installieren Heroku Befehlszeile und melden Sie sich bei Ihrem Heroku Account an

3. Wenn Sie noch kein lokales Git-Repository haben, erstellen Sie eines: git init

4. Beginnen Sie mit der Erstellung dieser Anwendung auf Heroku von der Kommandozeile aus unter Verwendung der Heroku CLI. Hinweis: Ersetzen Sie in dem unten stehenden Befehl thisappname durch einen eindeutigen Namen für die gesamte Heroku-Plattform. heroku create thisappname

5. Klicken Sie in Ihrem Heroku-Dashboard, wo Ihre Anwendungsseite angezeigt wird, auf die Settings Schaltfläche, fügen Sie die folgenden Config Vars und setzen Sie sie mit den entsprechenden Werten:

1. Die Anwendung bereitstellen git push heroku master oder git push heroku main je nach dem Namen Ihrer Verzweigung.

2. Notieren Sie sich die in der Konsole gefundene URL (z. B. thisappname.herokuapp.com). Wir werden diese Informationen im DF_CONNECTING_SERVER Argument des Teils 'Einrichten der Dialogflow Voice API Beispielanwendung' des Tutorials

Einrichten Ihrer Vonage Voice API Application Credentials und Telefonnummern

Folgen Sie den Schritten

1. Erstellen Sie eine Anwendung über das Vonage API Dashboard

2. Geben Sie der Anwendung einen Namen, zum Beispiel VonageDF

3. Klicken Sie auf die Schaltfläche zum Generieren eines öffentlichen und privaten Schlüssels, eine private.key Datei heruntergeladen werden. Wir werden sie im nächsten Abschnitt dieses Tutorials zur Dialogflow Voice API Beispielanwendung hinzufügen

4. Verknüpfen Sie eine Rufnummer mit dieser Anwendung. Wenn Sie noch keine haben, klicken Sie im Menü auf der linken Seite auf Numbers und dann Buy Numbers und folgen Sie den Schritten, um sie zu erwerben

Wir werden die Dialogflow Voice API-Beispielanwendung einrichten und bald auf dieses Vonage-Anwendungs-Dashboard zurückkommen, um weitere Informationen hinzuzufügen.

Einrichten der Dialogflow Voice API-Beispielanwendung

Diese Beispielanwendung verwendet die Vonage Voice API, um eingehende Sprachanrufe zu beantworten und eine WebSocket-Verbindung einzurichten, um Audio für jeden Anruf zur und von der Dialogflow-Referenzverbindung zu streamen.

Die dialogflow-Referenzverbindung Code wird:

• Senden Sie Audio an den Dialogflow-Agenten aus der Sprache des Anrufers,

• Streamen Sie Audioantworten vom Dialogflow-Agenten über den WebSocket an den Anrufer,

• Rückmeldung von Echtzeit-Transkripten und Bewertungen des Sprachgefühls des Anrufers über Webhooks-Rückrufe an diese Voice API Beispielanwendung.

Sobald diese Anwendung läuft, rufen Sie die mit Ihrer Anwendung verknüpfte Telefonnummer an, um per Sprache mit Ihrem Dialogflow-Agenten zu kommunizieren.

Wir werden ngrok verwenden, um den Verbindungsserver zu tunneln, der mit unserem Dialogflow-Agenten interagiert. Wenn Sie jedoch ein Beispiel mit Heroku sehen möchten, können Sie die Schritte von Dialogflow Voice API Beispielanwendung von GitHub folgen.

Folgen Sie den Schritten

1. Klonen Sie von Ihrem Terminal aus die Dialogflow Voice API Beispielanwendung von GitHub und wechseln Sie das Verzeichnis git clone https://github.com/nexmo-community/dialogflow-sample-voice-application && cd dialogflow-sample-voice-application Sie können die folgenden Schritte weiter erklären oder der Readme-Datei der Dialogflow Voice API Beispielanwendung

2. Fügen Sie die private.key die aus dem Vonage Dashboard generiert und auf Ihren Rechner heruntergeladen wurde, in das Stammverzeichnis des Projekts ein

3. Aus dem .env.example erstellen Sie eine .env Datei

4. Befüllen Sie die Umgebungsvariablen mit den Informationen, die auf dem Vonage API Dashboard

• Die SERVICE_NUMBER ist die virtuelle Nummer, die Sie erworben haben. Denken Sie daran, die Landesvorwahl ohne 00 oder + vorher hinzuzufügen

• Der DF_CONNECTING_SERVER ist der Server aus der Dialogflow-Referenz, die Sie bereits laufen haben (der, den Sie zuvor notiert haben)

1. Installieren Sie die Abhängigkeiten npm install

2. Führen Sie die df-application.js node df-application.js Nachfolgend finden Sie die nächsten Schritte für ngrok bzw. für Heroku:

   Option 1: Nachfolgend die Schritte mit ngrok

3. Führen Sie in einem separaten Terminal-Tab aus ngrok http 8000 Gehen Sie zurück zur Vonage Dashboard-Website und wählen Sie unter Fähigkeiten:

4. Schalten Sie Voice ein, um diese Funktion zu aktivieren

5. Fügen Sie die ngrok-URL hinzu, die auf dialogflow-sample-voice-application gefolgt von /answer in die Antwort-URL ein. Stellen Sie sicher, dass HTTP GET ausgewählt ist.

6. Fügen Sie die ngrok-URL hinzu, die auf dialogflow-sample-voice-application gefolgt von /event in die Ereignis-URL ein. Stellen Sie sicher, dass HTTP POST ausgewählt ist.

7. Klicken Sie auf Änderungen speichern

Vonage Dashboard

Option 2: Nachfolgende Schritte mit Heroku

1. Wenn Sie noch kein lokales Git-Repository haben, erstellen Sie eines in einem separaten Terminal-Tab: git init

2. Beginnen Sie mit der Erstellung dieser Anwendung auf Heroku von der Kommandozeile aus unter Verwendung der Heroku CLI. Hinweis: Ersetzen Sie im Befehl myappname durch einen eindeutigen Namen für die gesamte Heroku-Plattform. heroku create myappname

3. Klicken Sie in Ihrem Heroku-Dashboard, wo Ihre Anwendungsseite angezeigt wird, auf die Settings Schaltfläche, fügen Sie die folgenden Config Vars und setzen Sie sie mit den entsprechenden Werten aus Ihrer .env Datei.

Fügen Sie auch den Parameter PRIVATE_KEY_FILE mit dem Wert ./private.key

1. Klicken Sie in Ihrem Heroku-Dashboard, wo Ihre Anwendungsseite angezeigt wird, auf die Schaltfläche Open App und kopieren Sie die URL

2. Lassen Sie uns nun die Anwendung bereitstellen. Gehen Sie zurück auf die Vonage Dashboard-Website und wählen Sie unter capabilities:

3. Schalten Sie Voice ein, um diese Funktion zu aktivieren

4. Dieser Hostname (die URL, die Sie gerade von Heroku kopiert haben) wird gefolgt von /answer in der Antwort-URL. Stellen Sie sicher, dass HTTP GET ausgewählt ist

5. Machen Sie dasselbe für /event für die Ereignis-URL. Stellen Sie sicher, dass HTTP POST ausgewählt ist.

6. Klicken Sie auf Änderungen speichern

Vonage Dashboard

Verbesserung des Dialogflow-Agenten

Wenn Sie an dieser Stelle des Tutorials versuchen würden, die Telefonnummer anzurufen, könnten Sie mit dem Ausgangspunkt des Gesprächs aus der Dialogflow-Perspektive interagieren, dem Default Welcome Intent.

Aus der Liste der Benutzerantworten würde eine Nachricht an den Anrufer zurückgeschickt werden. Aber das Gespräch würde nicht weitergehen, da wir keine anderen Daten für andere Gesprächsrunden trainiert haben.

Lassen Sie uns einen Schritt zurückgehen und einige der Concepts von Dialogflow erkunden, um die Äußerungen der Benutzer hinzuzufügen, sie mit einer Antwort zu versehen und das Ende der Konversation hinzuzufügen, so dass Sie sehen können, wie eine vollständige Konversation abwechselnd stattfindet.

Sobald Sie einen Agenten erstellt haben, erstellen Sie Intents, die die Konversation steuern und gestalten.

Im Falle einer Benutzeräußerung gleicht Dialogflow das Gesagte mit einer Absicht ab, die auf dem NLP und den Trainingssätzen basiert, die ein Benutzer möglicherweise sagen könnte, um dieser Absicht zu entsprechen. Sobald die Absichtsklassifizierung erfolgt ist, wird eine Antwort an den Benutzer zurückgeschickt.

Entitäten sind die Arten von Informationen, die wir aus dem Gespräch extrahieren werden. In dem unten beschriebenen Anwendungsfall buchen wir einen Tisch per Telefonanruf. Die Informationen, die wir aus dem Gespräch extrahieren werden, sind person, date und time.

Verbessern wir den Standard-Willkommens-Intent, erstellen wir einen Intent, skizzieren wir die Entitäten und fügen wir ein Ende der Konversation hinzu und testen wir es.

Folgen Sie den Schritten

1. Öffnen Sie die Dialogflow-Konsole und stellen Sie sicher, dass Sie sich im richtigen Agenten für dieses Tutorial befinden

2. Klicken Sie auf das Default Welcome Intent

3. Scrollen Sie nach unten, löschen Sie die Antworten und fügen Sie sie hinzu: Welcome to our Demonstration Restaurant. When and for whom would you like to book a table?

4. Speichern anklicken

5. Klicken Sie auf den Menüpunkt Intents

6. Klicken Sie auf die Schaltfläche New Intent

7. Geben Sie ihm den Namen Table Booker

8. Fügen Sie unter Trainingsphrasen die folgenden Trainingsphrasen hinzu

   • Einen Tisch für Nicole am 10. um 13:00 Uhr, bitte.

   • Kann ich am 10.12.2021 um 14:00 Uhr einen Platz für Joseph buchen?

   • Ich möchte einen Tisch am 10.09.2020 um 16:00 Uhr für Amanda reservieren Sie werden feststellen, dass bei der Eingabe dieser Sätze einige Wörter farblich hervorgehoben werden. Achten Sie darauf, die Wörter doppelt anzuklicken und sicherzustellen, dass sie die richtigen Einheiten verwenden @sys.person, @sys.date und @sys.time.

9. Kreuzen Sie unter Aktionen und Parameter required für person, date und time

10. Fügen Sie Aufforderungen für jeden der Parameter hinzu, denn falls sie diese spezifischen Informationen während des Gesprächs nicht gesagt haben, werden sie aufgefordert, sie hinzuzufügen

Training phrases examples

1. In der Antwort können Sie Folgendes hinzufügen: Table booked for $person at $time on $date. Thank you!

2. Umschalten auf Set this intent as end of conversation, unter Antworten

3. Speichern anklicken

Table Booker Intent Overview

Interaktion über Voice mit dem Dialogflow-Agenten

Nun, da wir alle Teile eingerichtet haben, ist es an der Zeit, Ihre virtuelle Telefonnummer anzurufen und sie auszuprobieren. Lassen Sie uns durchgehen, was vor sich geht, und folgen Sie dann unserem letzten Schritt, um den Anruf zu tätigen!

Sobald Sie die Telefonnummer anrufen, die mit Ihrer Voice API-Anwendung verknüpft ist, um mit dem Dialogflow-Agenten zu interagieren, hören Sie die Bestätigungsmeldung: Connecting your call, please wait.. Dieser Text To Speech von der Vonage API-Plattform wird abgespielt, sobald die Plattform Ihren Anruf entgegennimmt.

Sobald die WebSocket-Verbindung hergestellt ist, spielt die Vonage API-Plattform den Text To Speech Hello an den Dialogflow-Agenten ab (Sie als Anrufer werden das nicht hören).

Sie haben soeben die vom Dialogflow-Agenten zurückgelesenen Einstellungen vorgenommen.

An diesem Punkt interagieren Sie mit den Intents, die Sie im vorherigen Abschnitt dieses Tutorials eingerichtet haben, um einen Tisch zu buchen.

Sie sehen die Transkriptionen auf der Dialogflow-Referenzverbindungsanwendungskonsole und auch auf der Dialogflow-Beispielanwendungskonsole für die Voice API.

Wenn Sie die Ergebnisse der Stimmungsanalyse sehen möchten, müssen Sie die Cloud Natural API in der Google Cloud-Konsole aktivieren. Wenn sie nicht aktiviert ist, erhalten Sie eine Fehlermeldung ähnlich der folgenden PERMISSION_DENIED: Cloud Natural Language API has not been used in project xxxx before or it is disabled.

Gehen wir nun zum letzten Schritt über und sehen wir uns alle Bausteine zusammen in Aktion an!

Folgen Sie den Schritten

1. Rufen Sie die mit Ihrer Voice API-Anwendung verknüpfte Telefonnummer an und interagieren Sie mit dem Dialogflow-Agenten

2. Hier ist eine Möglichkeit, wie Sie das Gespräch testen können:

   1. Vonage Websocket: Ihr Anruf wird verbunden, bitte warten.

   2. Bot: Willkommen in unserem Vorführrestaurant. Wann und für wen möchten Sie einen Tisch reservieren?

   3. Sie: Ich möchte einen Tisch am 01.09.2022 um 10:00 Uhr für Tanya reservieren.

   4. Antwort des Botschafters: Tisch reserviert für Tanya um 10:00 am 01/09/2022. Dankeschön!

   Ende des Gesprächs

Herzlichen Glückwunsch

Sie haben dieses Tutorial zum Telefonieren mit einem Dialogflow-Agenten unter Verwendung einer Vonage WebSockets-Integration abgeschlossen.

Ressourcen

Sie finden das Dialogflow-Referenzbeispiel und Sample Voice Application auf Github.

Prüfen Sie das WebSockets-Referenzhandbuch.

Prüfen Sie die Ein Blogbeitrag, der ngrok erklärt.

Sie können sich auch ein ähnliches Beispiel ansehen, bei dem ein Amazon Lex Bot.

Ich hoffe, dass Ihnen dies gefallen hat. Sie können mich gerne kontaktieren auf Twitter oder treten Sie unserem Slack-Kanal der Gemeinschaft.