Platzi
Platzi

Suscríbete a Expert y aprende de tecnología al mejor precio anual.

Antes:$249
$209
Currency
Antes:$249
Ahorras:$40
COMIENZA AHORA
18

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

129293Puntos

hace 2 años

Curso de Bots con Facebook Messenger
Curso de Bots con Facebook Messenger

Curso de Bots con Facebook Messenger

Crea tu propio Bot con Facebook para conseguir más suscriptores, responder a tiempo a tus clientes y generar un vínculo con tu audiencia. Crea e integra interfaces dentro de Facebook Messenger y aprende a añadir todas las interacciones disponibles.

Un Menú Persistente es un menú con diferentes opciones siempre visibles para nuestros usuarios. Así como las respuestas rápidas y los botones, la función del menú persistente es evitar que nuestros usuarios tengan que escribir para obtener alguna respuesta al interactuar con nuestros chatbots.

En este tutorial vamos a crear una aplicación de fotos de perritos usando la API de DOG CEO. El reto de esta aplicación es que los usuarios puedan usar la aplicación sin ningún problema y sin necesidad de escribir nada: con solo nuestro menú persistente deben poder interactuar con nosotros al 100%.

Recuerda que debes leer el artículo completo de Cómo crear un bot para Facebook Messenger o tomar el Curso de Bots para FB Messenger en Platzi, así puedes seguir este tutorial sin ningún problema.

Programando nuestra aplicación

Vamos a configurar nuestro servidor de Node.js para enviar las fotos de los perritos. Necesitamos instalar las siguientes dependencias:

npm install -S express body-parser request

Comenzamos configurando un servidor común y corriente:

'use strict';

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

// Algunas cosas que necesitaremos más adelante...const { PORT = 5000, NODE_ENV = 'development' } = process.env;
const ACCESS_TOKEN = 'Nuestro Token de Facebook';
const FACEBOOK_URI = 'https://graph.facebook.com/v2.6/me/messages';
const API = {
  breed: breed => `https://dog.ceo/api/breed/${breed}/images`,
  random: 'https://dog.ceo/api/breeds/image/random',
};

// La configuración de siempre con express.jsconst app = express();
app.set('port', PORT);
app.use(bodyParser.json());

// Configuración de nuestras rutas
app.get('/', function (req, res) {
  res.send('Hello World!');
});

// Corremos el servidor :D
app.listen(app.get('port'), function () {
  console.log('Node app is running on port', app.get('port'));
});

Configuración de Facebook

Para enviar y recibir mensajes de nuestros usuarios debemos configurar las rutas a las cuales Facebook enviará los mensajes de nuestros usuarios. Recuerda que puedes leer más sobre estas configuraciones en: Setting Up Your Webhook - FB Docs.

// Verificación, sólo vamos a utilizar esta ruta 1 vez
app.get('/webhook', function (req, res) {
  const token = req.query['hub.verify_token'];
  const challenge = req.query['hub.challenge'];

  if (token === 'Token de verificación de Facebook') res.send(challenge);
  else res.send('Ups! You need to provide the correct token.');
});

// Facebook entra a esta ruta cada vez que// nuestros usuarios envían un mensaje
app.post('/webhook/', function (req, res) {
  const events = req.body.entry[0].messaging;
  if (!events) return res.sendStatus(404);
  // Por cada mensaje llamamos a la función "handleEvent"
  events.forEach(handleEvent);
  res.sendStatus(200);
});

Al recibir los mensajes llamaremos a la función handleEvent:

functionhandleEvent(event) {
  const senderId = event.sender.id;

  // No vamos a responder mensajes de texto, solo las acciones del menú// if (event.message) return handleMessage(senderId, event.message);if (event.postback) return handlePostback(senderId, event.postback);
}

Respuestas a los eventos del menú

A diferencia de los mensajes de texto normales, Facebook nos da la opción de configurar mensajes especiales con variables ocultas que podemos recibir cuando nuestros usuarios usen el menú. Estos mensajes se llaman postbacks y dentro de ellos vamos a encontrar nuestras variables ocultas como payloads.

Más adelante vamos a configurar estos mensajes especiales. Por ahora vamos a crear la función handlePostback para responder dependiendo la opción que escojan nuestros usuarios, además de las funciones necesarias para responder correctamente.

functionhandlePostback(id, postback) {
  const { title, payload } = postback;

  if (payload === 'ABOUT_PAYLOAD' || payload === 'GET_STARTED_PAYLOAD')
    return aboutMessage(id);
  if (payload === 'RANDOM_PAYLOAD') return randomImage(id);
  if (payload.endsWith('_BREED_PAYLOAD')) return breedImage(id, title);
}

functionbreedImage(id, title) {
  const data = { uri: API.breed(title.toLowerCase()) };

  request(data, function (err, res, body) {
    if (err) returnconsole.log(err);

    const image = JSON.parse(body).message[0];

    const message = {
      "recipient": { "id": id },
      "message": {
        "attachment": {
          "type": "image",
          "payload": {
            "url": image,
          },
        },
      }
    };

    return sendMessage(message);
  })
}

functionrandomImage(id) {
  const data = { uri: API.random };

  request(data, function (err, res, body) {
    if (err) returnconsole.log(err);

    const image = JSON.parse(body).message;

    const message = {
      "recipient": { "id": id },
      "message": {
        "attachment": {
          "type": "image",
          "payload": {
            "url": image,
          },
        },
      }
    };

    return sendMessage(message);
  })
}

functionaboutMessage(id) {
  const message = {
    "recipient": { "id": id },
    "message": {
      "text": "👋 ¡Hola! 🤖 Soy un bot de messenger. Es mejor usar el menú 👇"
    }
  };
  
  return sendMessage(message);
}

Lo último que debemos programar es la función sendMessage para, enviar los mensajes:

functionsendMessage(message) {
  const data = {
    "uri": FACEBOOK_URI,
    "qs": { "access_token": ACCESS_TOKEN },
    "method": "POST",
    "json": message,
  };
  
  request(data, function (err) {
      if (err) returnconsole.log('Ha ocurrido un error')
      returnconsole.log('Mensaje enviado')
    }
  );
}

Creación del Menú Persistente

¡Nuestra aplicación está casi lista! Solo hace falta la parte más importante: Crear el menú persistente.

Para esto vamos a usar curl, una herramienta para hacer peticiones HTTP a un servidor. No te preocupes, no hace falta que tengas conocimientos extraordinarios para completar esta etapa.

Necesitamos hacer tres peticiones. Las primeras dos van a configurar los botones y mensajes de bienvenida. Y con la tercera vamos a configurar nuestro menú con las opciones que necesita nuestra aplicación.

1:

curl -X POST -H "Content-Type: application/json"-d'{
  "get_started": {
    "payload": "GET_STARTED_PAYLOAD"
  }
}'"https://graph.facebook.com/v2.6/me/messenger_profile?access_token=TOKEN_DE_FACEBOOK"

2:

curl -X POST -H "Content-Type: application/json"-d'{
  "greeting": [
    {
      "locale": "default",
      "text": "Hello {{user_first_name}}!"
    }
  ]
}'"https://graph.facebook.com/v2.6/me/messenger_profile?access_token=TOKEN_DE_FACEBOOK"

3:

curl -X POST -H "Content-Type: application/json"-d'{
"persistent_menu": [{
  "locale": "default",
  "composer_input_disabled": true,
  "call_to_actions": [
    {
      "title": "🐶 Razas disponibles",
      "type": "nested",
      "call_to_actions": [
        {
          "title": "Affenpinscher",
          "type": "postback",
          "payload": "AFFENPINSCHER_BREED_PAYLOAD"
        },
        {
          "title": "African",
          "type": "postback",
          "payload": "AFRICAN_BREED_PAYLOAD"
        },
        {
          "title": "Airedale",
          "type": "postback",
          "payload": "AIREDALE_BREED_PAYLOAD"
        }
      ]
    },
    {
      "title": "🔁 Perrito Random",
      "type": "postback",
      "payload": "RANDOM_PAYLOAD"
    },
    {
      "title": "💚 Sobre Nosotros",
      "type": "postback",
      "payload": "ABOUT_PAYLOAD"
    }
  ]
}]
}'"https://graph.facebook.com/v2.6/me/messenger_profile?access_token=TOKEN_DE_FACEBOOK"

Aunque todas las peticiones se ejecuten correctamente puede pasar mucho tiempo hasta que veamos los cambios reflejados en nuestro chatbot. Te recomiendo seguir el tutorial hasta aquí, tomar un café, solucionar algunos pendientes, contarle a tu mamá sobre el proyecto en el que estás trabajando, etc. Después de un rato puedes volver para probar y verás cómo funcionan el menú y mensaje de bienvenida.

Conclusión

¡Felicitaciones! Tu chatbot funciona a la perfección y sin necesidad de que nuestros usuarios escriban una sola palabra. Ahora depende de tí: ¿Qué uso le darás a esto que aprendiste?

Espero que te haya gustado esta guía para construir chatbots funcionales sin necesidad de que los usuarios escriban una sola palabra, todo esto gracias al menú persistente. No olvides dejar en los comentarios las aplicaciones increíbles que vas a construir con FB Messenger.

Y no lo olvides: Todo esto y más lo puedes aprender a profundidad en el Curso de Bots para FB Messenger con Oscar Barajas Tavares como nuestro increíble profesor.

Curso de Bots con Facebook Messenger
Curso de Bots con Facebook Messenger

Curso de Bots con Facebook Messenger

Crea tu propio Bot con Facebook para conseguir más suscriptores, responder a tiempo a tus clientes y generar un vínculo con tu audiencia. Crea e integra interfaces dentro de Facebook Messenger y aprende a añadir todas las interacciones disponibles.
Juan David
Juan David
juandc

129293Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
2
34472Puntos

¿Son brujos o qué? Justo hoy tenía esa duda en la cabeza jajaja
Guardado el post, para consultarlo después.

1
902Puntos

con la nueva versión de la api de facebook ya no funciona el menú persistente he tenido este problema cuando lo creo me sale este error

{“error”:{“message”:"(#11) Setting of Nested Persistent Menu has been deprecated for v8.0 and higher",“type”:“OAuthException”,“code”:11,“fbtrace_id”:“AVwJ11Ywd_93IBPBVEHqFIC”}}

y no se como solucionarlo😭

1
6679Puntos
un año

El problema es que en la v8.0 el type nested está obsoleto, entonces ya no se pueden crear menús anidados. Te comparto mí código con el cual solucione este problema.

curl -X POST -H "Content-Type: application/json" -d '{
    "persistent_menu": [
        {
            "locale": "default",
            "composer_input_disabled": false,
            "call_to_actions": [
                {
                    "title": "Acerca",
                    "type": "postback",
                    "payload": "ABOUT_PAYLOAD"
                },
                {
                    "title": "Pizzas",
                    "type": "postback",
                    "payload": "PIZZAS_PAYLOAD"
                },
                {
                    "title": "Pagina Web",
                    "type": "web_url",
                    "url": "https://jonathanlima-portfolio.netlify.app/","webview_height_ratio": "full"
                }
            ]
        }
    ]
}' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=TOKEN"```