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

Isso é obrigatório.

Baixar

Objetivos do primeiro tutorial! (Foco é tudo!)

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 best dating places in houston 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 best dating places in houston  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: https://onebitcode.com/online-dating-sites-and-apps/

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 best dating places in houston
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.
   
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”
     
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”
   
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”
     
   • 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:
     
   • O menu “Action” deverá ficar assim ao final:
     
   • \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! :).

Não perca nenhum conteúdo

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

Isso é obrigatório.

Me Inscrever

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.

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 também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
 📱  • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
 ⚙  • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂

Bem-vindo à família OneBitCode o/