Como criar um bot do Facebook Messenger (Guia)

O recurso “messenger bots” do Facebook não é novidade, e muitas bots impressionantesjá existe. No entanto, os recursos sobre exatamente como criar seu próprio bot são escassos e faltam explicações para quem é novo na API do Facebook Graph. Agora, os bots do Messenger também exigem que você use um URL de retorno de chamada do webhook protegido por SSL (mais sobre isso mais tarde), e configurar o SSL não é para todos e também custa dinheiro.

Neste artigo, mostrarei todo o processo de criação de um simples bot de mensagens do Facebook, porque a documentação do Facebook é pouco explicada. Vamos configurar um aplicativo em nuvem que usa o protocolo https, codificar o bot no Node.js (que é umjavascript, idioma do lado do servidor), use git para enviar o código ao 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á para oSite do nó para baixar e instalar.

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 armazenar seu código.

• Crie um novo diretório
  mkdir testbot

• Altere 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. Instale 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 localize o arquivo chamado ” package.json “; abra isso em umeditor como Sublime Text.

6. Nesse 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 request = require (‘solicitação’);
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 servidor TestBot’);
});
app.get (‘/ webhook’, função (req, res) {
if (req.query [‘hub.verify_token’] === ‘testbot_verify_token’) {
res.send (req.query [‘hub.challenge’] );
} else {
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 noWikipedia.

Criar um repositório git é fácil e requer apenas alguns comandos do Terminal.

Nota:  Verifique se você está dentro do diretório ” testbot ” no Terminal. Você pode fazer isso digitando o comando pwdno 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 mesmo 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 sobre os bots 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).

Vou ao Site Heroku e registre-se.

Nota:  No campo que diz “Escolha sua linguagem de desenvolvimento principal”, use “Eu uso outra linguagem”.

Quando terminar, instale o Heroku toolbeltpara o seu sistema operacional (Mac, para mim) e instale-o. Isso lhe dará acesso ao Heroku no seu Terminal (ou no 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. Terminal de Lançamento

2. Digite heroku login

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

• Digite seu email, pressione Enter; Em seguida, digite sua senha e 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 né?

>

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

>

5. Quando isso for feito, seu aplicativo estará basicamente ativo e você poderá acessar o link no seu navegador para verificar se tudo está funcionando bem. Ele deve abrir uma página da web dizendo ” Este é o Servidor TestBot “.

Configuração do Facebook

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

1. Vá para o Facebook e crie uma nova página.

• Você pode criar uma página na categoria que desejar. Estou optando pela empresa / organização, por 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 para desenvolvedores do Facebook.

• No canto superior direito, passe o mouse em ” Meus aplicativos ” e 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 ” Aplicativos para páginas ” na categoria.

• Clique em ” Criar ID do aplicativo “.

>

5. Você será direcionado para o painel do seu aplicativo. Na barra lateral, navegue até “ + Adicionar produtos ” e selecione “ Messenger ” clicando no botão “ Introdução ”.

>

6. Selecione ” Configurar 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 inscrição:

• message_deliveries

• mensagens

• message_optins

• messaging_postbacks

>

Nota:  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 executar ping no URL, para verificar o “Verificar token”.

8. Clique em ” Verificar e salvar “.

9. Na seção ” Geração de token “, clique em ” Selecionar uma página ” e selecione a página que você criou anteriormente.

Isso irá gerar um “ token de acesso à página ”, salve-o em algum lugar; Você precisará disso mais tarde.

>

10. Em seguida, você precisará fazer uma consulta POST ao 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/subscrib_apps?access_token=PAGE_ACCESS_TOKEN”

Você deve receber uma resposta de ” sucesso ” no terminal.

Mais configuração do Heroku

Sim, ainda não terminamos. Nem perto.

1. Acesse o site Heroku e faça login com seu ID de email.

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 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 criar um bot que simplesmente ecoa as mensagens que recebe. Como se constata, essa tarefa simples requer um pouco considerável de código para funcionar.

1. Codificando o Ouvinte da Mensagem

Antes que o bot possa repetir a mensagem, ele precisa poder ouvir as mensagens. Vamos fazer isso primeiro.

No arquivo index.js, adicione o seguinte código:

[js]

app.post (‘/ webhook’, função (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i var event = events [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 verificar se há texto na mensagem. Se ele encontrar texto na mensagem recebida, chamará a função sendMessage (mostrada mais tarde), passando a ID do remetente e o texto a ser devolvido. É 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á “Olá”.

• event.sender.id é o ID da pessoa que enviou a mensagem para o 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]

função sendMessage (destinatárioId, mensagem) {
request ({
url: ‘https://graph.facebook.com/v2.6/me/messages’,
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
método: ‘POST’ ,
json: {
destinatário: {id: destinatárioId},
mensagem: mensagem,
}
}, função (erro, resposta, corpo) {
se (erro) {
console.log (‘Erro ao enviar mensagem:’, erro);
} senão se (response.body.error) {
console.log (‘Erro:’, response.body.error);
}
});
};

[/ js]

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

• destinatário

• mensagem

O destinatário é 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. Enviando as alterações para o Heroku

Se você completou as etapas acima, seu bot deve poder repetir o texto recebido. Mas primeiro, você precisa fazer as alterações no 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 cd testbot

3. Execute as seguintes etapas:

• git add.

• Nota:  Há um “.” no final de “git add”

• git commit -m “Primeiro commit”

• git push heroku master

4. Agora, envie uma mensagem para sua página, e o bot fará o eco da mensagem de volta para você.

>

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

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

Para conseguir isso, precisamos adicionar outra função. Estou nomeando “respostas condicionais”, mas você pode escolher o nome que preferir.

1. Codificando a função condicionalResponses

[js]

função conditionalResponses (destinatárioId, texto) {
text = text || “”;

var what = text.match (/ o que / gi); // verifica se a string de texto contém a palavra “what”; ignorar maiúsculas e minúsculas
var beebom = text.match (/ beebom / gi); // verifica se a string de texto contém a palavra “beebom”; ignorar maiúsculas e minúsculas
var who = text.match (/ who / gi); // verifica se a string de texto contém a palavra “who”; ignorar maiúsculas e minúsculas
var you = text.match (/ you / gi); // verifica se a string de texto contém a palavra “você”; ignorar caso

// se o texto contiver “what” e “beebom”, faça o seguinte:

if (what! = null &&; beebom! = null) {
message = {
text: “O Beebom é um site que oferece recursos técnicos. Bem-vindo.”
}
sendMessage (destinatárioId, mensagem);
return true;
}

// se o texto contiver “quem” e “você”, faça o seguinte:
if (who! = null && you! = null) {
message = {
text: “Me pediram para não discutir minha identidade online.”
}
sendMessage (destinatárioId, mensagem);
return true;
}

// 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 sequência recebida com palavras específicas. A melhor parte sobre o uso de “text.match ()” é que ele usa expressões regulares (geralmente chamadas regex, leia maisaqui.). Isso é bom para nós, pois isso significa que, mesmo que 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 Ouvinte da Mensagem

Também precisamos editar o Ouvinte de mensagem que codificamos, para garantir que ele tente combinar o texto recebido com a função “condicionalResponses”.

[js]

app.post (‘/ webhook’, função (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i var event = events [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)) {

// caso contrário, faça eco da mensagem recebida de volta ao 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 tenta primeiro responder com respostas condicionais e, se não houver uma condição válida para a mensagem recebida, ela simplesmente ecoará a mensagem de volta ao usuário.

3. Enviando as alterações para o Heroku

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

1. Inicie o terminal.

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

3. Execute as seguintes etapas:

• git add.

• Nota:  Há um “.” no final de “git add”

• git commit -m “Adicionando recursos condicionais”

• git push heroku master

4. Agora, envie uma mensagem para sua página, e o bot fará o eco da 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 alterações no código para tornar nosso bot um software mais ” funcional “. Vamos reformular muitas funções e adicionar mais algumas, então fique animado.

1. Editando o Ouvinte da Mensagem

Nosso ouvinte de mensagens, neste estágio, funciona perfeitamente bem. No entanto, não é muito bem formatado e, se continuarmos aumentando as instruções if aninhadas para adicionar ” verificações de condição ” extras , rapidamente se tornará feio de se ver, difícil de entender e mais lento na execução. Agora não queremos isso, queremos? Vamos fazer algumas mudanças.

Nota:  Há uma linha de código no ouvinte 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 êxito. Segundo a documentação do Facebook, o Facebook aguarda no máximo 20 segundos para receber um status 200, antes de decidir que a mensagem não foi enviada e interromper 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 é correspondida e executada.

[js]

app.post (‘/ webhook’, função (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i var event = events [i];
if (event.message && event.message.text) {

// verifica primeiro 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 isso newResponse: p; verifique isso a seguir
se (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// else, apenas retorne a mensagem original
else {
// substitua echo pela lista de comandos válida
sendMessage (event.sender.id, {text: “Echo:” + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ js]

2. Codificando a Função newResponse

Nosso ouvinte de mensagens agora verifica o texto da mensagem em relação a um conjunto de condições em  “newResponse” , 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 da Beebom, pesquisar o termo de consulta no site e apresentar o link ao usuário. Mais uma vez, usaremos expressões regulares para corresponder o texto a palavras-chave específicas.

[js]

função newResponse (destinatárioId, texto) {
text = text || “”;
var Suggest = text.match (/ Suggest / 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á solicitando sugestões de artigos
if (sugerir! = null && article! = null) {
var query = “”;
// se as sugestões do artigo forem consultadas, verifique o tópico que o usuário está procurando
if (android! = null) {
query = “Android”;
} else if (mac! = null) {
query = “Mac”;
} else if (iphone! = null) {
query = “iPhone”;
} else if (navegador! = nulo) {
query = “Navegador”;
} else if (vpn! = null) {
query = “VPN”;
}
sendButtonMessage (destinatárioId, consulta);
retornar verdadeiro
}
retornar 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 usa dois parâmetros, um ID de 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 sobre o qual o usuário deseja sugestões de artigos.

[js]

função sendButtonMessage (destinatárioId, consulta) {
var messageData = {
destinatário: {
id: destinatárioId
},
mensagem: {
anexo: {
tipo: “modelo”,
carga útil: {
modelo_tipo: “botão”,
texto: “Isto é o que encontrei para “+ consulta,
botões: [{
type:” web_url “,
url:” http://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 é, de várias maneiras, semelhante à função  “sendMessage”  que codificamos anteriormente, mas é mais genérica na maneira como recebe os dados da mensagem, o que nos convém, porque nossos dados são alterados 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 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]

função callSendAPI (messageData) {
request ({
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 (! error && response.statusCode == 200) {
var containerId = body.recipient_id;
var messageId = body.message_id;

console.log (“Mensagem genérica enviada com êxito com o ID% s para o destinatário% s”,
messageId, destinatárioId);
} else {
console.error (“Não foi possível enviar a mensagem.”);
console.error (resposta);
console.error (erro);
}
});
}

[/ js]

5.  Enviando as alterações para o Heroku

Estamos na etapa final para tornar nosso bot atualizado ao vivo. Nós apenas precisamos enviar todas as alterações de código para o Heroku. O processo é o mesmo de antes e está descrito abaixo:

1. Inicie o terminal.

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

3. Faça o seguinte:

• git add.

• Nota:  Há um  “.” no final desse comando.

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

• git push heroku master

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

>

>

VEJA TAMBÉM: 16 dicas e truques do Facebook Messenger que você deve conhecer

Dig Deeper

Agora que você sabe como começar a desenvolver os bots do Facebook, siga as instruções em Documentação do Facebook sobre como desenvolver bots do Facebook messenger. Embora a documentação não seja boa para iniciantes, você não é mais 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 comoWit.ai e Api.ai para codificar seu bot e depois integrá-lo ao 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 aprendizado acentuada para iniciantes.

Você já desenvolveu um bot de mensagens do Facebook? Se você possui, como 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, desenvolva seu próprio bot messenger do Facebook, torne-o mais inteligente e melhor e informe-nos sobre sua experiência nos comentários abaixo.