24

Cómo crear un bot para Facebook Messenger

21412Puntos

hace 3 años

Curso de Inteligencia Artificial con IBM Watson 2018
Curso de Inteligencia Artificial con IBM Watson 2018

Curso de Inteligencia Artificial con IBM Watson 2018

Aprende a implementar soluciones de inteligencia artificial en tus proyectos, de forma fácil y rápida, utilizando IBM Watson. Implementa, entrena de forma visual e integra en tus aplicaciones sistemas como chatbots, traductores de voz a texto y hasta servicios de reconocimiento de imágenes.

Antes de empezar a crear un Bot de Messenger es necesario contar con los siguientes requisitos:

  1. Pagina de Facebook
    Debemos contar con una pagina de Facebook o crear una pagina nueva.

  2. Cuenta de desarrollador de Facebook
    Registrarse como desarrollador de Facebook, lo cual nos permitirá acceder a los recursos, documentación y configuración de nuestras aplicaciones.

  3. Crear una App en Facebook
    En la esquina superior derecha hay un menu “Mis Apps” en esta parte vamos a crear una nueva app con el nombre de nuestro proyecto el cual llamaremos “Platzibot”.

platzi-bot-messenger.png

Hasta este punto ya tenemos nuestra aplicación creada, para configurar nuestro bot dentro de esta aplicación es necesario contar con nuestro Webhook y es hora de trabajar con código.

  1. WebHook

Para crear nuestro webhook vamos a utilizar Heroku, un servicio de computación en la nube que nos permitirá correr nuestro código hecho en NodeJS por lo cual será necesario tener instalado la ultima versión estable de node en nuestra computadora.

4.1 Crear cuenta de Heroku
4.2 Crear una aplicación (Puede tener cualquier nombre).
4.3 Instalar Heroku-Cli

En nuestra computadora creamos una carpeta con el nombre de nuestro proyecto “platzibot” y utilizamos la terminal para navegar hasta esta carpeta.

Iniciamos sesión en Heroku desde la terminal con el siguiente comando y siguiendo las instrucciones.

heroku login

Inicializamos un repositorio:

git init

Unimos nuestra carpeta local al repositorio remoto (YOU_APP = Nombre de tu app en el paso 4.2)

heroku git:remote -a YOU_APP 

Configuramos nuestro proyecto con npm (Contestamos las preguntas para configurar nuestro proyecto):

npm init 

Instalamos las dependencias necesarias para construir nuestro webhook: Vamos a utilizar Express para crear nuestro webhook y utilizaremos body-parser y request para manejar el flujo de datos que enviaremos y recibiremos.

npm install -S express body-parser request

Hasta este punto dejaremos de usar la consola para pasarnos a nuestro editor de codigo en lo particular utilizo ‘Visual Studio Code’.

Creamos nuestro archivo principal y lo llamaremos ‘app.js’

Iniciamos nuestro proyecto con las dependencias necesarias:

'use strict';

const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');

Configuramos express para usar el puerto por defecto que nos proporcione heroku al iniciar el servidor y le añadimos a express la configuracion de bodyparser.

const app = express();
app.set('port', (process.env.PORT || 5000));
app.use(bodyParser.json())

Creamos la ruta principal de nuestro servidor con express.

app.get('/', function (req, res) {
    res.send('Hello PlatziBot!')
})

Vamos añadir el siguiente código que nos permitirá comunicarnos con la API de Facebook, lo que hace es crear una conexión entre nuestro webhook y la api de facebook por medio de verificar el token que asignamos "platzi_bot_says_

app.get('/webhook', function (req, res) {
    if (req.query['hub.verify_token'] === 'platzi_bot_says_hello') {
        res.send(req.query['hub.challenge']);
    } else {
        res.send('platzi_bot_says_bye');
    }
});

Creamos una llamada “post” para recibir los mensajes desde Facebook Messenger, la cual recibe los mensajes e itera por cada elemento del objeto recibido y extraemos el evento que contiene un objeto con la informacion que necesitamos para saber quien envio el mensaje, el cuerpo del mensaje, asi como la hora de su envio.

app.post('/webhook', function (req, res) {
    const data = req.body;
    if (data.object == 'page') {
        data.entry.forEach(function (pageEntry) {
            pageEntry.messaging.forEach(function (messagingEvent) {
                receiveMessage(messagingEvent);
            });
        });
        res.sendStatus(200); // notificamos que todo esta correcto
    }
});

Ahora creamos la función “receiveMessage” la cual se encargara de extraer la información del usuario y crear un mensaje que repita lo que nos escribe.

const receiveMessage = (event) => {
 const senderId = event.sender.id; // Id único del usuarioconst messageText = event.message.text; // Mensaje que nos envióconst messageData = {
	recipient : {
			id : senderId
		},
		message: {
			text: messageText
		}
 };
 sendMessage(messageData); // enviamos el mensaje 
}

La funcion sendMessage recibe el informacion que enviaremos a Facebook por medio de “request”.

const sendMessage = (messageData) => {
    request({
        uri: 'https://graph.facebook.com/v2.6/me/messages',
        qs: {
            access_token: "YOU_TOKEN"// generaremos un token y aquí es donde lo pondremos.
        },
        method: 'POST',
        json: messageData
    }, function (error, response, data) {
        if (error) {
            console.log('No es posible enviar el mensaje');
        } else {
            console.log("Mensaje enviado...");
        }
    });
}

En esta función configuramos la url de la API de Facebook, también asignamos el token que previamente vamos a generar y por medio de post enviamos a la API el mismo mensaje que recibimos.

Hasta este momento es todo el código que necesitamos para este bot repetidor de mensajes.

  1. Deploy
    Antes de subir nuestra aplicación tenemos que añadir la configuración base a nuestro “package.js” esta nos permitirán iniciar correctamente nuestro servidor express en Heroku.

En la seccion de scripts añadimos el siguiente:

"start": "node app.js"

y añadimos el motor de nuestra aplicacion

"engines": {
    "node": "8.9.1"
},

Nuestro archivo package.js debe de quedar de la siguiente forma:

package-js-platzibot.png

Antes de subir y probar nuestro bot tenemos que crear el archivo .gitignore en la raíz de nuestro proyecto para ignorar la carpeta de node_modules/.

Ahora que ya tenemos la configuración lista, vamos a subir todos los cambios a Heroku.

gitadd .

Asignamos un nombre a nuestro commit

git commit -m "PlatiBot Lives!"

Subiremos nuestros cambios a Heroku,

git push heroku master
platzi-bot-heroku-deploy.png

Si nuestro código esta correcto y nuestro motor de NodeJS se compilo sin problema, tendremos nuestra aplicación viviendo en la url que previamente configuramos con el nombre de nuestra app en Heroku

https://YOUR-APP.herokuapp.com/ deployed to Heroku

Comprobamos que nuestro servidor de express nos muestre la bienvenida.

platzibot-lives.png
  1. Conectar nuestro webhook a nuestra Aplicación / Fanpage

Regresamos al portal de desarrolladores de Facebook y en la esquina superior derecha en “Mis Apps” seleccionamos la aplicación que creamos previamente y en el dashboard elegimos la opción “Messenger”.

add-messenger-setup.png

6.1 Generar un token
Seleccionamos nuestra nueva pagina en mi caso “Platzi-bot” aceptamos los permisos y facebook nos generara un token que utilizaremos en nuestra aplicación. Este token lo vamos a poner en nuestro y vamos a subir los cambios a Heroku. (paso 5)

generar-token-permisos.png

6.2 Conectar nuestro Webhook
En esta opción añadiremos la url de nuestro webhook que vive en Heroku y vamos a utilizar el verificador de token de nuestra aplicación: “platzi_bot_says_hello”. En las opciones tenemos que seleccionar “messages” y “messaging_postbacks” que es la configuración minima para nuestro primer bot de Messenger.

platzibot-conect-bot.png

Verificar y guardar, si Facebook no marca error, tendremos conectada nuestra aplicación con con la fanpage que previamente creamos con nuestro código en Heroku.

suscribirse-token.png
  1. Probar nuestro Bot

Entramos en Messenger ya sea en web o desde tu teléfono celular y buscamos nuestra fanpage para iniciar una conversación.

platzi-bot-funcionando.png

¡Ahora tu primer Bot de Facebook Messenger Vive!

Recuerda hasta no publicar nuestro bot no sera visible para todos, en este momento se encuentra en modo desarrollador y solo tu o a quien le asignes permisos podrá iniciar una conversación.

Estos son los pasos para crear un Bot de Messenger, ahora que haz aprendido a interactuar de forma básica, te invito leer mas sobre Facebook Messenger y todo lo que puedes hacer con Bots en la documentación oficial. También te dejo el código en GitHub de PlatziBot y espero puedas añadirle mas funcionalidades.

En una segunda entrega vamos a aprender a conectar nuestro bot con una Inteligencia Artificial como Watson de IBM. Añadiéndole mas funcionalidades y una capa externa que permitirá extender las habilidades de nuestro querido PlatziBot.

Aprende a crear Menús Persistentes para tus Bots de Facebook Messenger

Cuéntanos, ¿qué más te gustaría aprender sobre bots?

Curso de Inteligencia Artificial con IBM Watson 2018
Curso de Inteligencia Artificial con IBM Watson 2018

Curso de Inteligencia Artificial con IBM Watson 2018

Aprende a implementar soluciones de inteligencia artificial en tus proyectos, de forma fácil y rápida, utilizando IBM Watson. Implementa, entrena de forma visual e integra en tus aplicaciones sistemas como chatbots, traductores de voz a texto y hasta servicios de reconocimiento de imágenes.
Oscar
Oscar
gndx

21412Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2

Hola. ¿Hay un curso en Platzi que enseñe desde cero a desarrollar bots para Facebook? Gracias.

3
21412Puntos
3 años

Proximamente…

1
3305Puntos
un año

¿sigue en pie el curso? 😃

2
4714Puntos

👋Hola la verdad está súper interesante la clase UE compartiste. Creo que necesito contar con un poco más de conocimiento para practicarlo. ✍ Pero la verdad esta super interesante

2
21412Puntos
3 años

Es cuestión de seguir los pasos, si tienes dudas puedo apoyarte a entender un poco mas o despejar tus dudas sobre un punto en particular.

1
476Puntos

Emmm a mi me da error.
Screenshot_1.png

0
21412Puntos
3 años

Hola, Podrías indicarme en que paso te quedaste para poder apoyarte en que funcione tu bot.

saludos.

2
21412Puntos
3 años

El error puede radicar en la configuración de tu archivo package.json donde estas configurando los comandos que ejecutara heroku.

1

Gracias por este tremendo turorial! tengo dudas con la url y el token como los genero? Agradezco la ayuda inmensamente

1

Hola muy buen contenido y funciona bien , de igual manera que recomiendas? muchos me están recomendado chatfunnel que te permite automatizar todo de manera mucho mas sencilla.
aquí dejo dos links por si no lo conoces o por si le interesa a alguien mas …
https://bit.ly/2OHwrCP
https://bit.ly/34irreg

1

Hola, en este momento estoy tratando de hacer un bot para facebook como lo indicas en este blog y estoy utilizando ngrok con el puerto 5000 pero estoy teniendo este problema para conectarlo con webhooks de facebook sabrías cual el inconveniente y como lo podría solucionar te lo agradecería.

ERROR:
La conexión a https://d7fc2e333317.ngrok.io se canalizó con éxito a su cliente ngrok, pero el cliente no pudo establecer una conexión con la dirección local localhost: 5000 .

Asegúrese de que un servicio web se esté ejecutando en localhost: 5000 y que sea una dirección válida.

El error encontrado fue: dial tcp [:: 1]: 5000: connectex: No se puede establecer una conexión ya que el equipo de destino denegó expresamente dicha conexión.

1
15891Puntos

Muchas gracias por el contenido : C

1
21412Puntos
3 años

Que bueno que te gusto, ¿Ya tienes tu bot funcionando?