Como criar um bot do Facebook Messenger (guia)

O recurso de “bots de mensageiro” do Facebook não é nada novo, e já existem muitos bots incríveis. No entanto, os recursos sobre como construir exatamente seu próprio bot são escassos e carecem de explicação para as pessoas que são novas na API Graph do Facebook. Os bots do Messenger agora também exigem que você use um URL de retorno de chamada de webhook protegido por SSL (mais sobre isso mais tarde), e configurar o SSL não é para todos e também custa dinheiro.

Neste artigo, vou guiá-lo por todo o processo de criação de um simples bot do Facebook Messenger, porque a documentação do Facebook é bem mal explicada. Vamos configurar um aplicativo de nuvem que usa protocolo https, codificar o bot em Node.js (que é um javascript, linguagem do lado do servidor), usar git para enviar o código para o aplicativo de nuvem e testá-lo no Facebook Messenger.

Bot de configuração

Você precisará do Node instalado no seu laptop. Caso contrário, vá para o 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. Terminal de lançamento.

2. Você precisa de um diretório separado para armazenar seu código.

• Faça um novo diretório
  mkdir testbot

• Mude 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 o seu aplicativo, basta usar os padrões pressionando Enter para tudo.

4. Instale os 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 em Sublime Text e insira o seguinte código dentro dele:

[js]

var express = require ('express');
var bodyParser = require ('body-parser');
var pedido = requer ('pedido');
var app = express ();

app.use (bodyParser.urlencoded (extended: false));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', função (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']);
senão
res.send ('Token de verificação inválido');

);

[/ js]

Salve este arquivo como index.js

Observação: 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.

Observação: “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 requer apenas alguns comandos do Terminal.

Observação: Certifique-se de estar dentro do “testbot”Diretório 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 "Registrar Facebook Webhook"

Configurar Heroku

Antes mesmo de entrar nas páginas de desenvolvedor do Facebook, precisamos de um URL de retorno com o qual o Facebook possa falar. 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 messenger do Facebook, então não vamos complicar as coisas. Usaremos o Heroku para implantar nosso código. Heroku fornece URLs https para seus aplicativos e tem um plano gratuito que atende nossas demandas (muito básicas).

Acesse o site do Heroku e cadastre-se.

Observação: No campo que diz “Escolha seu idioma de desenvolvimento primário”, use “Eu uso outro idioma”.

Depois de fazer isso, instale o conjunto de ferramentas Heroku para o seu sistema operacional (Mac, para mim) e instale-o. Isso lhe dará acesso ao Heroku em seu Terminal (ou prompt de comando, no Windows).

A seguir, criaremos um aplicativo no Heroku, que conterá todo o código do nosso bot. Siga os passos abaixo:

1. Terminal de lançamento

2. Digite login do heroku

• Você será solicitado a inserir seu e-mail e senha.

• Digite seu e-mail, pressione Enter; em seguida, digite sua senha e pressione Enter.

• Você estará logado no heroku

3. Digite heroku criar

• Isso criará um aplicativo no Heroku e fornecerá um hiperlink. Observe que o link está usando o protocolo https. Fácil né?

4. Agora você pode enviar o código do seu aplicativo para Heroku
git push heroku mestre

5. Uma vez feito isso, seu aplicativo está basicamente ativo e você pode visitar o link em seu navegador para verificar se tudo está funcionando bem. Deve abrir uma página da web dizendo “Este é o TestBot Server“.

Configuração do Facebook

É hora de conectar nosso bot ao Facebook! Você precisará criar uma nova página do Facebook ou usar uma existente de sua propriedade. Vou mostrar como proceder criando uma nova página do Facebook.

1. Vá ao Facebook e crie uma nova página.

• Você pode criar uma página em qualquer categoria que desejar. Estou optando por empresa / organização, sem motivo específico.

2. As próximas etapas que o Facebook mostra são opcionais e podem ser ignoradas.

3. Em seguida, vá para o site dos desenvolvedores do Facebook.

• No canto superior direito, passe o mouse sobre “Meus Apps”E depois 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 de aplicativo e endereço de e-mail de contato.

• Selecione “Apps para páginas”Na categoria.

• Clique em "Criar ID de aplicativo“.

5. Você será levado ao painel do seu aplicativo. Na barra lateral, navegue até “+Adicionar produtos”E selecione“Mensageiro”Clicando em“Iniciar" botão.

6. Selecione “Configurar Webhooks“.

7. Preencha os campos obrigatórios, substituindo o “URL de retorno” pelo URL do aplicativo Heroku, Verifique o Token pelo token usado no arquivo index.js e selecione os seguintes Campos de Assinatura:

• message_deliveries

• mensagens

• message_optins

• messaging_postbacks

Observação: Certifique-se de anexar “/ webhook”Ao URL de retorno de chamada para que index.js execute a função necessária quando o Facebook tentar fazer o ping do URL, ele pode verificar o“ Verificar Token ”.

8. Clique em “Verificar e salvar“.

9. No “Geração de tokenSeção ”, clique em“Selecione uma página”E selecione a página que você criou anteriormente.

Isso irá gerar um “Token de acesso à página“, Salve em algum lugar; Você precisará disso mais tarde.

10. Em seguida, você terá que fazer uma consulta POST em seu aplicativo, usando o token de acesso à 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 à página que você gerou.

curl -X POST “https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN”

Você deve receber um “sucesso”Resposta no Terminal.

Mais configuração do Heroku

Sim, ainda não terminamos. Não quase.

1. Vá para o site do Heroku e faça login com seu ID de e-mail.

2. Localize seu aplicativo no “painel” e clique nele.

3. Navegue até a guia Configurações.

4. Clique em “Revelar Config Vars”

5. Adicione o PAGE_ACCESS_TOKEN como um “config var“, E clique em“Adicionar“.

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. Acontece que essa tarefa simples requer uma quantidade considerável de código para funcionar.

1. Codificando o Message Listener

Antes que o bot possa ecoar a mensagem, ele precisa ser capaz de ouvir as 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 evento = 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 é verificar as mensagens recebidas e, em seguida, verificar se há texto na mensagem. Se encontrar texto na mensagem recebida, ele chama a função sendMessage (mostrada posteriormente), passando a ID do remetente e o texto a ser enviado de volta. É importante compreender os seguintes valores e o que eles significam:

• event.message.text é o texto recebido na mensagem. Por exemplo, se alguém enviar a mensagem “Hello” para 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 dirigir a resposta.

2. Codificando a função sendMessage

Vamos codificar a função “sendMessage”, agora.

[js]

function sendMessage (receiverId, message)
solicitação(
url: 'https://graph.facebook.com/v2.6/me/messages',
qs: access_token: process.env.PAGE_ACCESS_TOKEN,
método: 'POST',
json:
destinatário: id: receiverId,
mensagem: mensagem,

, função (erro, resposta, corpo)
if (erro)
console.log ('Erro ao enviar mensagem:', erro);
else if (response.body.error)
console.log ('Erro:', resposta.body.error);

);
;

[/ js]

A função “sendMessage” tem dois parâmetros:

• receiverId

• mensagem

O receiverId é 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 o Heroku

Se você concluiu as etapas acima, seu bot deve ser capaz de repetir o texto recebido. Mas, primeiro, você deve enviar as alterações para o aplicativo hospedado no Heroku. Para fazer isso, siga as etapas abaixo:

1. Terminal de lançamento.

2. Mude o diretório para o diretório do testbot
cd testbot

3. Execute as seguintes etapas:

• git add .

• Observação: Existe 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 irá ecoar a mensagem de volta para você.

Respostas condicionais, também conhecidas como tornando o bot mais inteligente

Podemos usar correspondência de texto para permitir que nosso bot do Facebook messenger responda de acordo com certas palavras-chave especiais.

Para conseguir isso, precisamos adicionar outra função. Estou chamando de "resposta condicional", mas você pode escolher o nome que preferir.

1. Codificando a função conditionalResponses

[js]

function conditionalResponses (receiverId, text)
text = text || "";

var what = text.match (/ what / gi); // verifique se a string de texto contém a palavra "o que"; ignorar caso
var beebom = text.match (/ beebom / gi); // verifique se a string de texto contém a palavra "beebom"; ignorar caso
var quem = text.match (/ quem / gi); // verifique se a string de texto contém a palavra "quem"; ignorar caso
var you = text.match (/ you / gi); // verifique se a string de texto contém a palavra "você"; ignorar caso

// se o texto contém "o que" e "beebom", faça o seguinte:

if (what! = null &&; beebom! = null)
mensagem =
text: "Beebom é um site que oferece recursos de tecnologia. Bem-vindo."

sendMessage (receiverId, message);
return true;

// se o texto contém "quem" e "você", faça o seguinte:
if (quem! = null && você! = null)
mensagem =
texto: "Pediram-me para não discutir a minha identidade online."

sendMessage (receiverId, message);
return true;

// se nada corresponder, retorna falso 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 chamadas de regex, leia mais aqui). É bom para nós, porque isso significa que, desde que até mesmo uma parte de uma palavra no texto recebido corresponda a qualquer uma das palavras mencionadas em text.match (), a variável não será nula. Isso significa que se a mensagem recebida foi “What's Beebom?”, “Var what” e “var beebom” não serão nulos, porque a palavra “What's” contém a palavra “what”. Portanto, somos salvos de criar declarações extras para cada variação em que alguém possa dizer "o quê".

2. Editando o Message Listener

Também precisamos editar o Message Listener que codificamos, para garantir que ele tente combinar o texto recebido com a função "conditionalResponses" também.

[js]

app.post ('/ webhook', function (req, res)
var events = req.body.entry [0] .messaging;
para (i = 0; i < events.length; i++)
var evento = 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 não, simplesmente ecoa a mensagem recebida de volta para o remetente.
sendMessage (event.sender.id, text: "Echo:" + event.message.text);



res.sendStatus (200);
);

[/ js]

As mudanças 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, ele simplesmente ecoa a mensagem de volta para o usuário.

3. Empurrando as mudanças para o Heroku

Antes de experimentar os novos recursos, você terá que enviar o código atualizado para o aplicativo hospedado no Heroku. Siga as etapas abaixo para fazer isso:

1. Terminal de lançamento.

2. Mude o diretório para o diretório do testbot
cd testbot

3. Execute as seguintes etapas:

• git add .

• Observação: Existe 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 irá ecoar a mensagem de volta para você.

Ainda mais funcionalidade

Nosso bot agora responde a um pequeno conjunto de comandos em respostas agradáveis ​​e bem estruturadas. Mas ainda não é muito útil. Vamos fazer mais algumas mudanças no código para tornar nosso bot mais “funcional”Pedaço de software. Seremos renovando várias funções, e adicionando mais alguns, então fique animado.

1. Editando o Message Listener

Nosso ouvinte de mensagens, neste estágio, funciona perfeitamente. No entanto, não está formatado muito bem e se fôssemos continuar aumentando as instruções if aninhadas para adicionar "verificações de condição“, Rapidamente se tornará feio de se olhar, difícil de entender e mais lento na execução. Não queremos isso agora, queremos? Vamos fazer algumas mudanças.

Observação: Há uma linha de código no listener de mensagem 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 no máximo 20 segundos para receber o status 200, antes de decidir que a mensagem não foi enviada e interromper a execução do código.

Nosso novo ouvinte de mensagem é assim. Nós usamos o "res.sendStatus (200)”Comando 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 evento = eventos [i];
if (event.message && event.message.text)

// primeiro verifique o texto da mensagem em relação às condições de introResponse
if (introResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// por falta de um nome melhor, chamei este newResponse: p; verifique isso a seguir
else if (newResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// senão, apenas ecoe a mensagem original
senão
// substitua echo por uma 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 mensagem 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. Estaremos usando esta função para verificar se o usuário solicitou sugestões de artigos do site Beebom, pesquise a consulta termo no site, e apresente 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 (receiverId, text)
text = text || "";
var sugestão = text.match (/ sugestão / 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);

// verifique se o usuário está pedindo sugestões de artigos
if (sugira! = nulo && artigo! = nulo)
var query = "";
// se 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)
consulta = "Navegador";
else if (vpn! = null)
consulta = "VPN";

sendButtonMessage (receiverId, query);
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. Vamos criar isso a seguir.

3. Codificando a função sendButtonMessage

A função sendButtonMessage leva dois parâmetros, um ID do destinatário e um inquerir. 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 sobre o qual o usuário deseja sugestões de artigos.

[js]

function sendButtonMessage (receiverId, query)
var messageData =
destinatário:
id: receiverId
,
mensagem:
acessório:
tipo: "template",
carga útil:
template_type: "botão",
text: "Isto é o que encontrei para" + consulta,
botões: [
tipo: "web_url",
url: "http://www.beebom.com/?s="+query,
título: "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, ao usuário. A função é, em muitos aspectos, semelhante ao "enviar mensagem" função que codificamos anteriormente, mas é mais genérica na forma como leva os dados da mensagem, o que nos convém, porque nossos dados de mensagem mudam com a consulta que o usuário faz.

4. Codificando a função callSendAPI

O “CallSendAPI” função leva um único parâmetro, o “MessageData”. Este parâmetro contém todos os dados da mensagem, formatados corretamente de acordo com as regras do Facebook, para que o messenger possa exibi-los adequadamente para o usuário.

[js]

function callSendAPI (messageData)
solicitação(
uri: 'https://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 (! erro && response.statusCode == 200)
var receiverId = 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, receiverId);
senão
console.error ("Não foi possível enviar mensagem.");
console.error (resposta);
console.error (erro);

);

[/ js]

5. Empurrando as mudanças para o Heroku

Estamos na etapa final para colocar nosso bot atualizado no ar. Precisamos apenas enviar todas as alterações de código para o Heroku. O processo é o mesmo de antes e é descrito abaixo:

1. Terminal de lançamento.

2. Mude o diretório para o testbot diretório.
cd testbot

3. Faça o seguinte:

• git add .

• Observação: Existe um “.” no final desse comando.

• git commit -m “melhorando as verificações de condição e formatação”

• git push heroku mestre

4. Agora envie uma mensagem como “Sugira um artigo no Android”, ou “Beebom, sugira algum artigo no tema Android”; e o bot enviará uma mensagem bem formatada com um link no qual você pode tocar para abrir os artigos relacionados à sua consulta.

CONSULTE TAMBÉM: 16 dicas e truques do Facebook Messenger que você deve saber

Dig Deeper

Agora que você sabe como começar a desenvolver bots de messenger do Facebook, leia a documentação do Facebook sobre como desenvolver bots de messenger do Facebook. Embora a documentação não seja boa para iniciantes, você não é mais um iniciante. Você deve verificar a documentação oficial e tentar descobrir como tornar seu bot ainda mais inteligente. Teaser: Você também pode enviar mensagens com imagens e botões! Também é possível usar serviços como Wit.ai e Api.ai para codificar seu bot e integrá-lo ao Facebook, mas em minhas tentativas frágeis de usar esses serviços, Wit.ai não funciona muito bem e Api.ai tem uma curva de aprendizado acentuada para iniciantes.

Você já desenvolveu um bot do Facebook Messenger? Em caso afirmativo, como você o desenvolveu e o que ele pode fazer? Você usou serviços como Wit.ai e Api.ai para criar seu bot? Se você nunca experimentou programar um bot, desenvolva seu próprio bot do Facebook Messenger, torne-o mais inteligente e melhor e conte-nos sobre sua experiência nos comentários abaixo.