Alguns tipos de prompts disponíveis no Bot Builder SDK:
- TextPrompt: Coleta texto do usuário
- NumberPrompt: Coleta um número
- ConfirmPrompt: Confirmação sim/não
- ChoicePrompt: Escolha entre opções
- DateTimePrompt: Data e hora
- TimePrompt: Hora
- AttachmentPrompt: Anexos como imagens
- WaterfallDialog: Fluxo sequencial de prompts
- ComponentDialog: Prompts reutilizáveis
Os prompts permitem coletar dados do usuário de forma estruturada durante a conversa. São importantes para construir diálogos interativos.
2. 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
3. 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
4. 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
11. 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
13. 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
15. 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?
17. 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
19. 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)
22. 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)
24. 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
25. Preparando o projeto - 2
● 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!");
26. Preparando o projeto - 3
● 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!
28. 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');
29. Hello Bot World! - 2
● 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);
});
30. Hello Bot World! - 3
● 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
});
31. Hello Bot World! - 4
● 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());
32. Hello Bot World! - 5
● 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!");
});
33. Hello Bot World! - 6
● 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!" );
});
35. 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
36. Bot Framework Emulator - Interface
Endereço do
Bot (Local ou
Remoto)
Conversa
“Input”
(Texto, Som
ou Arquivos)
Detalhe das
mensagens
Logs
37. 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
38. 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
41. 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.
42. 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);
43. 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);
44. Enviando mensagens - Anexos
var imageAttachment = {
contentType: "image/jpeg",
contentUrl: "<IMAGE_URL>",
name: "Simple Image Attachment"
};
var message = new builder.Message(session);
// Alterando o array de attachments
message.attachments = [imageAttachment];
// Utilizando o método addAttachment
message.addAttachment(imageAttachment);
session.send(message);
45. 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!")]);
var message = new builder.Message(session);
message.addAttachment(heroCard);
session.send(message);
47. Enviando mensagens - Carrossel de Cards
var card1 = ...
var card2 = ...
var message = new builder.Message(session);
var layout = builder.AttachmentLayout.carousel;
message.attachmentLayout(layout)
message.addAttachment(card1);
message.addAttachment(card2);
session.send(message);
48. 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);
session.send(message);
50. Enviando mensagens - Carrossel de Cards
var card1 = ...
var card2 = ...
var message = new builder.Message(session);
var layout = builder.AttachmentLayout.carousel;
message.attachmentLayout(layout)
message.addAttachment(card1);
message.addAttachment(card2);
session.send(message);
51. 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);
54. 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.
55. 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("/");
}
]);
56. 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>" );
57. Dialog “raiz” (em negrito)
var bot = new builder.UniversalBot(connector, function (session) {
session.send("Message Received: %s", session.message.text);
});
// Alternativa
var bot = new builder.UniversalBot(connector, [
function (session) {
session.send("Message Received: %s", session.message.text);
}
]);
59. 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
60. 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("/");
}
]);
62. 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
63. Exemplos de Prompts
function (session) {
// 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?");
},
function (session, results) {
session.send("This is the date of your birthday: %s", builder.EntityRecognizer.resolveTime([results.response]));
}
64. 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)
66. 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
67. 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" , [
function (session) {
session.send("It seems that we don't know each other" )
builder.Prompts.text(session, "So what is your name?" );
},
function (session, results) {
session.userData.name = results.response; // Salvando os dados
session.send("Cool! Nice to meet you %s" , session.userData .name);
session.replaceDialog ("/");
}
]);
69. 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.
70. 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
71. 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>"
72. 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
73. Criando o arquivo .gitignore - 2
● 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
74. Criando o arquivo .gitignore - 3
● 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
75. 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
76. 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/
77. 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
78. 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>"
79. 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
81. 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
82. Configurando o ngrok - 2
● 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”
83. Configurando o ngrok - 3
Clique aqui para
salvar a configuração
Selecione o caminho
para o arquivo
executável do ngrok
84. 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
90. Criando o Chatbot no Developer Portal - 3
Selecione esta opção
Clicar em “OK”
91. Criando o Chatbot no Developer Portal - 4
Preencher as
informações Nome,
“Bot Handle” e “Long
Description”
92. Criando o Chatbot no Developer Portal - 5
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”
93. Criando o Chatbot no Developer Portal - 6
Clique aqui
Esse é o valor da constante
MICROSOFT_APP_ID.
Anote para configurar no
Heroku depois.
94. Criando o Chatbot no Developer Portal - 7
Clique aqui
Esse é o valor da constante
MICROSOFT_APP_PASSWORD
Anote para configurar no
Heroku depois
96. Criando o Chatbot no Developer Portal - 9
Se tudo deu certo, este
campo estará preenchido
com o seu app ID
97. 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
98. 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
99. Criando o Chatbot no Developer Portal - 10
Selecione essa
opção
Clique aqui
110. ● 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
111. ● 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”)
Configurando seu bot no Telegram - 2
112. ● 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
Configurando seu bot no Telegram - 3
Token
117. Configurando o Canal do Telegram - 4
Adicione seu bot
no Telegram e
clique em “Start”
para iniciar a
conversa
118. 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
120. 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
121. 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)