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 cómo construir exactamente tu propio bot son escasos y carecen de explicación para las personas que son nuevas en la API de gráficos de Facebook. Los bots de Messenger ahora también requieren que use una URL de devolución de llamada de webhook segura SSL (más sobre esto 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 documentación propia 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 del lado del servidor, javascript), usaremos git para enviar el código a la aplicación en la nube y lo probaremos en Facebook Messenger.
Configurar Bot
Necesitará Node instalado en su computadora portátil. Si no lo hace, 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.
- Hacer un nuevo directorio
mkdir testbot
- 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 Intro para todo.
4. Instalar paquetes npm install express body-parser request --save
- El comando se ejecutará, y dará algunas advertencias; ingnóralos.
5. En el 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 "start": "node index.js"
- No se olvide de añadir un ", " al final de la línea anterior.
7. A continuación, cree un nuevo archivo en Sublime Text y coloque el siguiente código dentro de él:
[js]
var express = require ('express');
var bodyParser = require ('body-parser');
var request = require ('request');
var app = express ();
app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', función (req, res) {
res.send ('Esto es TestBot Server');
});
app.get ('/ webhook', function (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query ['hub.challenge']);
} else {
res.send ('Token de verificación invá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 como se usará al crear el webhook en Facebook.
Crear un repositorio Git
Ahora que hemos configurado el manejo de la 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 directorio " testbot " en la Terminal. Puede hacer esto escribiendo el comando pwd en la Terminal.
Siga estos pasos para crear un repositorio git:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Configurar Heroku
Antes de que vayamos a 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 el protocolo https, lo que significa que debemos instalar un certificado SSL en nuestro sitio web; pero, esta es una guía para principiantes de los bots de mensajería de Facebook, así que no complicemos las cosas. Usaremos Heroku para implementar nuestro código. Heroku le brinda URL de https para sus aplicaciones y tiene un plan gratuito que cumple con nuestras demandas (muy básicas).
Ve al sitio web de Heroku y regístrate.
Nota: En el campo que dice "Elija su idioma de desarrollo primario", 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á el código completo de nuestro bot. Siga los pasos a continuación:
1. Terminal de lanzamiento
2. Escribe heroku login
- Se le pedirá que ingrese su correo electrónico y contraseña.
- Escriba su correo electrónico, pulse Enter; a continuación, escriba su contraseña, pulse Intro.
- Se conectará a heroku
3. Escribe heroku create
- Esto creará una aplicación en Heroku y le proporcionará un hipervínculo. Tenga en cuenta que el enlace está utilizando el protocolo https. Fácil, ¿verdad?
4. Ahora puedes empujar el código de tu aplicación a Heroku git push heroku master
5. Una vez hecho esto, su aplicación está básicamente en vivo, y puede visitar el enlace en su navegador para verificar que todo funciona bien. Debería abrir una página web que diga " Este es el servidor TestBot ".
Configuración de Facebook
¡Es hora de conectar nuestro bot a Facebook! Deberá crear una nueva página de Facebook o usar una que ya tenga. Te mostraré cómo proceder creando una nueva página de Facebook.
1. Ir a Facebook y crear una nueva página.
- Puede crear una página en la categoría que desee. Estoy optando por la Empresa / Organización, sin ninguna razón en particular.
2. Los siguientes pasos que muestra Facebook son opcionales y se pueden omitir.
3. A continuación, dirígete al sitio web de los desarrolladores de Facebook.
- En la parte superior derecha, mueva 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 le pide que elija una plataforma.
4. Complete los detalles de su nombre de aplicación y la dirección de correo electrónico de contacto.
- Seleccione " Aplicaciones para las páginas " en la categoría.
- Haga clic en " Crear ID de aplicación ".
5. Será llevado al panel de control de su aplicación. En la barra lateral, navega a " + Agregar productos " y selecciona " Messenger " haciendo clic en el botón " Comenzar ".
6. Seleccione " Configurar webhooks ".
7. Rellene los campos requeridos, reemplazando la "URL de devolución de llamada" con la URL de la aplicación Heroku, verifique el token con el token usado en el archivo index.js y seleccione los siguientes campos de suscripción:
- servicio de entrega de mensajes
- mensajes
- message_optins
- messaging_postbacks
Nota: asegúrese de adjuntar " / webhook " a la URL de devolución de llamada para que index.js ejecute la función requerida cuando Facebook intenta hacer ping a la URL, puede verificar el "Verificador de verificación".
8. Haga clic en " Verificar y guardar ".
9. En la sección " Generación de token ", haga clic en " Seleccionar una página " y seleccione la página que creó anteriormente.
Esto generará un " token de acceso a la página ", guárdelo en algún lugar; Lo necesitarás más tarde.
10. A continuación, tendrá que 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 "//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"
Debería recibir una respuesta de " éxito " 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. Localice su aplicación en el "panel" y haga clic en ella.
3. Navegue a la pestaña Configuración.
4. Haga clic en " Reveal Config Vars "
5. Agregue PAGE_ACCESS_TOKEN como " config var " y haga clic en " Add ".
Codificando el bot real
Ahora que hemos terminado con el trabajo duro, podemos centrarnos en lo que realmente importa: hacer que el bot responda a los mensajes. Para comenzar, solo diseñaremos un bot que simplemente haga eco de los mensajes que recibe. Como resultado, esta simple tarea requiere una cantidad considerable de código para funcionar.
1. Codificando el Oyente de Mensajes
Antes de que el bot pueda devolver el mensaje, debe ser capaz de escuchar los mensajes. Vamos a hacer eso primero.
En el archivo index.js, agregue el siguiente código:
[js]
app.post ('/ webhook', function (req, res) {
eventos var = req.body.entry [0] .messaging;
para (i = 0; i <events.length; i ++) {
evento var = 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 verificar 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 entender 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 el ID de la persona que envió el mensaje al bot. Esto es necesario para que el robot sepa a quién dirigir la respuesta.
2. Codificación de la función sendMessage
Permite codificar la función "enviar mensaje", ahora.
[js]
función enviar mensaje (destinatario, mensaje) {
solicitud({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
método: 'POST',
json: {
destinatario: {id: recipientId},
mensaje: mensaje,
}
}, función (error, respuesta, cuerpo) {
si (error) {
console.log ('Error al enviar el mensaje:', error);
} else if (response.body.error) {
console.log ('Error:', response.body.error);
}
});
};
[/ js]
La función "sendMessage" toma dos parámetros:
- destinatario
- mensaje
Se requiere el ID de destinatario para que el mensaje pueda dirigirse al usuario correcto.
El mensaje es el texto real que se enviará en la respuesta.
3. Empujando los cambios a Heroku
Si ha completado los pasos anteriores, su robot debería poder devolver el texto recibido. Pero primero, debe enviar los cambios a la aplicación alojada en Heroku. Para ello, siga los pasos que se indican a continuación:
1. Ejecutar Terminal.
2. Cambie el directorio a su directorio testbot
cd testbot
3. Haz los siguientes pasos:
- git añadir.
- Nota: Hay un "." Al final de "git add"
- git commit -m "First commit"
- git push heroku master
4. Ahora envíe un mensaje a su página, y el robot le devolverá el mensaje.
Respuestas condicionales también conocidas como Hacer el Bot más inteligente
Podemos usar la concordancia de texto para permitir que nuestro bot de Facebook Messenger responda de acuerdo con ciertas palabras clave especiales.
Para lograr esto, necesitamos agregar otra función. Lo denomino "respuestas condicionales", pero puede elegir el nombre que prefiera.
1. Codificación de la función de respuestas condicionales
[js]
Función conditionalResponses (ID de destinatario, texto) {
texto = texto || "";
var what = text.match (/ what / gi); // verifica si la cadena de texto contiene la palabra "que"; ignorar caso
varGadget-Info.com = text.match (/ beebom / gi); // verifica si la cadena de texto contiene la palabra "beebom"; ignorar caso
var who = text.match (/ who / gi); // comprueba si la cadena de texto contiene la palabra "who"; ignorar caso
var you = text.match (/ you / gi); // comprueba si la cadena de texto contiene la palabra "you"; ignorar caso
// si el texto contiene "what" y "beebom", haz esto:
if (what! = null &&; Gadget-Info.com! = null) {
mensaje = {
texto: "Beebom es un sitio web que ofrece recursos técnicos. Bienvenido".
}
enviar mensaje (destinatario, mensaje);
devuelve verdadero
}
// si el texto contiene "quién" y "tú", haz esto:
if (who! = null && you! = null) {
mensaje = {
texto: "Me han pedido que no discuta mi identidad en línea".
}
enviar mensaje (destinatario, 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 en función de hacer coincidir la cadena recibida con palabras particulares. La mejor parte sobre el uso de "text.match ()" es que usa expresiones regulares (generalmente llamadas expresiones regulares, lea más aquí). Es bueno para nosotros, porque esto significa que mientras una parte de la 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 era "¿Qué es Beebom?", "Var what" y "var beebom" no serán nulos, porque la palabra "What's" contiene la palabra "what". Así que nos salvamos de crear declaraciones adicionales para cada variación en la que alguien podría decir "Qué".
2. Editar la escucha de mensajes
También debemos editar el Oyente de Mensajes que codificamos, para asegurarnos de que intenta hacer coincidir el texto recibido con la función "Respuestas condicionales" también.
[js]
app.post ('/ webhook', function (req, res) {
eventos var = req.body.entry [0] .messaging;
para (i = 0; i <events.length; i ++) {
evento var = eventos [i];
if (event.message && event.message.text) {
// primero intenta verificar si el mensaje recibido califica para una respuesta condicional.
if (! conditionalResponses (event.sender.id, event.message.text)) {
// si no lo hace, simplemente devuelve 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 sí 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 devuelve el mensaje al usuario.
3. Empujando los cambios a Heroku
Antes de que pueda probar las nuevas funciones, deberá insertar el código actualizado en 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 testbot
cd testbot
3. Haz los siguientes pasos:
- git añadir.
- Nota: Hay un "." Al final de "git add"
- git commit -m "Agregar capacidades condicionales"
- git push heroku master
4. Ahora envíe un mensaje a su página, y el robot le devolverá el mensaje.
Aún más funcionalidad
Nuestro robot ahora responde a un pequeño conjunto de comandos en respuestas agradables y bien estructuradas. Pero todavía no es muy útil. Hagamos algunos cambios más en el código para hacer de nuestro bot un software más " funcional ". Estaremos renovando muchas funciones y agregando un par más, así que emocionate.
1. Editar el escucha de mensajes
Nuestro oyente de mensajes, en esta etapa, funciona bien. Sin embargo, no está muy bien formateado y si tuviéramos que seguir incrementando las declaraciones anidadas para agregar " comprobaciones de condición " adicionales, rápidamente se volverá feo, difícil de entender y más lento de ejecutar. No queremos eso, ahora, ¿verdad? Hagamos algunos cambios.
Nota: hay una línea de código en la escucha de mensajes que dice "res.sendStatus (200)", esta línea envía un código de estado 200 a Facebook, que le indica que la función se ejecutó correctamente. De acuerdo con la documentación de Facebook, Facebook espera un máximo de 20 segundos para recibir un estado de 200, antes de que decida que el mensaje no se envió y detiene la ejecución del código.
Nuestro nuevo oyente de mensajes se ve así. Usamos el comando " res.sendStatus (200) " para detener la ejecución de la función tan pronto como una condición coincide y se ejecuta.
[js]
app.post ('/ webhook', function (req, res) {
eventos var = req.body.entry [0] .messaging;
para (i = 0; i <events.length; i ++) {
evento var = eventos [i];
if (event.message && event.message.text) {
// Verifique el texto del mensaje contra las condiciones de introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// por falta de un nombre mejor, llamé a este nuevo Respuesta: p; mira esto siguiente
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// de lo contrario, solo devuelve el mensaje original
else {
// reemplazar eco con lista de comandos válida
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
2. Codificando la nueva función de respuesta
Nuestro oyente de mensajes ahora también verifica el texto del mensaje contra un conjunto de condiciones en "newResponse", pero primero, debemos codificar la función newResponse. Utilizaremos esta función para verificar si el usuario solicitó sugerencias de artículos en el sitio web Gadget-Info.com, buscar el término de consulta 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]
función newResponse (ID de destinatario, texto) {
texto = texto || "";
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);
// compruebe si el usuario está pidiendo sugerencias de artículos en absoluto
if (sugerir! = nulo && artículo! = null) {
var consulta = "";
// si se consultan sugerencias de artículos, verifique el tema que el usuario está buscando
if (android! = null) {
query = "Android";
} else if (mac! = null) {
query = "Mac";
} else if (iphone! = null) {
query = "iPhone";
} else if (browser! = null) {
query = "Browser";
} else if (vpn! = null) {
query = "VPN";
}
sendButtonMessage (destinatario, consulta);
volver verdadero
}
falso retorno;
};
[/ js]
Estamos utilizando otra función personalizada llamada "sendButtonMessage" para enviar el mensaje en caso de que el usuario solicite sugerencias de artículos. Vamos a crear 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 una consulta. La identificación del destinatario se usa para identificar al usuario a quien se debe enviar el mensaje y la consulta para identificar el tema sobre el cual el usuario desea sugerencias de artículos.
[js]
función sendButtonMessage (ID de destinatario, consulta) {
var messageData = {
recipiente: {
ID: destinatario
}
mensaje: {
adjunto archivo: {
tipo: "plantilla",
carga útil: {
tipo de plantilla: "botón",
texto: "Esto es lo que encontré para" + consulta,
botones:[{
escribe: "web_url",
url: "//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 función "sendMessage" que codificamos anteriormente, pero es más genérica en la forma en que toma los datos del mensaje, lo que nos conviene, porque nuestros datos del mensaje cambian con la consulta que el usuario realiza.
4. Codificando la función callSendAPI
La función "callSendAPI" toma un solo parámetro, el "messageData" . Este parámetro contiene todos los datos del mensaje, con el formato correcto de acuerdo con las reglas de Facebook, para que el mensajero pueda mostrarlos correctamente al usuario.
[js]
función callSendAPI (messageData) {
solicitud({
uri: '//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) {
si (! error && response.statusCode == 200) {
var receiverId = body.recipient_id;
var messageId = body.message_id;
console.log ("Mensaje genérico exitosamente enviado con id% s al destinatario% s",
messageId, destinatarioId);
} else {
console.error ("No se puede enviar el mensaje");
console.error (respuesta);
console.error (error);
}
});
}
[/ js]
5. Empujando los cambios a Heroku
Estamos en el paso final para hacer que nuestro bot actualizado esté en vivo. Solo tenemos que empujar 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 directorio testbot .
cd testbot
3. Haz lo siguiente:
- git añadir.
- Nota: Hay un "." Al final de ese comando.
- git commit -m "mejora de las verificaciones de condición y el formato"
- git push heroku master
4. Ahora envíe un mensaje como "Sugerir un artículo en Android" o "Beebom, sugiérame cualquier artículo sobre el tema de Android"; y el bot enviará un mensaje bien formateado con un enlace que puede tocar para abrir los artículos relacionados con su consulta.
Excavar más hondo
Ahora que ya sabe cómo comenzar a desarrollar los robots de mensajería de Facebook, consulte la documentación de Facebook sobre cómo desarrollar los robots de mensajería de Facebook. Si bien la documentación no es buena para los principiantes, ya no eres un principiante. Debes revisar la documentación oficial y tratar de descubrir cómo hacer que tu bot sea aún más inteligente. Teaser: ¡También puedes enviar mensajes con imágenes y botones! También es posible usar servicios como Wit.ai y Api.ai para codificar tu bot y luego integrarlo con Facebook, pero en mis débiles intentos de usar esos servicios, Wit.ai no funciona demasiado bien, y Api.ai Tiene una curva de aprendizaje aguda para principiantes.
¿Alguna vez has desarrollado un bot de mensajería de Facebook? Si es así, ¿cómo fue que lo desarrolló y qué puede hacer? ¿Usaste servicios como Wit.ai y Api.ai para crear tu bot? Si nunca ha intentado 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 su experiencia en los comentarios a continuación.
![El iPhone 5 parodia anuncio [Video]](https://gadget-info.com/img/tech-news/757/iphone-5-parody-advert.jpg)
