Erstellen Sie einen WhatsApp-Chatbot, keine App

Vor langer Zeit habe ich eine Web-App für ein Unternehmen (über 200.000 Mitarbeiter) erstellt. Das Feedback zur Web-App hat mich zu einem Experiment veranlasst. Was würde passieren, wenn ich anstelle einer Web-App einen WhatsApp-Chatbot zur Lösung des spezifischen Anwendungsfalls erstellen würde? Würde es den Leuten besser gefallen? Wäre es nützlicher?

Aber die Geschichte ist viel größer als das. Chatbots haben so viel Potenzial! In diesem WhatsApp-Chatbot-Tutorial wollte ich meine Lernreise, die von mir entdeckten Best Practices und meine Vorhersagen zur Frage „App vs. Chatbot“ teilen. Und darüber hinaus: Werden Chatbots eines Tages alle klassischen Apps ersetzen?

Das Unternehmen, für das ich arbeitete, hatte ein Büro für rund 2.000 Mitarbeiter mitten in der Innenstadt von Tel Aviv. Der Parkraum ist sehr begrenzt, deshalb parken die Leute auf Plätzen, die absichtlich für das Parken in zweiter Reihe vorgesehen sind, wo ein Auto ein anderes blockiert. Bei jeder Doppelparklücke parkt der erste Fahrer innen und der zweite außen.

Vom Whiteboard zur Web-App

Bevor es eine App gab, gab es eine große Tafel. Alle Fahrer markierten, wo sie parkten, sowie ihre Namen und Telefonnummern. Vor dem Verlassen des Büros musste ein Fahrer überprüfen, ob jemand sein Auto blockierte. Wenn ja, müssten sie den anderen Fahrer anrufen und hoffen, dass sie nicht mitten in einer Besprechung waren, damit sie ihr Auto aus dem Weg räumen könnten.

Um den Prozess zu verbessern, habe ich eine Web-App erstellt.

Es war einfach. Kein Backend. Kein Serverhosting. Keine Datenbankpflege. Nicht einmal irgendein UI-Framework. Kein Webpack und überhaupt keine JS-Bundles! Nur Vanille-JavaScript.

Es wurde mit dem kostenlosen statischen Seitenhosting von GitHub gehostet. Die Datenbank war FireBase, also hatten wir Echtzeitunterstützung und JSON-Unterstützung und brauchten kein Backend.

Die Benutzeroberfläche war unkompliziert. Benutzer würden alle Parkplätze sehen und auf einen leeren klicken, um ihre Details einzugeben. Wenn sie bereits geparkt waren, würde es die Daten aus dem lokalen Speicher des Browsers nehmen. Wenn sie auf einen registrierten Slot klickten, sahen sie die relevanten Kontaktdaten und konnten den Fahrer anrufen.

Es hat fast ein Jahr lang super funktioniert. Weniger als ein Tag Entwicklung half und sparte vielen Menschen Zeit – eine gute Investition.

Von der Web-App zum Chatbot

Eines Tages kündigte Facebook an, dass sie eine API für WhatsApp veröffentlichen werden. Am nächsten Tag kaufte mein Bruder ein Amazon Echo mit Alexa. Ungefähr zu dieser Zeit begann ich auch, Google Assistant überall zu sehen.

Ich begann zu denken, dass sich die Welt vielleicht in Richtung Chatbots bewegt, also sollte ich experimentieren. Würden Benutzer lieber Chatbots verwenden? Muss ich weniger unterstützen? Würde es neue Metafunktionen einführen, indem es einfach eine andere Infrastruktur nutzt?

Ich habe einige Rückmeldungen zur regulären Web-App erhalten, und ich glaubte, dass sie sich damit befassen könnte, wenn ich einen WhatsApp-Chatbot erstellen würde:

• Die App funktionierte auf einigen alten Mobiltelefonen nicht gut.
• Es funktionierte nicht unter der Erde (wo der Parkplatz ist - dort gibt es kein gutes Mobilfunksignal).
• Die Fahrer wollten Nachrichten an die Blockierer senden, anstatt den Telefonwähler zu öffnen.
• Fahrer wollten Push-Benachrichtigungen erhalten, wenn sie jemand blockiert, anstatt jedes Mal die Web-App zu öffnen, bevor sie losfahren.

Man darf nicht vergessen, dass die Entwickler von Chat-Plattformen wie Telegram oder WhatsApp jahrelang Tag und Nacht daran gearbeitet haben, die Stabilität ihrer Apps sicherzustellen. Durch die Nutzung ihrer Ressourcen und die Entwicklung nur einer kleinen Engine zur Beantwortung von Fragen würde die harte Arbeit der Wartbarkeit den Entwicklern der Chat-Plattform überlassen. Alles, was ich tun musste, war herauszufinden, wie man einen WhatsApp-Chatbot erstellt.

Unmittelbar nachdem ich mit der Entwicklung des neuen Parkassistent-Chatbots begonnen hatte, wurde mir klar, wie fantastisch die Idee war. Es war so einfach und schnell, neue Funktionen hinzuzufügen, und ich musste nicht einmal End-to-End-Tests durchführen.

Kein Signal? Kein Problem.

Twittern

Außerdem brauchte ich keinen komplizierten CI/CD-Prozess mehr. Wenn es in einem Chat-Emulator funktioniert, würde es überall funktionieren. Kein .apk , kein Xcode, kein App Store oder Google Play. Der Chatbot konnte Nachrichten an Benutzer senden, ohne dass ich Geräte registrieren, PubSub oder ähnliche Dienste für Push-Benachrichtigungen verwenden oder Benutzertoken speichern musste. Kein Authentifizierungssystem erforderlich – ich habe die Telefonnummer des Benutzers als Identifikation verwendet.

Kein Signal? Kein Problem. Ich musste keine Offline-Unterstützung mit Manifest-Dateien hinzufügen: WhatsApp hat sie mir sofort einsatzbereit gegeben. Die Nachricht würde früh genug ausgehen, wenn der Benutzer zu einer höheren Ebene gehen würde, wo WLAN besser war.

Dann wurde mir klar, dass jedes Mal, wenn eine Chat-Plattform ein neues Feature einführte, meine App sofort davon profitieren würde. Wow – das ist jetzt eine wirklich gute Investition. (Um fair zu sein, es besteht auch das Risiko, dass neue Funktionen die Funktionalität einschränken oder bahnbrechende Änderungen hervorrufen, die mehr Entwicklungsaufwand erfordern, also denken Sie sorgfältig nach, bevor Sie geschäftskritische Aufgaben implementieren).

Writing Parking Assist , ein Prototyp eines WhatsApp-Chatbots

Um einen WhatsApp-Chatbot zu erstellen, besteht die erste Herausforderung darin, Nachrichten von WhatsApp an Ihr Programm zu senden. Die einfachste Lösung, die ich gefunden habe, ist die Verwendung einer gemeinsamen Twilio-Telefonnummer. Es ist nur für die Entwicklung gedacht – wenn Entwickler in die Produktion wechseln, möchten sie eine dedizierte Telefonnummer verwenden.

Die kostenlosen Nummern von Twilio werden jeweils von vielen Twilio-Benutzern gemeinsam genutzt. Um die Endbenutzer einer App von denen der Apps anderer Twilio-Benutzer zu unterscheiden, müssen Endbenutzer eine vordefinierte Nachricht an den Chatbot senden.

Nachdem ein Benutzer eine spezielle Nachricht an die gemeinsam genutzte Nummer gesendet hat, werden alle Nachrichten von seiner Nummer an Ihr Twilio-Konto und Ihre Webhooks weitergeleitet. Aus diesem Grund wird in der Produktion eine dedizierte Nummer benötigt – es gibt keine Garantie dafür, dass ein bestimmter Benutzer nur eine App auf einer bestimmten gemeinsam genutzten Nummer verwenden möchte.

Versenden von WhatsApp-Nachrichten

Auf Twilios „Programmierbares SMS-Dashboard“ gibt es einen „WhatsApp Beta“-Link in der linken Navigationsleiste:

Wenn sie darauf klicken, sehen Entwickler eine Seite mit der Option „Sandbox“.

Um Benutzer zuzuordnen, müssen sie eine spezielle Nachricht an die von Twilio bereitgestellte Nummer senden. Sobald die Benutzer dies getan haben, können wir über Twilio Nachrichten an sie senden und Nachrichten von ihnen verarbeiten.

Hier ist ein Beispiel für das Senden einer Nachricht mit cURL:

 curl 'https://api.twilio.com/2010-04-01/Accounts/{user_account}/Messages.json' -X POST \ --data-urlencode 'To=whatsapp:+{to_phone_number}' \ --data-urlencode 'From=whatsapp:+{from_phone_number}' \ --data-urlencode 'Body={escaped_message_body}' \ -u {user_account}:user_token

Dies ist eine einfache Textnachricht. Sie können Ihren Nachrichten aber auch Medien (Bilder etc.) anhängen. Hier ist ein Node.js-Beispiel:

 function sendWhatsApp(to, body, media) { const auth = "twilio_clientid:twilio_api" const sendURL = "https://api.twilio.com/2010-04-01/Accounts/{account_id}/Messages.json" const res = await fetch(sendURL, { headers: { Authorization: "Basic " + Buffer.from(auth).toString("base64"), }, method: "POST", body: objToFORM( JSONRemoveUndefined({ To: "whatsapp:+972" + to.replace(/-/g, "").replace(/^0/, ""), From: "whatsapp:+18454069614", Body: body, MediaUrl: media, }), ), }) } function objToFORM(obj) { const params = new URLSearchParams() for (var a in obj) { params.append(a, obj[a]) } return params } function JSONRemoveUndefined(obj) { return JSON.parse(JSON.stringify(obj)) }

Das ist es: Jetzt können wir anfangen, Nachrichten an Kunden zu senden! Aber es ist wichtig, sich an die zwei wichtigsten technischen Einschränkungen von WhatsApp-Nachrichten zu erinnern:

1. Wenn der Bot eine Nachricht erhält, können Sie kostenlos eine SMS-Antwort senden. Mehr als das kostet Geld.
2. Der Bot kann nur während des 24-Stunden-Fensters, das beginnt, wenn er eine Nachricht von einem Benutzer erhält, Nachrichten an Benutzer senden. Außerhalb dieses Fensters kann der Bot nur Nachrichten mit genehmigten Vorlagen senden, wie wir später sehen werden.

Empfangen von WhatsApp-Nachrichten

Das Senden von Nachrichten war ziemlich einfach, aber das Empfangen und Verarbeiten von Nachrichten ist noch einfacher.

Auf der „Sandbox“-Seite von Twilio können Entwickler definieren, wohin Twilio Nachrichten senden soll, die es unter der gemeinsamen WhatsApp-Nummer erhält. Während der Entwicklung können Dienste wie Ngrok oder Serveo öffentliche URLs bereitstellen, die an lokale Entwicklercomputer weitergeleitet werden.

So sehen Twilio-WhatsApp-Nachrichten aus:

 { "NumMedia": "0", "SmsSid": "{sms_id}", "SmsStatus": "received", "Body": "Example Message from user", "To": "whatsapp:+{phone_number}", "NumSegments": "1", "MessageSid": "{message_sid}", "AccountSid": "{account_sid}", "From": "whatsapp:+{phone_number}", "ApiVersion": "2010-04-01" }

Das ist alles, was wir brauchen. Wir können jede Programmiersprache verwenden, um diese Nachricht zu erhalten, sie zu analysieren und zu versuchen, zu verstehen, was die Benutzer fragen. Dies wird wahrscheinlich zu einigen CRUD-Operationen auf einer Datenbank führen, nach denen der Bot die entsprechenden Informationen (oder Erfolgs-/Fehlermeldungen) in seiner Antwort an den Benutzer liefern kann. Das sind die Grundlagen zum Erstellen eines WhatsApp-Chatbots.

Nachrichtenvorlagen

Wie bereits erwähnt, können Chatbots Freestyle-Nachrichten nur an Benutzer senden, die „aktuell“ mit ihnen interagieren, dh während des 24-Stunden-Fensters. Wenn Sie jedoch Nachrichten an neue Benutzer oder außerhalb des Fensters senden möchten, müssen Sie vorab genehmigte Nachrichtenvorlagen verwenden. Dies soll Spam verhindern.

In meinem Anwendungsfall wollte ich Treiber aktualisieren, wenn sie von jemandem blockiert wurden, auch wenn sie keine Benutzer des Chatbots sind. Klicken Sie in Twilio auf „Absender“ und „Konfigurieren“.

Dies ist die Vorlage, die ich gewählt habe:

 {{1}} is blocking your exit from the parking lot. I will notify you when they leave.

Einige Tage später genehmigte Facebook meine Vorlage, und ich konnte damit beginnen, diese Nachrichten an alle zu senden, die WhatsApp hatten, nicht nur an Fahrer, die eine Nachricht an den Chatbot gesendet hatten.

Das Senden einer Nachricht aus einer Vorlage ist genau wie das Senden einer normalen Nachricht, wobei dieselbe API verwendet wird. WhatsApp sieht automatisch, dass es mit einer Vorlage übereinstimmt, und genehmigt die Nachricht.

Nicht nur für Parkassistent

Diese Strategie ist für mich spannend, wenn ich mir einen Online-Shop vorstelle: Vielleicht können die Leute eines Tages alles über Chatbots kaufen. Es wäre so einfach wie das Senden von WhatsApp-Nachrichten und das Anhängen von Bildern. Stellen Sie sich vor, Benutzer könnten jeder WhatsApp-Nachricht echtes Geld beifügen. Es wäre sehr einfach, Dinge zu kaufen. Benutzer könnten problemlos alles kaufen, indem sie mit dem Chatbot eines Lieferanten sprechen.

Stellen Sie sich einen Chatbot vor, der Waze oder Google Maps ersetzt. Sie senden ihm eine SMS mit Ihrem Ziel. Die Chatbot-Plattform verfolgt Ihren Standort und der Chatbot sendet Ihnen eine aufgezeichnete Nachricht, die automatisch mit der in Echtzeit gesprochenen Richtung der Navigation abgespielt wird.

Es ist keine Fantasie. WhatsApp unterstützt derzeit die Standortfreigabe in Echtzeit – alles, was sie brauchen, ist die Option, empfangene Nachrichten automatisch abzuspielen, und voila.

Denken Sie an einen Waze-Chatbot oder einen Taxi-Chatbot anstelle der Gett- oder Uber-Apps. Du schickst eine Nachricht, wo du bist, dann kommt das Taxi und du bezahlst per WhatsApp. So einfach.

Einige Leser denken vielleicht: „Bevorzugen die Benutzer nicht grafische Oberflächen und nicht nur das Tippen?“ Ich glaube, dass Chatbot-Plattformen dem Chatbot-Besitzer die Möglichkeit geben werden, während der Konvertierung Schaltflächen, Bilder und reine HTML-Boxen zu senden. Facebook unterstützt bereits Webview für Messenger. Benutzer müssen nichts installieren, verwenden einfach ihre bevorzugte Instant-Messaging-App.

Diese Vorteile sind der Grund, warum Entwickler WhatsApp-Chatbots erstellen möchten, um wichtige Aufgaben zu erledigen, wie z. B. das Geben sofortiger maßgeblicher Antworten zur Coronavirus-Pandemie, um die Verbreitung von Fehlinformationen einzudämmen.

TL;DR: 7 Schlussfolgerungen zur Migration von Web-Apps zu Chatbots

Zusammenfassend:

• Oft kann die Entwicklung eines Chatbots die Entwicklungszeit erheblich verkürzen, da keine grafische Benutzeroberfläche entworfen und geplant werden muss. (Trotzdem lohnt es sich, sich vor Beginn die Feinheiten des Chatbot-UX-Designs anzusehen, um aus den Fehlern anderer zu lernen.)
• Es ist viel einfacher, Chatbots neue Funktionen hinzuzufügen. Entwickler müssen keine aktuellen Elemente neu entwerfen oder ändern. Der Chatbot muss nur anfangen, die neue Art von Nachricht zu verstehen.
• Chatbots sind standardmäßig für Menschen mit besonderen Bedürfnissen viel besser zugänglich.
• Eine plattformübergreifende Lösung muss nicht angepasst werden. Die Chatbot-Plattform tut das bereits.
• Benutzer vertrauen Chatbots viel mehr, wenn es um den Austausch von Informationen geht. Sie müssen nicht um Erlaubnis fragen oder Warnungen anzeigen – der Benutzer kann beispielsweise einfach ein Bild aus seiner Galerie auswählen und an Ihren Chatbot senden – die Erlaubnis zum Zugriff auf die Bildergalerie ist der Chat-Plattform bereits erteilt.
• Chat-Plattformen erleichtern den Umgang mit Push-Benachrichtigungen. Push-Benachrichtigungen machen den Unterschied zwischen Apps, die Benutzer vergessen, und Apps, mit denen Benutzer regelmäßig interagieren.
• Chat-Plattformen übernehmen für Sie den Wechsel zwischen Offline- und Online-Bedingungen.

So erstellen Sie einen WhatsApp-Chatbot: Abschiedsratschläge und Best Practices

Die Vorzüge des Schreibens eines Chatbots sind ziemlich klar. Entwicklern, die bereit sind, einen zu bauen, wird geraten, klein anzufangen, mit einem Chatbot, der eine Nachricht versteht. Und kommt damit gut zurecht.

Chatbots sollten sich an Kurznachrichten halten. Leute lesen keine langen Nachrichten. Wenn Sie etwas Wichtiges zu senden haben, das sich nicht prägnant ausdrücken lässt, ist es besser, die Nachrichten auf mehrere kleine aufzuteilen.

Chatbots mit Persönlichkeit kommen besser an. Sogar ein minimales „menschliches Sprechen“ reicht weit aus im Vergleich zu einem „Systemmeldungsformalitäts“-Ansatz: „Ich werde die Parkplatzkarte für Sie aktualisieren“ statt „Die Datenbank wurde aktualisiert“. Ein Chatbot sollte dem Benutzer das Gefühl vermitteln, dass es sich um eine Maschine handelt, die dem Benutzer dient, und nicht um eine Blackbox, die technische Operationen ausführt, die er möglicherweise nicht verstehen kann.

Dieses WhatsApp-Chatbot-Tutorial ging nicht auf die Besonderheiten des Parsens der Nachrichten in natürlicher Sprache ein, die Benutzer an Chatbots senden. Aber aufstrebende Anbieter von Chatbot-Entwicklungsdiensten können gerne den Quellcode des WhatsApp Parking Assistant-Bots (insbesondere hackparkDialogFlow.ts , der Anfragen des Benutzers als Aktionen akzeptiert) durchgehen, um ein Gefühl dafür zu bekommen, wie dieser Aspekt funktioniert.

Einen ausführlicheren Artikel darüber, wie Sie verschiedene Arten von Benutzernachrichten erkennen können – und dabei gleichzeitig dem Dependency-Injection-Ansatz bei der Programmierung folgen – finden Sie im TypeScript-Chatbot-Tutorial von Toptal.

Viel Glück mit Ihrer eigenen WhatsApp-Chatbot-Entwicklung!