Cómo crear un bot de Facebook Messenger (guía)

La función de "bots de mensajería" de Facebook no es nada nuevo y ya existen muchos bots increíbles. Sin embargo, los recursos sobre exactamente cómo construir su propio bot son escasos y carecen de explicación para las personas que son nuevas en Facebook Graph API. Los bots de Messenger ahora también requieren que use una URL de devolución de llamada de webhook segura con SSL (más sobre eso más adelante), y la configuración de SSL no es para todos, y también cuesta dinero.

En este artículo, lo guiaré a través de todo el proceso de creación de un simple bot de mensajería de Facebook, porque la propia documentación de Facebook está bastante mal explicada. Configuraremos una aplicación en la nube que use el protocolo https, codificaremos el bot en Node.js (que es un lenguaje javascript del lado del servidor), usaremos git para enviar el código a la aplicación en la nube y lo probaremos en Facebook Messenger..

Bot de configuración

Necesitará Node instalado en su computadora portátil. Si no es así, vaya al sitio web de Node para descargarlo e instalarlo..

Una vez que haya terminado, puede continuar con la configuración del bot. Siga los pasos a continuación:

1. Ejecutar Terminal.

2. Necesita un directorio separado para guardar su código.

• Crea un nuevo directorio
  robot de prueba mkdir

• Cambie su directorio de trabajo al directorio que acaba de crear
  cd testbot

3. A continuación, inicialice la aplicación Node.
npm init

• Se le pedirá que ingrese información sobre su aplicación, solo use los valores predeterminados presionando Enter para todo.

4. Instalar paquetes
npm install express body-parser request --save

• El comando se ejecutará y dará algunas advertencias; ingnóralos.

5. En Finder, abra el directorio "testbot"Que creó y busque el archivo llamado"package.json“; abre esto en un editor como Sublime Text.

6. En este archivo, necesitamos agregar una línea
"inicio": "nodo index.js"

• No olvide agregar un "," al final de la línea anterior.

7. A continuación, cree un nuevo archivo en Sublime Text e introduzca el siguiente código en su interior:

[js]

var express = require ('express');
var bodyParser = require ('body-parser');
var request = require ('solicitud');
var app = express ();

app.use (bodyParser.urlencoded (extendido: falso));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', function (req, res)
res.send ('Este es TestBot Server');
);
app.get ('/ webhook', function (req, res)
if (req.query ['hub.verify_token'] === 'testbot_verify_token')
res.send (req.query ['hub.challenge']);
demás
res.send ('Token de verificación no válido');

);

[/ js]

Guarde este archivo como index.js

Nota: En la línea 13, el valor de 'hub.verify_token' se establece como 'testbot_verify_token ', recuerde este valor, ya que se utilizará al crear el webhook en Facebook.

Crear repositorio de Git

Ahora que hemos configurado el manejo de devolución de llamada de nuestro bot, debemos enviar el código a Heroku. Para eso, necesitamos crear un repositorio git en nuestro directorio.

Nota: “Git” es un sistema de control de versiones para archivos y código de software. Puedes leer más sobre esto en Wikipedia..

Crear un repositorio de git es fácil y solo requiere un par de comandos de Terminal.

Nota: Asegúrese de estar dentro del "testbot”Directorio en la Terminal. Puede hacer esto escribiendo el comando pwd en la terminal.

Siga estos pasos para crear un repositorio de git:

1. git init

2. git agregar .

3. git commit -m "Registrar webhook de Facebook"

Configurar Heroku

Antes incluso de entrar en las páginas de desarrolladores de Facebook, necesitamos una URL de devolución de llamada con la que Facebook pueda hablar. Esta URL debe utilizar la protocolo https, lo que significa que necesitamos instalar un certificado SSL en nuestro sitio web; pero esta es una guía para principiantes sobre los bots de mensajería de Facebook, así que no compliquemos las cosas. Usaremos Heroku para implementar nuestro código. Heroku le brinda URL https para sus aplicaciones y tiene un plan gratuito que cumple con nuestras demandas (muy básicas).

Vaya al sitio web de Heroku y regístrese.

Nota: En el campo que dice "Elija su idioma de desarrollo principal", use "Yo uso otro idioma".

Una vez que haya terminado con eso, instale el cinturón de herramientas Heroku para su sistema operativo (Mac, para mí) e instálelo. Esto le dará acceso a Heroku en su Terminal (o símbolo del sistema, en Windows).

A continuación, crearemos una aplicación en Heroku, que contendrá todo el código de nuestro bot. Siga los pasos a continuación:

1. Ejecutar Terminal

2. Tipo heroku iniciar sesión

• Se le pedirá que ingrese su correo electrónico y contraseña.

• Escriba su correo electrónico, presione Enter; luego, escriba su contraseña, presione Enter.

• Iniciarás sesión en heroku

3. Tipo heroku crear

• Esto creará una aplicación en Heroku y le proporcionará un hipervínculo. Tenga en cuenta que el enlace utiliza el protocolo https. Fácil, correcto?

4. Ahora puede enviar el código de su aplicación a Heroku
git push heroku master

5. Una vez hecho esto, su aplicación está básicamente activa y puede visitar el enlace en su navegador para comprobar que todo funciona correctamente. Debería abrir una página web que diga "Este es TestBot Server".

Configuración de Facebook

¡Es hora de conectar nuestro bot a Facebook! Deberá crear una nueva página de Facebook o utilizar una existente que sea de su propiedad. Te mostraré cómo proceder creando una nueva página de Facebook..

1. Vaya a Facebook y cree una página nueva..

• Puede crear una página en la categoría que desee. Estoy optando por Empresa / Organización, sin ningún motivo en particular.

2. Los siguientes pasos que muestra Facebook son opcionales y se pueden omitir..

3. A continuación, diríjase al sitio web de desarrolladores de Facebook..

• En la esquina superior derecha, coloca el mouse sobre "Mis aplicaciones”Y luego haga clic en“Agregar una nueva aplicación”En el menú desplegable.

• Haga clic en "configuración básica"Cuando Facebook te pide que elijas una plataforma.

4. Complete los detalles del nombre de su aplicación y la dirección de correo electrónico de contacto..

• Seleccione "Aplicaciones para páginas"En la categoría.

• Haga clic en "Crear ID de aplicación".

5. Se le dirigirá al panel de control de su aplicación. En la barra lateral, navegue hasta "+Agregar productos"Y seleccione"Mensajero"Haciendo clic en el"Empezar" botón.

6. Seleccione "Configurar webhooks".

7. Complete los campos obligatorios, reemplace la "URL de devolución de llamada" con la URL de la aplicación Heroku, Verifique el token con el token utilizado en el archivo index.js y seleccione los siguientes campos de suscripción:

• message_deliveries

• mensajes

• message_optins

• messaging_postbacks

Nota: Asegúrese de agregar "/ webhook"A la URL de devolución de llamada para que index.js ejecute la función requerida cuando Facebook intente hacer ping a la URL, pueda verificar el" Token de verificación ".

8. Haga clic en "Verificar y guardar".

9. En el "Generación de tokens", Haga clic en"Seleccionar una pagina"Y seleccione la página que creó anteriormente.

Esto generará un "Token de acceso a la página“, Guárdalo en algún lugar; Lo necesitarás más tarde.

10. A continuación, deberá realizar una consulta POST a su aplicación, utilizando el token de acceso a la página generado en el último paso. Esto se puede hacer fácilmente en la Terminal. Simplemente ejecute el siguiente comando, reemplazando PAGE_ACCESS_TOKEN con el token de acceso a la página que generó.

curl -X POST "https://graph.facebook.com/v2.6/me/subscriptions_apps?access_token=PAGE_ACCESS_TOKEN"

Debería recibir un "éxito"Respuesta en la Terminal.

Más configuración de Heroku

Sí, todavía no hemos terminado. No casi.

1. Vaya al sitio web de Heroku e inicie sesión con su ID de correo electrónico.

2. Busque su aplicación en el "panel de control" y haga clic en ella..

3. Vaya a la pestaña Configuración..

4. Haga clic en "Revelar variables de configuración"

5. Agregue PAGE_ACCESS_TOKEN como "config var"Y haga clic en"Agregar".

Codificación del bot real

Ahora que hemos terminado con el trabajo pesado, podemos centrarnos en lo que realmente importa: hacer que el bot responda a los mensajes. Para empezar, solo diseñaremos un bot que simplemente se hace eco de los mensajes que recibe. Resulta que esta sencilla tarea requiere una cantidad considerable de código para funcionar..

1. Codificación del oyente de mensajes

Antes de que el bot pueda repetir el mensaje, debe poder escuchar los mensajes. Hagamos eso primero.

En el archivo index.js, agregue el siguiente código:

[js]

app.post ('/ webhook', function (req, res)
var eventos = 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]

Lo que hace esta función es verificar los mensajes recibidos y luego verifica si hay texto en el mensaje. Si encuentra texto en el mensaje recibido, llama a la función sendMessage (que se muestra más adelante), pasando la identificación del remitente y el texto para devolver. Es importante comprender los siguientes valores y lo que significan:

• event.message.text es el texto recibido en el mensaje. Por ejemplo, si alguien envía el mensaje "Hola" a nuestro bot, el valor de event.message.text será "Hola"..

• event.sender.id es la identificación de la persona que envió el mensaje al bot. Esto es necesario para que el bot sepa a quién dirigir la respuesta..

2. Codificación de la función sendMessage

Codifiquemos la función "sendMessage", ahora.

[js]

función sendMessage (destinatarioId, mensaje)
pedido(
url: 'https://graph.facebook.com/v2.6/me/messages',
qs: access_token: process.env.PAGE_ACCESS_TOKEN,
método: 'POST',
json:
destinatario: id: destinatarioId,
mensaje: mensaje,

, función (error, respuesta, cuerpo)
if (error)
console.log ('Error al enviar el mensaje:', error);
más si (respuesta.cuerpo.error)
console.log ('Error:', response.body.error);

);
;

[/ js]

La función "sendMessage" toma dos parámetros:

• destinatarioId

• mensaje

Se requiere el Id. Del destinatario para que el mensaje pueda dirigirse al usuario correcto..

El mensaje es el texto real que se enviará en la respuesta..

3. Impulsando los cambios a Heroku

Si ha completado los pasos anteriores, su bot debería poder repetir el texto recibido. Pero primero, debe impulsar los cambios en la aplicación alojada en Heroku. Para hacer esto, siga los pasos que se indican a continuación:

1. Ejecutar Terminal.

2. Cambie el directorio a su directorio de testbot
cd testbot

3. Realice los siguientes pasos:

• git agregar .

• Nota: Hay un "." al final de "git add"

• git commit -m "Primera confirmación"

• git push heroku master

4. Ahora envía un mensaje a tu página y el bot te devolverá el mensaje..

Respuestas condicionales, también conocidas como hacer que el bot sea más inteligente

Podemos usar la coincidencia de texto para permitir que nuestro bot de mensajería de Facebook responda de acuerdo con ciertas palabras clave especiales..

Para lograr esto, necesitamos agregar otra función. Lo estoy nombrando "conditionalResponses", pero puedes elegir el nombre que prefieras.

1. Codificación de la función conditionalResponses

[js]

function conditionalResponses (destinatarioId, texto)
texto = texto || "";

var qué = text.match (/ qué / gi); // verifica si la cadena de texto contiene la palabra "qué"; ignorar caso
var beebom = text.match (/ beebom / gi); // verifica si la cadena de texto contiene la palabra "beebom"; ignorar caso
var quién = text.match (/ quién / gi); // verifica si la cadena de texto contiene la palabra "quién"; ignorar caso
var you = text.match (/ you / gi); // comprueba si la cadena de texto contiene la palabra "tú"; ignorar caso

// si el texto contiene tanto "qué" como "beebom", haz esto:

si (qué! = nulo &&; beebom! = nulo)
mensaje =
texto: "Beebom es un sitio web que ofrece recursos tecnológicos. Bienvenido".

sendMessage (destinatarioId, mensaje);
devuelve verdadero;

// si el texto contiene tanto "quién" como "tú", haz esto:
if (who! = null && you! = null)
mensaje =
texto: "Se me ha pedido que no hable de mi identidad en línea".

sendMessage (destinatarioId, mensaje);
devuelve verdadero;

// si nada coincide, devuelve falso para continuar la ejecución de la función interna.
falso retorno;
;

[/ js]

En las líneas 4 a 7, hemos definido variables dependiendo de hacer coincidir la cadena recibida con palabras particulares. La mejor parte de usar "text.match ()" es que usa expresiones regulares (generalmente llamadas regex, lea más aquí). Es bueno para nosotros, porque esto significa que mientras una parte de una palabra en el texto recibido coincida con cualquiera de las palabras que mencionamos en text.match (), la variable no será nula. Esto significa que si el mensaje recibido fue "¿Qué es Beebom?", "Var qué" y "var beebom" no serán nulos, porque la palabra "Qué" contiene la palabra "qué". Por lo tanto, nos salvamos de crear declaraciones adicionales para cada variación en la que alguien pueda decir "¿Qué?".

2. Editar el oyente de mensajes

También necesitamos editar el oyente de mensajes que codificamos, para asegurarnos de que intente hacer coincidir el texto recibido con la función "conditionalResponses"..

[js]

app.post ('/ webhook', function (req, res)
var eventos = req.body.entry [0] .messaging;
para (i = 0; i < events.length; i++)
var event = eventos [i];
if (event.message && event.message.text)

// primero intente verificar si el mensaje recibido califica para una respuesta condicional.
if (! conditionalResponses (event.sender.id, event.message.text))

// si no es así, simplemente repita el mensaje recibido al remitente.
sendMessage (event.sender.id, text: "Echo:" + event.message.text);



res.sendStatus (200);
);

[/ js]

Los cambios en el oyente pueden no parecer muy drásticos, pero sus efectos seguramente lo son. Ahora, el oyente primero intenta responder con respuestas condicionales, y si no hay una condición válida para el mensaje recibido, simplemente le devuelve el mensaje al usuario..

3. Impulsando los cambios a Heroku

Antes de que pueda probar las nuevas funciones, deberá enviar el código actualizado a la aplicación alojada en Heroku. Siga los pasos a continuación para hacer esto:

1. Ejecutar Terminal.

2. Cambie el directorio a su directorio de testbot
cd testbot

3. Realice los siguientes pasos:

• git agregar .

• Nota: Hay un "." al final de "git add"

• git commit -m "Agregar capacidades condicionales"

• git push heroku master

4. Ahora envía un mensaje a tu página y el bot te devolverá el mensaje..

Aún más funcionalidad

Nuestro bot ahora responde a un pequeño conjunto de comandos con respuestas agradables y bien estructuradas. Pero todavía no es muy útil. Hagamos algunos cambios más en el código para que nuestro bot sea más "funcional”Pieza de software. Bien ser renovando muchas funciones, y agregando un par más, así que anímate.

1. Editar el oyente de mensajes

Nuestro oyente de mensajes, en esta etapa, funciona bien. Sin embargo, no está muy bien formateado y si tuviéramos que seguir aumentando las instrucciones if anidadas para agregar más "controles de condición“, Rápidamente se volverá feo de ver, difícil de entender y más lento en la ejecución. No queremos eso ahora, ¿verdad? Hagamos algunos cambios.

Nota: Hay una línea de código en el oyente de mensajes que dice "Res.sendStatus (200)", esta línea envía un código de estado 200 a Facebook, indicándole que la función se ejecutó correctamente. Según la documentación de Facebook, Facebook espera un máximo de 20 segundos para recibir un estado de 200, antes de decidir que el mensaje no se envió y detiene la ejecución del código..

Nuestro nuevo oyente de mensajes se ve así. Usamos el "res.sendStatus (200)"Comando para detener la ejecución de la función tan pronto como se cumpla y se ejecute una condición.

[js]

app.post ('/ webhook', function (req, res)
var eventos = req.body.entry [0] .messaging;
para (i = 0; i < events.length; i++)
var event = eventos [i];
if (event.message && event.message.text)

// primero verifica el texto del mensaje con las condiciones introResponse
if (introResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// a falta de un nombre mejor, llamé a esto newResponse: p; mira esto a continuación
else if (newResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// si no, simplemente repita el mensaje original
demás
// reemplaza echo con una lista de comandos válida
sendMessage (event.sender.id, text: "Echo:" + event.message.text);



res.sendStatus (200);
);

[/ js]

2. Codificación de la función newResponse

Nuestro oyente de mensajes ahora verifica el texto del mensaje con un conjunto de condiciones en "NewResponse" también, pero primero, necesitamos codificar la función newResponse. Usaremos esta función para verificar si el usuario solicitó sugerencias de artículos del sitio web de Beebom, buscar la consulta término en el sitio web, y presentar el enlace al usuario. Una vez más, usaremos expresiones regulares para hacer coincidir el texto con palabras clave específicas..

[js]

function newResponse (destinatarioId, texto)
texto = texto || "";
var sugerencia = texto.match (/ sugerencia / gi);
var random = text.match (/ random / gi);
var artículo = texto.match (/ artículo / 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);

// comprobar si el usuario está solicitando sugerencias de artículos
si (sugerir! = nulo && artículo! = nulo)
var query = "";
// si se consultan sugerencias de artículos, verifique el tema que está buscando el usuario
if (android! = null)
query = "Android";
más si (mac! = null)
query = "Mac";
else if (iphone! = null)
query = "iPhone";
else if (navegador! = nulo)
query = "Navegador";
más si (vpn! = null)
query = "VPN";

sendButtonMessage (destinatarioId, consulta);
volver verdadero

falso retorno;
;

[/ js]

Estamos usando otra función personalizada llamada "SendButtonMessage" para enviar el mensaje en caso de que el usuario solicite sugerencias de artículos. Crearemos esto a continuación.

3. Codificación de la función sendButtonMessage

La función sendButtonMessage toma dos parámetros, un ID de destinatario y un consulta. La ID del destinatario se utiliza para identificar al usuario a quien se debe enviar el mensaje y la consulta se utiliza para identificar el tema sobre el que el usuario desea sugerencias de artículos..

[js]

function sendButtonMessage (destinatarioId, consulta)
var messageData =
recipiente:
id: destinatarioId
,
mensaje:
adjunto archivo:
tipo: "plantilla",
payload:
template_type: "botón",
texto: "Esto es lo que encontré para" + consulta,
botones:[
tipo: "web_url",
url: "http://www.beebom.com/?s="+query,
título: "Beebom:" + consulta
]



;

callSendAPI (messageData);

[/ js]

Una vez más, estamos usando una función personalizada; esta vez para enviar el mensaje final, con los enlaces del artículo, al usuario. La función es, en muchos sentidos, similar a la "enviar mensaje" función que codificamos anteriormente, pero es más genérica en la forma en que toma los datos del mensaje, lo que nos conviene, porque los datos de nuestro mensaje cambian con la consulta que realiza el usuario.

4. Codificación de la función callSendAPI

La "CallSendAPI" La función toma un solo parámetro, la "MessageData". Este parámetro contiene todos los datos del mensaje, formateados correctamente de acuerdo con las reglas de Facebook, para que el mensajero pueda mostrárselos correctamente al usuario..

[js]

function callSendAPI (messageData)
pedido(
uri: 'https://graph.facebook.com/v2.6/me/messages',
qs: access_token: process.env.PAGE_ACCESS_TOKEN,
método: 'POST',
json: messageData

, función (error, respuesta, cuerpo)
if (! error && response.statusCode == 200)
var receiverId = body.recipient_id;
var messageId = body.message_id;

console.log ("Mensaje genérico enviado con éxito con id% s al destinatario% s",
messageId, receiverId);
demás
console.error ("No se puede enviar el mensaje.");
console.error (respuesta);
console.error (error);

);

[/ js]

5. Impulsar los cambios a Heroku

Estamos en el último paso hacia la puesta en marcha de nuestro bot actualizado. Solo necesitamos enviar todos los cambios de código a Heroku. El proceso es el mismo que antes y se describe a continuación:

1. Ejecutar Terminal.

2. Cambie el directorio al testbot directorio.
cd testbot

3. Haga lo siguiente:

• git agregar .

• Nota: Hay un "." al final de ese comando.

• git commit -m "mejora de las comprobaciones de estado y el formato"

• git push heroku master

4. Ahora envíe un mensaje como “Sugerir un artículo sobre Android” o “Beebom, sugiéreme algún artículo sobre el tema Android”; y el bot enviará un mensaje con un formato agradable con un enlace que puede tocar para abrir los artículos relacionados con su consulta.

VEA TAMBIÉN: 16 consejos y trucos de Facebook Messenger que debe conocer

Excavar más hondo

Ahora que sabe cómo empezar a desarrollar bots de mensajería de Facebook, consulte la documentación de Facebook sobre cómo desarrollar bots de mensajería de Facebook. Si bien la documentación no es buena para principiantes, ya no eres un principiante. Debe consultar la documentación oficial e intentar descubrir cómo hacer que su bot sea aún más inteligente. Avance: ¡También puedes enviar mensajes con imágenes y botones! También es posible usar servicios como Wit.ai y Api.ai para codificar su bot y luego integrarlo con Facebook, pero en mis débiles intentos de usar esos servicios, Wit.ai no funciona muy bien y Api.ai tiene una curva de aprendizaje pronunciada para principiantes.

¿Ha desarrollado alguna vez un bot de mensajería de Facebook? Si es así, ¿cómo lo desarrollaste y qué puede hacer? ¿Usó servicios como Wit.ai y Api.ai para crear su bot? Si nunca ha probado codificar un bot, vaya y desarrolle su propio bot de mensajería de Facebook, hágalo más inteligente y mejor, y háganos saber sobre su experiencia en los comentarios a continuación.