Como Criar um ChatBot com Rails facilmente!

Como criar um ChatBot

Essa é uma série de Posts com o objetivo de ensinar como criar um ChatBot que auxilie os desenvolvedores na 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 presentes hoje em dia. Ter máquinas capazes de aprender (vou falar 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 você pode criar hoje mesmo seu primeiro ChatBot!

Como isto vai funcionar?

Embora esta seja a parte 1 do tutorial, o que vamos construir aqui juntos será um ChatBot capaz de se comunicar pelo Facebook Messenger e auxiliar programadores em alguns 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 você já 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 de facilitar o serviço, vem comigo que você vai ser feliz fazendo ChatBots :).

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 para o usuário que solicitou.
  • Fazer o ChatBot responder quais são suas habilidades no momento quando for questionado.
Antes de começar vamos criar nossas contas

Crie uma conta no Api.ai
O Api.ai é um plataforma que vai facilitar 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

api.ai

Crie uma página no Facebook

Nós vamos precisar de uma página no Facebook aonde os usuários vão poder 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 Api.ai: Criar App
(Não se preocupe nós 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 vamos usar 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 a vontade para hospedar seu app onde você ficar mais confortável, nós apenas precisamos que ele esteja Online.

Finalmente vamos criar uma Api Rails 5 (mas você pode criar da forma que achar melhor)

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

Para criar usando o Rails 5 atualize a sua Gem do Rails:

1
gem install rails

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

1
rails -v

Gere seu novo App

1
rails new --api programming_assistant_v1 --database=postgresql

Maravilha, agora temos nossas contas criadas e também já geramos nosso App. Vamos em frente!

Vamos configurar nosso Bot no Api.ai

O Api.ai é uma plataforma muito bacana aonde você pode configurar rapidamente um Bot que consegue responder frases pré programadas (e até frases similares), ele permite também que você chame um Webhook quando determinada frase for recebida.

Aí que entra nosso querido e amado Rails, nós vamos usar o Rails para responder a essas chamadas com as informações de valor que queremos devolver aos usuários.
O Api.ai é 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 podemos migrar do Api.ai 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 Api.ai ao nosso App do facebook
  1. Acesse sua conta do Api.ai: Acessar
  2. Agora clique em “Create Agent”
    • Escolha o nome do seu Bot
    • Coloque uma descrição se desejar
    • E clique em Salvarapi.ai
  3. Agora no menu “Integrations”
  4. Clique no “Facebook Messenger”

captura-de-tela-de-2016-09-13-16-58-13

Maravilha, você deve ter chegado na tela acima. Esse é o menu que vai te ajudar a integrar o seu Bot do Api.ai com o seu Aplicativo do Facebook. (Deixe essa tela aberta, já vamos voltar nela)

5. Acesse novamente a página de desenvolvedor do Facebook: Acessar
6. Escolha seu App no menu superior
7. Agora dentro da painel de configuração do seu App selecione “+Adicionar Produto”
chatbot messenger8. Você deve ter chegado a uma tela igual a esta, selecione a opção ”messenger”.
9. Clique em continuar.
10. Agora no bloco “Geração de token” que apareceu, escolha no dropdown a sua página criada no começo do tutorial.
captura-de-tela-de-2016-09-13-19-53-10
11. O Facebook vai 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 Api.ai que deixamos aberta. (Mas não feche a página do Facebook já vamos voltar nela)
13. Antes de colar o token você vai precisar virar a chave que ativa a integração do Api.ai com o Messenger do lado direito do Modal.
captura-de-tela-de-2016-09-13-19-57-05
14. Cole o Token como na imagem no campo “Page Access Token”.
15. No campo “Verify Token” preencha com uma palavra secreta segura (“gere uma”) e anote 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.

captura-de-tela-de-2016-09-13-17-19-12
16. Agora, vamos voltar na página do Facebook e no bloco “WebHook”, clique em configurar.
captura-de-tela-de-2016-09-13-17-17-0517. No campo “Verify Token” cole o Token que você gerou na Página do Api.ai
18. Vá à Página do Api.ai 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“.
captura-de-tela-de-2016-09-13-19-58-29
19. Para finalizar, nos Radio Buttons selecione apenas a opção “messages” como na imagem a baixo.

captura-de-tela-de-2016-09-13-17-21-33

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

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

*Apenas lembrando que somente você que é dono dele poderá conversar com ele por enquanto, para abrir ao público você precisa enviar para a 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!
    captura-de-tela-de-2016-09-13-20-04-23
  2. Você deve 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 Api.ai e do Messenger.

Agora vamos ensinar o 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 Api.ai
Cumprimentos
  1. Vá até a painel do Api.ai
  2. Escolha o Menu “Intent”
    captura-de-tela-de-2016-09-13-20-36-40
  3. Agora vamos adicionar a expressão “Olá” no campo “User Says”
  4. Vamos adicionar alguns palavras correspondentes  extras também como “Oi”, “Hi”, “Hello”, “Eai”
    captura-de-tela-de-2016-09-13-20-41-04
  5. Agora no campo “Speech 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 pro seu Bot e ver as respostas programadas dele.
    captura-de-tela-de-2016-09-13-20-44-11
  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á?”
    captura-de-tela-de-2016-09-13-20-53-47
  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 você diz “Olá”, depois quando o bot perguntar se você está bem, você responde dizendo “Estou bem” e você vai receber uma das respostas que colocou no “Speech Response”
  14. Pronto o Bot já sabe um cumprimento. (Sim eu sei que o post tá longo :), mas vale a pena!)
Programando o Bot para dizer quais são suas habilidades atuais

Para fazer isso basta você criar um “Intent” que responde 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 você fazer isso na plataforma do Api.ai 🙂

Fazendo o Bot Chamar o Rails através do WebHook

Agora meus amigos, as coisas começam a ficar interessante, finalmente vamos chegar ao Rails \o/.

Mas antes de configurarmos isso nós precisamos configurar  nosso App e subir ele para o Heroku ou outra hospedagem para termos a Url dele Online para preencher o campo do WebHook (na plataforma do Api.ai). Então vamos criar e depois voltamos nesse tópico.

Preparando nosso App

Vamos construir nosso App baseado nos objetivos que definimos para a parte 1 do tuturial, 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 vamos precisar utilizar uma Gem para facilitar a consulta ao Wikipedia.

Instalando a Gem de consulta a Wikipedia

Vá até o Gemfile e inclua:

1
2
# Wikipedia Consulting
gem "wikipedia-client"

Agora Rode o Bundle para instalar:

1
bundle
Criar um Serviço que vai consultar a Wikipedia

Crie esse arquivo dentro do seu projeto:

/app/services/wikipedia_consulter.rb

Agora copie esse código e cole nesse arquivo:

class WikipediaConsulter
  require 'wikipedia'
 
  def self.find_by_name(param)
    Wikipedia.find(param)
  end
 
end

Agora seu serviço está pronto.

Criando a Rota para responder a chamada do Api.ai

Adicione ao routes.rb a seguinte rota:

1
post '/messenger' => 'assistant#messenger'
Vamos criar um controller básico para responder ao messenger

Rode no seu terminal esse gerador:

1
rails g controller assistant

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class AssistantController < ApplicationController
  def messenger
    query = (params[:result][:parameters]['any'].present?)? params[:result][:parameters]['any'] : "Ruby On Rails"
    page = WikipediaConsulter.find_by_name(query)
 
    if page.text.present?
      text = "#{page.text.slice(0, 150)}... \b link completo: #{page.fullurl}"
    else
      text = "Não encontrei essa página na Wikipedia em inglês :("
    end
 
    response =
    {
      "speech": text,
      "displayText": text,
      "data": "",
      "source": "Programming Assitant"
    }
 
    render json: response
  end
end

\o/ Uauuu 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 eu disse acima, o que nós precisamos é apenas que o App fique Online, então se você quiser usar outro host fique a vontade. Eu não vou colocar o Passo a Passo do Heroku porque isso seria um tutorial a parte. Mas clique no link  para ver um Guia de como subir seu App para o Heroku!

Vamos adicionar a Url do App ao Api.ai

Certo, estamos quase chegando ao fim, eu sei 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 Api.ai para que ele possa chamar nossa função quando ele entender que o User fez uma pergunta.

  1. Dentro do seu painel do Api.ai clique em “Fulfillment”.
  2. Você deve estar vendo a seguinte tela:
    captura-de-tela-de-2016-09-14-11-08-31
  3. Vire a chave em “Enable”.
  4. Um campo deve aparecer para você colocar o link do seu aplicativo. Caso você tenha usado a mesma rota (/messenger) que eu usei 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.
    captura-de-tela-de-2016-09-14-11-12-31
  5. Pronto agora é só clicar em “Salvar”
Último Passo!  Fazer o Api.ai chamar nossa Api

Agora é aonde a mágica finalmente acontece, vamos fazer o Api.ai chamar nossa Api Rails  para responder a uma pergunta do usuário.
Nós não estamos usando o Api.ai 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.
Exemplo, nós vamos configurar nele algumas frases como: “Pesquise Rails”, “Descubra o que é Python”, “O que é Node.js”, e ele vai conseguir identificar que “Rails”, “Python” e “Node.js” são nossos objetos a serem pesquisados e vai enviar essa parte para nossa aplicação, pegar o resultado e devolver para o Messenger. (Muito bonito! 🙂 )

  1. Primeiro vá ao painel do Api.ai.
  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”
      captura-de-tela-de-2016-09-14-11-24-06
  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”
    captura-de-tela-de-2016-09-14-11-26-28
  6. Agora vem o “Truque principal”, nós temos que mostrar para o Api.ai 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”
      captura-de-tela-de-2016-09-14-11-28-54
    • 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” deve ficar assim ao final:
      captura-de-tela-de-2016-09-14-11-33-11
    • O menu “Action” deve ficar assim ao final:
      captura-de-tela-de-2016-09-14-11-33-22
    • \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! :).

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, o que fazer primeiro:

  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 Api.ai.
    Faça um Post para sua Url usando o mesmo parâmetro do Api.ai e veja se a resposta está correta. (‘params[:result][:parameters][‘any’]’)
  3. Verifique se o Api.ai está configurado corretamente (tanto a conexão com o Messenger como a com o Rails). Eu acho que 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. Olha aí em baixo nos comentários se ninguém passou por isso e foi resolvido
  2. Comenta aí em baixo e eu te ajudarei assim que possível 🙂
  3. Me adiciona no Facebook, a gente bate um papo e eu te ajudo: Adicionar 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 bacanas por lá e também um Podcast.
Se você puder também, deixe um feedback aí em baixo e compartilhe com seus amigos :).

 

 

Obrigado,
Leonardo Scorza

Deixe seu Feedback!

Comentários