Como Criar um ChatBot com Rails facilmente!

Essa é uma série de Posts com o objetivo de ensinar a como criar um ChatBot que auxilie os desenvolvedores em suas tarefas diárias e economize tempo na hora da programação.
Esse é um projeto OpenSource e todo o código estará disponível no Github. Você pode acessá-lo neste link.


Porque um ChatBot?

Os chatbots possivelmente logo estarão tão presentes como os Apps mobile estão hoje em dia. Ter máquinas capazes de aprender (falaremos bastante de machine learning nesse blog) nos ajudando a fazer as tarefas do dia a dia logo será bem comum.

Embora possa parecer um assunto bem complicado, na verdade, se você entender alguns princípios e conhecer algumas ferramentas, poderá criar hoje mesmo o seu primeiro ChatBot!


Como isto vai funcionar?

Embora esta seja a parte 1 do tutorial, o que construiremos aqui será um ChatBot capaz de comunicar-se pelo Facebook Messenger e auxiliar programadores em algumas tarefas básicas.
Nos próximos posts vamos torná-lo mais inteligente (machine learning) e expandir o leque de ferramentas dele.

Se você realizar esse tutorial com calma, ao final do processo terá entendido alguns conceitos fundamentais sobre ChatBots e também será capaz de criar seu próprio ChatBot usando Ruby On Rails.

Dificuldade do tutorial? Média.
Vamos começar devagar e usando alguns meios para facilitar o serviço.


[PDF] Machine Learning, guia rápido de links 🙂

Cursos gratuitos, ferramentas, canais no youtube, serviços online e etc




Objetivos do primeiro tutorial! (Foco é tudo!)

● Criar um App capaz de responder em um chat do Facebook!

● Permitir que o Bot faça consultas na página do Wikipedia e retorne o resultado ao usuário que solicitou.

● Fazer o ChatBot responder quais são suas habilidades no momento em que for questionado.


Antes de começar vamos criar nossas contas

Crie uma conta no DialogFlow

O DialogFlow é uma plataforma que facilita muito a criação de um Bot que pode responder de maneira fácil à perguntas de texto e áudio.  Acesse o Link e crie sua conta: Criar Conta

 

 

Crie uma página no Facebook

Nós vamos precisar de uma página no Facebook, na qual os usuários poderão enviar mensagens e receber as respostas do nosso Bot.  Crie uma página no Facebook com o nome do seu Bot:  Criar Página

 

Crie um app no Facebook

Crie um App para fazer a conexão entre sua página e o DialogFlow: Criar App
(Não se preocupe, vamos configurá-lo juntos)

 

Crie um app free no Heroku ou em algum outro host que você prefira (só precisamos de um IP)

Nós usaremos o Heroku para hospedar nossa Api por ser simples e gratuito. Se você não sabe como criar um App no Heroku, dê uma olhada nesse Guia, mas sinta-se à vontade para hospedar seu app onde você preferir. Nós apenas precisamos que ele esteja Online.


Finalmente vamos criar uma Api Rails 5

Vamos criar uma Api usando Rails 5 e Postgres como Database, mas sinta-se à vontade para criá-la usando Rails 4 ou quem sabe até mesmo Sinatra e outro Database  (Just be happy : ) )

Para criá-la usando o Rails 5 atualize a sua Gem do Rails:

Verifique se a sua versão do Rails é realmente a 5

Gere seu novo App

Agora temos nossas contas criadas e também geramos nosso App. Vamos em frente!


Vamos configurar nosso Bot no DialogFlow

O DialogFlow é uma plataforma muito boa, na qual você pode configurar rapidamente um Bot capaz de responder frases pré programadas (e até frases similares) e permite também que você chame um Webhook quando determinada frase for recebida.

Usaremos o Rails para responder a essas chamadas com as informações de valor que queremos devolver aos usuários.
O DialogFlow é gratuito até 6000 chamadas mensais. Claro que isso é pouco para uma aplicação profissional, porém para nossos propósitos é suficiente.

Em um tutorial futuro poderemos migrar do DialogFlow para outra plataforma ou até mesmo desenvolver essa parte de compreensão das frases dentro do aplicativo. Mas por hora ele é o “perfect match” para nós.


Agora vamos conectar o DialogFlow ao nosso App do facebook

  1. Acesse sua conta do DialogFlow: Acessar
  2. Agora clique em “Create Agent”
    • a – Escolha o nome do seu Bot
    • b – Coloque uma descrição, se desejar
    • c – Clique em Salvar
  3. Agora no menu “Integrations”
  4. Clique no “Facebook Messenger”

 

Você deverá ter chegado na tela acima. Esse é o menu que vai te ajudar a integrar o seu Bot do DialogFlow com o seu Aplicativo do Facebook. (Deixe essa tela aberta, pois voltaremos nela)

5. Acesse novamente a página de desenvolvedor do Facebook: Acessar
6. Escolha seu App no menu

 

7. Você deverá ter chegado a uma tela igual a esta. Selecione a opção ”messenger”.
8. Clique em Configurar.
9. Agora no bloco “Geração de token” escolha no dropdown a sua página criada no começo do tutorial.

11. O Facebook solicitará algumas permissões, dê as permissões e copie o token que apareceu.
12. Finalmente, vamos colar esse token na página de configuração do DialogFlow que deixamos aberta. (Mas não feche a página do Facebook, pois voltaremos nela)
13. Antes de colar o token você precisará virar a chave que ativa a integração do DialogFlow com o Messenger ao lado direito do Modal.

14. Cole o Token como na imagem no campo “Page Access Token”.
15. No campo “Verify Token” preencha com uma palavra secreta e segura (“gere uma”). Anote-a para não perder, vamos usá-la agora no menu de desenvolvedor do Facebook no seu App na mesma página que pegamos o Token.

16. Agora, vamos voltar na página do Facebook e no bloco “WebHook”, clique em configurar.


17. No campo “Verify Token” cole o Token que você gerou na Página do DialogFlow
18. Vá à Página do DialogFlow no modal de integração com o Messenger novamente, copie o campo “Callback Url” e cole na página do Messenger no campo “URL de retorno de chamada“.

19. Para finalizar, nos Radio Buttons, selecione apenas a opção “messages” como na imagem a baixo.

 

20. Agora clique Primeiro em “Start” no DialogFlow  e depois em  “Verificar e Salvar” no Facebook.

Pronto \o/, você conseguiu conectar seu app ao DialogFlow e agora ele está pronto para responder por você no Messenger!

*Apenas lembrando que somente você que é dono dele poderá conversar com ele por enquanto. Para abrir ao público, você precisará enviar à revisão do Facebook. É um processo bem simples: veja neste link como enviar!


Vamos fazer um teste?

  1. Vá até a sua página do Facebook que você criou e clique em enviar mensagem!
  2. Você deverá receber algo como “I don’t think I’m qualified to answer that yet.” se você deixou a configuração do seu app em inglês ou outra mensagem similar em Português se você alterou o idioma.

Sucesso, nosso app já está respondendo através da integração do DialogFlow e do Messenger.

Agora vamos ensinar ao nosso ChatBot algumas mensagens simples de cumprimentos e também vamos ensiná-lo a responder qual é sua lista de habilidades no momento.


Configurando mensagens no DialogFlow

Cumprimentos

  1. Vá até a painel do DialogFlow
  2. Escolha o Menu “Intent” e clique em Create Agent
  3. Agora vamos adicionar a expressão “Olá” no campo “User Says”
  4. Vamos adicionar algumas palavras correspondentes extras também como “Oi”, “Hi”, “Hello”, “E aí”
  5. Agora no campo “Text Response” adicione a seguinte resposta “Olá, como você está?”.
  6. No campo “Intent Name” dê um nome para sua Intent e clique em Salvar.
  7. Agora você pode ver no canto superior direito um campo escrito “Try Now”, lá você pode enviar mensagens ao seu Bot e ver as respostas programadas dele.
  8. Mande um “Hello” e veja se ele responde corretamente.
  9. No menu à esquerda clique em adicionar mais uma Intent.
  10. Dê um nome para sua nova Intent e no campo “User Says” coloque essas opções “Estou bem”, “Tudo bem”, “Estou Ok”, “Bem” e outras expressões que se encaixem em uma reposta a pergunta “como você está?”
  11. No campo “Speech Response” coloque as seguintes opções “Fico feliz que você está bem”, “Que bom que você está bem”.
  12. Salve novamente e faça o teste no chat no canto superior direito.
  13. Primeiro diga “Olá”, quando o bot perguntar se você está bem, responda dizendo “Estou bem” e você receberá uma das respostas que colocou no “Speech Response”
  14. Pronto, o Bot já sabe um cumprimento.

Programando o Bot para dizer quais são suas habilidades atuais

Para fazer isso basta você criar um “Intent” que responda qual a habilidade atual do seu “Bot”. Algo como: “Quais são suas habilidades, Bot?”, “Quais habilidades você tem?” ou até mesmo “O que você sabe fazer?” e o Bot pode responder algo como “Eu sei somar dois números”.
Fica como exercício para que você faça na plataforma do DialogFlow 🙂

 

Fazendo o Bot Chamar o Rails através do WebHook

Finalmente chegaremos ao Rails \o/.

Mas antes de configurarmos isso, nós precisamos configurar nosso App e subi-lo para o Heroku ou outra hospedagem para termos a Url dele Online para preencher o campo do WebHook (na plataforma do DialogFlow). Então vamos criar e depois voltaremos nesse tópico.


Preparando nosso App

Vamos construir nosso App baseado nos objetivos que definimos para a parte 1 do tutorial. Como o objetivo era construir um Bot que fizesse consultas ao Wikipedia, devolve-se o resultado e o link para a página completa, nós  precisaremos utilizar uma Gem para facilitar a consulta ao Wikipedia.

 

Instalando a Gem de consulta a Wikipedia

Vá até o Gemfile e inclua:

Agora Rode o Bundle para instalar:

 

Criar um Serviço que vai consultar a Wikipedia

Crie esse arquivo dentro do seu projeto:

Agora copie esse código e cole nesse arquivo:

Agora seu serviço está pronto.

 

Criando a Rota para responder a chamada do DialogFlow

Adicione ao routes.rb a seguinte rota:

Vamos criar um controller básico para responder ao messenger

Rode no seu terminal o seguinte gerador:

No controller que foi gerado, cole o seguinte código:

\o/ Uau! nosso pequeno App está pronto, mas lembre-se: ele é só o começo de algo grande. Vamos subir para o Heroku e testar? Vamos lá!


Subindo para o Heroku

Como vimos anteriormente, o que nós precisamos é apenas que o App fique Online, então se você quiser usar outro host fique à vontade. Não faremos um Passo a Passo do Heroku, porque isso seria um tutorial à parte. Mas clique no link para ver um Guia de como subir seu App para o Heroku!


Vamos adicionar a Url do App ao DialogFlow

Certo, estamos quase chegando ao fim. Sabemos que foi uma longa jornada até aqui, parabéns :).
Vamos agora adicionar a Url do nosso aplicativo que subimos para o Heroku ou outro Host ao DialogFlow para que ele possa chamar nossa função quando ele entender que o User fez uma pergunta.

  1. Dentro do seu painel do DialogFlow clique em “Fulfillment”.
  2. Você deve estar vendo a seguinte tela:
  3. Vire a chave do Webhook de Disabled para Enabled.
  4. Um campo deve aparecer para você colocar o link do seu aplicativo. Caso você tenha usado a mesma rota (/messenger) que usamos no tutorial, seu link deve ficar mais ou menos assim:(http://programmingassistant.herokuapp.com/messenger), ou seja basta acrescentar /messenger na frente da sua URL.
    chatbot
  5. Pronto agora é só clicar em “Salvar”

 


Último Passo!  Fazer o DialogFlow chamar nossa Api

Agora é o momento no qual a mágica finalmente acontece!

Vamos fazer o DialogFlow chamar nossa Api Rails para responder a uma pergunta do usuário.

Nós não estamos usando o DialogFlow atoa, ele é uma plataforma esperta e consegue identificar a pergunta do usuário, separar a “query” da pergunta e passar para a nossa aplicação.

Vamos configurar nele algumas frases como: “Pesquise Rails”, “Descubra o que é Python”, “O que é Node.js”, e ele  identificará que “Rails”, “Python” e “Node.js” são nossos objetos a serem pesquisados e enviará essa parte para nossa aplicação pegar o resultado e devolver ao Messenger. (Muito bonito! 🙂 )

  1. Primeiro vá ao painel do DialogFlow.
  2. Clique em Intents e depois em “Create Intent”
  3. Na parte que diz “User Says” insira em linhas diferentes as seguintes frases
    • “Pesquise Rails”
    • “Descubra o que é Python”
    • “O que é Node.js”
      chatbot
  4. Agora em “Action” escreva “Wikipedia”, queremos que ele passe isso para aplicação.
  5. Agora na parte inferior check a opção “Enable WebHook for this intent”
    chatbot
  6. Agora vem o “Truque principal”: nós temos que mostrar para o DialogFlow que “Rails”, “Python” e “Node.js” serão nossos objetivos de pesquisa. Para fazer isso:
    • Vá até “Users Says” na linha que você adicionou “O que é Node.js”
    • Selecione com o mouse a palavra “Node.js”
      chatbot
    • No modal de opções que vai aparecer escolha a opção “@sys.any”
    • Repita o mesmo processo para “Rails” e “Python”
    • O menu “User Says” deverá ficar assim ao final:
      chatbot
    • O menu “Action” deverá ficar assim ao final:
      chatbot
    • \o/ Pronto, agora dê um nome à sua Intent e clique em “Save”!

Agora que você salvou sua Intent no canto direito superior em “Try it Now”, dê o seguinte comando “Pesquise Tesla”, se tudo correu bem na integração ele deve responder com um preview do conteúdo do Wikipedia sobre ”Nikola Tesla” e o link para a página completa, sucesso absoluto! :).




12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/



Teste Final e Conclusão

Teste no Messenger

Agora é a hora de ir ao messenger e falar com o seu Bot. Lembre-se, nós programamos alguns cumprimentos e as seguintes maneiras de fazê-lo pesquisar no Wikipedia: “Pesquise ‘x'”, “Descubra o que é ‘y'” ou “O que é ‘z'”, então teste esses comandos.

Bugs e mais Bugs, o que fazer?

Se algo deu errado, veja o que fazer:

  1. Verifique se seu App está configurado corretamente no Facebook e conectado à sua página.
  2. Verifique se sua Api Rails está funcionando isoladamente do DialogFlow.
    Faça um Post para sua Url usando o mesmo parâmetro do DialogFlow e veja se a resposta está correta. (‘params[:result][:parameters][‘any’]’)
  3. Verifique se o DialogFlow está configurado corretamente (tanto a conexão com o Messenger quanto a com o Rails), ele pode ser o maior gargalo de erros por ter várias configurações. Então, olhos abertos.

Você verificou tudo, mas continua com erro:

  1. Verifique nos comentários se alguém passou por isso e foi resolvido
  2. Comente e nós o ajudaremos assim que possível 🙂
  3. Curta e mande dúvidas na nossa página no Facebook: OneBitCode no Facebook

 


Conclusão e Parte 2

O nosso Bot vai ganhar muitas funções nos próximos tutoriais, então acompanhe para aprender mais sobre Bots, Machine Learning e também Rails.

Algumas coisas que o Bot vai aprender nos próximos tutoriais:

  1. Um sistema de “Pomodoro“, para facilitar o uso da técnica no dia a dia.
  2. Um sistema de Ping que avisa quando seu site cair.
  3. Técnicas de Machine Learning para deixar nosso Bot mais inteligente.

O código completo do que fizemos aqui você pode encontrar no Github neste link!

Muito Obrigado por acompanhar este Post até o final, se você gostou se inscreva na nossa Newsletter e se inscreva no nosso canal do Youtube também. Logo teremos Screencasts bem legais por lá e também um Podcast.
Se você puder também, deixe um feedback nos comentários e compartilhe com seus amigos :).

Obrigado,

Equipe OneBitCode.


Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo? O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente! Seja por Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

julho 18, 2018

7
Deixe um comentário

avatar
6 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
wellingtonLeonardo ScorzadiegoRafael Andradehttps://criarsitepro.com.br/ Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Brenner
Membro

Olá, gostei do tópico, estou utilizando para estudo e gostaria de saber onde se encaixa o banco de dados nisso tudo, já que ví que aparentemente não há necessidade de armazenar nenhuma informação.
Grato, aguardo mais posts como este xD

https://criarsitepro.com.br/
Visitante

Ótimo artigo, eu estava procurando por algo assim – muito fácil de entender e informativo.

Rafael Andrade
Visitante
Rafael Andrade

Boa tarde Leonardo.
Estou seguindo passo a passo a configuração do dialog com o messenger, porém estou tendo um problema no passo 20.
No momento em que estou colocando o URL de retorno de chamada no messenger (que é o mesmo gerado no dialog) está ocorrendo um erro, informando que não foi possível validar a URL.
Poderia me dar uma ajuda?

Rafael Andrade
Visitante
Rafael Andrade

boa tarde.
Estou tendo problema no passo 20. Mesmo colocando a url certa no messenger, está retornando o erro http 400, informando que não foi possivel validar a URL.
Já conferi e a URL é a mesma gerada no DialogFlow.

diego
Visitante
diego

Olá Leonardo, tudo bem? Antes de qualquer coisa, obrigado e parabéns pelo material, muito intuitivo e explicativo. Eu gostaria de saber se teria como você me ajudar em meu problema: eu desenvolvi meu botchat no dialogflow com integração ao Messenger, já fiz de tudo: preenchi o callurl, token de acesso, fiz o app review, gerei uma URL com políticas de privacidade e etc. Meu bot funciona quando eu faço o teste no Messenger com minha própria conta. porém, quando outras pessoas fazem não dá certo. O que poderia ser? Obrigado! OBS: Na minha dashboard aparece uma mensagem de migração. será… Read more »

wellington
Visitante
wellington

onde esta a parte 2?

Feito com s2 por OneBitCode
%d blogueiros gostam disto: