Creați un chatbot WhatsApp, nu o aplicație

Publicat: 2022-03-11

Cu mult timp în urmă, am construit o aplicație web pentru o întreprindere (200.000 de angajați). Feedback-ul despre aplicația web m-a determinat să fac un experiment. Ce s-ar întâmpla dacă aș crea un chatbot WhatsApp pentru a rezolva cazul specific de utilizare, în loc de o aplicație web? Le-ar plăcea oamenilor mai bine? Ar fi mai util?

Dar povestea este mult mai mare decât atât. Chatboții au atât de mult potențial! În acest tutorial WhatsApp chatbot, am vrut să împărtășesc călătoria mea de învățare, cele mai bune practici pe care le-am descoperit și predicțiile mele cu privire la întrebarea aplicației vs. chatbot. Și mai departe: chatbot-urile vor înlocui într-o zi toate aplicațiile tradiționale?


Compania pentru care am lucrat avea un birou pentru aproximativ 2.000 de angajați în mijlocul orașului Tel Aviv. Spațiul de parcare este foarte limitat, așa că oamenii parchează în spații proiectate intenționat pentru parcare dublă, unde o mașină o blochează pe alta. În fiecare loc de parcare dublă, primul șofer parchează înăuntru, iar al doilea parchează afară.

De la o tablă la o aplicație web

Înainte de a exista o aplicație, a existat o tablă mare. Toți șoferii au marcat locul unde au parcat, precum și numele și numerele de telefon. Înainte de a părăsi biroul, un șofer a trebuit să verifice dacă cineva le bloca mașina. Dacă da, ar trebui să-l sune pe celălalt șofer și să spere că nu se află în mijlocul unei întâlniri, ca să poată merge și să-și mute mașina din drum.

Pentru a îmbunătăți procesul, am creat o aplicație web.

Conceptul original al aplicației web, care arată șiruri de locuri de parcare duble din interior și exterior cu numere și uneori nume. Cele cu nume sunt albastre, iar cele fără nume sunt verzi.

A fost simplu. Fără back end. Fără găzduire pe server. Fără întreținere a bazei de date. Nici măcar orice cadru UI. Niciun pachet web și niciun pachet JS! Doar vanilie JavaScript.

A fost găzduit folosind găzduirea gratuită a paginilor statice GitHub. Baza de date era FireBase, așa că aveam suport în timp real și suport JSON și nu era nevoie de un back-end.

Interfața cu utilizatorul a fost simplă. Utilizatorii ar vedea toate locurile de parcare și ar face clic pe unul gol pentru a-și completa detaliile. Dacă ar fi deja parcate, ar lua datele din stocarea locală a browserului. Dacă făceau clic pe un slot înregistrat, ar vedea detaliile de contact relevante și ar putea alege să sune șoferul.

A funcționat excelent timp de aproape un an. Mai puțin de o zi de dezvoltare a ajutat și a economisit timp pentru mulți oameni — o investiție bună.

De la aplicația web la Chatbot

Într-o zi, Facebook a anunțat că va lansa un API pentru WhatsApp. A doua zi, fratele meu a cumpărat un Amazon Echo, cu Alexa. În acea perioadă, am început să văd și Google Assistant peste tot.

Am început să cred că poate lumea se îndreaptă către chatbot, așa că ar trebui să experimentez. Ar prefera utilizatorii să folosească chatbot-uri? Ar trebui să ofer mai puțin sprijin? Ar introduce vreo metafuncție nouă pur și simplu prin valorificarea unei infrastructuri diferite?

Am primit câteva feedback despre aplicația web obișnuită și am crezut că s-ar putea rezolva dacă aș crea un chatbot WhatsApp:

  • Aplicația nu a funcționat bine pe unele telefoane mobile vechi.
  • Nu a funcționat în subteran (unde este parcarea — acolo nu există semnal mobil bun).
  • Șoferii au dorit să trimită mesaje blocanților în loc să deschidă dialer-ul telefonului.
  • Șoferii doreau să primească notificări push dacă cineva îi bloca, în loc să deschidă aplicația web de fiecare dată înainte de a pleca.

Este important să ne amintim că dezvoltatorii de platforme de chat precum Telegram sau WhatsApp au lucrat zile și nopți ani de zile pentru a asigura stabilitatea aplicațiilor lor. Folosind resursele lor și dezvoltând doar un mic motor pentru a răspunde la întrebări, ar lăsa munca grea de întreținere pe seama dezvoltatorilor de platforme de chat. Tot ce trebuia să fac a fost să caut cum să fac un chatbot WhatsApp.

Imediat după ce am început să dezvolt noul chatbot al asistentului de parcare, mi-am dat seama cât de fantastică este ideea. A fost atât de ușor și rapid să adaug funcții noi și nici măcar nu a fost nevoie să fac teste end-to-end.

Nici un semnal? Nici o problemă.

Tweet

Nu numai că, nu mai aveam nevoie de un proces CI/CD complicat. Dacă funcționează într-un emulator de chat, ar funcționa peste tot. Fără .apk , fără Xcode, fără App Store și nici Google Play. Chatbot-ul a putut să trimită mesaje utilizatorilor fără ca eu să fiu nevoit să înregistrez dispozitive, să folosesc PubSub sau servicii similare pentru notificări push sau să salvez jetoane de utilizator. Nu este nevoie de un sistem de autentificare — foloseam numărul de telefon al utilizatorului ca identificare.

Nici un semnal? Nici o problemă. Nu a fost nevoie să adaug suport offline folosind fișiere manifest: WhatsApp mi l-a oferit imediat. Mesajul avea să iasă destul de curând, când utilizatorul ar merge la un nivel superior unde wifi-ul era mai bun.

Apoi mi-am dat seama că de fiecare dată când o platformă de chat introduce o nouă caracteristică, aplicația mea va beneficia imediat de ea. Uau, acum este o investiție foarte bună. (Pentru a fi corect, există și riscul ca noile funcții să limiteze funcționalitatea sau să creeze schimbări de ultimă oră care necesită mai mult efort de dezvoltare, așa că gândiți-vă bine înainte de a implementa sarcini critice pentru afaceri).

Writing Parking Assistant , un prototip WhatsApp Chatbot

Pentru a crea un chatbot WhatsApp, prima provocare este să primiți mesaje de la WhatsApp către programul dvs. Cea mai simplă soluție pe care am găsit-o este să folosesc un număr de telefon Twilio partajat. Este doar pentru dezvoltare - atunci când trec la producție, dezvoltatorii vor dori să folosească un număr de telefon dedicat.

Numerele gratuite ale Twilio sunt partajate pentru mulți utilizatori Twilio. Pentru a diferenția utilizatorii finali ai unei aplicații de cei ai aplicațiilor altor utilizatori Twilio, utilizatorii finali trebuie să trimită un mesaj predefinit chatbot.

După ce un utilizator trimite un mesaj special la numărul partajat, toate mesajele de pe numărul său vor fi direcționate către contul dvs. Twilio și webhook-uri. Acesta este motivul pentru care este necesar un număr dedicat în producție - nu există nicio garanție că un anumit utilizator va dori să folosească doar o aplicație pe un anumit număr partajat.

Trimiterea mesajelor WhatsApp

Pe „Tabloul de bord SMS programabil” al Twilio, există un link „WhatsApp Beta” în bara de navigare din stânga:

O captură de ecran a „Tabloul de bord SMS programabil” Twilio, care arată un grafic al mesajelor recente și un alt grafic al erorilor și avertismentelor recente. A patra opțiune din bara de navigare este „WhatsApp Beta”.

Făcând clic pe aceasta, dezvoltatorii vor vedea o pagină cu opțiunea „Sandbox”.

O captură de ecran a etapei de configurare a sandbox-ului WhatsApp de la Twilio, în așteptarea trimiterii unui mesaj special WhatsApp către un anumit număr.

Pentru a asocia utilizatorii, aceștia vor trebui să trimită un mesaj special la numărul oferit de Twilio. Odată ce utilizatorii fac asta, putem începe să le trimitem mesaje și să procesăm mesaje de la ei, prin Twilio.

Iată un exemplu de trimitere a unui mesaj folosind 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

Acesta este un mesaj text simplu. Dar puteți atașa și conținut media (imagini etc.) la mesajele dvs. Iată un exemplu Node.js:

 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)) }

Asta este: Acum putem începe să trimitem mesaje clienților! Dar este important să ne amintim cele mai importante două limitări tehnice ale mesajelor WhatsApp:

  1. Când botul primește un mesaj, puteți trimite gratuit un răspuns text. Mai mult decât atât a costat bani.
  2. Botul poate trimite mesaje utilizatorilor numai în timpul ferestrei de 24 de ore, începând cu momentul în care primește un mesaj de la un utilizator. În afara acestei ferestre, botul poate trimite numai mesaje folosind șabloane aprobate, așa cum vom vedea mai târziu.

Primirea mesajelor WhatsApp

Trimiterea mesajelor a fost destul de ușoară, dar primirea și procesarea mesajelor este și mai ușoară.

O captură de ecran a paginii „Twilio Sandbox pentru WhatsApp”. Secțiunea Configurare Sandbox are două câmpuri de adresă URL a punctului final, pentru „când sosește un mesaj” și „adresă URL de returnare a stării”. Secțiunea Participanți la Sandbox listează ID-uri de utilizator (în formatul „whatsapp:” urmat de un număr de telefon) și are aceleași instrucțiuni ca înainte despre cum să invitați prietenii în sandbox prin trimiterea unui mesaj special.

Pe pagina „sandbox” a lui Twilio, dezvoltatorii pot defini unde ar trebui să trimită Twilio mesajele pe care le primește la numărul WhatsApp partajat. În timpul dezvoltării, servicii precum Ngrok sau Serveo pot furniza adrese URL publice care se direcționează către mașinile de dezvoltare locale.

Mesajele Twilio WhatsApp arată astfel:

 { "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" }

Asta este tot ce avem nevoie. Putem folosi orice limbaj de programare pentru a primi acest mesaj, a-l analiza și a încerca să înțelegem ce întreabă utilizatorii. Acest lucru va duce probabil la unele operațiuni CRUD pe o bază de date, după care botul poate livra utilizatorului informațiile adecvate (sau mesajul de succes/eșec) în răspunsul său. Acestea sunt elementele de bază ale modului de a crea un chatbot WhatsApp.

Șabloane de mesaje

După cum am menționat, chatboții pot trimite mesaje freestyle numai utilizatorilor care interacționează „în prezent” cu ei, adică în timpul ferestrei de 24 de ore. Dar dacă doriți să trimiteți mesaje către utilizatori noi sau în afara ferestrei, trebuie să utilizați șabloane de mesaje preaprobate. Acest lucru este pentru a preveni spamul.

În cazul meu de utilizare, am vrut să actualizez driverele atunci când cineva le bloca, chiar dacă nu sunt utilizatori ai chatbot-ului. În Twilio, faceți clic pe „expeditor” și „configurează”.

O captură de ecran a paginii „Expeditori activați WhatsApp” a lui Twilio, care listează numerele, numele lor afișate pentru afaceri și stările (unul din listă este marcat Aprobat, celălalt, „În așteptarea aprobării de la WhatsApp”).

Acesta este șablonul pe care l-am ales:

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

Câteva zile mai târziu, Facebook a aprobat șablonul meu și am putut începe să trimit acele mesaje tuturor celor care aveau WhatsApp, nu doar șoferilor care trimiseseră un mesaj chatbot.

Trimiterea unui mesaj dintr-un șablon este exact ca și trimiterea unui mesaj obișnuit, folosind același API. WhatsApp vede automat că se potrivește cu un șablon și aprobă mesajul.

Nu numai pentru asistent de parcare

Această strategie este incitantă pentru mine când îmi imaginez un magazin online: poate că într-o zi oamenii vor putea cumpăra orice folosind chatbots. Ar fi la fel de ușor ca să trimiți mesaje WhatsApp și să atașezi imagini. Doar imaginați-vă dacă utilizatorii ar fi capabili să atașeze bani reali la fiecare mesaj WhatsApp. Ar fi foarte simplu să cumperi lucruri. Utilizatorii ar putea cu ușurință să cumpere orice vorbind cu chatbot-ul unui furnizor.

Imaginați-vă un chatbot care înlocuiește Waze sau Google Maps. Îi trimiteți un mesaj text cu destinația dvs. Platforma chatbot urmărește locația dvs., iar chatbot-ul vă trimite un mesaj înregistrat care se redă automat cu direcția vorbită în timp real a navigației.

Nu este fantezie. WhatsApp acceptă în prezent partajarea locației în timp real – tot ce au nevoie este opțiunea de a reda automat mesajele primite și voila.

Gândiți-vă la un chatbot Waze sau un chatbot cu taxi în loc de aplicațiile Gett sau Uber. Trimiți un mesaj în care vă spuneți unde vă aflați, apoi sosește taxiul și plătiți folosind WhatsApp. Atât de simplu.

Unii cititori s-ar putea gândi: „Utilizatorii nu preferă interfețele grafice și nu doar tastarea?” Cred că platformele chatbot vor oferi proprietarului chatbot-ului opțiunea de a trimite butoane, imagini și casete HTML pur în timpul conversiei. Facebook acceptă deja Webview pentru Messenger. Utilizatorii nu trebuie să instaleze nimic, trebuie doar să folosească aplicația de mesagerie instantanee preferată.

Aceste avantaje sunt motivul pentru care dezvoltatorii caută să creeze chatbot-uri WhatsApp pentru a se ocupa de sarcini importante, cum ar fi oferirea instantanee de răspunsuri autorizate despre pandemia de coronavirus, pentru a ajuta la limitarea răspândirii dezinformării.

TL;DR: 7 concluzii despre migrarea aplicațiilor web la chatbot

În concluzie:

  • De multe ori, dezvoltarea unui chatbot poate reduce semnificativ timpul de dezvoltare, deoarece nu este nevoie să proiectați și să planificați o interfață grafică pentru utilizator. (Aceasta fiind spuse, merită să vă uitați la punctele mai fine ale designului UX de chatbot înainte de a începe, pentru a învăța din greșelile altora.)
  • Este mult mai ușor să adăugați funcții noi la chatbot. Dezvoltatorii nu trebuie să reproiecteze sau să modifice niciun element actual. Chatbot-ul trebuie doar să înceapă să înțeleagă noul tip de mesaj.
  • Chatbot-urile sunt mult mai accesibile în mod implicit pentru persoanele cu nevoi speciale.
  • Nu este nevoie să personalizați o soluție multiplatformă. Platforma chatbot face asta deja.
  • Utilizatorii au mai multă încredere în chatbot pentru partajarea informațiilor. Nu trebuie să cereți permisiunea sau să afișați avertismente - de exemplu, utilizatorul poate pur și simplu să aleagă o imagine din galeria sa și să o trimită chatbot-ului dvs. - permisiunea de a accesa galeria de imagini este deja acordată platformei de chat.
  • Platformele de chat facilitează gestionarea notificărilor push. Notificările push sunt ceea ce face diferența între aplicațiile pe care utilizatorii le uită și aplicațiile cu care utilizatorii vor interacționa în mod regulat.
  • Platformele de chat gestionează pentru tine trecerea între condițiile offline și online.

Cum să construiți un chatbot WhatsApp: sfaturi de despărțire și bune practici

Meritele scrierii unui chatbot sunt destul de clare. Dezvoltatorii care sunt gata să creeze unul sunt sfătuiți să înceapă cu un chatbot care înțelege un mesaj. Și se descurcă bine.

Chatbot-ii ar trebui să respecte mesajele scurte. Oamenii nu citesc mesaje lungi. Când aveți ceva important de trimis care nu poate fi exprimat concis, este mai bine să împărțiți mesajele în mai multe mesaje mici.

Chatboții cu personalitate sunt primiți mai bine. Chiar și un „vorbesc uman” minim este un drum lung în comparație cu o abordare de „formalitate a mesajelor de sistem”: „Voi actualiza harta parcării pentru tine”, în loc de „Baza de date a fost actualizată”. Un chatbot ar trebui să lase utilizatorului sentimentul că este o mașină care este acolo pentru a-i servi utilizatorului, mai degrabă decât o cutie neagră care efectuează operațiuni tehnice pe care ar putea să nu fie în măsură să le înțeleagă.

Acest tutorial pe chatbot WhatsApp nu a intrat în specificul analizării mesajelor în limbaj natural pe care utilizatorii le vor trimite către chatboți. Dar furnizorii aspiranți de servicii de dezvoltare chatbot sunt bineveniți să citească codul sursă al botului WhatsApp Parking Assistant (în special hackparkDialogFlow.ts , care acceptă cererile utilizatorului ca acțiuni) pentru a înțelege cum funcționează acest aspect.

Pentru un articol mai aprofundat despre cum să detectați diferite tipuri de mesaje de utilizator - în timp ce urmați abordarea de injectare a dependenței în programare - consultați tutorialul de chatbot TypeScript de la Toptal.

Mult succes cu dezvoltarea ta de chatbot WhatsApp!