O recurso de “bots de mensageiro” do Facebook não é novidade, e muitos bots incríveis já existem. No entanto, os recursos relacionados a como construir seu próprio bot são escassos e sem explicação para pessoas que são novas na API do Graph do Facebook. Os bots do Messenger agora também exigem que você use um URL de retorno de chamada de webhook seguro SSL (mais sobre isso depois), e configurar o SSL não é para todos, e também custa dinheiro.
Neste artigo, vou orientá-lo durante todo o processo de criação de um simples bot de mensagens do Facebook, porque a própria documentação do Facebook é mal explicada. Vamos configurar um aplicativo em nuvem que usa o protocolo https, codificar o bot em Node.js (que é um javascript, linguagem do lado do servidor), usar o git para enviar o código para o aplicativo em nuvem e testá-lo no Facebook Messenger.
Bot de instalação
Você precisará do Node instalado no seu laptop. Caso contrário, vá ao site do Node para fazer o download e instalá-lo.
Quando terminar, você pode continuar com a configuração do bot. Siga os passos abaixo:
1. Inicie o Terminal.
2. Você precisa de um diretório separado para manter seu código.
- Faça um novo diretório
mkdir testbot
- Mude o seu diretório de trabalho para o diretório que você acabou de criar
cd testbot
3. Em seguida, inicialize o aplicativo Node. npm init
- Você será solicitado a inserir informações sobre seu aplicativo, basta usar os padrões pressionando Enter para tudo.
4. Instalar pacotes npm install express body-parser request --save
- O comando será executado e dará alguns avisos; ignore-os.
5. No Finder, abra o diretório “ testbot ” que você criou e encontre o arquivo chamado “ package.json “; abra isso em um editor como o Sublime Text.
6. Neste arquivo, precisamos adicionar uma linha "start": "node index.js"
- Não se esqueça de acrescentar um ", " no final da linha anterior.
7. Em seguida, crie um novo arquivo no Sublime Text e coloque o seguinte código dentro dele:
[js]
var express = require ('express');
var bodyParser = require ('body-parser');
var request = require ('pedido');
var app = express ();
app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', function (req, res) {
res.send ('Este é o TestBot Server');
});
app.get ('/ webhook', function (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query ['hub.challenge']);
} outro {
res.send ('Token de verificação inválido');
}
});
[/ js]
Salve este arquivo como index.js
Nota: Na Linha 13, o valor de 'hub.verify_token' é definido como ' testbot_verify_token', lembre-se desse valor, pois ele será usado ao criar o webhook no Facebook.
Criar repositório Git
Agora que configuramos o tratamento de retorno de chamada do nosso bot, precisamos enviar o código para o Heroku. Para isso, precisamos criar um repositório git em nosso diretório.
Nota: “git” é um sistema de controle de versão para arquivos e código de software. Você pode ler mais sobre isso na Wikipedia.
Criar um repositório git é fácil e leva apenas alguns comandos do Terminal.
Nota: Certifique-se de estar dentro do diretório “ testbot ” no Terminal. Você pode fazer isso digitando o comando pwd no Terminal.
Siga estas etapas para criar um repositório git:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Setup Heroku
Antes de entrarmos nas páginas de desenvolvedores do Facebook, precisamos de um URL de retorno de chamada com o qual o Facebook possa conversar. Este URL precisa usar o protocolo https, o que significa que precisamos instalar um certificado SSL em nosso site; mas, este é um guia para iniciantes de bots de mensagens do Facebook, então não vamos complicar as coisas. Usaremos o Heroku para implantar nosso código. O Heroku fornece URLs https para seus aplicativos e possui um plano gratuito que atende às nossas demandas (muito básicas).
Vá para o site Heroku e registre-se.
Nota: No campo que diz “Escolha sua língua primária de desenvolvimento”, use “Eu uso outra língua”.
Uma vez feito isso, instale o toolbelt Heroku para o seu sistema operacional (Mac, para mim) e instale-o. Isso lhe dará acesso ao Heroku no seu Terminal (ou prompt de comando, no Windows).
Em seguida, criaremos um aplicativo no Heroku, que conterá todo o código do nosso bot. Siga os passos abaixo:
1. Lançamento do Terminal
2. Digite o heroku login
- Você será solicitado a digitar seu e-mail e senha.
- Digite seu email, pressione Enter; em seguida, digite sua senha, pressione Enter.
- Você estará logado no heroku
3. Digite heroku create
- Isso criará um aplicativo no Heroku e fornecerá um hiperlink. Observe que o link está usando o protocolo https. Fácil, certo?
4. Agora você pode enviar seu código de aplicativo para Heroku git push heroku master
5. Uma vez feito isso, seu aplicativo é basicamente ao vivo, e você pode visitar o link em seu navegador para verificar se tudo está funcionando bem. Ele deve abrir uma página da Web dizendo " Este é o TestBot Server ".
Configuração do Facebook
Chegou a hora de conectar nosso bot ao Facebook! Você precisará criar uma nova página no Facebook ou usar uma existente que você possui. Vou mostrar como proceder criando uma nova página no Facebook.
1. Vá ao Facebook e crie uma nova página.
- Você pode criar uma página na categoria que quiser. Estou optando por empresa / organização, sem nenhum motivo específico.
2. Os próximos passos que o Facebook mostra são opcionais e podem ser ignorados.
3. Em seguida, vá para o site dos desenvolvedores do Facebook.
- No canto superior direito, passe o mouse em " Meus aplicativos " e, em seguida, clique em " Adicionar um novo aplicativo " no menu suspenso.
- Clique em “ configuração básica ” quando o Facebook solicitar que você escolha uma plataforma.
4. Preencha os detalhes do seu Nome do aplicativo e endereço de e-mail de contato.
- Selecione " Apps for Pages " na categoria.
- Clique em " Criar ID do aplicativo ".
5. Você será levado ao painel do seu aplicativo. Na barra lateral, navegue até “ + Adicionar produtos ” e selecione “ Messenger ” clicando no botão “ Get Started ”.
6. Selecione “ Configuração de Webhooks “.
7. Preencha os campos obrigatórios, substituindo o “URL de retorno de chamada” pelo URL do aplicativo Heroku, verifique o token com o token usado no arquivo index.js e selecione os seguintes campos de assinatura:
- message_deliveries
- mensagens
- message_optins
- messaging_postbacks
Nota: Certifique-se de adicionar " / webhook " ao URL de retorno de chamada para que o index.js execute a função necessária quando o Facebook tentar fazer o ping do URL, ele pode verificar o "Token de verificação".
8. Clique em “ Verificar e Salvar ”.
9. Na seção “ Token Generation ”, clique em “ Select a Page ” e selecione a página que você criou anteriormente.
Isso irá gerar um “ Token de Acesso à Página ”, salvá-lo em algum lugar; Você precisará disso mais tarde.
10. Em seguida, você terá que fazer uma consulta POST para seu aplicativo, usando o token de acesso de página gerado na última etapa. Isso pode ser feito facilmente no Terminal. Basta executar o seguinte comando, substituindo PAGE_ACCESS_TOKEN pelo Token de Acesso da Página que você gerou .
curl -X POST “//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN”
Você deve receber uma resposta de “ sucesso ” no Terminal.
Mais Heroku Setup
Sim, ainda não terminamos. Não quase.
1. Vá para o site da Heroku e faça o login com o seu ID de e-mail.
2. Localize seu aplicativo no "painel" e clique nele.
3. Navegue até a guia Configurações.
4. Clique em " Reveal Config Vars "
5. Adicione o PAGE_ACCESS_TOKEN como " config var " e clique em " Add ".
Codificando o bot real
Agora que terminamos o trabalho pesado, podemos nos concentrar no que realmente importa: fazer o bot responder às mensagens. Para começar, vamos apenas projetar um bot que simplesmente ecoa as mensagens que recebe. Como se constata, essa tarefa simples requer um considerável código para funcionar.
1. Codificando o Ouvinte de Mensagem
Antes que o bot possa repetir a mensagem, ele precisa ser capaz de ouvir mensagens. Vamos fazer isso primeiro.
No arquivo index.js, adicione o seguinte código:
[js]
app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
para (i = 0; i <events.length; i ++) {
var event = eventos [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ js]
O que essa função faz, verifica as mensagens recebidas e, em seguida, verifica se há texto na mensagem. Se encontrar texto na mensagem recebida, ele chama a função sendMessage (mostrada mais tarde), passando o ID do remetente e o texto a ser enviado de volta. É importante entender os seguintes valores e o que eles significam:
- event.message.text é o texto recebido na mensagem. Por exemplo, se alguém enviar a mensagem “Olá” ao nosso bot, o valor de event.message.text será “Hello”.
- event.sender.id é o id da pessoa que enviou a mensagem ao bot. Isso é necessário para que o bot saiba a quem endereçar a resposta.
2. Codificando a função sendMessage
Permite codificar a função “sendMessage”, agora.
[js]
function sendMessage (recipientId, message) {
pedido({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
método: 'POST',
json: {
recipient: {id: recipientId},
mensagem: message,
}
}, função (erro, resposta, corpo) {
if (erro) {
console.log ('Erro ao enviar mensagem:', erro);
} else if (response.body.error) {
console.log ('Erro:', response.body.error);
}
});
};
[/ js]
A função “sendMessage” usa dois parâmetros:
- recipientId
- mensagem
O recipientId é necessário para que a mensagem possa ser endereçada ao usuário correto.
A mensagem é o texto real que deve ser enviado na resposta.
3. Empurrando as Mudanças para Heroku
Se você concluiu as etapas acima, seu bot deve poder ecoar o texto recebido. Mas primeiro, você tem que empurrar as alterações para o aplicativo hospedado no Heroku. Para fazer isso, siga as etapas abaixo:
1. Inicie o Terminal.
2. Altere o diretório para o diretório testbot
testador de cd
3. Siga os seguintes passos:
- git add.
- Nota: há um "." No final de "git add"
- git commit -m “Primeiro commit”
- git push heroku mestre
4. Agora, envie uma mensagem para sua página e o bot fará com que a mensagem retorne para você.
Respostas condicionais, também conhecidas como tornar o bot mais inteligente
Podemos usar a combinação de texto para permitir que nosso bot do messenger do Facebook responda de acordo com determinadas palavras-chave especiais.
Para conseguir isso, precisamos adicionar outra função. Eu estou nomeando "conditionalResponses", mas você pode escolher qualquer nome que preferir.
1. Codificando a função conditionalResponses
[js]
function condditionalResponses (recipientId, text) {
texto = texto || "";
var what = text.match (/ o que / gi); // verifique se a string de texto contém a palavra "what"; ignorar caso
varGadget-Info.com = text.match (/ beebom / gi); // verifique se a string de texto contém a palavra "beebom"; ignorar caso
var who = text.match (/ quem / gi); // verifique se a string de texto contém a palavra "who"; ignorar caso
var you = text.match (/ você / gi); // verifique se a string de texto contém a palavra "você"; ignorar caso
// se o texto contiver "what" e "beebom", faça o seguinte:
if (o que! = null &&; Gadget-Info.com! = null) {
message = {
text: "Beebom é um site que oferece recursos tecnológicos. Bem-vindo."
}
sendMessage (recipientId, message);
retorno verdadeiro;
}
// se o texto contiver ambos "who" e "you", faça o seguinte:
if (who! = null && você! = null) {
message = {
text: "Fui solicitado a não discutir minha identidade on-line".
}
sendMessage (recipientId, message);
retorno verdadeiro;
}
// se nada corresponder, retorne false para continuar a execução da função interna.
retorna falso;
};
[/ js]
Nas linhas 4 a 7, definimos variáveis dependendo da correspondência da string recebida com palavras específicas. A melhor parte sobre o uso de “text.match ()” é que ele usa expressões regulares (geralmente chamado regex, leia mais aqui). Isso é bom para nós, porque isso significa que, desde que uma parte do texto recebido corresponda a uma das palavras que mencionamos em text.match (), a variável não será nula. Isto significa que, se a mensagem recebida for “What's Beebom?”, “Var what” e “var beebom” não serão nulos, porque a palavra “What's” contém a palavra “what”. Então, somos salvos de criar declarações extras para cada variação em que alguém pode dizer "o que".
2. Editando o Ouvinte de Mensagens
Também precisamos editar o Listener de Mensagens que codificamos, para garantir que ele também combine o texto recebido com a função "conditionalResponses".
[js]
app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
para (i = 0; i <events.length; i ++) {
var event = eventos [i];
if (event.message && event.message.text) {
// primeiro tente verificar se a mensagem recebida se qualifica para resposta condicional.
if (! conditionalResponses (event.sender.id, event.message.text)) {
// se isso não acontecer, simplesmente repita a mensagem recebida de volta para o remetente.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
As alterações no ouvinte podem não parecer muito drásticas, mas seus efeitos certamente são. Agora, o ouvinte primeiro tenta responder com respostas condicionais e, se não houver uma condição válida para a mensagem recebida, simplesmente faz com que a mensagem retorne ao usuário.
3. Empurrando as Mudanças para Heroku
Antes de experimentar os novos recursos, você terá que empurrar o código atualizado para o aplicativo hospedado no Heroku. Siga os passos abaixo para fazer isso:
1. Inicie o Terminal.
2. Altere o diretório para o diretório testbot
testador de cd
3. Siga os seguintes passos:
- git add.
- Nota: há um "." No final de "git add"
- git commit -m “Adicionando recursos condicionais”
- git push heroku mestre
4. Agora, envie uma mensagem para sua página e o bot fará com que a mensagem retorne para você.
Ainda mais funcionalidade
Nosso bot agora responde a um pequeno conjunto de comandos em respostas boas e bem estruturadas. Mas ainda não é muito útil. Vamos fazer mais algumas alterações no código para tornar o nosso bot mais funcional . Nós estaremos reformulando muitas funções e adicionando mais algumas, então fique animado.
1. Editando o Ouvinte de Mensagens
Nosso ouvinte de mensagens, neste estágio, funciona apenas ok. No entanto, ele não está muito bem formatado e, se continuarmos aumentando as instruções if aninhadas para adicionar “ verificações de condição ” extras, rapidamente ficará feio de se ver, difícil de entender e mais lento na execução. Nós não queremos isso, agora, nós queremos? Vamos fazer algumas mudanças.
Nota: Há uma linha de código no listener de mensagens que lê “res.sendStatus (200)”, esta linha envia um código de status 200 para o Facebook, informando que a função foi executada com sucesso. De acordo com a documentação do Facebook, o Facebook espera por um máximo de 20 segundos para receber um status de 200, antes de decidir que a mensagem não passou e interrompe a execução do código.
Nosso novo ouvinte de mensagens se parece com isso. Usamos o comando “ res.sendStatus (200) ” para interromper a execução da função assim que uma condição for correspondida e executada.
[js]
app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
para (i = 0; i <events.length; i ++) {
var event = eventos [i];
if (event.message && event.message.text) {
// primeiro verifica o texto da mensagem em relação às condições introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// por falta de um nome melhor, chamei esse novoResponse: p; verifique isso a seguir
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// else, apenas retorne a mensagem original
outro {
// substitui o eco pela lista de comandos válida
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
2. Codificando a nova função Resposta
Nosso ouvinte de mensagens agora verifica o texto da mensagem em relação a um conjunto de condições em "newResponse" também, mas primeiro, precisamos codificar a função newResponse. Usaremos essa função para verificar se o usuário solicitou sugestões de artigos no site doGadget-Info.com, pesquisar o termo da consulta no site e apresentar o link para o usuário. Mais uma vez, usaremos expressões regulares para corresponder o texto a palavras-chave específicas.
[js]
function newResponse (recipientId, text) {
texto = texto || "";
var sugestão = text.match (/ sugira / gi);
var random = text.match (/ random / gi);
var article = text.match (/ article / gi);
var iphone = text.match (/ iphone / gi);
var android = text.match (/ android / gi);
var mac = text.match (/ mac / gi);
var browser = text.match (/ browser / gi);
var vpn = text.match (/ vpn / gi);
// verifica se o usuário está pedindo sugestões de artigos
if (sugira! = null && article! = null) {
var query = "";
// se as sugestões de artigos forem consultadas, verifique o tópico que o usuário está procurando
if (android! = null) {
consulta = "Android";
} else if (mac! = null) {
consulta = "Mac";
} else if (iphone! = null) {
consulta = "iPhone";
} else if (navegador! = null) {
query = "Navegador";
} else if (vpn! = null) {
consulta = "VPN";
}
sendButtonMessage (recipientId, consulta);
retorno verdadeiro
}
retorna falso;
};
[/ js]
Estamos usando outra função personalizada chamada “sendButtonMessage” para enviar a mensagem caso o usuário esteja solicitando sugestões de artigos. Nós vamos criar isso em seguida.
3. Codificando a função sendButtonMessage
A função sendButtonMessage usa dois parâmetros, um ID do destinatário e uma consulta. O ID do destinatário é usado para identificar o usuário para quem a mensagem deve ser enviada e a consulta é usada para identificar o tópico no qual o usuário deseja sugestões de artigos.
[js]
function sendButtonMessage (recipientId, query) {
var messageData = {
recipient: {
id: recipientId
}
mensagem: {
anexo: {
tipo: "template",
carga útil: {
template_type: "button",
text: "Isto é o que eu encontrei para" + query,
botões: [{
tipo: "web_url",
url: "//www.beebom.com/?s="+query,
title: "Beebom:" + consulta
}]
}
}
}
};
callSendAPI (messageData);
}
[/ js]
Mais uma vez, estamos usando uma função personalizada; desta vez para enviar a mensagem final, com os links do artigo, para o usuário. A função é, em muitos aspectos, semelhante à função “sendMessage” que codificamos anteriormente, mas é mais genérica na maneira como leva os dados da mensagem, o que nos convém, porque os dados da nossa mensagem mudam com a consulta que o usuário faz.
4. Codificando a função callSendAPI
A função “callSendAPI” usa um único parâmetro, o “messageData” . Este parâmetro contém os dados da mensagem inteira, formatados corretamente de acordo com as regras do Facebook, para que o mensageiro possa exibi-lo corretamente para o usuário.
[js]
function callSendAPI (messageData) {
pedido({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
método: 'POST',
json: messageData
}, função (erro, resposta, corpo) {
if (! error && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;
console.log ("Mensagem genérica enviada com sucesso com id% s para o destinatário% s",
messageId, recipientId);
} outro {
console.error ("Não foi possível enviar a mensagem.");
console.error (resposta);
console.error (erro);
}
});
}
[/ js]
5. Empurrando as Mudanças para Heroku
Estamos no passo final para tornar nosso bot atualizado ao vivo. Nós só precisamos empurrar todas as mudanças de código para o Heroku. O processo é o mesmo de antes e é descrito abaixo:
1. Inicie o Terminal.
2. Altere o diretório para o diretório testbot .
testador de cd
3. Faça o seguinte:
- git add.
- Nota: Existe um “.” No final desse comando.
- git commit -m “melhorando verificações e formatação de condições”
- git push heroku mestre
4. Agora envie uma mensagem como “Sugira um artigo no Android”, ou “Beebom, me sugira qualquer artigo sobre o tema Android”; e o bot enviará uma mensagem bem formatada com um link que você pode tocar para abrir os artigos relacionados à sua consulta.
Cavar mais fundo
Agora que você sabe como começar a desenvolver os bots de mensagens do Facebook, leia a documentação do Facebook sobre como desenvolver os bots de mensagens do Facebook. Embora a documentação não seja boa para iniciantes, você não é mais um novato. Você deve verificar a documentação oficial e tentar descobrir como tornar seu bot ainda mais inteligente. Teaser: Você pode enviar mensagens com imagens e botões também! Também é possível usar serviços como Wit.ai e Api.ai para codificar seu bot e depois integrá-lo com o Facebook, mas nas minhas fracas tentativas de usar esses serviços, o Wit.ai não funciona muito bem, e o Api.ai tem uma curva de aprendizagem acentuada para iniciantes.
Você já desenvolveu um bot de mensageiro do Facebook? Se você tem, como você foi desenvolvê-lo e o que ele pode fazer? Você usou serviços como Wit.ai e Api.ai para criar seu bot? Se você nunca tentou codificar um bot, vá e desenvolva seu próprio bot de mensagens do Facebook, torne-o mais inteligente e melhor, e nos informe sobre sua experiência nos comentários abaixo.
