O seu primeiro chatbot mais simples que você respeita.
Um guia para a criação de um chatbot no Messenger, usando o Howdy’s Botkit, em apenas alguns minutos.
Introdução
Vou direto ao ponto. Este é um guia para quem já possui alguma familiaridade com conceitos de programação, apesar de não exigir grande experiência.
Este texto, tem como prioridade ser um passo-a-passo prático de como desenvolver seu primeiro chatbot para o Messenger, usando o Botkit e não uma discussão dos aspectos conceituais, justamente por ser parte de um manifesto à experimentação da tecnologia*.
Chatbots
São serviços assim como aplicativos e entregam informações para os usuários, porém não o fazem por meio de uma interface gráfica, mas por meio de uma interface conversacional.
Neste artigo, o Pedro Rocha explica muito bem alguns dos conceitos fundamentais para entendermos o que são chatbots.
Botkit
O Botkit é um framework open-source para Node.js, voltado para a construção de chatbots, que possibilita a integração com diversas plataformas de mensagens como Slack e Messenger, bem como com API’s voltadas para o processamento de linguagem natural (PLN) entre outros.
Iniciando
Tendo em vista que a ideia deste guia é que você consiga ver seu primeiro chatbot funcionando rapidamente, vamos basear o bot em um template desenvolvido pela comunidade do Botkit — lembrando que o framework é open-source — que já prepara toda a lógica de conexão com a API do Messenger, faz a inicialização do Express WebServer e dá algumas funcionalidades ao robô.
Basicamente, esse starter kit deixa toda a estrutura pronta para que qualquer um possa baixar o projeto, criar uma página no Facebook e um configurar um aplicativo na sessão de Desenvolvedores do Messenger e já poder conversar com o bot.
O template a ser utilizado foi uma edição no código do Botkit Starter Kit for Facebook Bots e pode ser encontrado nesse link.
Configurando um aplicativo do Messenger
Essa parte é extremamente simples, mas pode dar alguma dor de cabeça quando você ainda não conhece minimamente a plataforma do Messenger.
A API do Messenger está em constante atualização — eu tenho desenvolvido há 3 meses apenas e já vi a documentação ser aprimorada e incrementada muitas vezes, bem como o surgimento de novas funcionalidades quase semanalmente — e possui todas as suas features e questões muito bem documentadas.
Quando estiver desenvolvendo seu próprio bot, com funcionalidades mais complexas e interessantes do que este exemplo — muito básico — que eu estou demonstrando aqui, é fundamental estar fluente na linguagem do Messenger e ficar por dentro de toda a documentação. Essa é das dicas que pode parecer óbvia, mas ter ela em mente pode salvar muito tempo.
Indo ao que interessa, você pode acessar a seção de desenvolvedores do Facebook, já na plataforma do Messenger, por este link e realizar o login com a sua conta do Facebook.
Acesse a aba “Meus Aplicativos” e crie um novo aplicativo.
Dê um nome e um email de contato para o seu app e selecione a opção para a criação de um número de identificação.
Agora, você vai ser redirecionado para a página em que deve escolher as ferramentas, ou os produtos que vai utilizar no seu robô.
Dentre todas as opções, as únicas que são necessárias para você ter um bot funcional são as de Webhooks e a do Messenger. Selecione a opção para configurar cada um destes tópicos.
Configurando o tópico do Messenger
Na aba de configurações do Messenger. Vá até a seção para a Geração de Token.
Agora você deve criar uma página no Facebook. Sim, como faria com uma página de memes, ou qualquer outra. Selecione a opção para criar uma nova página e você será redirecionado para cá:
Escolha qualquer um desses tópicos. Ele serve para categorizar sua página para fins de SEO, não para este tutorial. Dê um nome, selecione uma subcategoria e crie a página.
Atualize a página em que havia a seção para a geração de tokens, e selecione a sua página recém-criada, e assim, um token será gerado:
Copie este token e agora chegou a hora de configurar o seu arquivo de ambiente. Abra o projeto que você clonou do github no seu editor de texto e vá até o arquivo .env.
Agora é só preencher estas lacunas. Cole o token gerado pela plataforma do Messenger no campo PAGE_TOKEN e escolha um token de verificação para usar no campo VERIFY_TOKEN . Sim, pode ser o que você quiser.
O arquivo .env vai ficar parecido com este:
Agora abra uma aba no terminal, navegue até o diretório da sua aplicação onde está contido o arquivo bot.jse use o comando node bot.js . Você deve ver algo assim:
Que indica que sua aplicação está rodando e que algumas das features foram incializadas com sucesso. E será possível também verificar que sua aplicação está funcionando no localhost:3000
Pausa para o ngrok!
Uma das coisas legais de desenvolver projetos com pessoas bem mais experientes que você, é que você é apresentado a ferramentas, conceitos e técnicas novas o tempo inteiro. Uma dessas ferramentas que eu conheci foi o ngrok.
O ngrok é uma ferramenta muito simples que permite que você crie Túneis SSH para expor, de maneira segura, uma porta na sua máquina local — seu local webserver, no caso — para a web, permitindo que outras pessoas ou aplicações tenham acesso à ela.
Após baixar a ferramenta, você pode seguir as instruções na página de download ou instalá-la globalmente — e cada sistema operacional vai possibilitar uma maneira diferente de fazê-lo — para então poder utilizá-la no terminal.
Para criar um túnel e expor sua máquina local use o seguinte comando:
ngrok http 3000Obs.: A porta 3000 foi arbitrariamente escolhida na configuração do webserver Express na aplicação em si, mas poderia ser modificada a qualquer momento.
E o terminal aonde você está rodando o ngrok vai mostrar esta tela:
Agora você pode verificar as requisições HTTP que sua máquina está recebendo através do localhost:4040 em uma aplicação do ngrok, com uma interface mais bonita e completa que a linha de comandos.
Configurando o Webhook
Para você que, assim como eu não sabia quando estava começando, ainda não sabe o que é um webhook, aqui vai uma rápida e excelente explicação.
É uma forma de recebimento de informações quando um evento acontece. O webhook na prática, é a forma de receber informações entre dois sistemas de uma forma passiva.
Você deverá configurar um webhook, assim como fez com o tópico Messenger, para receber os retornos das chamadas à API do Messenger. A grosso modo, é para onde o Messenger vai enviar as respostas ao que você pedir para ele.
Ainda na aba de configuração do Messenger, vá até seção de Webhooks — logo abaixo da seção de geração de token — , selecione a opção para configurar um webhook. Uma pop-up vai surgir solicitando as seguintes informações: URL de retorno e o token que de verificação.
O token de verificação deve ser o mesmo que você definiu no arquivo .env , anteriormente.
Agora, duas coisas devem ficar esclarecidas, para que ninguém tenha os mesmos problemas bobos que eu tive:
- O Botkit configura o endpoint da aplicação onde o seu chatbot está rodando para ter o sufixo
/facebook/receive. - O Messenger exige que o protocolo utilizado seja o HTTPS ao invés do HTTP convencional, para enviar as requisições para a sua aplicação.
O ngrok expõe um endereço para sua máquina local no protocolo HTTP e também no HTTPS, e o segundo é que deve ser utilizado.
Desta maneira, a URL que você vai utilizar para preencher o campo que o Messenger solicitou vai ser algo parecido com:
https://55e99e76.ngrok.io/facebook/receiveEsse caminho é o segundo endereço que está em “fowarding” no ngrok + a especificação de endpoint configurada pelo Botkit.
Quanto às checkboxes você precisa marcar apenas a messages e a messaging_postbacks em qualquer ocasião.
O último passo: Selecione Verificar e salvar e página será atualizada. Volte à seção de webhooks e Selecione a página que você criou e selecione a opção Inscrever-se. Para que as solicitações dos usuários — mensagens enviadas ao bot — sejam direcionadas para o seu webhook.
Note que para poder Verificar e Salvar a sua aplicação
bot.jsdeve estar rodando e o ngrok deve estar fazendo o túnel. Senão a verificação vai retornar um erro.
Agora é só buscar sua página no Facebook e selecionar a opção para ver a página como visitante, ou abrir o messenger e procurar o nome que você deu à sua página seu bot estará ali, com uma foto de perfil igual à letra inicial do nome que você deu a ele.
Pronto! Diga um “oi” para o seu bot.
Pode ser que ele não responda de primeira, então vale rodar novamente a sua aplicação, ou mesmo esperar um pouco e tentar novamente, pois algo misterioso rola com o Messenger, que ele nem sempre consegue rodar de primeira.
Um rápido overview do código
O projeto é, em si, muito simples. Uma aplicação que tem seu ponto de entrada no arquivo bot.js que vai chamar todas as outras partes do projeto.
O diretório components contém alguns arquivos fundamentais para o funcionamento do bot, mas nada que exija preocupação em um primeiro momento.
A parte interessante está no diretório skills . Este contem os arquivos que representam as habilidades do bot. No caso, as únicas coisas que ele suporta são respostas a comandos de saudação e ao comando “tarefas”.
Repare que nos dois arquivos gerenciadorDeTarefas.js e saudacao.js a função principal é
controller.hears([‘tarefas’], ‘message_received’, function(bot, message) {Ela descreve algo que o bot pode ouvir e compõe toda sua estrutura básica. O primeiro parâmetro é um vetor de palavras que o bot tentará escutar para essa função hears . O segundo é o evento que o Messenger estará disparando quando receber uma mensagem de um usuário e o terceiro argumento é uma função de callback que vai dizer o que fazer toda vez que o robô ouvir aquele tipo de mensagem e ela recebe um argumento bot e um message que vão ser utilizados para responder ao usuário com a funçãobot.reply(message, "resposta"); .
O evento message_received é disparado com inputs de texto do usuário e o evento facebook_postback é disparado quando o usuário pressiona botões, respostas rápidas etc.
A documentação do Botkit tem todas as possibilidades de utilização do framework, porém pode ficar um pouco confusa certas vezes e dependendo da arquitetura adotada para o projeto, pode ser um pouco incompleta. Mas para conhecer melhor o projeto e as possibilidades que ele abre é fundamental entender todos os aspectos dela.
O Botkit permite integrações por meio de middlewares com API’s de Processamento de Linguagem Natural, como o IBM Watson Conversation ou a API.ai para tornar o bot mais humano e mais inteligente, bem como API’s de monitoramento das conversas, bancos de dados para salvar dados de usuários e todo tipo de features que você desejar. Por isso um chatbot pode ser uma mídia tão poderosa quanto um app, com a vantagem de não consumir memória adicional dos devices do usuário, bem como de centralizar múltiplas aplicações dentro de um único ambiente, no caso o Messenger.
Últimas considerações
Chatbots, em um estado tão pouco inteligente e primário, podem parecer pouco empolgantes, mas é interessante pensar nas possíveis aplicações a serem desenvolvidas e nas implicações de mudarmos de um paradigma de Interface Gráfica para um de Interface Conversacional e, em um grau mais sofisticado, no conceito de Sistema Operacional Conversacional e no leque de possibilidades que estes paradigmas são capazes apresentar.
Que esse texto sirva não só como um tutorial, mas como parte de um manifesto sobre fazer. Sobre tirar ideias do papel e sobre a exploração do conhecimento como atividade potencializadora da nossa capacidade de realização.
Obrigado e mãos à obra!
Por último, mas não menos importante:
Queria deixar explicitado aqui, como estou feliz de escrever este texto, que, aparentemente, não teria um motivo em especial para ser escrito. Mas explico: Me pediram para escrever este texto em um momento muito oportuno. Além de ser mais um desses que me ajuda a consolidar as coisas que eu venho aprendendo, ele vem carregado de algumas implicações interessantes:
I — É o primeiro texto em português da recursiveWhileTrue, o que me fez decidir por traduzir os outros, tanto os que estão em produção quanto os primeiros que foram publicados. A ideia é disponibilizar todos os textos em inglês e em português visando maior alcance e acessibilidade.
II — É um texto sobre um tema que praticamente não é abordado, por sua especificidade e por estar contido em um campo do conhecimento muito novo.
III — (*) Esse texto é a melhor forma de começar a nova série-manifesto-tutorial que estou escrevendo: “Viciados em tecnologia, é hora de sujar as mãos!” (link em breve). Difícil pensar numa forma mais legal e coerente de iniciar um chamado a todos aqueles que falam sobre tecnologia mas ainda não tiveram o prazer de experienciá-la, do que com um tutorial prático.
IV — Quaisquer dúvidas, comentários, sugestões para o texto ou para o código, críticas e etc. são extremamente bem-vindos e tendem a fortalecer a comunidade de desenvolvedores, então por favor, sintam-se à vontade!
