Menús Persistentes para tus Bots de Facebook Messenger

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  

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 dependencias
const 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.js
const 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.