Compartir:
){kind=small}
Antiguo Director de Educación para Desarrolladores en Vonage. Con experiencia como desarrollador creativo, gestor de productos y organizador de jornadas de hacking, Martyn lleva trabajando como defensor de la tecnología desde 2012, tras haber pasado anteriormente por el mundo de la radiodifusión y las grandes discográficas. Educa y capacita a desarrolladores de todo el mundo.
Crear un bot para Facebook Messenger con Dialogflow (Tutorial de la API)
Tiempo de lectura: 17 minutos
Post actualizado por Amanda Cavallaro
En este tutorial, aprenderás a crear un bot de Facebook Messenger en tu página de Facebook utilizando Google Dialogflow y la Mensajes API de Vonage.
La aplicación de chatbot de este ejemplo aceptará mensajes entrantes a través del botón "Enviar mensaje" de una página de Facebook o a través de la aplicación Facebook Messenger. Ambas funcionarán perfectamente con la aplicación de chatbot.
Los mensajes se enviarán a través de nuestra aplicación a Google Dialogflow. Dialogflow utilizará entonces el procesamiento del lenguaje natural (NLP) para generar respuestas a las preguntas. Nuestro chatbot enviará estas respuestas a Facebook Messenger a través de la API.
En este ejemplo, utilizamos el agente agente Small Talk en Dialogflow. Utilizaremos el agente Small Talk para crear un bot de Facebook que responderá con respuestas alegres a las preguntas entrantes. El agente Small Talk es fácil de usar y es ideal para fines de desarrollo.
Hemos incluido instrucciones paso a paso para crear un bot de Facebook Messenger con una integración de Dialogflow utilizando la API de mensajes de Vonage. A lo largo del tutorial, encontrarás ejemplos de código que utilizarás para crear tu chatbot.
Puede descargar el código desde GitHub repositorio.
Para crear un bot de Dialogflow para Facebook Messenger, necesitarás los siguientes requisitos previos:
A Account de Facebook con una página de marca/empresa que puedas utilizar para las pruebas
A cuenta Google Dialogflow ES Account
Node.js v12 o superior
Una cuenta Cuenta API de Vonage
Para crear un bot utilizando Facebook Messenger, Dialogflow y Messages API, sigue estos pasos:
Crear una aplicación esqueleto para el bot de Facebook
Crear una aplicación de Messages en la API de Vonage
Conecta la API de Messages API de Vonage a Facebook
Enviar mensajes de Facebook a Dialogflow
Enviar respuestas de Dialogflow a Facebook
Prueba tu bot para Facebook Messenger
El primer paso para crear tu bot para Facebook Messenger es crear un esqueleto de aplicación.
Para recibir mensajes de Facebook, debes configurar dos webhooks que permitan a la aplicación recibir datos sobre mensajes y estados de entrega.
Empezaremos construyendo la aplicación básica con estas dos rutas.
En una nueva carpeta, inicializa una nueva aplicación Node.js ejecutando
A continuación, instale las dependencias del proyecto:
Además, utilizaremos el excelente Nodemon y DotEnv para mantener nuestra aplicación en funcionamiento mientras se realizan los cambios, para que no tengas que reiniciarla constantemente. Instálalos como devDependencies.
Por último, añade una pequeña estructura de carpetas creando routes y controllers carpetas en la raíz de tu directorio.
El código de GitHub incluye un archivo .env.sample cópielo y cámbiele el nombre a env. Deberás añadir los valores a las siguientes claves.
VONAGE_API_KEY: Puedes encontrarlo en la página de inicio de Vonage Dashboard cuando inicies sesión.
VONAGE_API_SECRET: Al iniciar sesión, se puede encontrar en el Panel de API de Vonage.
VONAGE_APPLICATION_ID: Se encuentra en el panel de Vonage dentro de la aplicación.
VONAGE_PRIVATE_KEY: Un archivo descargable desde Vonage Dashboard dentro de la aplicación con capacidad para mensajes.
FACEBOOK_PAGE_ID: Puede encontrar esta información accediendo a la configuración del perfil. Lo verás justo debajo de Resumen > Información de la página.
DIALOGFLOW_PROJECT_ID: Puede encontrar el ID del proyecto tanto en Google Cloud Platform como en la pestaña "General" de la configuración del proyecto Dialogflow en el panel de Dialogflow ES. Aquí hay una forma alternativa de encontrar el ID de la página proporcionada por sus preguntas frecuentes.
DIALOGFLOW_SESSION_ID: El identificador de sesión puede ser una cadena generada aleatoriamente o un identificador de usuario con hash. Su longitud debe ser de 36 caracteres como máximo.
DIALOGFLOW_LANGUAGE_CODE: Puede elegir varios idiomas; añada el que encuentre en su panel de Dialogflow.
GOOGLE_APPLICATION_CREDENTIALS: Puede crear una clave de cuenta de servicio aquí.
Koa es un framework para Node.js escrito por los creadores de Express. Es ligero y viene con sólo un conjunto básico de características fuera de la caja que lo hace perfecto para la creación de un pequeño servidor webhook como el que necesitamos aquí.
Cree el archivo principal para el servidor añadiendo un nuevo archivo en su directorio raíz llamado server.js.
En este nuevo archivo, añada el siguiente código:
const Koa = require('koa');
const router = require('koa-route');
const bodyParser = require('koa-bodyparser');
const routes = require('./routes');
const port = process.env.PORT || 3000;
// Set up a new Koa app and tell it to use
// the bodyParser middleware for inbound requests
const app = new Koa();
app.use(bodyParser());
// Routes
app.use(router.post('/webhooks/status', routes.status));
app.use(router.post('/webhooks/inbound', routes.inbound));
// Have the app listen on a default port or 3000
app.listen(port, () => console.log(`App is waiting on port ${port}`));
La constante routes se utiliza para almacenar y acceder a las rutas en la aplicación:
const routes = require('./routes');También necesitaremos un nuevo archivo en la carpeta routes llamado index.js. Créalo y añade el siguiente código:
const routes = {
inbound: async ctx => {
// Get the detail of who sent the message, and the message itself
const { from, message } = ctx.request.body;
console.log(from, message);
ctx.status = 200;
},
status: async ctx => {
const status = await ctx.request.body;
console.log(status);
ctx.status = 200;
}
};
module.exports = routes;
Una vez hecho esto, ejecute el siguiente comando para iniciar el servidor:
La aplicación se lanzará en el puerto 3000.
Utilice Ngrok para abrir este puerto al mundo y tome nota de las URL que produce para usted; debería parecerse a: https://f70f-82-10-85-156.ngrok.io
Aquí tienes una guía práctica para trabajar con Ngrok si es la primera vez que lo utilizas.
¿RESUMEN? Puede iniciar Ngrok (si está instalado) ejecutando este comando en una pestaña de terminal separada:
Luego, deberás crear una aplicación Messages en tu cuenta API de Vonage. Esta aplicación te permitirá conectar Facebook y Dialogflow y enviar mensajes entre ellos.
Configura una nueva aplicación de mensajes a través del Panel de Vonage.
Asegúrese de añadir /webhooks/inbound y /webhooks/status a la URL que obtengas de Ngrok cuando los pegues en el formulario (como en la imagen de abajo).
Messages Webhook
Recuerde también hacer clic en el botón Generar par de claves pública/privada enlace. Esto descargará un archivo llamado private.key.
Localice el archivo private.key en su sistema y muévalo a la carpeta raíz de su aplicación.
Finalice la configuración de la aplicación haciendo clic en el botón Crear aplicación y habrás terminado con la configuración.
Anote su ID de solicitud; lo necesitará en el siguiente paso.
Para que Facebook conozca tu aplicación de chatbot recién creada, debes conectar la aplicación de chatbot a Facebook...
En primer lugar, tendrá que crear un token web JSON para autorizar a Facebook a usar tu aplicación, y puedes hacerlo con la CLI de Vonage.
Abra su terminal y asegúrese de que se encuentra en la raíz de su carpeta de aplicaciones.
Uso de la CLI de Vonageejecuta el siguiente comando:
Asegúrese de sustituir VONAGE_APPLICATION_ID por el ID de la aplicación que acaba de crear.
Ejecutando este comando obtendrás una gran cadena de letras y Numbers - este es tu JSON Web Token. Cópialo todo.
A continuación, puede ver el JWT con:
Para conectar tu página de Facebook a tu aplicación, hemos creado una práctica página:
Complete los siguientes pasos:
Inicia sesión con tus credenciales de Facebook.
Selecciona la página de Facebook que deseas conectar a tu aplicación de Vonage.
Haga clic en Completar configuración.
Si todo va bien, aparecerá un cuadro de diálogo verde felicitándote por el éxito y comunicándote el ID de tu página de Facebook.
Anote esta identificación.
Puede Verify el contenido de su JWT utilizando jwt.io.
Nota: Si algún elemento de esto necesita ser aclarado, hay una guía para crear JWTs para su uso en este contexto en nuestro tutorial de Facebook Messenger._
Tu aplicación ya está conectada a tu página de Facebook.
Con tu servidor aún en funcionamiento y Ngrok exponiéndolo al mundo, dirígete a tu página de Facebook y localiza el botón de mensajería.
Haz clic en él para abrir la ventana de mensajería y empezar a enviar maravillosas misivas. También puedes empezar con Hola.
Cualquier mensaje que envíe se transmitirá al Webhook de entrada que haya especificado en la configuración de su aplicación. Esto se asigna directamente a la función inbound en el archivo routes.js archivo.
Actualmente, la función inbound está configurada para registrar los valores from y message de lo que se envía desde Facebook a la consola.
Deberías ver tus mensajes apareciendo en la consola.
Ahora que la aplicación está recibiendo mensajes entrantes, es el momento de enviarlos a Dialogflow.
En la carpeta controllers cree un nuevo archivo llamado dialogflow.js y añada el contenido del archivo JavaScript controladores/dialogflow.js.
La función exportada en el fichero consigue lo siguiente:
Se instancia una función asíncrona llamada
dialogflowHandlery acepta un parámetro llamadoquery.Se crea un objeto llamado
requestque contiene todas las claves que Dialogflow espera.El objeto de solicitud se envía a Dialogflow.
La respuesta del agente de Small Talk, contenida en
result[0].queryResult.fulfillmentTextse devuelve.
const dialogflowHandler = async query => {
// Create a text query request object
const request = {
session: sessionPath,
queryInput: {
text: {
text: query,
languageCode: languageCode
}
}
};
// Send the text query over to Dialogflow and await the result
// using .catch to throw any errors
const result = await sessionClient
.detectIntent(request)
.catch(err => console.error('ERROR:', err));
// Pick out the response text from the returned array of objects
const reply = await result[0].queryResult.fulfillmentText;
// Return the reply
return reply;
};
module.exports = dialogflowHandler;
Para utilizar esta función dialogflowHandler abra el archivo routes/index.js y requiérala en la parte superior:
const dialogflowHandler = require('../controllers/dialogflow');Modifique la función inbound para que tenga este aspecto:
inbound: async ctx => {
const { from, message } = await ctx.request.body;
console.log(from, message);
const dialogflowResponse = await dialogflowHandler(message.content.text);
console.log(dialogflowResponse);
ctx.status = 200;
};
Envía un nuevo mensaje (algo parecido a "¡Hola!") desde tu página de Facebook (o a través de tu aplicación Facebook Messenger).
Esta vez verá que el mensaje entrante se registra en la consola, así como la respuesta de Dialogflow.
Nota: Si necesita ayuda para configurar Dialogflow, siga las instrucciones de la página Agente SmallTalk Prebuilt SmallTalk.
La última pieza de este rompecabezas es tomar la respuesta de Dialogflow y enviarla al usuario a través del bot de Facebook Messenger.
El API de Messages de Vonage se encargará de todo esto por nosotros.
Cree un nuevo archivo en la carpeta controllers llamado vonage.js y rellénalo con el contenido de este archivo: controllers/vonage.js.
La función principal que se exporta en este archivo se llama messageResponder.
Esta función utiliza la biblioteca de clientes de Vonage Node.js para enviar un mensaje al usuario.
A la función se le pasa un objeto llamado message que contendrá el id del usuario al que enviar la respuesta y el dialogflowResponse (el texto a enviar en el mensaje).
const messageResponder = async (message) => {
vonage.messages.send(
new MessengerText({
text: message.dialogflowResponse,
to: process.env.FACEBOOK_PAGE_ID, // Who the message goes to
from: $FB_RECIPIENT_ID, // Who the message comes from. The PSID of the user you want to reply to. The FB_RECIPIENT_ID is the PSID of the Facebook User you are messaging. This value is the from.id value you received in the inbound messenger event on your Inbound Message Webhook URL.
}),
(err, data) => {
if (err) {
throw new Error(err);
} else {
console.log(
`Replied to ${message.id} with '${message.dialogflowResponse}' (ID: ${
data.message_uuid
})`
);
}
}
);
};
Para utilizar esta función messageResponder impórtela en el archivo routes/index.js archivo:
En la parte superior del archivo, debajo de la declaración require del archivo dialogflow.js creada anteriormente, añada lo siguiente:
const messageResponder = require('../controllers/vonage');A continuación, en la función inbound añada el siguiente código justo encima de la línea ctx.status = 200 línea:
messageResponder({ from, dialogflowResponse });
ctx.status = 200;Como puedes ver, estamos pasando un objeto a messageResponder con el contenido de fromcon la respuesta de Dialogflow ES.
Esto hará que el objeto que se pasa a la función tenga este aspecto:
{
from: '111111111111', // ID of the user on Facebook that sent the message
dialogflowResponse: 'Greetings!'
}
El escenario está listo. Con ese archivo final, el bucle se ha cerrado, y cualquier mensaje entrante debería recibir una respuesta inmediatamente. Ahora estás listo para probar tu bot de Facebook Messenger y tu integración con Dialogflow.
Una vez más, envíe un mensaje desde su página de Facebook. La respuesta de Dialogflow debería aparecer en la misma ventana.
¡Enhorabuena! Si sigues los pasos de este tutorial, habrás creado un bot para Facebook Messenger con Dialogflow y la ayuda de la API Messages API de Vonage.
La preconstruida Small Talk es estupendo para hacer pruebas, pero el siguiente paso sería crear un agente propio que pueda transmitir algún conocimiento de valor al usuario.
Para obtener más información sobre cómo empezar a crear agentes Dialogflow, puede consultar las guías de Dialogflow.
Con el código de este tutorial, ya tienes el enlace entre Facebook y Dialoglow, así que puedes seguir adelante y construir el agente más poderoso de todos los tiempos.
Si tiene alguna pregunta sobre esta entrada de blog, no dude en ponerse en contacto con nosotros en nuestro Slack de la comunidad de Vonage o envíanos un mensaje en X, antes conocido como Twitter.
Compartir:
Antiguo Director de Educación para Desarrolladores en Vonage. Con experiencia como desarrollador creativo, gestor de productos y organizador de jornadas de hacking, Martyn lleva trabajando como defensor de la tecnología desde 2012, tras haber pasado anteriormente por el mundo de la radiodifusión y las grandes discográficas. Educa y capacita a desarrolladores de todo el mundo.