Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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)
● Trabal...
Objetivos
1. Saber o que são chatbots
2. Entender os desafios da implementação de um chatbot
3. Implementar um chabot simp...
Quem são eles?
● “A chatbot is a service, powered by rules and sometimes artificial
intelligence, that you interact with v...
Onde vivem?
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
Desenvolvendo Chatbots
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
co...
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 ...
● Canais específicos: Facebook, Telegram, Slack, Twilio, Twitter, Kik,
GroupMe
● Múltiplos canais
○ Hubot
○ Bot Builder SD...
Como escolher?
● Quantos canais você precisa atingir? É fácil de configurar a integração
com esses canais?
● Como ele gere...
Bot Builder SDK
Bot Builder SDK
● É um SDK open source desenvolvido pela Microsoft e é parte do Microsoft
Bot Framework, uma plataforma de...
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
● É ...
“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)
○ G...
Preparando o projeto
Preparando o projeto - 1
● Utilizando o terminal, criar a pasta do projeto e navegar até ela:
● Inicializar o projeto node...
Preparando o projeto - 2
● Instalar as dependências do projeto:
● Abra o arquivo index.js no seu editor favorito e adicion...
Preparando o projeto - 3
● No terminal, execute o arquivo index.js usando o comando abaixo, que
fará o terminal imprimir “...
Hello Bot World!
Hello Bot World! - 1
● Abra o arquivo index.js e apague todo seu conteúdo.
● Importe as dependências “restify” e “botbuild...
Hello Bot World! - 2
● Utilize o objeto “restify” para criar o servidor que vai rodar o bot:
● O restify é um framework qu...
Hello Bot World! - 3
● Crie um ChatConnector:
● O ChatConnector é responsável pela comunicação com o “Bot
Framework Connec...
Hello Bot World! - 4
● Utilize o servidor para criar o endpoint “/api/messages”, direcionando as
chamadas recebidas para o...
Hello Bot World! - 5
● Crie um UniversalBot passando como parâmetros o ChatConnector e
uma função anônima para tratar as m...
Hello Bot World! - 6
● O arquivo final ficará assim:
var restify = require('restify' );
var builder = require('botbuilder'...
Testando o bot
Testando o bot
● No terminal, execute o comando “node index.js” para iniciar o serviço do
bot localmente
● Para testar o r...
Bot Framework Emulator - Interface
Endereço do
Bot (Local ou
Remoto)
Conversa
“Input”
(Texto, Som
ou Arquivos)
Detalhe das...
Conectando no Bot local
Iremos deixar as
credenciais em branco
por enquanto
Digite o endereço local do bot:
http://localho...
Enviando mensagens para o bot
Clique na mensagem
para ver os detalhes
Use esse campo para
enviar mensagens
Detalhes de com...
Bot Framework - Conceitos
Mensagens
Mensagens
● A comunicação entre os usuários e o bot é feita através de mensagens,
que são representadas pela classe Messag...
Recebendo mensagens
● O conteúdo das mensagens enviadas pode ser acessado através do
atributo message do objeto session:
s...
Enviando mensagens - Texto
// Maneira mais simples
session.send("Hello Bot!");
// Alternativa mais verbosa:
var message = ...
Enviando mensagens - Anexos
var imageAttachment = {
contentType: "image/jpeg",
contentUrl: "<IMAGE_URL>",
name: "Simple Im...
Enviando mensagens - Cards
var heroCard = new builder.HeroCard(session)
.title("This is a Hero Card!")
.subtitle("And I'm ...
Enviando mensagens - Cards
Enviando mensagens - Carrossel de Cards
var card1 = ...
var card2 = ...
var message = new builder.Message(session);
var la...
Enviando mensagens - Suggested Actions
var suggestedActions = builder.SuggestedActions.create(
session,
[
builder.CardActi...
Enviando mensagens - Suggested Actions
Enviando mensagens - Carrossel de Cards
var card1 = ...
var card2 = ...
var message = new builder.Message(session);
var la...
Enviando mensagens - Indicador de digitação
session.sendTyping();
// Envia uma mensagem depois de três
// segundos, parand...
Channel Inspector
https://docs.microsoft.com/en-us/bot-framework/portal-channel-inspector
Dialogs
Dialogs
● Os Dialogs são estruturas que permitem modularizar os diálogos de uma
conversa e organizando seu fluxo.
● Os Dia...
Definindo um Dialog
bot.dialog("askName", [
function (session) { // Waterfall Step 1
session.send("It seems that we don't ...
Iniciando e Finalizando Dialogs
// Iniciando um diálogo
session.beginDialog("<DIALOG_NAME>" );
// Finalizando um diálogo (...
Dialog “raiz” (em negrito)
var bot = new builder.UniversalBot(connector, function (session) {
session.send("Message Receiv...
Waterfall Steps
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...
Definindo os Waterfall Steps
bot.dialog("askName", [
function (session) { // Step 1
session.send("It seems that we don't k...
Prompts
Prompts
● Os Prompts são utilizados todas as vezes que precisamos coletar alguma
informação do usuário
● O resultado do pr...
Exemplos de Prompts
function (session) {
// Prompting a text
builder.Prompts.text(session, "Hi! What is your name?");
},
f...
Tipos de Prompts
Tipo do Prompt Descrição
Prompt.text Pede por um texto (string)
Prompt.confirm Pede por uma confirmação (...
Armazenamento de Dados
Armazenamento de dados
● O Bot Framework permite o armazenamento de informações de forma
que é possível customizar aspecto...
Exemplos de Armazenamento de Dados
var bot = new builder.UniversalBot (connector , function (session) {
if (!session.userD...
Publicando o Chatbot na Nuvem
Heroku
● Nesta etapa iremos publicar o chatbot na plataforma do Heroku, que
permite a criação de serviços na nuvem gratuit...
Login no Heroku CLI
● Para começar a utilizar o Heroku no terminal é necessário fazer o login
usando o seguinte comando:
$...
Configurando o git
● Se é a primeira vez que você usa o git nessa máquina, configure seu
nome e email no git usando os seg...
Criando o arquivo .gitignore - 1
● O Heroku usa a ferramenta git para facilitar o deploy de serviços em sua
plataforma e p...
Criando o arquivo .gitignore - 2
● Abra o site www.gitignore.io e gere um arquivo de gitignore para Node, o
que evitará qu...
Criando o arquivo .gitignore - 3
● No terminal, navegue até o diretório onde você criou o projeto do bot e
crie um arquivo...
Criando o arquivo Procfile
● O arquivo Procfile é responsável por indicar para o Heroku qual o
comando deve ser executado ...
Inicializando o projeto no git
● Na raiz do projeto, inicialize o git:
$ git init
> Initialized empty Git repository in
> ...
Criando o projeto no Heroku
● Após inicializar o git, utilize o Heroku CLI para criar o serviço no Heroku:
● No exemplo fo...
Criando um commit no git
● Para “subir” os arquivos no Heroku é necessário criar um commit no git,
que pode ser feito atra...
Publicando o bot
● O último passo para publicar o bot é utilizar o git para fazer um “push”
dos arquivos para o Heroku:
● ...
Testando o chatbot remoto
Configurando o ngrok - 1
● Para poder testar bots hospedados remotamente é necessário usar o
ngrok, uma ferramenta que cri...
Configurando o ngrok - 2
● Após baixar o ngrok, precisamos configurar o Bot Framework Emulator
para utilizar ele. Para faz...
Configurando o ngrok - 3
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...
Bot Developer Portal
Bot Developer Portal
dev.botframework.com/bots
Criando o Chatbot no Developer Portal
Criando o Chatbot no Developer Portal - 1
Clicar em “Create Bot”
Criando o Chatbot no Developer Portal - 2
Clicar em “Create”
Criando o Chatbot no Developer Portal - 3
Selecione esta opção
Clicar em “OK”
Criando o Chatbot no Developer Portal - 4
Preencher as
informações Nome,
“Bot Handle” e “Long
Description”
Criando o Chatbot no Developer Portal - 5
Clique aqui
Preencha este
campo com a
URL de onde o
bot foi
publicado no
Heroku....
Criando o Chatbot no Developer Portal - 6
Clique aqui
Esse é o valor da constante
MICROSOFT_APP_ID.
Anote para configurar ...
Criando o Chatbot no Developer Portal - 7
Clique aqui
Esse é o valor da constante
MICROSOFT_APP_PASSWORD
Anote para config...
Criando o Chatbot no Developer Portal - 8
Clique aqui
Criando o Chatbot no Developer Portal - 9
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, configur...
Configurando o ID e Password no Heroku - 2
● Agora que MICROSOFT_APP_ID e MICROSOFT_APP_PASSWORD estão
configurados, será ...
Criando o Chatbot no Developer Portal - 10
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
Testando no Skype - 1
Clique aqui
Testando no Skype - 2
Clique aqui
Testando no Skype - 3
Testando no Skype - 4
Configurando o Telegram
● A criação e gerenciamento de chatbots
no Telegram é feita através do chatbot
BotFather, que faz todas as operações
atrav...
● Após clicar no botão “Start”, o BotFather
irá listar todos os comandos suportados
por ele.
● Inicie a criação do chatbot...
● Após informar o nome e username, o
BotFather vai criar o chatbot e informar
qual é o token de acesso da API do
Telegram ...
Configurando o Canal do Telegram
Configurando o Canal do Telegram - 1
Clique aqui
Configurando o Canal do Telegram - 2
Clique aqui
Cole aqui o token de
acesso da API do
Telegram
Configurando o Canal do Telegram - 3
O canal vai aparecer
como “Running”
Configurando o Canal do Telegram - 4
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...
Obrigado!
felipeapedroso
felipepedroso
Referências
● Chatbots
○ The Complete Beginner’s Guide To Chatbots - Matt Schlicht
○ "O que é um chatbot?" - Caio Calado
●...
Referências
● Estatísticas
○ Facebook Messenger hits 1.2 billion monthly users, up from 1B in July
○ Facebook's WhatsApp N...
Upcoming SlideShare
Loading in …5
×

Construindo Chatbots em Node.js

2,796 views

Published on

Material utilizado durante o workshop "Construindo Chatbots em Node.js" realizado durante a SECOMP Ufscar 2017.
O objetivo do material é introduzir alguns conceitos de desenvolvimento de chatbots e guiar a implementação e publicação de um chatbot utilizando a biblioteca Bot Builder.

Published in: Technology

Construindo Chatbots em Node.js

  1. 1. Construindo Chatbots em Node.js Felipe Pedroso
  2. 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. 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. 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
  5. 5. Onde vivem?
  6. 6. O que podem fazer? Informações Compras Jogos e Entretenimento Automação de Tarefas ConversarAssistentes
  7. 7. Chatbots X Apps Interface Natural (Conversa) “Carregamento Instantâneo” Sem mais apps Base de Usuários*
  8. 8. Base de Usuários* 1.2B 313M 100M 1.2B 889M 300M * Ver slide de Referências
  9. 9. Desenvolvendo Chatbots
  10. 10. Como eles funcionam? Usuário Canal Bot Service
  11. 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
  12. 12. Desenvolvendo chatbots em Node.js
  13. 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
  14. 14. ● 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
  15. 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?
  16. 16. Bot Builder SDK
  17. 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
  18. 18. Como ele funciona? Bot Connector Service Bot Service com Bot Builder SDK
  19. 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)
  20. 20. “Talk is cheap, show me the code” Linus Torvalds
  21. 21. Don't panic! ● Códigos disponíveis aqui: bit.ly/botscode
  22. 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)
  23. 23. Preparando o projeto
  24. 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. 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. 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!
  27. 27. Hello Bot World!
  28. 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. 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. 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. 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. 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. 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!" ); });
  34. 34. Testando o bot
  35. 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. 36. Bot Framework Emulator - Interface Endereço do Bot (Local ou Remoto) Conversa “Input” (Texto, Som ou Arquivos) Detalhe das mensagens Logs
  37. 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. 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
  39. 39. Bot Framework - Conceitos
  40. 40. Mensagens
  41. 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. 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. 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. 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. 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);
  46. 46. Enviando mensagens - Cards
  47. 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. 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);
  49. 49. Enviando mensagens - Suggested Actions
  50. 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. 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);
  52. 52. Channel Inspector https://docs.microsoft.com/en-us/bot-framework/portal-channel-inspector
  53. 53. Dialogs
  54. 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. 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. 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. 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); } ]);
  58. 58. Waterfall Steps
  59. 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. 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("/"); } ]);
  61. 61. Prompts
  62. 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. 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. 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)
  65. 65. Armazenamento de Dados
  66. 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. 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 ("/"); } ]);
  68. 68. Publicando o Chatbot na Nuvem
  69. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  80. 80. Testando o chatbot remoto
  81. 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. 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. 83. Configurando o ngrok - 3 Clique aqui para salvar a configuração Selecione o caminho para o arquivo executável do ngrok
  84. 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
  85. 85. Bot Developer Portal
  86. 86. Bot Developer Portal dev.botframework.com/bots
  87. 87. Criando o Chatbot no Developer Portal
  88. 88. Criando o Chatbot no Developer Portal - 1 Clicar em “Create Bot”
  89. 89. Criando o Chatbot no Developer Portal - 2 Clicar em “Create”
  90. 90. Criando o Chatbot no Developer Portal - 3 Selecione esta opção Clicar em “OK”
  91. 91. Criando o Chatbot no Developer Portal - 4 Preencher as informações Nome, “Bot Handle” e “Long Description”
  92. 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. 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. 94. Criando o Chatbot no Developer Portal - 7 Clique aqui Esse é o valor da constante MICROSOFT_APP_PASSWORD Anote para configurar no Heroku depois
  95. 95. Criando o Chatbot no Developer Portal - 8 Clique aqui
  96. 96. Criando o Chatbot no Developer Portal - 9 Se tudo deu certo, este campo estará preenchido com o seu app ID
  97. 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. 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. 99. Criando o Chatbot no Developer Portal - 10 Selecione essa opção Clique aqui
  100. 100. Chatbot criado com sucesso! Clique aqui
  101. 101. Painel de configuração do chatbot
  102. 102. Testando no Bot Developer Portal - 1 Clique aqui
  103. 103. Testando no Bot Developer Portal - 2 Se tudo funcionou corretamente, você conseguirá conversar com seu bot aqui
  104. 104. Testando no Skype
  105. 105. Testando no Skype - 1 Clique aqui
  106. 106. Testando no Skype - 2 Clique aqui
  107. 107. Testando no Skype - 3
  108. 108. Testando no Skype - 4
  109. 109. Configurando o Telegram
  110. 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. 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. 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
  113. 113. Configurando o Canal do Telegram
  114. 114. Configurando o Canal do Telegram - 1 Clique aqui
  115. 115. Configurando o Canal do Telegram - 2 Clique aqui Cole aqui o token de acesso da API do Telegram
  116. 116. Configurando o Canal do Telegram - 3 O canal vai aparecer como “Running”
  117. 117. Configurando o Canal do Telegram - 4 Adicione seu bot no Telegram e clique em “Start” para iniciar a conversa
  118. 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
  119. 119. Obrigado! felipeapedroso felipepedroso
  120. 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. 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)

×