Construindo Chatbots em Node.js

Construindo Chatbots em
Node.js
Felipe Pedroso

Felipe Pedroso (Batata)
● Formado em Engenharia da Computação
(2009) e Produção e Desenvolvimento de
Jogos (2015)
● Trabalhei para Intel, LG, Instituto
Eldorado, CI&T e FIT. Atualmente
trabalho como consultor para empresas
e startups
● Áreas de interesse: plataformas móveis,
visão computacional, arquitetura de
software, developer experience e
internet das coisas.
felipeapedroso
felipepedroso

Objetivos
1. Saber o que são chatbots
2. Entender os desafios da implementação de um chatbot
3. Implementar um chabot simples em Node.js
4. Publicar o chatbot na nuvem
5. Conectar o chatbot com Skype e Telegram

Quem são eles?
● “A chatbot is a service, powered by rules and sometimes artificial
intelligence, that you interact with via a chat interface.”
Matt Schlicht
● “São softwares que funcionam dentro de aplicações de mensagens.”
Caio Calado
● “Mais um ‘front-end’ para se preocupar.”
Felipe Pedroso

O que podem fazer?
Informações Compras
Jogos e
Entretenimento
Automação de
Tarefas
ConversarAssistentes

Chatbots X Apps
Interface
Natural
(Conversa)
“Carregamento
Instantâneo”
Sem mais apps
Base de
Usuários*

Base de Usuários*
1.2B
313M
100M
1.2B
889M
300M
* Ver slide de Referências

Como eles funcionam?
Usuário Canal
Bot
Service

Mas o que esse tal de Bot Service faz?
Múltiplos UsuáriosConversa
Backend(s) de
Negócio
Respostas
- Gerenciar estado da
conversa
- Interpretar comandos
ou diálogo (Inteligência
Artificial)
- Gerenciar sessões de
cada usuário
- Fazer consultas
- Executar ações
- Receber notificações
- Texto
- Componentes Visuais
(Imagens, Listas, Cards,
Botões, etc)
- Áudio
- Arquivos

Desenvolvendo chatbots em Node.js

Desenvolvendo chatbots em Node.js
● O desafio é o mesmo que em qualquer linguagem de programação: criar
um webservice que se integre com os serviços de chat
● Existem diversas bibliotecas que se integram com canais específicos e
algumas bibliotecas para se conectar com múltiplos canais
● Muitas vezes não é necessário usar uma biblioteca pronta (ex.: Facebook)
● Uma grande vantagem é a quantidade de bibliotecas disponíveis para
Node.js, o que pode gerar diversas integrações interessantes

● Canais específicos: Facebook, Telegram, Slack, Twilio, Twitter, Kik,
GroupMe
● Múltiplos canais
○ Hubot
○ Bot Builder SDK
○ Claudia Bot Builder
○ Botkit
○ BotMaster
Bibliotecas para Criação de Bots

Como escolher?
● Quantos canais você precisa atingir? É fácil de configurar a integração
com esses canais?
● Como ele gerencia os usuários e as mensagens?
● A API é fácil de entender e usar?
● A biblioteca está sendo atualizada e mantida?
● Ela possui boa documentação?
● Como ela trabalha a integração com IA?

Bot Builder SDK
● É um SDK open source desenvolvido pela Microsoft e é parte do Microsoft
Bot Framework, uma plataforma de desenvolvimento de Bots
● Permite a criação de chatbots em Node.js (multiplataforma) e C#.
● Possui integração com o Bot Connector Service, que facilita a
comunicação com diversos canais configuráveis pelo Bot Framework
Portal
● Oferece um emulador para testar e debugar bots localmente ou em
endereços remotos

Como ele funciona?
Bot Connector
Service
Bot Service com
Bot Builder SDK

Alguns motivos de escolher o Bot Builder
● Código disponível no Github com uma documentação farta e diversos
exemplos
● É possível publicar o Bot Service em qualquer provedor de cloud (Heroku,
Google, Amazon, etc).
● Se conecta em diversos canais e abstrai a interação com todos,
permitindo uma única implementação
● Gerencia as sessões de conversa com o usuário individualmente
● Permite integrar suas apis com serviços de IA que não são da Microsoft
(Ex.: api.ai, wit.ai e Watson)

“Talk is cheap, show me the code”
Linus Torvalds

Don't panic!
● Códigos disponíveis aqui: bit.ly/botscode

Requisitos de Software
● Sistema Operacional: Linux, Windows ou MacOS
● Softwares
○ Node.js (Versão mais atual ou LTS)
○ Git
○ Heroku CLI (Seguir as instruções de instalação e fazer o login na ferramenta)
○ NGrok
○ Bot Framework Emulator
○ Visual Studio Code (opcional)

Preparando o projeto - 1
● Utilizando o terminal, criar a pasta do projeto e navegar até ela:
● Inicializar o projeto node e criar o arquivo index.js
$ mkdir my-first-bot
$ cd my-first-bot
$ npm init
$ touch index.js

● Instalar as dependências do projeto:
● Abra o arquivo index.js no seu editor favorito e adicione a seguinte linha:
$ npm install --save botbuilder
$ npm install --save restify
console.log("Hello World!");

● No terminal, execute o arquivo index.js usando o comando abaixo, que
fará o terminal imprimir “Hello World” na tela
● O comando “node index.js” será utilizado para rodar nosso bot no
futuro.
$ node index.js
> Hello World!

Hello Bot World! - 1
● Abra o arquivo index.js e apague todo seu conteúdo.
● Importe as dependências “restify” e “botbuilder” no projeto
var restify = require('restify');
var builder = require('botbuilder');

● Utilize o objeto “restify” para criar o servidor que vai rodar o bot:
● O restify é um framework que ajuda a criação de APIs REST. Apesar de
usarmos ele no exemplo, o Bot Framework também é compatível com o
Express.
var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function (){
console.log('%s listening to %s' , server.name, server.url);
});

● Crie um ChatConnector:
● O ChatConnector é responsável pela comunicação com o “Bot
Framework Connector Service”, serviço que gerencia a conexão com
múltiplos canais suportados pelo framework (Skype, Messenger, etc)
var connector = new builder.ChatConnector({
appId: process.env.MICROSOFT_APP_ID,
appPassword: process.env.MICROSOFT_APP_PASSWORD
});

● Utilize o servidor para criar o endpoint “/api/messages”, direcionando as
chamadas recebidas para o método “listen” do ChatConnector:
● Isso fará com que todo POST que nossa servidor receber nesse endpoint
seja tratado pelo ChatConnector que criamos no passo anterior
server.post('/api/messages', connector.listen());

● Crie um UniversalBot passando como parâmetros o ChatConnector e
uma função anônima para tratar as mensagens recebidas pelo bot,
representando o Dialog raiz. No código abaixo o nosso bot está sempre
respondendo “Hello Bot World!”
● O UniversalBot é o “cérebro” do chatbot e é responsável por gerenciar
toda a conversa e interação com o usuário.
var bot = new builder.UniversalBot(connector, function (session) {
session.send("Hello Bot World!");
});

● O arquivo final ficará assim:
var restify = require('restify' );
var builder = require('botbuilder' )
var server = restify.createServer ();
server.listen(process.env.port || process.env.PORT || 3978, function () {
console.log('%s listening to %s' , server.name, server.url);
});
var connector = new builder.ChatConnector ({
appId: process.env.MICROSOFT_APP_ID ,
appPassword: process.env.MICROSOFT_APP_PASSWORD
});
server.post('/api/messages' , connector .listen());
var bot = new builder.UniversalBot (connector , function (session) {
session.send("Hello Bot World!" );
});

Testando o bot
● No terminal, execute o comando “node index.js” para iniciar o serviço do
bot localmente
● Para testar o resultado iremos utilizar o Bot Framework Emulator,
ferramenta que permite testar e debugar bots rodando localmente ou
remotamente.
● Não se assuste com a extensão “.AppImage”! Caso o arquivo não abra
com um duplo clique, execute o comando abaixo e tente novamente.
$ chmod a+x botframework-emulator-*.AppImage

Bot Framework Emulator - Interface
Endereço do
Bot (Local ou
Remoto)
Conversa
“Input”
(Texto, Som
ou Arquivos)
Detalhe das
mensagens
Logs

Conectando no Bot local
Iremos deixar as
credenciais em branco
por enquanto
Digite o endereço local do bot:
http://localhost:3978/api/messages
Clique aqui para
conectar

Enviando mensagens para o bot
Clique na mensagem
para ver os detalhes
Use esse campo para
enviar mensagens
Detalhes de como a
mensagem é
enviada para o
serviço

Mensagens
● A comunicação entre os usuários e o bot é feita através de mensagens,
que são representadas pela classe Message, que representa a estrutura
da mensagem que está sendo enviada ou recebida.
● As mensagens podem conter desde texto simples até conteúdo mais
elaborado como arquivos, cartões, botões, imagens, etc
● O objeto session é o responsável pela troca de mensagens entre o
usuário e o bot, possuindo métodos para enviar e receber mensagens.

Recebendo mensagens
● O conteúdo das mensagens enviadas pode ser acessado através do
atributo message do objeto session:
session.send("Message Received: %s", session.message.text);

Enviando mensagens - Texto
// Maneira mais simples
session.send("Hello Bot!");
// Alternativa mais verbosa:
var message = new builder.Message(session);
message.text = "Hello Bot!"
session.send(message);

Enviando mensagens - Anexos
var imageAttachment = {
contentType: "image/jpeg",
contentUrl: "<IMAGE_URL>",
name: "Simple Image Attachment"
};
// Alterando o array de attachments
message.attachments = [imageAttachment];
// Utilizando o método addAttachment
message.addAttachment(imageAttachment);

Enviando mensagens - Cards
var heroCard = new builder.HeroCard(session)
.title("This is a Hero Card!")
.subtitle("And I'm glad to be here!")
.text("Hello Bots")
.images([builder.CardImage.create(session, "<IMAGE_URL>")])
.buttons([builder.CardAction.imBack(session, "I love you bot", "Click me!")]);
message.addAttachment(heroCard);

Enviando mensagens - Carrossel de Cards
var card1 = ...
var card2 = ...
var layout = builder.AttachmentLayout.carousel;
message.attachmentLayout(layout)
message.addAttachment(card1);
message.addAttachment(card2);

Enviando mensagens - Suggested Actions
var suggestedActions = builder.SuggestedActions.create(
session,
[
builder.CardAction.imBack(session, "green", "Green"),
builder.CardAction.imBack(session, "blue", "Blue"),
builder.CardAction.imBack(session, "red", "Red")
]
);
var message = new builder.Message(session)
.text("What is the color that you like the most?")
.suggestedActions(suggestedActions);

Enviando mensagens - Suggested Actions

Enviando mensagens - Indicador de digitação
session.sendTyping();
// Envia uma mensagem depois de três
// segundos, parando a “digitação”
setTimeout(function () {
session.send("Sorry, I was typing...");
}, 3000);

Channel Inspector
https://docs.microsoft.com/en-us/bot-framework/portal-channel-inspector

Dialogs
● Os Dialogs são estruturas que permitem modularizar os diálogos de uma
conversa e organizando seu fluxo.
● Os Dialogs podem conter waterfall steps e prompts, que são
respectivamente responsáveis por definir quais são os passos da
conversa e o que será requisitado ao usuário
● São reusáveis e seu fluxo é mantido através de uma “pilha”, onde os
diálogos iniciados são empilhados e os finalizados desempilhados. A
conversa é finalizada quando a pilha fica vazia.

Definindo um Dialog
bot.dialog("askName", [
function (session) { // Waterfall Step 1
session.send("It seems that we don't know each other")
builder.Prompts.text(session, "So what is your name?"); // Prompt
},
function (session, results) { // Waterfall Step 2
session.userData.name = results.response;
session.send("Cool! Nice to meet you %s", session.userData.name);
session.replaceDialog("/");
}
]);

Iniciando e Finalizando Dialogs
// Iniciando um diálogo
session.beginDialog("<DIALOG_NAME>" );
// Finalizando um diálogo (executado de dentro do diálogo)
session.endDialog();
// Substitui o diálogo atual por outro diálogo
session.replaceDialog("<DIALOG_NAME>" );

Dialog “raiz” (em negrito)
var bot = new builder.UniversalBot(connector, function (session) {
});
// Alternativa
var bot = new builder.UniversalBot(connector, [
function (session) {
}
]);

Waterfall Steps
● Os Waterfall Steps são as etapas que definem o diálogo e contém as
diversas tarefas e requisições ao usuário
● Eles são definidos por um array de funções que é passado na declaração
do Dialog e sua execução é sequencial.
● Eles podem executar ações ou requisitar informações para os usuários
(Prompts) e seus resultados podem ser transmitidos para os próximos
steps

Definindo os Waterfall Steps
bot.dialog("askName", [
function (session) { // Step 1
session.send("It seems that we don't know each other")
builder.Prompts.text(session, "So what is your name?");
},
function (session, results) { // Step 2
session.userData.name = results.response;
session.send("Cool! Nice to meet you %s", session.userData.name);
session.replaceDialog("/");
}
]);

Prompts
● Os Prompts são utilizados todas as vezes que precisamos coletar alguma
informação do usuário
● O resultado do prompt é “transmitido” para o próximo waterfall step do
diálogo e pode ser acessado através do objeto results. Eles também
podem ser o retorno de um Dialog através do método
session.endDialogWithResult

Exemplos de Prompts
// Prompting a text
builder.Prompts.text(session, "Hi! What is your name?");
},
function (session, results) {
session.send("Nice to meet you, %s!", results.response);
builder.Prompts.time(session, "When is your birthday?");
},
session.send("This is the date of your birthday: %s", builder.EntityRecognizer.resolveTime([results.response]));
}

Tipos de Prompts
Tipo do Prompt Descrição
Prompt.text Pede por um texto (string)
Prompt.confirm Pede por uma confirmação (boolean)
Prompt.number Pede por um número
Prompt.time Pede por uma representação de tempo e/ou data
Prompt.choice Pede para o usuário escolher dentro de uma lista
Prompt.attachment Pede por um arquivo (Imagens, Vídeos, etc)

Armazenamento de dados
● O Bot Framework permite o armazenamento de informações de forma
que é possível customizar aspectos de uma conversa ou até mesmo
retomar algum ponto de uma conversa anterior.
● A leitura e escrita dos dados na memória são feitos através dos seguintes
atributos do objeto session: userData, dialogData, conversationData e
privateConversationData

Exemplos de Armazenamento de Dados
var bot = new builder.UniversalBot (connector , function (session) {
if (!session.userData.name) { // Acessando os dados
session.beginDialog ("askName" );
} else {
session.beginDialog ("menu");
}
});
bot.dialog("askName" , [
session.send("It seems that we don't know each other" )
builder.Prompts.text(session, "So what is your name?" );
},
session.userData.name = results.response; // Salvando os dados
session.send("Cool! Nice to meet you %s" , session.userData .name);
session.replaceDialog ("/");
}
]);

Heroku
● Nesta etapa iremos publicar o chatbot na plataforma do Heroku, que
permite a criação de serviços na nuvem gratuitamente. Você pode criar
uma conta gratuitamente através do site www.heroku.com.
● Para este curso iremos usar a ferramenta Heroku CLI, que facilita o
processo de criação e publicação de serviços na plataforma do Heroku.

Login no Heroku CLI
● Para começar a utilizar o Heroku no terminal é necessário fazer o login
usando o seguinte comando:
$ heroku login
> Enter your Heroku credentials:
$ Email: felipe.pedroso@live.com
$ Password: ****************
> Logged in as felipe.pedroso@live.com

Configurando o git
● Se é a primeira vez que você usa o git nessa máquina, configure seu
nome e email no git usando os seguintes comandos no terminal:
● Não esqueça de substituir <NOME> e <EMAIL> por seu nome e email
respectivamente.
$ git config --global user.email "<EMAIL>"
$ git config --global user.name "<NOME>"

Criando o arquivo .gitignore - 1
● O Heroku usa a ferramenta git para facilitar o deploy de serviços em sua
plataforma e para evitar que arquivos desnecessários subam no servidor,
nós iremos criar um arquivo chamado “.gitignore”
● Este arquivo é responsável por indicar ao git quais arquivos devem ser
ignorados pela ferramenta e não devem ser incluídos nos commits

● Abra o site www.gitignore.io e gere um arquivo de gitignore para Node, o
que evitará que as dependências sejam publicadas também. Se você
estiver usando o Visual Studio Code, adicione ele também na lista.
Digite “Node” e
“VisualStudioCode
” nesse campo
Clique aqui
para gerar o
arquivo

● No terminal, navegue até o diretório onde você criou o projeto do bot e
crie um arquivo chamado “.gitignore” (atenção para o ponto no início do
nome).
● Abra o arquivo em seu editor favorito e cole o conteúdo gerado no
gitignore.io. Após isso você pode salvar e fechar o arquivo.
$ cd my-first-bot
$ touch .gitignore

Criando o arquivo Procfile
● O arquivo Procfile é responsável por indicar para o Heroku qual o
comando deve ser executado para iniciar o serviço. No nosso caso o
comando é o “web :node index.js”
● Para criar o arquivo no terminal, navegue até a pasta do projeto e digite o
seguinte comando:
$ echo 'web: node index.js' >Procfile

Inicializando o projeto no git
● Na raiz do projeto, inicialize o git:
$ git init
> Initialized empty Git repository in
> /home/felipe/Projects/node/my-first-bot/.git/

Criando o projeto no Heroku
● Após inicializar o git, utilize o Heroku CLI para criar o serviço no Heroku:
● No exemplo foi utilizado o nome “workshopbot” para criar o serviço, que
está rodando no endereço https://workshopbot.herokuapp.com/. Você
deve criar um nome único para seu serviço.
$ heroku create workshopbot
> Creating workshopbot... done
> https://workshopbot.herokuapp.com/ |
> https://git.heroku.com/workshopbot.git

Criando um commit no git
● Para “subir” os arquivos no Heroku é necessário criar um commit no git,
que pode ser feito através dos seguinte comandos:
● Não esqueça de substituir <MENSAGEM> por uma mensagem que
descreve o que está sendo adicionado no commit. Exemplos: “First
commit”, “Adding new features to the bot”, etc
$ git add .
$ git commit -m "<MENSAGEM>"

Publicando o bot
● O último passo para publicar o bot é utilizar o git para fazer um “push”
dos arquivos para o Heroku:
● O Heroku CLI fará todo o processo de publicação do serviço e no final irá
exibir uma mensagem com o endereço do serviço:
$ git push heroku master
> remote: https://workshopbot.herokuapp.com/ deployed to Heroku

Configurando o ngrok - 1
● Para poder testar bots hospedados remotamente é necessário usar o
ngrok, uma ferramenta que cria túneis http e permite a conexão remota.
● O ngrok é um executável que pode ser baixada diretamente em seu site:
https://ngrok.com/download

● Após baixar o ngrok, precisamos configurar o Bot Framework Emulator
para utilizar ele. Para fazer a configuração, abra o emulador e abra o
menu “App Settings”
Clique aqui e
selecione a
opção “App
Settings”

Clique aqui para
salvar a configuração
Selecione o caminho
para o arquivo
executável do ngrok

Conectando no bot
● Após configurar o ngrok, basta seguir os mesmos passos para se testar
um bot local utilizando o endereço que foi informado pelo Heroku
Adicione aqui o
endereço do
serviço no
Heroku
Clique aqui
para conectar

Bot Developer Portal
dev.botframework.com/bots

Criando o Chatbot no Developer Portal

Criando o Chatbot no Developer Portal - 1
Clicar em “Create Bot”

Clicar em “Create”

Selecione esta opção
Clicar em “OK”

Preencher as
informações Nome,
“Bot Handle” e “Long
Description”

Clique aqui
Preencha este
campo com a
URL de onde o
bot foi
publicado no
Heroku. Não se
esqueça que o
nosso bot está
rodando no
endpoint
“api/messages”

Clique aqui
Esse é o valor da constante
MICROSOFT_APP_ID.
Anote para configurar no
Heroku depois.

Clique aqui
Esse é o valor da constante
MICROSOFT_APP_PASSWORD
Anote para configurar no
Heroku depois

Clique aqui

Se tudo deu certo, este
campo estará preenchido
com o seu app ID

Configurando o ID e Password no Heroku - 1
● Agora que o MICROSOFT_APP_ID e MICROSOFT_APP_PASSWORD foram
criados, configurar o Heroku no terminal para utilizar essas informações
de autenticação:
● Após a configuração das variáveis é necessário executar o comando
“heroku restart” para que nosso serviço consiga ler os valores das
variáveis
$ heroku config:set MICROSOFT_APP_ID=<ID>
$ heroku config:set MICROSOFT_APP_PASSWORD=<PASSWORD>
$ heroku restart

Configurando o ID e Password no Heroku - 2
● Agora que MICROSOFT_APP_ID e MICROSOFT_APP_PASSWORD estão
configurados, será necessário passar esses valores no Bot Framework
Emulator:
Credenciais
configuradas no
Heroku
Clique aqui
para conectar

Selecione essa
opção
Clique aqui

Chatbot criado com sucesso!
Clique aqui

Painel de configuração do chatbot

Testando no Bot Developer Portal - 1
Clique aqui

Testando no Bot Developer Portal - 2
Se tudo funcionou
corretamente, você
conseguirá
conversar com seu
bot aqui

Testando no Skype - 1
Clique aqui

Testando no Skype - 2
Clique aqui

● A criação e gerenciamento de chatbots
no Telegram é feita através do chatbot
BotFather, que faz todas as operações
através da interface de conversa.
● Para iniciar a criação do chatbot, basta
adicionar o contato @BotFather no
Telegram e clicar no botão “Start”
Configurando seu bot no Telegram - 1

● Após clicar no botão “Start”, o BotFather
irá listar todos os comandos suportados
por ele.
● Inicie a criação do chatbot com o
comando “/newbot”
● O BotFather irá solicitar as seguintes
informações sobre o chatbot:
○ Nome de exibição (Ex.: “Workshop Bot”)
○ Username (Ex.: “@WorkshopBot”)

● Após informar o nome e username, o
BotFather vai criar o chatbot e informar
qual é o token de acesso da API do
Telegram para interagir com o chatbot
● Essa informação deve ser guardada e
será utilizada para criar o chatbot em
seguida
Token

Configurando o Canal do Telegram

Configurando o Canal do Telegram - 1
Clique aqui

Clique aqui
Cole aqui o token de
acesso da API do
Telegram

O canal vai aparecer
como “Running”

Adicione seu bot
no Telegram e
clique em “Start”
para iniciar a
conversa

E agora, como deixar meu bot melhor?
● Usar Recognizers integrados com com serviços de inteligência artificial
para deixar o bot mais inteligente (ex.: api.ai, Wit.ai, LUIS, Watson, etc)
● Implementar um bot que reconhece mais de um idioma
● Tratar eventos do usuário e conversa
● Estudar o código fonte e mais exemplos do Bot Framework
● Investir na experiência que seu bot vai proporcionar ao usuário: Link 1 e
Link 2

Obrigado!
felipeapedroso
felipepedroso

Referências
● Chatbots
○ The Complete Beginner’s Guide To Chatbots - Matt Schlicht
○ "O que é um chatbot?" - Caio Calado
● Microsoft Bot Framework
○ Site Oficial
○ Build a Chatbot: From Zero to Hero - Giulio Santoli
○ BOT Framework e Integração com Aplicações - Renato Haddad
● Imagens / Ícones
○ Material Design
○ Material Design Icons
○ Simple Icons

Referências
● Estatísticas
○ Facebook Messenger hits 1.2 billion monthly users, up from 1B in July
○ Facebook's WhatsApp Now Has 1.2 Billion Users. Time to Start Monetizing?
○ Tencent - Investor Relations (WeChat)
○ About Twitter
○ Skype has more than 300 million monthly active users, will get bots
○ 100,000,000 Monthly Active Users (Telegram)

Construindo Chatbots em Node.js

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Construindo Chatbots em Node.js (20)

Mais de Felipe Pedroso (20)

Último (8)

Construindo Chatbots em Node.js