Validación de Menú en WhatsApp con IDs Estables

Clase 24 de 28 • Curso de ChatBot con WhatsApp API

Resumen

¿Cómo se mejora la validación de opciones en un menú interactivo?

La validación de opciones de menú es esencial para la fluidez de las aplicaciones y servicios interactivos, como los chatbots. En lugar de validar las opciones por un texto que puede cambiar o tener variaciones en mayúsculas, una práctica más robusta es utilizar un ID para cada opción. Este ID es inmutable y descriptivo, asegurando un estándar firme en las interacciones del menú.

¿Qué son las IDs y cómo se utilizan?

IDs: Son identificadores únicos que no cambian, utilizados para determinar de manera inequívoca la acción que se desea ejecutar.
Implementación: En lugar de un nombre que podría cambiar, como “Emergencia”, utiliza opciones como “Opción1” para “Agendar”, o nombres descriptivos según la acción específica.

if (button.ID === "Opción1") {
    // Lógica para Agendar
}

¿Cómo se envía una ubicación usando la API de WhatsApp?

Enviar la ubicación exacta de un establecimiento a través de un chatbot en WhatsApp mejora la experiencia del usuario al brindar información precisa y útil. Este proceso requiere integrar varios elementos dentro del código.

¿Cuáles son los elementos necesarios para enviar una ubicación?

Latitud y Longitud: Coordinadas geográficas que sitúan el lugar específico.
Nombre: Un título claro de la ubicación, como “Platzi Medellín”.
Dirección: Detalles de la ubicación, incluyendo calle, número y región.

const latitud = 6.2071;
const longitud = -75.574607;
const nombre = "Platzi Medellín";
const direccion = "Carrera 43A, Número 5A-113, El Poblado Medellín, Antioquia";

¿Cómo se construye el servicio de envío de ubicación?

La lógica del servicio utiliza Axios para realizar solicitudes HTTP, manejando errores con bloques try-catch para asegurar que cualquier falla sea fácilmente identificable y solucionada.

async function sendLocationMessage(user, latitud, longitud, nombre, direccion) {
    try {
        await axios.post('https://api.whatsapp.com/send', {
            to: user,
            message_type: 'location',
            location: {
                latitude: latitud,
                longitude: longitud,
                name: nombre,
                address: direccion,
            }
        });
    } catch (error) {
        console.error("Error al enviar la ubicación:", error);
    }
}

¿Cómo completar y probar la integración del menú con WhatsApp?

Una vez que todo está configurado, es crucial conectar la lógica dentro del menú, asegurando que la opción correcta envíe la información precisa al usuario.

Implementación en el menú de opciones

Para la opción específica de ubicación, configura la acción del menú para enviar la información necesaria al usuario:

await sendLocationMessage(user, latitud, longitud, nombre, direccion);

Prueba de la aplicación

Procede a iniciar el bot en WhatsApp y verifica que el flujo funcione correctamente. Al seleccionar "ubicación", se debería mostrar el mapa con las coordenadas proporcionadas. El objetivo es que el usuario pueda visualizar e interactuar con la ubicación desde la aplicación.

La mejora continua de estos servicios y el uso de prácticas recomendadas asegura una experiencia de usuario más fluida y eficiente, algo fundamental para el éxito de las aplicaciones interactivas en plataformas como WhatsApp. ¡Sigue aprendiendo y mejorando tus habilidades de desarrollo!

Israel Castro

student•

7:20 Una opción para pasar el objeto location dentro del objeto data en una sola línea, podría ser así:

async sendLocationMessage(to, location) {
  try {
    await axios ({
      …
      data : {
        …
        type: 'location',
        location
      }
    })
  } catch (e) {
    …
  }
}

Eso si, debes prestar atención en la forma en la haces el llamado:

async sendLocation(to) {
  …

  const location = { latitude, longitude, name, address }

  await whatsappService.sendLocationMessage(to, location);
}

Ulqernesh Karvenae

student•

En este caso como el resto lo que vi al momento de enviar un mensaje lo que cambia es el content, to y type

Teniendo esto en cuenta podes manejar todos los envíos en una misma logica

  async sendMessage({ to, content, type }) {
    try {
      await axios({
        method: 'POST',
        url: `https://graph.facebook.com/${config.API_VERSION}/${config.BUSINESS_PHONE}/messages`,
        headers: {
          Authorization: `Bearer ${config.API_TOKEN}`,
        },
        data: {
          messaging_product: 'whatsapp',
          to,
          type,
          ...content
        },
      });
    } catch (error) {
      console.error('Error sending message:', error);
    }
  }
```---------------







y en los envios, mandas esos datos que cambian








```js
async sendLocation({ to }) {
    const latitude = 6.2071694;
    const longitude = -75.574607;
    const name = "Medellin z3";
    const address = "Cra 43A #5A - 113, El Poblado, Medellín Antioquia";

    const locationMessage = {
      location: {
        latitude,
        longitude,
        name,
        address,
      },
    };
    await whatsappService.sendMessage({ to, content: locationMessage, type: g.TYPE_MESSAGE.LOCATION });
  }

ANDRES ALFONSO MIRA MEJIA

student•

✅

Daiana Isabel Gamez Vivas

student•

Ya lo había hecho pero de forma ligeramente diferente, agregue el caso en sendMediaMessage:

//Enviar Mensajes Multimedia y mapa
    async sendMediaMessage(to, type, mediaUrl, caption, filename, latitude, longitude, name, address){
        try{
            const mediaObject ={};

            //identificar tipo de msg
            switch(type){
                case "image":
                    mediaObject.image = {link: mediaUrl, caption: caption}
                    break;
                case "audio":  
                    mediaObject.audio = {link:mediaUrl}
                    break;
                case "video":
                    mediaObject.video = {link: mediaUrl}
                    break;
                case "document":
                    mediaObject.document = {link: mediaUrl, caption: caption, filename: filename}
                    break;
                case "location":
                    mediaObject.location = {latitude: latitude, longitude: longitude, name: name, address: address}
                    break;
                default:
                    throw new Error ("Not soported media type")
                    break;
            }

            const mensaje = await axios({
                method: 'POST',
                url: `https://graph.facebook.com/${config.API_VERSION}/${config.BUSINESS_PHONE}/messages`,
                headers: {
                    Authorization: `Bearer ${config.API_TOKEN}`,
                },
                data: {
                    messaging_product: 'whatsapp',
                    to,
                    type: type,
                    ...mediaObject
                },
            });

        }catch(e){
            console.error("Error sending media", e)
        }
    }

//Para usarlo
whatsappService.sendMediaMessage(to, "location", "", "", "", "7.846782", "-72.175128", "Dulce Sorpresa", "Lomas Blancas, 200 metros bajando de la Esguarnac Cordero")

Ricardo Gomez

student•

const location = { latitude, longitude, name, address }