Crea un Chatbot WhatsApp, non un'app

Molto tempo fa, ho creato un'app Web per un'azienda (oltre 200.000 dipendenti). Il feedback sull'app Web mi ha spinto a fare un esperimento. Cosa accadrebbe se dovessi creare un chatbot WhatsApp per risolvere il caso d'uso specifico, invece di un'app web? Alla gente piacerebbe di più? Sarebbe più utile?

Ma la storia è molto più grande di così. I chatbot hanno così tanto potenziale! In questo tutorial sul chatbot di WhatsApp, volevo condividere il mio percorso di apprendimento, le migliori pratiche che ho scoperto e le mie previsioni sulla domanda tra app e chatbot. E oltre: un giorno i chatbot sostituiranno tutte le app tradizionali?

L'azienda per cui lavoravo aveva un ufficio per circa 2.000 dipendenti nel centro di Tel Aviv. Il parcheggio è molto limitato, quindi le persone parcheggiano in spazi appositamente progettati per il doppio parcheggio, dove un'auto ne blocca un'altra. In ogni parcheggio doppio, il primo conducente parcheggia all'interno e il secondo parcheggia all'esterno.

Da una lavagna a un'app Web

Prima che esistesse un'app, c'era una grande bacheca. Tutti i conducenti hanno segnato dove stavano parcheggiando, i loro nomi e numeri di telefono. Prima di lasciare l'ufficio, un autista ha dovuto controllare se qualcuno stesse bloccando la sua auto. In tal caso, avrebbero dovuto chiamare l'altro conducente e sperare di non essere nel mezzo di una riunione in modo da poter andare a spostare la loro auto per togliersi di mezzo.

Per migliorare il processo, ho creato un'app web.

Era semplice. Nessun back-end. Nessun server di hosting. Nessuna manutenzione del database. Nemmeno alcun framework dell'interfaccia utente. Nessun webpack e nessun pacchetto JS! Solo JavaScript vaniglia.

È stato ospitato utilizzando l'hosting di pagine statiche gratuito di GitHub. Il database era FireBase, quindi avevamo supporto in tempo reale e supporto JSON e non c'era bisogno di un back-end.

L'interfaccia utente era semplice. Gli utenti vedranno tutti i parcheggi e faranno clic su uno vuoto per inserire i propri dettagli. Se fossero già parcheggiati, prenderebbero i dati dalla memoria locale del browser. Se hanno fatto clic su uno slot registrato, vedrebbero i dettagli di contatto pertinenti e potrebbero scegliere di chiamare l'autista.

Ha funzionato benissimo per quasi un anno. Meno di un giorno di sviluppo ha aiutato e fatto risparmiare tempo a molte persone: un buon investimento.

Dall'app Web al Chatbot

Un giorno, Facebook ha annunciato che rilascerà un'API per WhatsApp. Il giorno successivo, mio ​​fratello ha acquistato un Amazon Echo, con Alexa. In quel periodo, ho anche iniziato a vedere l'Assistente Google ovunque.

Ho iniziato a pensare che forse il mondo si stesse muovendo verso i chatbot, quindi dovrei sperimentare. Gli utenti preferirebbero utilizzare i chatbot? Avrei bisogno di dare meno supporto? Introdurrebbe nuove meta-caratteristiche semplicemente sfruttando diverse infrastrutture?

Ho ricevuto un feedback sulla normale app Web e credevo che avrebbe potuto risolverlo se avessi creato un chatbot WhatsApp:

• L'app non funzionava bene su alcuni vecchi telefoni cellulari.
• Non funzionava sottoterra (dove si trova il parcheggio, non c'è un buon segnale mobile lì).
• I conducenti desideravano inviare messaggi ai bloccanti invece di aprire il combinatore telefonico.
• I conducenti volevano ricevere notifiche push se qualcuno le stava bloccando, invece di aprire l'app Web ogni volta prima di partire.

È importante ricordare che gli sviluppatori di piattaforme di chat come Telegram o WhatsApp hanno lavorato giorno e notte per anni per garantire la stabilità delle loro app. Utilizzando le loro risorse e sviluppando solo un piccolo motore per rispondere alle domande, ciò lascerebbe il duro lavoro di manutenibilità agli sviluppatori di piattaforme di chat. Tutto quello che dovevo fare era approfondire come creare un chatbot di WhatsApp.

Immediatamente dopo aver iniziato a sviluppare il nuovo chatbot dell'assistente di parcheggio, mi sono reso conto di quanto fosse fantastica l'idea. È stato così facile e veloce aggiungere nuove funzionalità e non ho nemmeno avuto bisogno di eseguire test end-to-end.

Nessun segnale? Nessun problema.

Twitta

Non solo, non avevo più bisogno di un complicato processo CI/CD. Se funziona in un emulatore di chat, funzionerebbe ovunque. Nessun .apk , nessun Xcode, nessun App Store, né Google Play. Il chatbot è stato in grado di inviare messaggi agli utenti senza che io dovessi registrare dispositivi, utilizzare PubSub o servizi simili per le notifiche push o salvare i token utente. Non c'è bisogno di un sistema di autenticazione: stavo usando il numero di telefono dell'utente come identificazione.

Nessun segnale? Nessun problema. Non avevo bisogno di aggiungere il supporto offline usando i file manifest: WhatsApp me lo ha dato immediatamente. Il messaggio sarebbe uscito abbastanza presto, quando l'utente sarebbe andato a un livello superiore in cui il wifi era migliore.

Poi mi sono reso conto che ogni volta che una piattaforma di chat introduceva una nuova funzionalità, la mia app ne traeva immediatamente vantaggio. Wow, questo è davvero un buon investimento. (Per essere onesti, c'è anche il rischio che le nuove funzionalità possano limitare la funzionalità o creare modifiche di rilievo che richiedono uno sforzo di sviluppo maggiore, quindi pensa attentamente prima di implementare attività business-critical).

Scrivendo Parking Assistant , un prototipo di Chatbot WhatsApp

Per creare un chatbot di WhatsApp, la prima sfida è ottenere messaggi da WhatsApp al tuo programma. La soluzione più semplice che ho trovato è utilizzare un numero di telefono Twilio condiviso. È solo per lo sviluppo: quando si passa alla produzione, gli sviluppatori vorranno utilizzare un numero di telefono dedicato.

I numeri gratuiti di Twilio sono condivisi da molti utenti Twilio. Per differenziare gli utenti finali di un'app da quelli delle app di altri utenti Twilio, gli utenti finali devono inviare un messaggio predefinito al chatbot.

Dopo che un utente ha inviato un messaggio speciale al numero condiviso, tutti i messaggi dal suo numero verranno indirizzati al tuo account Twilio e ai webhook. Questo è il motivo per cui è necessario un numero dedicato in produzione: non vi è alcuna garanzia che un determinato utente vorrà utilizzare solo un'app su un determinato numero condiviso.

Invio di messaggi WhatsApp

Sulla "Dashboard SMS programmabile" di Twilio, c'è un collegamento "WhatsApp Beta" nella barra di navigazione a sinistra:

Facendo clic su questo, gli sviluppatori vedranno una pagina con l'opzione "Sandbox".

Per associare gli utenti, dovranno inviare un messaggio speciale al numero fornito da Twilio. Una volta che gli utenti lo fanno, possiamo iniziare a inviare loro messaggi ed elaborare i messaggi da loro, tramite Twilio.

Ecco un esempio di invio di un messaggio utilizzando 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

Questo è un semplice messaggio di testo. Ma puoi anche allegare media (immagini, ecc.) ai tuoi messaggi. Ecco un esempio di 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)) }

Ecco fatto: ora possiamo iniziare a inviare messaggi ai clienti! Ma è importante ricordare le due limitazioni tecniche più cruciali dei messaggi WhatsApp:

1. Quando il bot riceve un messaggio, puoi inviare un SMS di risposta gratuitamente. Più di quello costa denaro.
2. Il bot può inviare messaggi agli utenti solo durante la finestra di 24 ore che inizia quando riceve un messaggio da un utente. Al di fuori di questa finestra, il bot può inviare solo messaggi utilizzando modelli approvati, come vedremo più avanti.

Ricezione di messaggi WhatsApp

Inviare messaggi è stato abbastanza semplice, ma ricevere ed elaborare messaggi è ancora più semplice.

Nella pagina "sandbox" di Twilio, gli sviluppatori possono definire dove Twilio deve inviare i messaggi che riceve al numero WhatsApp condiviso. Durante lo sviluppo, servizi come Ngrok o Serveo possono fornire URL pubblici che indirizzano a macchine di sviluppo locali.

I messaggi WhatsApp di Twilio hanno questo aspetto:

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

Questo è tutto ciò di cui abbiamo bisogno. Possiamo usare qualsiasi linguaggio di programmazione per ottenere questo messaggio, analizzarlo e cercare di capire cosa chiedono gli utenti. Ciò comporterà probabilmente alcune operazioni CRUD su un database, dopodiché il bot può fornire le informazioni appropriate (o il messaggio di successo/non riuscito) all'utente nella sua risposta. Queste sono le basi su come creare un chatbot di WhatsApp.

Modelli di messaggio

Come accennato, i chatbot possono inviare messaggi freestyle solo agli utenti che stanno “attualmente” interagendo con loro, cioè durante la finestra di 24 ore. Ma se desideri inviare messaggi a nuovi utenti o fuori dalla finestra, devi utilizzare modelli di messaggio preapprovati. Questo per prevenire lo spam.

Nel mio caso d'uso, volevo aggiornare i driver quando qualcuno li stava bloccando, anche se non sono utenti del chatbot. In Twilio, fai clic su "mittente" e "configura".

Questo è il template che ho scelto:

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

Diversi giorni dopo, Facebook ha approvato il mio modello e ho potuto iniziare a inviare quei messaggi a tutti coloro che avevano WhatsApp, non solo ai conducenti che avevano inviato un messaggio al chatbot.

Inviare un messaggio da un modello è esattamente come inviare un messaggio normale, utilizzando la stessa API. WhatsApp vede automaticamente che corrisponde a un modello e approva il messaggio.

Non solo per l' assistente al parcheggio

Questa strategia è eccitante per me quando immagino un negozio online: forse un giorno le persone potranno acquistare qualsiasi cosa usando i chatbot. Sarebbe facile come inviare messaggi WhatsApp e allegare immagini. Immagina se gli utenti fossero in grado di allegare denaro reale a ogni messaggio WhatsApp. Sarebbe molto semplice acquistare le cose. Gli utenti sarebbero facilmente in grado di acquistare qualsiasi cosa parlando con il chatbot di un fornitore.

Immagina un chatbot che sostituisca Waze o Google Maps. Gli mandi un messaggio di testo della tua destinazione. La piattaforma del chatbot sta tracciando la tua posizione e il chatbot ti invia un messaggio registrato che riproduce automaticamente la direzione parlata in tempo reale della navigazione.

Non è fantasia. WhatsApp attualmente supporta la condivisione della posizione in tempo reale: tutto ciò di cui hanno bisogno è l'opzione per riprodurre automaticamente i messaggi ricevuti e voilà.

Pensa a un chatbot di Waze o a un chatbot di taxi invece delle app Gett o Uber. Mandi un messaggio che dice dove sei, poi arriva il taxi e paghi tramite WhatsApp. Così semplice.

Alcuni lettori potrebbero pensare: "Gli utenti non preferiscono le interfacce grafiche e non solo la digitazione?" Credo che le piattaforme di chatbot daranno al proprietario del chatbot la possibilità di inviare pulsanti, immagini e caselle HTML puro durante la conversione. Facebook supporta già Webview per Messenger. Gli utenti non devono installare nulla, basta usare la loro app di messaggistica istantanea preferita.

Questi vantaggi sono il motivo per cui gli sviluppatori stanno cercando di creare chatbot WhatsApp per gestire attività importanti, come fornire risposte autorevoli istantanee sulla pandemia di coronavirus, per aiutare a frenare la diffusione della disinformazione.

TL; DR: 7 conclusioni sulla migrazione delle app Web ai chatbot

In sintesi:

• Molte volte, lo sviluppo di un chatbot può ridurre significativamente i tempi di sviluppo, perché non è necessario progettare e pianificare un'interfaccia utente grafica. (Detto questo, vale la pena guardare i punti più fini della progettazione dell'esperienza utente di chatbot prima di iniziare, per imparare dagli errori degli altri.)
• È molto più semplice aggiungere nuove funzionalità ai chatbot. Gli sviluppatori non devono riprogettare o modificare alcun elemento corrente. Il chatbot deve solo iniziare a capire il nuovo tipo di messaggio.
• I chatbot sono molto più accessibili per impostazione predefinita alle persone con bisogni speciali.
• Non è necessario personalizzare una soluzione multipiattaforma. La piattaforma chatbot lo fa già.
• Gli utenti si fidano molto di più dei chatbot per la condivisione delle informazioni. Non è necessario chiedere il permesso o mostrare avvisi - ad esempio, l'utente può semplicemente scegliere un'immagine dalla sua galleria e inviarla al tuo chatbot - l'autorizzazione per accedere alla galleria di immagini è già data alla piattaforma di chat.
• Le piattaforme di chat semplificano la gestione delle notifiche push. Le notifiche push sono ciò che fa la differenza tra le app dimenticate dagli utenti e le app con cui gli utenti interagiranno regolarmente.
• Le piattaforme di chat gestiscono per te lo spostamento tra condizioni offline e online.

Come costruire un chatbot WhatsApp: consigli per la separazione e best practice

I meriti di scrivere un chatbot sono abbastanza chiari. Si consiglia agli sviluppatori che sono pronti a costruirne uno di iniziare in piccolo, con un chatbot che capisca un messaggio. E lo gestisce bene.

I chatbot dovrebbero attenersi ai messaggi brevi. Le persone non leggono messaggi lunghi. Quando hai qualcosa di importante da inviare che non può essere espresso in modo conciso, è meglio dividere i messaggi in più messaggi piccoli.

I chatbot con personalità vengono ricevuti meglio. Anche un minimo "parlare umano" va molto lontano rispetto a un approccio di "formalità del messaggio di sistema": "Aggiornerò la mappa del parcheggio per te", invece di "Il database è stato aggiornato". Un chatbot dovrebbe lasciare all'utente la sensazione che sia una macchina che è lì per servire l'utente, piuttosto che una scatola nera che esegue operazioni tecniche che potrebbe non essere in grado di capire.

Questo tutorial sul chatbot di WhatsApp non è entrato nei dettagli dell'analisi dei messaggi in linguaggio naturale che gli utenti invieranno ai chatbot. Ma gli aspiranti fornitori di servizi di sviluppo di chatbot sono invitati a esaminare il codice sorgente del bot WhatsApp Parking Assistant (in particolare hackparkDialogFlow.ts , che accetta le richieste dell'utente come azioni) per avere un'idea di come funziona quell'aspetto.

Per un articolo più approfondito su come rilevare diversi tipi di messaggi utente, seguendo anche l'approccio di iniezione delle dipendenze alla programmazione, vedere il tutorial del chatbot TypeScript di Toptal.

Buona fortuna con il tuo sviluppo chatbot WhatsApp!