Ein interaktives Board erstellen: WhatsApp, SMS und MMS auf einer Website (Teil 2)

Übersicht

Unter Teil 1haben wir eine interaktive Nachrichtentafel erstellt, um SMS-, MMS- und WhatsApp-Nachrichten zu empfangen und sie auf einer Webseite anzuzeigen. Diese Anwendung verwendet die Vonage Messages API und einen Express-Server.

In Teil 2 werden wir diese Funktionalität mit einer kleinen Abwandlung nachbilden. Wir verwendenVonage AI Studioum eingehende Nachrichten zu verarbeiten. Unsere Nachrichten werden in einer Airtable-Datenbank gespeichert und dann von unserer Node.js-Anwendung angezeigt.

Vonage AI Studio ist eine Low-Code-Plattform, die es Entwicklern und Nicht-Entwicklern leicht macht, virtuelle Assistenten zu erstellen. Mit der intuitiven Drag-and-Drop-Oberfläche können Sie Konversationsabläufe entwerfen.

Sie finden den Code für das Admin Dashboard Display auf diesem GitHub-Repository. Klonen Sie, und folgen Sie dem Tutorial unten, das ich für Sie vorbereitet habe und in dem alle Bits Schritt für Schritt erklärt werden.

Projekt Gliederung

• Benutzer Interaktion: Ein Benutzer startet die Interaktion, indem er eine WhatsApp-Nachricht an eine bestimmte virtuelle Telefonnummer von Vonage sendet, die mit der Vonage-Anwendung verbunden ist, die den Datenfluss enthält.

• Nachricht Empfang: Der Gesprächsfluss beginnt mit dem Knoten "Start", der es dem Benutzer ermöglicht, Nachrichten zu senden oder zu sehen.

• Speicherung von Daten: Nach der Verarbeitung wird die Nachricht in Airtable gespeichert, einer Online-Plattform zur Erstellung und gemeinsamen Nutzung relationaler Datenbanken.

• Anzeige: Bauen Sie unser Admin Dashboard: Eine Webseite, die ständig aktualisiert wird, holt diese Nachrichten von Airtable ab und zeigt sie an.

Informationen in der Airtable-Datenbank speichern

Erstellen wir zunächst unseren Datenspeicher, also erstellen Sie ein Konto bei Airtable. Sobald Sie eingeloggt sind, finden Sie die folgenden Schritte auf dem Airtable-Dashboard. Im Vergleich zu Teil 1 habe ich mich bei Teil 2 für eine Vereinfachung entschieden und nur eine Tabelle mit dem Namen Messages erstellt.

1. Erstellen Sie eine Basis mit dem Namen "Interaktives Board", indem Sie auf "+ Basis erstellen" klicken, und wählen Sie optional eine Themenfarbe und ein Symbol aus; ich habe den Rest der Einrichtung übersprungen, aber Sie können ihn gerne ausfüllen, wenn Sie möchten, und das Ende der Basiserstellung durchlaufen, wo ich zur Basis "Nachrichten" weitergeleitet werde.

2. Sie sehen nun einige leere, nummerierte Zeilen. Legen wir nun eine Tabelle mit dem Namen Nachrichten an. Sie hat die folgenden Spalten: 'Nachricht', 'Nummer' (Telefonnummer), 'Status' vom Typ 'Single Select' und fügen Sie die Optionen 'Accepted', 'Pending' und 'Rejected' hinzu. Und schließlich 'ImageUrl'.

3. Erstellen von Ansichten wie "Rasteransicht" zum Filtern von Nachrichten

Integrieren Sie ein Moderationssystem für die Genehmigung oder Ablehnung von Nachrichten

Sobald die Einträge in Airtable erfasst sind, haben sie den Status "Ausstehend". Ihre Moderatoren können auf die Airtable-Datenbank zugreifen und den Status jedes Datensatzes manuell entweder auf "Abgelehnt" oder "Angenommen" ändern. Wenn sie akzeptiert werden, werden sie auf der interaktiven Board-Website ausgegeben.

Erstellen Sie den AI Studio Agent: Schritt-für-Schritt-Anleitung

Ich werde jeden Schritt für Sie aufschlüsseln, um den Ablauf für unsere Conversational App zu erstellen.

1. Zugang zu AI Studio:

   • Anmelden/ Sign up to Vonage AI Studio. Sie finden es auf dem Vonage Dashboard, unter dem Menü auf der linken Seite. Wählen Sie "AI Studio" und klicken Sie auf "Go to AI Studio".

AI Studio

1. Einrichten des WhatsApp-Agenten:

   • Wählen Sie "WhatsApp" als Agententyp und klicken Sie auf "Weiter".

     Whatsapp Agent Creation

   • Geben Sie die erforderlichen Details wie Region, Agentenname (z. B. "Interactive Board"), Sprache und Zeitzone (z. B. Europa/London) ein und klicken Sie auf "Weiter".

   • Agent Creation Details

2. Vorlage Auswahl:

   • Klicken Sie auf "Agent erstellen". Um eine neue App zu erstellen, besuchen Sie Vonage AI Studio-Agenten.

   • Wählen Sie die Vorlage "Von Grund auf neu beginnen".

   • Wählen Sie "Ereignis eingehende Sitzung" und klicken Sie auf "Erstellen". Dieser Schritt ist wichtig, damit die Benutzer die Sitzung mit dem Agenten einleiten können.

Erstellen Sie die konversationelle Anwendung: Definieren des Gesprächsablaufs

Dieser Abschnitt befasst sich mit den Besonderheiten der Erstellung einer Konversationsanwendung mit WhatsApp-Integration:

Vonage AI Agent Dashboard

Eine 'Begrüßung' erstellen (Nachricht senden) Block direkt nach der START Route zur Begrüßung der Benutzer, erklären Sie die Fähigkeiten des Bots in der Eingabe "Agent sagt" und klicken Sie auf "Speichern und Beenden".

Greeting Node

Erstellen einer Eingabe sammeln Konversationsknoten an, wählen Sie den Parameter MESSAGE, wählen Sie 'List Messages' und fügen Sie einen Abschnitt für 'See Messages' und einen weiteren für 'Send Messages' hinzu, fügen Sie alle weiteren Informationen hinzu, die Sie für geeignet halten, um es für den Benutzer verständlich zu machen, und klicken Sie auf 'Save and Exit'.

Input collection

Erstellen einer 'Bedingungen' Gesprächsknoten (ich habe ihn "Menü Bedingung: sehen oder senden" genannt) mit zwei Bedingungen: 'Nachricht sehen' und 'Nachricht senden'. Die erste Bedingung sollte Parameter sein: MESSAGE, Operation: Enthält, Wert: Sehen. Die zweite Bedingung sollte sein: Parameter: MESSAGE, Operation: Enthält, Wert: Senden.

Menu Condition

Nach dem Bedingungsblock werden wir zwei Blöcke erstellen:

1. Ein Knoten "Nachrichten senden", der mit unserer "Siehe"-Bedingung verknüpft ist (ich habe ihn "Nachricht an Siehe Nachrichten" genannt). Die Nachricht sollte lauten: Wenn Sie alle ausgegebenen Nachrichten sehen möchten, klicken Sie bitte auf diesen Link.

   Wir werden diesen Link später mit dem ngrok-Link aktualisieren, den Sie mit Ihrem Express-Server verwenden werden. Im Moment können Sie ihn mit einer Dummy-Nachricht belassen.

   Message to See Messages

2. Ein zweiter Knoten, der mit "Senden" verknüpft ist, vom Typ "Eingabe sammeln" (ich habe ihn "Nachrichten senden" genannt), und fügen Sie in der Eingabeaufforderung eine Nachricht in der Art von "Schicken Sie mir die Nachricht oder das Bild, das Sie teilen möchten!" hinzu und wählen Sie "Text" und "Bild" als erwartete Eingabe, da wir erwarten, dass unsere Benutzer dies senden!

Send Message

Lassen Sie uns nun die Klassifizierung verwenden, um die Eingaben unserer Benutzer zu verarbeiten. In Teil 1 haben wir eine Datei mit den blockierten Wörtern für unsere Webanwendung hinzugefügt. Jetzt, in Teil 2, können wir mit Vonage AI Studio einen Klassifizierungsknoten. Sie finden ihn im Menü auf der linken Seite: Knoten > Konversation > Klassifizierung. Fügen Sie diesen Block in den Ablauf ein, direkt nach "Send Messages", und füllen Sie ihn mit den folgenden Informationen:

Classification Intent

Klassifizierungsparameter: MESSAGE Wir werden zwei Intents erstellen: Nachricht senden und Wörter blockieren Im Menü auf der linken Seite können Sie auf "Eigenschaften" klicken und eine neue Absicht erstellen, oder Sie können sogar in der Klassifizierungsansicht, in der Sie sich gerade befinden, auf "Absicht" klicken und von dort aus eine neue Absicht erstellen und die Trainingsgruppe für jede Absicht hinzufügen.

Wörter blockieren: Sie können die Wörter hinzufügen, die für Ihren Textfluss blockiert sind (z. B. Schimpfwörter).

Nachricht senden: Sie können einige Beispiele für Nachrichten hinzufügen, die Nutzer senden können, z. B.: "Großartige Veranstaltung", "Ich habe eine tolle Zeit", "Ich liebe das hier, aber ich wünschte, es gäbe Sushi".

Erfahren Sie mehr über Klassifizierung und denken Sie an künftige Verbesserungsschritte, indem Sie eine Stimmungsanalyse integrieren, um negative Nachrichten automatisch zu erkennen.

Erstellen Sie einen Knoten zum Senden von Nachrichten mit dem Namen "Allowlist alert". Der Agent sollte sagen: "Die vorherige Nachricht verstieß gegen unsere Richtlinien für erlaubte Wörter. Bitte senden Sie eine weitere Nachricht.".

Allowlist alert

Die Klassifizierungsoption "Blockliste" sollte mit ihr verknüpft werden, und sie sollte mit dem Nachrichteneingang "Nachrichten senden" verknüpft werden.

Links

Als nächstes werden wir einen Webhook-Knoten (ich habe ihn "Webhook: Create record" genannt), um unsere Nachrichten zu unserem Airtable-Backend hinzuzufügen. Um Datensätze zu Airtable hinzuzufügen, klicken Sie auf Integrationen > Webhook und geben Sie die folgenden Informationen ein:

Methode: POST Anfrage URL: https://api.airtable.com/v0/BASE_URL/Messages Kopfzeilen: Key: Autorisierung, Wert: Bearer 'YOUR_AIRTABLE_ACCESS_TOKEN' Schlüssel: Inhalts-Typ, Wert: application/json

Webhook node

Anmerkung: Die Anfrage-URL muss mit Ihrer Tabelle in Airtable übereinstimmen

Wenn Sie nicht weiterkommen oder Zweifel haben, finden Sie eine ausführlichere Erklärung unter Geringer Code-Einsatz: AI Studio mit Airtable von Benjamin Aronov, in dem er ausführlich erklärt, wie man AI Studio mit Airtable verwendet.

Fügen Sie auf der zweiten Webhook-Registerkarte mit der Bezeichnung "Body" die folgenden Informationen vom Typ JSON hinzu. Das heißt, wir fügen die Nachricht hinzu, die der Benutzer gesendet hat und die entweder einen Text oder ein Bild enthält, weisen die Telefonnummer der Person zu, die mit diesem Agenten interagiert, und setzen den Status "Pending" (ausstehend), den die Moderatoren in Airtable in "Accepted" (angenommen) oder "Rejected" (abgelehnt) ändern können.

{
 "records": [
  {
   "fields": {
   "Message":"$MESSAGE",
    "Number": "$SENDER_PHONE_NUMBER",
	"ImageUrl": "$MESSAGE",
    "Status":"Pending"
   }
  }
 ]
}

Verknüpfen Sie die Webhook-Erfolgsoption mit einem neuen Knoten "Nachricht senden". Erstellen Sie einen neuen Knoten "Nachricht senden", nennen Sie ihn "Medienempfang" und fügen Sie unter Agent Says "Thanks for sending this over!" hinzu.

Media receipt

Verknüpfen Sie die Option "Webhook fehlgeschlagen" mit der vorherigen Option "Nachricht senden, sammeln", um sie erneut anzufordern. Verknüpfen Sie den Knoten "Medienempfang" mit der bereits vorhandenen "Nachricht zum Anzeigen von Nachrichten" und dann mit "Konversation beenden".

Flow

Lassen Sie uns über Code sprechen: Wie wir unser Admin-Dashboard erstellen

Der Code ähnelt dem, den wir in Teil 1 gesehen haben. Wir können jedoch die blocklist.txt eliminieren, da dies nun innerhalb des Konversationsflusses in Vonage AI Studio und der Benutzererstellung und dem Einfügen der Datensätze in Airtable gehandhabt wird. Wir behalten jedoch den Endpunkt, der den Status der Nachricht ändert "/messages/:messageId/:status" zusätzlich zu dem Endpunkt, der die Nachrichten abruft /messages. So sieht die index.js für dieses Projekt aus.

Wie in Teil 1 erwähnt, sollten Sie ngrok laufen lassen und zum AI Studio Agent Flow zurückkehren und den Knoten See Messages mit der bereitgestellten ngrok-URL aktualisieren; Sie können jederzeit Ihre Website hosten und die dort verlinkte Webseite hinzufügen, für dieses Demonstrationstutorial reicht die Verwendung von ngrok von unserem localhost aus.

Testen Sie es aus

Oben rechts im Vonage AI Studio sehen Sie eine Schaltfläche "Tester", mit der Sie Ihre Unterhaltung testen können, ohne sie zu veröffentlichen. Wählen Sie "Eingehende Sitzung" und klicken Sie auf die Schaltfläche "Chat starten". Sie können die Parameter, mit denen der Agent arbeiten soll, voreinstellen (indem Sie auf das Einstellungssymbol/ Zahnradsymbol klicken) und den Testmodus auswählen. Sehen Sie sich die Tester-Seite um mehr zu erfahren.

Mögliche Erweiterungen

MMS-Unterstützung hinzufügen

Wir haben den Eingang verwendet, um mit WhatsApp-Nachrichten zu beginnen, aber wenn wir MMS verwenden würden, könnten Sie immer die gleiche Nummer verwenden, die dem WhatsApp-Chatbot zugewiesen wurde. Es gibt einige Anforderungen für eine MMS-Nummer aus den USA 10DLC, TFN und Shortcode-Nummern, die Sie in Ihrem Dashboard haben, an andere Nummern innerhalb der Vereinigten Staaten. Sie können mehr erfahren über Wie man MMS-Nachrichten mit Node.js versendet.

SMS-Unterstützung hinzufügen

In Vonage AI gibt es eine Aktion namens "SMS senden". Sie können diesen Block zu Ihrem Gesprächsverlauf Um eine SMS-Nachricht zu senden, füllen Sie die Felder mit den Absender- und Empfängernummern und dem Text der Nachricht aus, klicken Sie auf "Speichern und beenden" und verbinden Sie ihn mit dem Knoten, an den die Nachricht gesendet werden soll. Sie können mehr erfahren über SMS-Versand mit Vonage AI.

Veröffentlichen Sie Ihren Agenten

Als ich mit der Erstellung dieser Demo-Konversations-App fertig war, wollte ich sehen, wie sie auf WhatsApp aussieht, und ich wollte in der Lage sein, meine Änderungen zu versionieren und zu veröffentlichen. Zu diesem Zweck kaufte ich eine Telefonnummer, wies sie dem Agenten zu, verknüpfte sie mit der Nachrichten-API und erstellte ein WhatsApp-Geschäftskonto mit meiner neu erworbenen Nummer. Sie können mehr darüber erfahren wie Sie Ihren Agenten veröffentlichen um Ihren Agenten zu veröffentlichen und ihn mit anderen zu teilen!

Schlussfolgerung

Prüfen Sie die Vonage AI-DokumenteTeilen Sie Ihre Erfahrungen, Ihr Feedback und alle innovativen Anwendungen, die Sie mit unseren APIs gefunden haben, mit unserer Community über X, früher bekannt als Twitter oder die Slack-Gemeinschaft.