Crie um chatbot do WhatsApp, não um aplicativo

Há muito tempo, criei um aplicativo da Web para uma empresa (mais de 200 mil funcionários). O feedback sobre o aplicativo da Web me levou a fazer um experimento. O que aconteceria se eu criasse um chatbot do WhatsApp para resolver o caso de uso específico, em vez de um aplicativo da web? As pessoas gostariam mais? Seria mais útil?

Mas a história é muito maior do que isso. Os chatbots têm muito potencial! Neste tutorial do chatbot do WhatsApp, eu queria compartilhar minha jornada de aprendizado, as melhores práticas que descobri e minhas previsões sobre a questão app vs. chatbot. E além: os chatbots um dia substituirão todos os aplicativos tradicionais?

A empresa em que trabalhei tinha um escritório para cerca de 2.000 funcionários no centro de Tel Aviv. A vaga de estacionamento é muito limitada, então as pessoas estacionam em vagas intencionalmente projetadas para estacionamento duplo, onde um carro está bloqueando outro. Em cada vaga de estacionamento duplo, o primeiro motorista estaciona dentro e o segundo estaciona fora.

De um quadro branco a um aplicativo Web

Antes de haver um aplicativo, havia um grande quadro. Todos os motoristas marcaram onde estavam estacionando, seus nomes e números de telefone. Antes de sair do escritório, um motorista teve que verificar se alguém estava bloqueando seu carro. Nesse caso, eles teriam que ligar para o outro motorista e torcer para que não estivessem no meio de uma reunião para que pudessem sair e tirar o carro do caminho.

Para tornar o processo melhor, criei um aplicativo web.

Era simples. Sem back-end. Sem hospedagem de servidor. Sem manutenção de banco de dados. Nem mesmo qualquer estrutura de interface do usuário. Sem webpack e sem pacotes JS! Apenas JavaScript de baunilha.

Ele foi hospedado usando a hospedagem gratuita de páginas estáticas do GitHub. O banco de dados era FireBase, então tínhamos suporte em tempo real e suporte a JSON, sem necessidade de back-end.

A interface do usuário era simples. Os usuários veriam todos os lugares de estacionamento e clicariam em um vazio para preencher seus detalhes. Se eles já estivessem estacionados, levaria os dados do armazenamento local do navegador. Se eles clicassem em um slot registrado, eles veriam os detalhes de contato relevantes e poderiam optar por ligar para o motorista.

Ele estava funcionando muito bem por quase um ano. Menos de um dia de desenvolvimento ajudou e economizou tempo para muitas pessoas – um bom investimento.

Do aplicativo Web ao chatbot

Um dia, o Facebook anunciou que lançaria uma API para o WhatsApp. No dia seguinte, meu irmão comprou um Amazon Echo, com Alexa. Naquela época, também comecei a ver o Google Assistant em todos os lugares.

Comecei a pensar que talvez o mundo estivesse se movendo em direção aos chatbots, então eu deveria experimentar. Os usuários prefeririam usar chatbots? Precisaria dar menos suporte? Introduziria novos meta-recursos simplesmente aproveitando a infraestrutura diferente?

Recebi alguns comentários sobre o aplicativo da web comum e acreditei que poderia resolver isso se eu criasse um chatbot do WhatsApp:

• O aplicativo não funcionou bem em alguns celulares antigos.
• Não funcionou no subsolo (onde fica o estacionamento – não há um bom sinal de celular lá).
• Os motoristas desejavam enviar mensagens para os bloqueadores em vez de abrir o discador do telefone.
• Os motoristas queriam receber notificações push se alguém os estivesse bloqueando, em vez de abrir o aplicativo da web todas as vezes antes de sair.

É importante lembrar que os desenvolvedores de plataformas de bate-papo como Telegram ou WhatsApp trabalharam dias e noites durante anos para garantir a estabilidade de seus aplicativos. Ao usar seus recursos e desenvolver apenas um pequeno mecanismo para responder a perguntas, isso deixaria o trabalho árduo de manutenção para os desenvolvedores da plataforma de bate-papo. Tudo o que eu precisava fazer era descobrir como criar um chatbot do WhatsApp.

Imediatamente depois que comecei a desenvolver o novo chatbot de assistente de estacionamento, percebi o quão fantástica era a ideia. Foi tão fácil e rápido adicionar novos recursos, e eu nem precisei fazer testes de ponta a ponta.

Sem sinal? Sem problemas.

Tweet

Além disso, eu não precisava mais de um processo complicado de CI/CD. Se estiver funcionando em um emulador de bate-papo, funcionaria em qualquer lugar. Sem .apk , sem Xcode, sem App Store ou Google Play. O chatbot conseguiu enviar mensagens aos usuários sem que eu precisasse registrar dispositivos, usar PubSub ou serviços semelhantes para notificações push ou salvar tokens de usuário. Não há necessidade de um sistema de autenticação - eu estava usando o número de telefone do usuário como identificação.

Sem sinal? Sem problemas. Não precisei adicionar suporte offline usando arquivos de manifesto: o WhatsApp me deu isso imediatamente. A mensagem sairia em breve, quando o usuário iria para um nível superior onde o wifi era melhor.

Então percebi que toda vez que uma plataforma de bate-papo introduzisse um novo recurso, meu aplicativo se beneficiaria imediatamente dele. Uau - agora que é um investimento muito bom. (Para ser justo, há também o risco de que novos recursos possam limitar a funcionalidade ou criar alterações importantes que exijam mais esforço de desenvolvimento, portanto, pense com cuidado antes de implementar tarefas críticas para os negócios).

Escrevendo Assistente de Estacionamento , um protótipo de chatbot do WhatsApp

Para criar um chatbot do WhatsApp, o primeiro desafio é levar as mensagens do WhatsApp para o seu programa. A solução mais simples que encontrei é usar um número de telefone compartilhado do Twilio. É apenas para desenvolvimento – ao passar para a produção, os desenvolvedores desejarão usar um número de telefone dedicado.

Os números gratuitos do Twilio são compartilhados por muitos usuários do Twilio. Para diferenciar os usuários finais de um aplicativo dos aplicativos de outros usuários do Twilio, os usuários finais precisam enviar uma mensagem predefinida ao chatbot.

Depois que um usuário enviar uma mensagem especial para o número compartilhado, todas as mensagens de seu número serão direcionadas para sua conta Twilio e webhooks. É por isso que um número dedicado é necessário na produção - não há garantia de que um determinado usuário desejará usar apenas um aplicativo em um determinado número compartilhado.

Envio de mensagens do WhatsApp

No “Programmable SMS Dashboard” do Twilio, há um link “WhatsApp Beta” na barra de navegação à esquerda:

Ao clicar nele, os desenvolvedores verão uma página com a opção “Sandbox”.

Para associar usuários, eles precisarão enviar uma mensagem especial para o número fornecido pelo Twilio. Depois que os usuários fizerem isso, podemos começar a enviar mensagens para eles e processar mensagens deles, via Twilio.

Aqui está um exemplo de envio de uma mensagem usando 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

Esta é uma mensagem de texto simples. Mas você também pode anexar mídia (imagens, etc.) às suas mensagens. Aqui está um exemplo do 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)) }

É isso: Agora podemos começar a enviar mensagens para os clientes! Mas é importante lembrar as duas limitações técnicas mais cruciais das mensagens do WhatsApp:

1. Quando o bot recebe uma mensagem, você pode enviar uma resposta de texto gratuitamente. Mais do que isso custa dinheiro.
2. O bot pode enviar mensagens para os usuários apenas durante a janela de 24 horas a partir do momento em que recebe uma mensagem de um usuário. Fora dessa janela, o bot pode enviar apenas mensagens usando templates aprovados, como veremos mais adiante.

Recebendo mensagens do WhatsApp

Enviar mensagens foi bastante fácil, mas receber e processar mensagens é ainda mais fácil.

Na página “sandbox” do Twilio, os desenvolvedores podem definir para onde o Twilio deve enviar as mensagens que recebe no número compartilhado do WhatsApp. Durante o desenvolvimento, serviços como Ngrok ou Serveo podem fornecer URLs públicas que roteiam para máquinas de desenvolvedores locais.

As mensagens do Twilio WhatsApp são assim:

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

Isso é tudo o que precisamos. Podemos usar qualquer linguagem de programação para receber essa mensagem, analisá-la e tentar entender o que os usuários estão perguntando. Isso provavelmente resultará em algumas operações CRUD em um banco de dados, após as quais o bot pode entregar as informações apropriadas (ou mensagem de sucesso/falha) ao usuário em sua resposta. Esses são os conceitos básicos de como criar um chatbot do WhatsApp.

Modelos de mensagem

Conforme mencionado, os chatbots podem enviar mensagens de estilo livre apenas para usuários que estão “atualmente” interagindo com eles, ou seja, durante a janela de 24 horas. Mas se você deseja enviar mensagens para novos usuários, ou fora da janela, você deve usar modelos de mensagens pré-aprovados. Isto é para prevenir spam.

No meu caso de uso, eu queria atualizar os drivers quando alguém os bloqueava, mesmo que não fossem usuários do chatbot. No Twilio, clique em “remetente” e “configurar”.

Este é o modelo que escolhi:

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

Vários dias depois, o Facebook aprovou meu modelo e pude começar a enviar essas mensagens para todos que tinham WhatsApp, não apenas para motoristas que enviaram uma mensagem para o chatbot.

Enviar uma mensagem de um modelo é exatamente como enviar uma mensagem normal, usando a mesma API. O WhatsApp vê automaticamente que corresponde a um modelo e aprova a mensagem.

Não apenas para assistente de estacionamento

Essa estratégia é emocionante para mim quando imagino uma loja online: talvez um dia as pessoas possam comprar qualquer coisa usando chatbots. Seria tão fácil quanto enviar mensagens do WhatsApp e anexar imagens. Imagine se os usuários pudessem anexar dinheiro real a cada mensagem do WhatsApp. Seria muito simples comprar coisas. Os usuários poderiam facilmente comprar qualquer coisa falando com o chatbot de um fornecedor.

Imagine um chatbot que substitui o Waze ou o Google Maps. Você envia uma mensagem de texto do seu destino. A plataforma do chatbot está rastreando sua localização e o chatbot envia uma mensagem gravada que é reproduzida automaticamente com a direção falada em tempo real da navegação.

Não é fantasia. Atualmente, o WhatsApp suporta o compartilhamento de localização em tempo real - tudo o que eles precisam é a opção de reproduzir automaticamente as mensagens recebidas e pronto.

Pense em um chatbot do Waze ou em um chatbot de táxi em vez dos aplicativos Gett ou Uber. Você manda uma mensagem dizendo onde está, aí o táxi chega e você paga pelo WhatsApp. Tão simples.

Alguns leitores podem estar pensando: “Os usuários não preferem interfaces gráficas e não apenas digitação?” Acredito que as plataformas de chatbot darão ao proprietário do chatbot a opção de enviar botões, imagens e caixas HTML puro durante a conversão. O Facebook já suporta Webview para Messenger. Os usuários não precisam instalar nada, basta usar seu aplicativo de mensagens instantâneas preferido.

Essas vantagens são o motivo pelo qual os desenvolvedores estão procurando criar chatbots do WhatsApp para lidar com tarefas importantes, como dar respostas confiáveis ​​instantâneas sobre a pandemia de coronavírus, para ajudar a conter a disseminação de desinformação.

TL;DR: 7 conclusões sobre como migrar aplicativos da Web para chatbots

Resumindo:

• Muitas vezes, desenvolver um chatbot pode reduzir significativamente o tempo de desenvolvimento, porque não há necessidade de projetar e planejar uma interface gráfica de usuário. (Dito isso, vale a pena analisar os pontos mais delicados do design de UX do chatbot antes de começar, para aprender com os erros dos outros.)
• É muito mais fácil adicionar novos recursos aos chatbots. Os desenvolvedores não precisam reprojetar ou alterar nenhum elemento atual. O chatbot só precisa começar a entender o novo tipo de mensagem.
• Os chatbots são muito mais acessíveis por padrão para pessoas com necessidades especiais.
• Não há necessidade de personalizar uma solução multiplataforma. A plataforma de chatbot já faz isso.
• Os usuários confiam muito mais nos chatbots para compartilhar informações. Você não precisa pedir permissão ou mostrar avisos - por exemplo, o usuário pode simplesmente escolher uma imagem de sua galeria e enviá-la para seu chatbot - a permissão para acessar a galeria de imagens já é dada à plataforma de chat.
• As plataformas de bate-papo facilitam o manuseio de notificações push. As notificações push são o que faz a diferença entre os aplicativos que os usuários esquecem e os aplicativos com os quais os usuários se envolvem regularmente.
• As plataformas de bate-papo lidam com a mudança entre as condições offline e online para você.

Como construir um chatbot do WhatsApp: conselhos de despedida e práticas recomendadas

Os méritos de escrever um chatbot são bastante claros. Os desenvolvedores que estão prontos para construir um são aconselhados a começar pequeno, com um chatbot que entenda uma mensagem. E lida bem com isso.

Os chatbots devem se ater a mensagens curtas. As pessoas não leem mensagens longas. Quando você tem algo importante para enviar que não pode ser expresso de forma concisa, é melhor dividir as mensagens em várias mensagens pequenas.

Chatbots com personalidade são mais bem recebidos. Mesmo um mínimo de “fala humana” vai longe em comparação com uma abordagem de “formalidade de mensagem do sistema”: “Vou atualizar o mapa de estacionamento para você”, em vez de “O banco de dados foi atualizado”. Um chatbot deve deixar o usuário com a sensação de que é uma máquina que está lá para servir ao usuário, em vez de uma caixa preta realizando operações técnicas que eles podem não estar em condições de entender.

Este tutorial do chatbot do WhatsApp não entrou nos detalhes da análise das mensagens em linguagem natural que os usuários enviarão aos chatbots. Mas os aspirantes a provedores de serviços de desenvolvimento de chatbot podem examinar o código-fonte do bot WhatsApp Parking Assistant (particularmente hackparkDialogFlow.ts , que aceita solicitações do usuário como ações) para ter uma ideia de como esse aspecto funciona.

Para obter um artigo mais aprofundado sobre como detectar diferentes tipos de mensagens do usuário — enquanto também segue a abordagem de injeção de dependência para programação — consulte o tutorial de chatbot TypeScript da Toptal.

Boa sorte com o seu próprio desenvolvimento de chatbot do WhatsApp!