Ohne WeChat kein Leben (Teil III): Implementierung eines Echo-Dienstes

In dieser dreiteiligen Serie über WeChat wird Léon Ihnen zeigen, wie Sie 'die chinesische Alternative zu WhatsApp' verändert das On- und Offline-Leben der chinesischen Verbraucher und zwingt Unternehmen dazu, ihre Marketing- und Vertriebsstrategien zu überdenken. In den beiden vorangegangenen Teilen hat er für die Notwendigkeit einer Präsenz auf WeChat für Unternehmen mit chinesischen Kunden argumentiert und einen Überblick über die Funktionen gegeben. In diesem Teil zeigt er Ihnen, wie Sie mit Hilfe der WeChat-APIs einen einfachen Echo-Service aufbauen können. Nach den beiden vorangegangenen eher theoretischen Beiträgen ist es nun an der Zeit, sich die Hände schmutzig zu machen. Wie Sie sich vielleicht aus Teil 2 dieser Serie erinnern, können Unternehmen ein offizielles Konto registrieren (OA) auf WeChat, um Zugang zu allen APIs zu erhalten, die die Plattform bietet. Ein OA taucht in der Chatliste eines Benutzers auf, entweder zwischen den regulären Chats oder in einem speziellen Ordner, und kann Nachrichten an Benutzer senden und empfangen oder andere nützliche On-Demand-Dienste im Chat anbieten. Heute werden wir einen Endpunkt erstellen, der den WeChat-Standards entspricht und mit der Debug-Sandbox auf WeChat getestet werden kann. Er wird jede Nachricht, die ein Benutzer sendet, als Echo wiedergeben, indem er mit dem umgekehrten Inhalt der Nachricht antwortet. Dies ist zwar kein wirklich überzeugendes Beispiel, aber es gibt Ihnen die richtigen Werkzeuge an die Hand, um verlockende Benutzererlebnisse in WeChat zu schaffen. (und es zwingt Sie, ein WeChat-Konto zu registrieren ;)).

Wir werden den Endpunkt mit Express erstellen, einer Bibliothek zur Erstellung von Webanwendungen auf Node.js, aber es ist wichtig zu verstehen, dass jede Art von HTTP-Server verwendet werden kann. Wenn Sie ein bestehendes Backend haben, das mit WeChat integriert werden muss, können Sie es natürlich auf dem bestehenden Stack implementieren. Solange es die Anforderungen der (einfachen) Anforderungen, die WeChat stellt, genügt es. Lassen Sie uns beginnen. Die endgültiger Code finden Sie auf GitHub.

Schritt 1: Einrichtung

1. Stellen Sie sicher, dass Sie die neueste (oder eine ziemlich aktuelle) Node.js und NPM auf Ihrem Rechner installiert haben.
2. Installieren Sie ngrok. Er wird als sicherer Tunnel zu Ihrem Rechner verwendet, auf den WeChat zugreifen kann, dazu später mehr.
3. Erstellen Sie ein neues Verzeichnis in Ihrem Dateisystem und initialisieren Sie ein neues Projekt (in dieser Anleitung wird davon ausgegangen, dass Sie auf einem macOS-Rechner arbeiten, Linux- oder Windows-Benutzer sollten die Befehle und Verzeichnisse entsprechend ändern):

4. Express über NPM installieren

5. Öffnen Sie den Code-Editor Ihrer Wahl und zeigen Sie auf das Verzeichnis, das Sie gerade erstellt haben (es sollte ein package.json, package-lock.json und node_modules/ Verzeichnis enthalten).

Schritt 2: Zugang zur WeChat Sandbox erhalten

1. Installieren Sie WeChat über den App Store oder Google Play falls Sie das noch nicht getan haben, und registrieren Sie ein Konto. Wenn Sie bereits bei WeChat sind, können Sie diesen Schritt überspringen.
2. Besuchen Sie die Sandkasten (Leider ist die Authentifizierung in der englischen Ausgabe nicht funktioniert, also werden wir die chinesische Ausgabe verwenden).
3. Melden Sie sich an, indem Sie auf die grüne Schaltfläche (ç™"å½- 'anmelden') und den QR-Code scannen (Sie finden den Scanner, indem Sie auf das Symbol '+' in der Chat-Übersicht).
4. Autorisieren Sie die Sandbox, indem Sie die Anmeldung auf Ihrem Telefon bestätigen.
5. Sie sollten auf eine Seite weitergeleitet werden, auf der Ihre appID und appsecret .

Schritt 3: Initialisieren Sie die Express-App

Erstellen Sie eine Datei index.js und richten Sie eine einfache Express-Anwendung ein:

Dies sollte ausreichen, um Ihre Einrichtung zu testen. Gehen Sie zurück zum Terminal und starten Sie Node im aktuellen Verzeichnis (oder index.js):

Sie sollten die Meldung sehen WeChat endpoint listening on port 3000... bei dem Terminal angemeldet. Öffnen Sie einen Browser und gehen Sie zu https://localhost:3000. Es sollte die einfache Meldung anzeigen 'WeChat Endpunkt'.

Schritt 4: Verbinden Sie Ihre App mit WeChat

Wir werden die Routen, die speziell für WeChat gelten, in einer neuen Datei einrichten. Erstellen Sie eine neue Datei wechat.jsin demselben Verzeichnis wie index.jsund richten Sie den Express-Router in dieser Datei ein:

Wenn Sie Ihren Server zum ersten Mal als Endpunkt eines offiziellen Kontos einrichten, muss er mit einem Echo-String antworten, um zu überprüfen, ob alles korrekt funktioniert. WeChat sendet eine Signatur, eine Nonce, einen Zeitstempel und einen Echo-String (echostr) zu Ihrer App, mit der Sie überprüfen können, ob es tatsächlich WeChat ist, das die Verbindung herstellt. Wenn die Signatur korrekt ist, sollten Sie mit der echostr. Um diesen Blog-Beitrag etwas kürzer zu halten, werden wir das kurz machen und immer den echostr (in der Produktion sollten Sie jedoch sicherstellen, dass alles korrekt ist):

Dieser Code prüft, ob ein echostr als Abfrageparameter gesetzt ist und gibt ihn aus, wenn er gesetzt ist. Andernfalls gibt es einen 404-Statuscode und eine Fehlermeldung zurück. Die Protokollierungsanweisungen werden in der Terminalsitzung angezeigt, die Sie zum Starten der Node-Anwendung verwendet haben. Bevor wir testen können, ob unsere Einrichtung funktioniert, müssen wir Express anweisen, die Route auch in die wechat.js Datei beim Starten in index.js. Sie können dies tun, indem Sie die folgende Zeile in index.js:

Legen Sie dies unter die app.get('/') Aufruf, den wir zuvor erstellt haben, oberhalb der Portdefinition. Jetzt können Sie prüfen, ob WeChat Ihre Anwendung über einen Ngrok-Tunnel erreichen kann. Wenn Ihre Node-Anwendung noch läuft, beenden Sie sie mit Strg-C und starten Sie sie dann neu mit node .. Vergewissern Sie sich, dass beim Starten keine Fehler auftreten, und öffnen Sie dann ein zweites Terminalfenster. Starten Sie ngrok und lassen Sie es mit dem folgenden Befehl einen Tunnel zu Port 3000 erstellen: Nach ein paar Sekunden sollten Sie die Ausgabe von ngrok sehen. Kopieren und fügen Sie die zweite 'Weiterleitung' URL (die https://) und fügen Sie sie in Ihren Browser ein. Die Verbindung sollte dann problemlos hergestellt werden. Sie können die ngrok-Weboberfläche öffnen, wenn Sie möchten (erwähnt unter dem 'Web-Schnittstelle'). Gehen Sie nun zurück zur WeChat Sandbox-Seite und melden Sie sich gegebenenfalls an. Es sollten zwei Felder namens 'URL' und 'Token' im zweiten Panel. Anhängen /wechat zur https:// URL von ngrok und fügen Sie sie in das Feld 'URL'-Feld. Geben Sie dann eine zufällige Zeichenfolge in das Feld 'Feld 'Token' (wie 123456, der Inhalt spielt keine Rolle, da wir die Signatur nicht überprüfen). Klicken Sie auf die grüne Schaltfläche (æ交 'abschicken'). Sie erhalten wahrscheinlich eine Fehlermeldung. Klicken Sie erneut auf die Schaltfläche. Sie sollten nun eine 200 OK-Anfrage auf dem ngrok-Dashboard sehen, und die URL und das Token sollten in der Sandbox gespeichert sein. Ihr Konto ist nun eingerichtet! [caption id="attachment_25762" align="alignnone" width="378"] 1 - Geben Sie Ihre ngrok URL und ein Token ein (kann alles sein)[/caption] [caption id="attachment_25763" align="alignnone" width="455"] 2 - Nachdem Sie zweimal auf die grüne Schaltfläche geklickt haben, sollte dies erscheinen (mit Ihrer URL und Ihrem Token)[/caption]

Schritt 5: Eingehende Nachrichten verarbeiten

Immer, wenn ein Benutzer beginnt, Ihren offiziellen Konten zu folgen, eine Nachricht an Ihr Konto sendet oder es nicht mehr folgt, erhalten Sie eine POST-Anfrage mit einer XML-Beschreibung der Nachricht. Um diese Nachrichten zu verarbeiten, müssen wir unserer Datei wechat.js einen weiteren Endpunkt hinzufügen. Anstatt jedoch app.get() aufzurufen, um einen Handler für GET-Anfragen zu erstellen, werden wir app.post() aufrufen, um einen Handler für POST-Anfragen zu registrieren. Da wir nicht selbst eine Menge Code für die XML-Analyse schreiben wollen, werden wir einen XML-Body-Parser für Express installieren, der dies für uns erledigt. Fangen wir damit an. Installieren Sie body-parser und body-parser-xml mit dem folgenden Befehl in Ihrem Terminal:

Lassen Sie uns den Body Parser einrichten. Ändern Sie in index.js die beiden obersten Zeilen (die, die die Express-Anwendung einrichten) so, dass sie Folgendes wiedergeben:

Damit wird erneut eine Express-Anwendung eingerichtet, aber jetzt wird auch die XML-Middleware body-parser installiert, die uns beim Parsen der eingehenden Anfragebodies helfen wird. Lassen Sie uns den POST Request Handler schreiben, unterhalb des gesamten Codes in wechat.js:

Dieser Teil des Codes richtet einen POST-Handler auf dem Router ein (Zeile 6), entnimmt das geparste XML aus dem Body und schaltet den Nachrichtentyp um (Zeile 9, der XML-Parser legt einzelne Textknoten in ein Array, weshalb wir mit Index 0 darauf zugreifen müssen). Die Funktion leitet dann das Antwortobjekt und das geparste XML an einen von drei Handlern weiter (Zeile 11, 13 und 15), die jeweils neue Ereignisse, Textnachrichten und Nachrichten unbekannten Typs behandeln. Der letzte Schritt besteht darin, diese Handler zu implementieren und eine XML-Antwort zurückzugeben, die an den Benutzer gesendet wird.

Schritt 6: Nachrichten-Handler schreiben

Dies ist der letzte Schritt der Implementierung unseres WeChat Echo-Dienstes! Da WeChat verlangt, dass wir mit XML antworten, werden wir Vorlagenstrings verwenden, um ganz einfach einen XML-String zu erstellen, der in das Antwortobjekt geschrieben werden kann. WeChat sendet dann unsere Nachricht an das Gerät des Benutzers, so dass es sich anfühlt, als würde er mit einer echten Person sprechen. Die Funktion zum Einrichten der Vorlage lautet wie folgt:

Dadurch werden der Empfänger, der Absender und der Textinhalt in einen XML-String injiziert, der in den Handlern gesendet werden kann. Sie sollten diese Funktion oberhalb der Handler hinzufügen, indem Sie TODO 3 ersetzen. Als nächstes richten wir unsere Handler ein. Der komplexeste ist der Handler für Nachrichten des Ereignistyps, da es mehrere Arten von Ereignissen geben kann, die ausgelöst werden. Wir interessieren uns nur für das Ereignis , das ausgelöst wird, wenn ein Benutzer Ihren QR-Code scannt und auf 'Folgen' tippt. Dies ist der Handler:

Die Funktion handleEvent extrahiert den Ereignistyp aus den XML-Daten und überprüft, ob es sich um ein subscribe Ereignis handelt. Sie erstellt dann eine XML-Antwort, indem sie den Absender und den Empfänger aus den XML-Daten umdreht und eine String-Nachricht hinzufügt. Damit werden neue Follower mit der Nachricht 'Welcome to our Official Account!' begrüßt. Wenn wir schon dabei sind, sollten wir auch die anderen Nachrichten-Handler implementieren:

In der Funktion handleText ist die zurückgesendete Zeichenfolge die umgekehrte Textnachricht, die der Benutzer gesendet hat. In der Funktion handleUnknown senden wir lediglich eine Nachricht zurück, die dem Benutzer mitteilt, dass unser Echodienst (noch) nicht versteht, was er sagt. Und das war's! Nach all der harten Arbeit ist es nun an der Zeit zu sehen, was passiert, wenn wir anfangen, unserem eigenen offiziellen Konto zu folgen und einige Nachrichten zu senden. Um zu beginnen, sich selbst zu folgen, scannen Sie den QR-Code, der auf der WeChat Sandbox-Seite auf halber Höhe angezeigt wird. Tippen Sie auf Ihrem Telefon in der Chat-Übersicht auf das "+" in der oberen rechten Ecke und dann auf "QR-Code scannen". Nachdem Sie den Code gescannt haben, sollten Sie eine einfache Seite mit einer großen Schaltfläche "Folgen" sehen. Wenn Sie darauf tippen, sollte WeChat einen neuen Chat mit dem Echo-Dienst öffnen. Er sollte Sie mit der Nachricht begrüßen, die wir zuvor hinzugefügt haben. Wenn Sie eine Textnachricht senden, sollte der Echo-Dienst mit Ihrer umgekehrten Nachricht antworten. Wenn Sie etwas anderes senden (z.B. ein Bild oder Ihren Standort), wird der Echo-Dienst Ihnen mitteilen, dass er diesen Nachrichtentyp nicht versteht. Wenn das alles funktioniert, gute Arbeit!

Einpacken

Sie haben nun gesehen, wie Sie mit der Debug-Sandbox des offiziellen Kontos eine einfache Anwendung auf WeChat erstellen können. Als Übung könnten Sie versuchen, den Code so zu ändern, dass der Dienst den Benutzer mit einem Menü begrüßt und basierend auf der Reaktion des Benutzers eine Aktion wie das Senden eines Videos oder Bildes auslöst. Die technische Dokumentation von WeChat wird Ihnen dabei helfen, herauszufinden, wie Sie mit eingehenden Mediendateien umgehen und wie Sie auf sie reagieren können. Glücklicherweise sind die Ideen ähnlich wie die, die Sie bisher gesehen haben. Außerdem könnten Sie Ihre Node-Anwendung irgendwo in der Cloud hosten, damit sie ständig auf neue Nachrichten reagiert. Wenn Sie Ihren Ngrok-Tunnel und/oder Ihre Node-Anwendung beenden, zeigt WeChat Benutzern, die etwas an Ihr Sandbox-Konto gesendet haben, einen Fehler an. Sie können sich Tools ansehen wie Zeit Jetzt um Ihre Node-App auf einfache Weise persistenter einzusetzen, oder versuchen Sie das Amazon und Google Clouds für einfaches Hosting. Nachdem Sie Ihre Anwendung an einem anderen Ort eingerichtet haben, vergessen Sie nicht, die URL auf der Sandbox-Seite zu ändern. Ich hoffe, die Implementierung eines einfachen Echo-Dienstes hat Ihnen dabei geholfen, zu beurteilen, ob WeChat die richtige Plattform für Ihr Unternehmen ist und ob sie Ihnen helfen kann, auf dem chinesischen Markt Fuß zu fassen. Wenn Sie sich für WeChat entscheiden, sollten die ersten Schritte in diesem Blogbeitrag Ihnen helfen, so schnell wie möglich loszulegen. Sollten Sie versehentlich Hilfe bei der strategischen oder technischen Implementierung von WeChat für Ihr Angebot auf dem chinesischen Markt benötigen, zögern Sie bitte nicht, uns zu kontaktieren! Léon Rodenburg ist Full-Stack-Entwicklungsberater bei Xebia. Er hat einen Hintergrund in Informatik und Sinologie und ist immer auf der Suche nach den Schnittpunkten zwischen diesen beiden Bereichen. Nachdem er einige Zeit in China gelebt und studiert hat, hat er seine Kenntnisse der chinesischen Sprache in die Praxis umgesetzt, indem er das tägliche Leben in Peking on- und offline wie ein Einheimischer erlebt hat.

• WeChat Sandkasten (Chinesisch, englische Version hier kann aber kaputt sein)
• Technische Dokumentation zu WeChat (Englisch)
• WeChat im niederländischen iOS App Store
• WeChat auf Google Play