Cómo crear un Bot para Facebook Messenger con Node JS

Tutoriales

Github

Los Bots de Facebook Messenger son herramientas interesantes para hacer Feedbacks, Ventas, etc. más ágiles desde Facebook. Puedes hacer que realice infinidad de funciones, pensar que puede interactuar con otros servicios como Google Maps, Instagram, WordPress, Prestashop, etc. nos damos cuenta del potencial de esta utilidad si sabemos sacarle el máximo provecho. En esta ocasión voy a enseñarles a crear un Bot para Facebook Messenger con Node JS y el deployment lo haré en el servidor Heroku con una cuenta gratuita.

Los pasos que llevaré a cabo son los siguientes:

  • Porque usar Heroku?
  • Deployment en Heroku (Configuración de nuestro servidor para alojar el Bot)
  • Programando las Funcionalidades del Bot.
  • Porque usar un servidor con Certificado SSL?
  • Configurando la app en Facebook Developer.
  • Testeando mi Bot.

Mi Bot va tener 5 característcas que servirán para que el usuario pueda interactuar sin problemas con el Bot:

  1. mensaje automático :  Este no es un comando, es un mensaje que se muestra cuando el usuario escribe cualquier texto en el chat.
  2. ‘busca blog’
  3. ‘sobre platzi’
  4. ‘testimonios’
  5. ‘ayuda’

Estas características mencionadas las detallaré más adelante en el paso Programando las Funcionalidades del Bot, primero vamos con el tutorial:

Porque usar Heroku ?

Esta plataforma nos ofrece una cuenta gratuita para hacer nuestras pruebas, si bien esta cuenta tiene limitaciones, podemos escalarla y agregarle mas especificaciones y mejoras para obtener un mejor rendimiento y persistencia. Ademas tiene mucha compatibilidad con Node JS que es la tecnología ideal para hacer funcionar nuestro Bot, por la respuesta en tiempo real que nos brinda. Algo muy importante tambien es que Heroku nos da un certificado SSL el cual es un requerimiento obligatorio de la plataforma Facebook Developers para poder alojar nuestro Bot.

Deployment en Heroku (Configuración de nuestro servidor para alojar el Bot)

Hacemos el despliegue y configuración de nuestro servidor. Para este tutorial yo voy a usar un servidor gratuito en Heroku. Primero nos creamos una cuenta en heroku.com e iniciamos sesión con nuestro usuario y contraseña.

f

Una vez dentro creamos una nueva app, dejamos en blanco el nombre ya que el sistema free le asigna uno por default, seleccionamos la región y le damos en Create App.

g

El sistema me creó mi app con el nombre pure-woodland-19018. Ahora instala Heroku Toolbet y configúralo para que puedas trabajar con Heroku en tu consola de Comandos.

Por default Heroku nos crea un repositorio al cual podemos hacer Pull y Push ejecutando comandos Git en nuestra consola de comandos:

Dentro de la pestaña Deploy de tu app en Heroku también tienes los comandos y pasos mencionados anteriormente:

h

Nota: Si es la primera vez que despliegas en Heroku debes configurar tu SSH Key y demás datos privados para que puedas ejecutar sin problemas los comandos mencionados anteriormente – puedes consultar la documentación oficial para más detalles.

Ejecutado el comando anterior para clonar el repositorio de nuestra app nos descarga un directorio, el cual tiene el nombre de tu app. Mi directorio se llama pure-woodland-19018 y dentro de este directorio encontraremos la estructura o esqueleto que Heroku nos pide obligatoriamente para que nuestra aplicación en Node JS funcione sin problemas en sus servidores.

Programando las Funcionalidades del Bot

Ahora vamos a darle vida a nuestro bot, con las funcionalidades necesarias para que el usuario interactúe con el dentro de la ventana del chat. Voy hacer que mi bot tenga las siguiente funciones:

  1. Cuando el usuario escriba cualquier texto el bot le mostrará una ayuda.
  2. Buscar artículos en el blog de Platzi (El usuario podrá buscar artículos sobre Android, Javascript, PHP, UX, Python, Ruby, etc)
  3. Sobre Platzi (El usuario podrá obtener una información que define lo que es Platzi)
  4. Testimonios (El usuario podrá ver una lista horizontal de Wildcards con las Historias de los Estudiantes de Platzi)
  5. Ayuda. (El usuario podrá ver una lista de comandos para poder guiarse)

Para este bot vamos a usar Node JS por ser un lenguaje de respuesta en tiempo real y muy dinámico. Creamos un archivo llamado index.js y colocamos el código abajo, dentro del cual también explico para qué sirve cada función.

Voy a indicarles las acciones mas importantes que hace cada linea de nuestro código:

Nota: Si te queda complicado al final del artículo encontrarás un link al repositorio GitHub con el código completo.

Instancio mis variables y hago la configuración requerida así mismo configuro el puerto para correr nuestra APP:

Imprimo un texto en el home de mi servidor Heroku para comprobar si mi deployment se hizo correctamente y también si es que el Token de seguridad es inválido:

Le muestro un mensaje de ayuda para usar el Bot, si el usuario hace enter en el chat sin saber que hacer le ofrecemos una guía de como usar el Bot:

Defino las comandos que puede usar el usuario dentro del Messenger para el comando ‘busca blog’ , ejemplo: ‘buscar blog javascript’, ‘buscar blog ruby’ , etc:

Muestro un botón que es un link al blog de Platzi con los resultados obtenidos luego de haber ejecutado el comando ‘buscar blog javascript’, ‘buscar blog ruby’, etc.:

Valido la conexión a la Graph API de Facebook para el envío y recepción de mensajes:

Defino las respuestas para el comando ‘sobre platzi’  y tambien para el comando ‘ayuda’:

Defino y valido el comando ‘testimonios’:

Muestro los wildcards con los ‘testimonios’, son una tira  de tarjetas informativas dentro del Chat Facebook Messenger:

Muestro un mensaje si hay un error enviado los mensajes:

“Terminado nuestro código, procedemos a subirlo a Heroku”

Nota: Debemos crear el Archivo Procfile para que nuestra aplicación se inicie automáticamente:

Ahora publicamos los cambios en Heroku:

Para comprobar si nuestro servidor está trabajando sin problemas abrimos nuestra app en Heroku:

i

Nos debe mostrar el mensaje que declaramos al inicio de nuestro código:

Es decir nos debe mostrar el mensaje: Hola soy un Bot de Facebook Messenger 🙂

Es importante que la URL de nuestra aplicación en Heroku cargue sin problemas, ya que cuando configuremos nuestra aplicación en Facebook, hará pedidos de respuesta al servidor para validar el servidor HTTP Seguro.

Porque usar un servidor con Certificado SSL?

Un certificado SSL (Secure Socket Layer) o Capa de Conexión Seguridad de por si es la mejor opción para darle seguridad a tus datos y la de tus usuarios.

Un servidor con Certificado SSL  es muy considerado por los diferentes servicios que existen en Internet entre ellos Facebook Developers que nos pide si o si tener un Certificado SSL para publicar nuestro Bot

Un proyecto creado con un simple servidor sin certificado SSL muchas veces es fácil de usar para crear Suplantación de identidad (Pishing), Descargar Malware y muchas categorías de Virus que vulneran la seguridad del usuario, etc. Por eso se decidió darle una capa de seguridad a nuestros proyectos y una manera de diferenciar a los malos de los buenos, a continuación les mostrare cuando una servidor tiene certificado SSL y cuando no, por ejemplo tenemos los siguientes dominios:

http://www.midominio.com (Sin Certificado SSL)

https://www.midominio.com (Con certificado SSL)

Si vemos bien podemos saber que un proyecto con certificado SSL es cuando al inicio de la url en su navegador tiene https, esto significa: Hypertext Transfer Protocol Secure (Protocolo seguro de transferencia de hipertexto)

Para este tutorial use Heroku que ya nos brinda el certificado SSL de Manera gratuita, pero si decides usar otro Proovedor, necesitas comprarle o ver si viene con Certificado SSL.

Configurando la app en Facebook Developer

Vamos a crear una aplicación para Web, para ello nos dirigimos a Facebook Developers y agregamos una nueva aplicación:

a

Una vez que terminamos de configurar nuestra aplicación regresamos a la página principal de Facebook Developers y de paso recargamos la página, desplegamos la lista de nuestras aplicaciones y hacemos click en la aplicación que hemos creado:

b

Cuando estemos en la página de configuración de nuestra aplicación, nos dirigimos a la opción Messenger en el menú de opciones del lado izquierdo:

c

Para algunos les debe cargar la nueva versión de la página para configurar nuestra aplicación.

Sea cual sea la versión que tengamos en pantalla, debemos seleccionar el Fanpage en donde nuestro bot va a trabajar e interactuar con los usuarios que nos escriban mensajes. Para mi caso seleccionaré el Fanpage “Bot Messenger Chat Platzi”. Podemos ver que nos genera un token de acceso a la página, y lo copiamos.

Luego nos dirigimos a Webhooks.

edit_d_edit

Los Webhooks nos sirven para enviar y recibir respuestas desde nuestro servidor a nuestra aplicación y consecuentemente la interacción con el usuario.

Como nuestra aplicación está alojada en Heroku, el servidor cuenta con Certificado SSL. Copiamos y pegamos la URL de nuestra aplicación alojada en Heroku ya que es allí en donde está nuestro código con las funciones que nuestro bot debe realizar. Pegamos el token generado anteriormente y marcamos las 4 casillas: message_deliveries, messages, messaging_optins y messaging_postbacks y le damos click en Verificar y guardar. Si todo está bien nos aparecerá un checkbox verde de aprobado.

Ahora abrimos nuestra ventana de comandos (Puede ser Git Bash u otra) y ejecutamos lo siguiente para suscribir nuestra app a la página de aplicaciones de Facebook.

Donde dice MI_TOKEN escribimos nuestro token generado anteriormente. Presionamos enter en la consola de comandos y nos debe salir true, lo que indica que nuestra app está configurada correctamente.

También tenemos que colocar el TOKEN en Heroku, para eso nos dirigimos a Settings y luego a Configurar Variables:

fgt

En la imagen anterior escribimos la variable de seguridad PAGE_ACCESS_TOKEN y a su lado colocamos el token generado automáticamente en Facebook.

Testeando mi Bot

Ahora vamos a probar las funciones que programé para mi bot.

1.- Cuando el usuario escriba cualquier texto, el bot le mostrará una ayuda.

Debemos tener en cuenta que el usuario al ingresar no tiene ni la más mínima idea de qué comandos escribir para poder ver algún tipo de resultado en el chat. Si por ejemplo el usuario escribe hola o cualquier otra palabra que desee, el bot le muestra una guía.

j

2.- Buscar artículos en el blog de Platzi

Esta función le permite al usuario buscar un contenido determinado en el blog de Platzi; para ello ejecuto el comando buscar blog. Por ejemplo si el usuario escribe buscar blog javascript, el bot muestra un botón que al hacerle click nos envía al blog y nos muestra los resultados de nuestra búsqueda.

k

3.- Sobre Platzi

Este comando muestra una breve descripción de la empresa con solo escribir el comando sobre platzi.

l

4.- Testimonios

Para hacerlo más vistoso y vendedor si escribimos el comando testimonios el bot muestra una lista horizontal de Wildcards con las Historias de los Estudiantes de Platzi.

m

5.- Ayuda

Cuando el usuario escribe el comando ayuda nuestro querido bot le muestra una lista con los comandos disponibles.

n

Está genial, ¿cierto?

Puedes crear las funciones que desees, también conectar todo a una base de datos como MySQL, Mongo DB, Rethink DB, etc. y tener tu Bot con datos más actualizados y dinámicos.

bots_hacen

Para poner el Bot al acceso público se debe tomar en cuenta que tienes que tener un servidor privado potente. De hecho yo no comparto el link de mi Bot porque el servidor Heroku gratuito no soporta muchas conexiones y se puede caer. Lo que sí puedo hacer es dar acceso para que lo prueben, me pueden enviar un mensaje por Twitter para solicitarlo.

También te dejo el código alojado en GitHub para que lo revises con calma o lo incorpores en tu proyecto.

Gracias por tu atención.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
  • Buen tutorial. Puedes mejorar ligeramente el código usando ES6. Tengo una duda, ¿el tutorial fue orginalmente para Platzi? Supongo que sí, si no no le harías tanta propaganda xD.

    • Nuestro CEO lo escribió para Platzi. Pero no lo publicaron nunca. Suscríbete a nuestras redes y visítanos, siempre tenemos novedades para compartir.

  • Cuando lo pruebo solo me responde a mi, tienes alguna idea de donde puede estar el error?

    • Revisa tu consola developer que error te sale, puede ser cualquier error, porque no te bajas el codigo, has el deployment en tu servidor que soporte node js y luego vas tocando linea por lineas adaptándolas a tus requerimientos.