Cómo crear un bot para Facebook Messenger


facebook messenger bot

En el siguiente post vamos a aprender cómo crear y configurar un bot para Messenger de Facebook soportado en Microsoft Azure, pero vale aclarar que este bot no tendrá inteligencia alguna si no por el contrario será nuestra “interfaz gráfica” del bot.

Para crear dicha inteligencia podemos hacer uso de servicios como LUIS de Microsoft Azure o Watson de IBM que lo verás en otros post.

Descargando el código base

Facebook nos colabora con una plantilla básica creada en Node.js para crear nuestro primer bot, requiere ciertas configuraciones pero las veremos más adelante. En el siguiente enlace podrás encontrar el código fuente:

https://github.com/fbsamples/messenger-platform-samples

Cuando hayas entrado al sitio podrás descargar el zip o clonar el proyecto en alguna parte de tu máquina, ya sea por consola o por alguna herramienta que te gestione los repositorios de GIT.

Configuración de Facebook

Directamente en Facebook necesitamos crear un Fanpage y una aplicación, ya que nuestro bot debe responder desde algún Fanpage. No importa el orden de creación, pero vamos a llevar cierto orden en esta sección.

Creando la aplicación en Facebook

Has click en el siguiente enlace para entrar a la página de administración de aplicaciones:

https://developers.facebook.com/apps

Allí podrás ver una consola parecida y encontrarás en la parte superior derecha un botón de color predominante donde dice “Agregar una nueva aplicación”, hacer click en ese botón de color verde.

Seguido a ese click se abre una ventana de diálogo donde debes escribir el nombre para mostrar (si requiere de permisos especiales como información del usuario es importante, de lo contrario no mucho), correo electrónico de contácto y lo más importante es seleccionar que sea de categoría “Aplicaciones para Messenger“, ya que esta selección nos preconfigurará toda nuestra aplicación y así nos evitamos más pasos.

Al haber escrito todas las configuraciones necesarias tienes que hacer click en el botón de “Crear identificador de la aplicación“.

Vamos a dejar esta pantalla abierta y presente para que ahora podamos unir esta aplicación con el Fanpage que vamos a crear a continuación.

Creando el Fanpage de Facebook

Este paso es más sencillo y común, si lo sabes hacer puedes pasar a la siguiente sección de lo contrario puedes entrar en el siguiente enlace y seguir todas las instrucciones, esto depende de la temática de tu Fanpage.

https://www.facebook.com/pages/create

Configuración del código de ejemplo

Ahora debemos completar todas las configuraciones de nuestro proyecto de ejemplo proporcionado por Facebook para que pueda trabajar correctamente.

Lo primero que vas a hacer es crear un repositorio nuevo en GitHub, y ahí almacenarás todo el código fuente necesario para correr el bot en Microsoft Azure, para eso deberás copiar ciertos archivos a la raíz del repositorio.

Los archivos que copiaremos son los siguientes:

Node/

| config/*

| public/*

| views/*

| app.js

| package.json

Luego de haberlos copiado al repositorio si estás usando GitHub for Windows vas a hacer Sync,  si es en consola harás el commit y pull.

Con Visual Studio Code o algún otro editor de código preferido abrirás el archivo llamado “config/default.json” y encontrarás las siguientes configuraciones:

Obteniendo el “AppSecret”

En la superior izquerda de nuestra aplicación de Facebook que creamos en los pasos anteriores encontrarás un botón que dice “Panel”, si haces click ahí te dirigirá al “inicio” de la aplicación.

Allí podrás encontrar el nombre, la versión del api, entre otros datos; pero el que nos interesa es el dato que se llama “Clave secreta de la aplicación“, en la parte derecha de ese mismo campo verás un botón que dice “Mostrar” y si haces click en el te pedirá la contraseña de tu Facebook, te autenticas y listo, ese es el dato que necesitas como AppSecret.

Obteniendo el “PageAccessToken”

En la misma página donde obtuviste la clave secreta de la aplicación encontrarás en el menú de la parte izquierda la opción que dice “Messenger” y seguido la opción de configuración.

Cuando hayas navegado a la configuración de Messenger podrás encontrar varios paneles de información, en uno de ellos (por lo general el tercero) tendrá como título “Generación de token“, ahí debes seleccionar el Fanpage que previamente creaste para este fin, te autenticas nuevamente y en la parte derecha del botón de selección encontrarás el token que necesitas en la configuración.

Para copiarlo solo necesitas hacer click encima del texto y listo, queda copiado.

Creando el “ValidationToken”

Este es el más sencillo, porque es como la palabra secreta que vas a asignar a todos los token, entonces si es una aplicación empresarial es importante que generes una cadena de caracteres larga y que no sea sencilla de descifrar; de lo contrario, si es un bot de pruebas, puedes poner algo sencillo, siempre y cuando al separar las palabras sea un con un underscore, en mi caso usaré el siguiente:

my_own_token

Obteniendo el “ServerURL”

Ya solo queda crear una aplicación web en Microsoft Azure y listo, entonces ahora solo es necesitas iniciar sesión en el porta de Azure y crear una Web App.

Cuando haya finalizado la creación en el panel principal podrás encontrar la URL que se generó, copiarla pero es super importante poner que va a ser por HTTPS, ya que si no nos va a generar problemas.

Listo, ahora solo debes sincronizar tu GitHub con la Web App que acabaste crear, para eso debes hacer click en Microsoft Azure en la sección de “Deployment Options”, ahí seleccionar que es por GitHub y configurar correctamente todos los datos solicitados.

Configurando los WebHooks

Luego de que se haya configurado correctamente la WebApp y se haya desplegado todo nuestro código fuente volvemos a la configuración de Messenger pero esta vez iremos a la sección que se llama “Webhooks” y ahí encontrarás un botón que dice “Configurar Webhooks”.

El que nos desplegará una ventana como la siguiente:

En los datos que solicita escribes la URL que está las configuraciones pasadas pero ahora es muy importante agregarlo al final “/webhook”, en mi caso quedaría de la siguiente manera:

https://botcami.azurewebsites.net/webhook

Y en el campo de “Verificar token” pondrás el valor que pusiste como “validationToken” en las configuraciones previas, en mi caso es:

my_own_token

Y en los campos de la suscripción debes seleccionar “Messenger” y “Messaging_Postback”. Así que completando todos los datos quedaría algo parecido a la siguiente foto:

Si todo quedó bien configurado al hacer click en “Verificar y guardar” no debería salir ningún error y refrescar la página. Si te salió algún error, verifica cada letra de la URL, que tenga HTTPS, que finalice en webhook, que el token sea el mismo, que el appsecret y el pageAccessToken sea el correcto (ya me pasó eso jeje).

Configuración final

Listo, luego de que haya guardado correctamente, nos recargará la página y nos aparecerá otra sección abajo de webhooks donde podremos seleccionar la página que queremos “adjuntarle” este bot que acabamos de crear, ahí por supuesto seleccionas el fanpage correspondiente y haces click en “suscribir”.

LISTO!, a probar el bot, solo tienes que acceder a la página como visitante y chatear con tu nuevo bot que responde lo mismo que le escribes.

Entonces en próximos post veremos integraciones inteligentes de LUIS o de Watson, también veremos muchos post de Xamarin y este tipo de herramientas.

Anuncios