Compartilhar:
){kind=small}
Ex-diretor de Formação de Desenvolvedores da Vonage. Com experiência como desenvolvedor criativo, gerente de produto e organizador de hack days, Martyn atua como defensor da tecnologia desde 2012, tendo trabalhado anteriormente no setor de radiodifusão e em grandes gravadoras. Ele se dedica a capacitar e empoderar desenvolvedores em todo o mundo.
Crie um bot para o Facebook Messenger com o Dialogflow (Tutorial de API)
Tempo de leitura: 17 minutos
Postagem atualizada por Amanda Cavallaro
Neste tutorial, você aprenderá a criar um bot do Facebook Messenger na sua página do Facebook usando o Google Dialogflow e a Messages API for Vonage.
O aplicativo de chatbot deste exemplo receberá mensagens enviadas pelo botão “Enviar mensagem” em uma página do Facebook ou pelo aplicativo do Facebook Messenger. Ambos funcionarão perfeitamente com o aplicativo de chatbot.
As mensagens serão encaminhadas por meio do nosso aplicativo para o Google Dialogflow. O Dialogflow utilizará, então, o processamento de linguagem natural (NLP) para gerar respostas às perguntas. Em seguida, nosso chatbot enviará essas respostas de volta para Facebook Messenger por meio da API.
Neste exemplo, estamos usando o agente Small Talk pré-configurado no Dialogflow. Usaremos o agente Small Talk para criar um bot no Facebook que responda com respostas animadas às perguntas recebidas. O agente Small Talk é fácil de usar e é ótimo para fins de desenvolvimento.
Incluímos instruções passo a passo para criar um bot no Facebook Messenger com integração ao Dialogflow, utilizando a Messages API da Vonage. Ao longo do tutorial, você encontrará exemplos de código que poderá usar para criar seu chatbot.
Você pode baixar o código neste repositório do GitHub .
Para criar um bot do Dialogflow para o Facebook Messenger, você precisará dos seguintes pré-requisitos:
A Account no Facebook com uma página de marca/empresa que você pode usar para testes
A Conta do Google Dialogflow ES Account
Node.js v12 ou superior
Uma conta gratuita conta gratuita dell'Account API della Vonage
Para criar um bot usando o Facebook Messenger, o Dialogflow e a Messages API, siga as etapas abaixo:
Criar um aplicativo básico para o bot do Facebook
Criar um aplicativo de mensagens na API da Vonage
Conecte a Messages API do Vonage ao Facebook
Enviar mensagens do Facebook para o Dialogflow
Enviar respostas do Dialogflow para o Facebook
Teste seu bot do Facebook Messenger
O primeiro passo para criar seu bot no Facebook Messenger é criar um esboço do aplicativo.
Para receber mensagens do Facebook, é preciso configurar dois webhooks que permitam que o aplicativo receba dados sobre as mensagens e o status de entrega.
Vamos começar criando o aplicativo básico com essas duas rotas.
Em uma nova pasta, inicialize um novo aplicativo Node.js executando
Em seguida, instale as dependências do projeto:
Além disso, vamos usar o excelente Nodemon e DotEnv para manter nosso aplicativo em funcionamento enquanto as alterações são feitas, assim você não precisa ficar reiniciando-o. Instale-os como devDependencies.
Por fim, crie uma pequena estrutura de pastas criando routes e controllers pastas na raiz do seu diretório.
O código do GitHub vem com um .env.sample arquivo; copie-o e renomeie-o para env. Você deverá adicionar os valores às seguintes chaves.
VONAGE_API_KEY: Ele pode ser encontrado na página inicial do Painel da Vonage, após o login.
VONAGE_API_SECRET: Após fazer login, ele pode ser encontrado no Painel da API da Vonage.
VONAGE_APPLICATION_ID: Ele pode ser encontrado no Painel da Vonage, dentro do aplicativo.
VONAGE_PRIVATE_KEY: Um arquivo que pode ser baixado do Painel da Vonage, dentro do aplicativo, com recursos de mensagens.
FACEBOOK_PAGE_ID: Você pode encontrar essas informações acessando as configurações do perfil. Elas aparecem logo abaixo de Resumo > Informações da página.
DIALOGFLOW_PROJECT_ID: Você pode encontrar o ID do projeto tanto no Google Cloud Platform quanto na aba “Geral” das configurações do projeto do Dialogflow, no painel do Dialogflow ES. Aqui está uma maneira alternativa de encontrar o ID da página, fornecida pelas perguntas frequentes (FAQs).
DIALOGFLOW_SESSION_ID: O ID da sessão pode ser uma sequência de caracteres gerada aleatoriamente ou um identificador de usuário com hash. Seu comprimento deve ser de, no máximo, 36 caracteres.
DIALOGFLOW_LANGUAGE_CODE: Você pode escolher vários idiomas; adicione aquele que encontrar no seu painel do Dialogflow.
GOOGLE_APPLICATION_CREDENTIALS: Você pode criar uma chave de conta de serviço aqui.
Koa é um framework para Node.js desenvolvido pelos criadores do Express. É leve e vem com apenas um conjunto básico de recursos prontos para uso, o que o torna perfeito para criar um pequeno servidor de webhooks como o que precisamos aqui.
Crie o arquivo principal do servidor adicionando um novo arquivo no diretório raiz chamado server.js.
Neste novo arquivo, adicione o seguinte código:
const Koa = require('koa');
const router = require('koa-route');
const bodyParser = require('koa-bodyparser');
const routes = require('./routes');
const port = process.env.PORT || 3000;
// Set up a new Koa app and tell it to use
// the bodyParser middleware for inbound requests
const app = new Koa();
app.use(bodyParser());
// Routes
app.use(router.post('/webhooks/status', routes.status));
app.use(router.post('/webhooks/inbound', routes.inbound));
// Have the app listen on a default port or 3000
app.listen(port, () => console.log(`App is waiting on port ${port}`));
A routes constante é usada para armazenar e acessar as rotas no aplicativo:
const routes = require('./routes');Também precisaremos de um novo arquivo na routes pasta chamada index.js. Vá em frente e crie-o, e adicione o seguinte código:
const routes = {
inbound: async ctx => {
// Get the detail of who sent the message, and the message itself
const { from, message } = ctx.request.body;
console.log(from, message);
ctx.status = 200;
},
status: async ctx => {
const status = await ctx.request.body;
console.log(status);
ctx.status = 200;
}
};
module.exports = routes;
Com tudo isso configurado, execute o seguinte comando para iniciar o servidor:
O aplicativo será lançado na porta 3000.
Use o Ngrok para abrir essa porta para o mundo e anote as URLs que ele gerar para você; elas devem ter um formato semelhante a este: https://f70f-82-10-85-156.ngrok.io
Aqui está um guia prático para trabalhar com o Ngrok , caso seja a primeira vez que você o utiliza.
Resumo? Você pode iniciar o Ngrok (se estiver instalado) executando este comando em uma aba separada do terminal:
Em seguida, você precisará criar um aplicativo “Mensagens” na sua conta da API da Vonage. Esse aplicativo permitirá que você conecte o Facebook e o Dialogflow e envie mensagens entre eles.
Configure um novo aplicativo de Mensagens pelo Painel de Controle da Vonage.
Certifique-se de acrescentar /webhooks/inbound e /webhooks/status ao URL que você obtém do Ngrok ao colá-lo no formulário (como na imagem abaixo).
Messages Webhook
Lembre-se de clicar também no link “Gerar par de chaves pública/privada” . Isso fará o download de um arquivo chamado private.key.
Localize o private.key arquivo no seu sistema e mova-o para a pasta raiz do seu aplicativo.
Conclua a configuração do aplicativo clicando no botão Criar aplicativo e pronto, a configuração está concluída.
Anote o ID do seu aplicativo; você precisará dele na próxima etapa.
Para que o Facebook reconheça seu aplicativo de chatbot recém-criado, você deve conectá-lo ao Facebook.
Primeiro, você precisará criar um JSON Web Token para autorizar o Facebook a usar seu aplicativo, e você pode fazer isso com a CLI da Vonage.
Abra o terminal e certifique-se de que está na raiz da pasta do seu aplicativo.
Usando o CLI da Vonage, execute o seguinte comando:
Certifique-se de substituir VONAGE_APPLICATION_ID pelo ID do aplicativo que você acabou de criar.
Ao executar esse comando, será exibida uma longa sequência de letras e números — esse é o seu JSON Web Token. Copie tudo.
Em seguida, você pode visualizar o JWT com:
Para conectar sua página do Facebook ao seu aplicativo, criamos uma página prática:
Siga as etapas a seguir:
Faça login com suas credenciais do Facebook.
Selecione a página do Facebook que você deseja conectar ao seu aplicativo Vonage.
Clique em Concluir a configuração.
Se tudo correr bem, você verá uma janela de diálogo verde aparecendo, parabenizando-o pelo sucesso e informando o ID da sua página do Facebook.
Anote esse número de identificação.
Você pode verificar o conteúdo do seu JWT usando jwt.io.
Observação: Caso algum elemento deste documento precise de esclarecimentos, há um um guia sobre como criar JWTs para uso neste contexto em nosso tutorial do Facebook Messenger._
Seu aplicativo já está conectado à sua página do Facebook.
Com o seu servidor ainda em execução e o Ngrok ainda expondo-o para o mundo, acesse sua página do Facebook e localize o botão de mensagens.
Clique aqui para abrir a janela de mensagens e começar a enviar mensagens maravilhosas. Como alternativa, basta começar com “Olá”.
Qualquer mensagem que você enviar será encaminhada para o Webhook de entrada que você especificou na configuração do seu aplicativo. Isso se corresponde diretamente à inbound função no routes.js arquivo.
Atualmente, a inbound função está configurada para registrar o from e message parte do que está sendo enviado do Facebook para o console.
Você deverá ver suas mensagens aparecendo no console.
Agora que o aplicativo está recebendo mensagens, é hora de encaminhá-las ao Dialogflow.
Na controllers pasta, crie um novo arquivo chamado dialogflow.js e adicione o conteúdo do arquivo JavaScript controllers/dialogflow.js.
A função exportada no arquivo realiza o seguinte:
Uma função assíncrona chamada
dialogflowHandleré instanciada e aceita um parâmetro chamadoquery.É criado um objeto chamado
requesté criado, contendo todas as chaves que o Dialogflow espera.O objeto da solicitação é enviado ao Dialogflow.
A resposta do agente do Small Talk, contida em
result[0].queryResult.fulfillmentTexté retornada.
const dialogflowHandler = async query => {
// Create a text query request object
const request = {
session: sessionPath,
queryInput: {
text: {
text: query,
languageCode: languageCode
}
}
};
// Send the text query over to Dialogflow and await the result
// using .catch to throw any errors
const result = await sessionClient
.detectIntent(request)
.catch(err => console.error('ERROR:', err));
// Pick out the response text from the returned array of objects
const reply = await result[0].queryResult.fulfillmentText;
// Return the reply
return reply;
};
module.exports = dialogflowHandler;
Para utilizar essa dialogflowHandler função, abra o routes/index.js arquivo e inclua a função no início:
const dialogflowHandler = require('../controllers/dialogflow');Modifique a inbound função para que fique assim:
inbound: async ctx => {
const { from, message } = await ctx.request.body;
console.log(from, message);
const dialogflowResponse = await dialogflowHandler(message.content.text);
console.log(dialogflowResponse);
ctx.status = 200;
};
Envie uma nova mensagem (algo como “Olá!”) pela sua página do Facebook (ou pelo aplicativo do Facebook Messenger).
Desta vez, você verá a mensagem recebida sendo registrada no console, bem como a resposta enviada pelo Dialogflow.
Observação: Se precisar de ajuda para configurar o Dialogflow, siga o guia do Agente Pré-configurado do SmallTalk .
A última peça desse quebra-cabeça é pegar a resposta do Dialogflow e enviá-la ao usuário por meio do bot do Facebook Messenger.
A Messages API da Vonage cuidará de tudo isso para nós.
Crie um novo arquivo na controllers pasta chamada vonage.js e preencha-o com o conteúdo deste arquivo: controllers/vonage.js.
A principal função exportada neste arquivo se chama messageResponder.
Esta função utiliza a Biblioteca de Cliente Vonage para Node.js para enviar uma mensagem de volta ao usuário.
É passado à função um objeto chamado message que conterá o id do usuário para quem a resposta será enviada e o dialogflowResponse (o texto a ser enviado na mensagem).
const messageResponder = async (message) => {
vonage.messages.send(
new MessengerText({
text: message.dialogflowResponse,
to: process.env.FACEBOOK_PAGE_ID, // Who the message goes to
from: $FB_RECIPIENT_ID, // Who the message comes from. The PSID of the user you want to reply to. The FB_RECIPIENT_ID is the PSID of the Facebook User you are messaging. This value is the from.id value you received in the inbound messenger event on your Inbound Message Webhook URL.
}),
(err, data) => {
if (err) {
throw new Error(err);
} else {
console.log(
`Replied to ${message.id} with '${message.dialogflowResponse}' (ID: ${
data.message_uuid
})`
);
}
}
);
};
Para utilizar essa messageResponder função, importe-a no routes/index.js arquivo:
No início do arquivo, logo abaixo da require instrução do dialogflow.js arquivo criado anteriormente, adicione o seguinte:
const messageResponder = require('../controllers/vonage');Em seguida, na inbound função, adicione o seguinte código logo acima da ctx.status = 200 linha:
messageResponder({ from, dialogflowResponse });
ctx.status = 200;Como você pode ver, estamos passando um objeto para messageResponder com o conteúdo de from, com a resposta do Dialogflow ES.
Isso fará com que o objeto passado para a função fique assim:
{
from: '111111111111', // ID of the user on Facebook that sent the message
dialogflowResponse: 'Greetings!'
}
Tudo está pronto. Com esse arquivo final, o ciclo foi fechado, e qualquer mensagem recebida deverá receber uma resposta imediatamente. Agora você está pronto para testar seu bot do Facebook Messenger e sua integração com o Dialogflow.
Mais uma vez, envie uma mensagem pela sua página do Facebook. A resposta do Dialogflow deve aparecer agora na mesma janela!
Parabéns! Seguindo as etapas deste tutorial, você criou um bot para o Facebook Messenger com a tecnologia do Dialogflow, com a ajuda da Messages API do Vonage.
O pré-montado Small Talk é ótimo para testes, mas o próximo passo aqui seria criar seu próprio agente, capaz de transmitir algum conhecimento que seja útil para o usuário.
Para obter mais informações sobre como começar a criar agentes no Dialogflow, você pode consultar os guias práticos do Dialogflow.
Com o código deste tutorial, você já tem a integração entre o Facebook e o Dialoglow, então pode seguir em frente e criar o agente mais poderoso de todos os tempos.
Se você tiver alguma dúvida sobre esta postagem do blog, sinta-se à vontade para entrar em contato conosco na nossa Slack da Comunidade Vonage ou nos enviar uma mensagem no X, anteriormente conhecido como Twitter.
Compartilhar:
Ex-diretor de Formação de Desenvolvedores da Vonage. Com experiência como desenvolvedor criativo, gerente de produto e organizador de hack days, Martyn atua como defensor da tecnologia desde 2012, tendo trabalhado anteriormente no setor de radiodifusão e em grandes gravadoras. Ele se dedica a capacitar e empoderar desenvolvedores em todo o mundo.