Enviar mensajes de WhatsApp multimedia desde una aplicación

Requisitos previos

Para seguir y entender el tutorial, debes tener un conocimiento básico de las aplicaciones Node.js y Express.js. Además, asegúrate de haber completado los pasos básicos en nuestra guía de primeros pasos en la documentación de WhatsApp. Si eres un proveedor de soluciones comerciales (BSP), sigue nuestra guía para BSP y asegúrate de que tu aplicación apruebe el proceso de revisión.

Necesitarás tres cosas:

• Un identificador de WhatsApp Business
• Un identificador de número de teléfono o identificador de teléfono de prueba
• Tu token de usuario del sistema con los siguientes permisos requeridos:

(whatsapp_business_management, whatsapp_business_messaging y business_management)

Si ya quieres ver la aplicación final, puedes consultar el código final del proyecto.

Crear una aplicación básica

Para esta demostración, usarás este servidor esqueleto básico Node.js y Express.js junto con las dependencias necesarias y las funciones esqueleto ya creadas.

El tutorial también incluye el paquete Request para llevar a cabo solicitudes HTTP cuando la aplicación se comunique con una API. Hay dos variables en el archivo .env de la aplicación:

META_AUTH_TOKEN y MESSAGING_PRODUCT

Tras configurar el servidor, puedes empezar a crear la API.

Sube una imagen para el mensaje multimedia

Antes de poder enviar mensajes basados en archivos multimedia por WhatsApp, debes subir el archivo al que WhatsApp accederá más adelante. Los archivos multimedia subidos a WhatsApp están disponibles durante 30 días a menos que los elimines.

Debes crear una nueva ruta POST en el archivo routes/media.js que puedes usar para administrar tu archivo multimedia. De acuerdo con la documentación, debes pasar cuatro elementos:

• El identificador del número de teléfono, que pasas como parámetro.
• El archivo que quieres subir, que pasas como dato de formulario.
• Tipo de archivo subido, que generas con la función auxiliar.
• Producto de mensajes, que obtienes del archivo .env.

Sin embargo, solo necesitas el identificador del número de teléfono y el archivo cuando creas una llamada API. Los campos restantes los generas con funciones auxiliares.

Usas el paquete npm Formidable para procesar los datos de formularios. Ten en cuenta que la API de WhatsApp Business tiene algunas limitaciones de tipos y tamaños específicos. Puedes consultarlas en la sección de tipos de archivos multimedia admitidos al final de la documentación de medios. También hay dos funciones auxiliares en el archivo helper/validations.js del proyecto esqueleto para lidiar con esto.

Para subir una imagen tienes que iniciar un nuevo formulario Formidable. Con el objeto Form, analiza el archivo y realiza las validaciones con las funciones auxiliares. Luego, realiza una solicitud POST con los datos del formulario y agrega un token de autenticación válido usando la solicitud.

exports.uploadMedia = async (req, res) => { let form = new formidable.IncomingForm(); form.keepExtensions = true; form.parse(req, async (err, fields, files) => { if (err) { return res.status(400).json({ error: "No se pudo subir el contenido multimedia", }); } if (!files.file) { return res.status(400).json({ error: "Se requiere un archivo multimedia", }); } let isFileValidSize = validateMediaSize(files.file.size, files.file.type); if (!isFileValidSize) { return res.status(400).json({ error: `El tamaño del archivo multimedia debe ser inferior a ${mediaLimits( files.file.type )}`, }); } request.post( { url: `https://graph.facebook.com/v13.0/${req.params.id}/media`, formData: { file: { value: fs.createReadStream(files.file.path), options: { filename: files.file.name, contentType: files.file.type, }, }, type: files.file.type, messaging_product: process.env.MESSAGING_PRODUCT, }, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "multipart/form-data", }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); }); };

Tras agregar esta función, puedes probar la ruta con Postman. Así se debería ver el objeto final en la interfaz de Postman:

Cuando haces clic en Send, deberías obtener el identificador del archivo multimedia subido como respuesta de la API.

Toma nota del identificador del archivo multimedia subido, ya que lo usaremos más adelante. Si tu aplicación tendrá una capa de datos, puedes guardar este identificador en la base de datos para usarlo después. O bien, tu aplicación frontend puede almacenar el identificador temporalmente en las variables o el estado.

Enviar un mensaje multimedia

Ahora, usa el identificador del archivo multimedia que obtuviste en el paso anterior para enviar un mensaje multimedia al cliente. De acuerdo con la referencia de la API, debes enviar cinco elementos a la API para enviar el mensaje multimedia al cliente correctamente:

• Identificador del número de teléfono pasado como parámetro
• Número de teléfono del cliente enviado en el cuerpo de la solicitud
• Tipo de archivo multimedia enviado en el cuerpo de la solicitud
• Identificador del archivo multimedia enviado en el cuerpo de la solicitud
• Tipo de destinatario, «Individual» en este caso

La función se ve así:

exports.sendMediaMessage = async (req, res) => { const { id, to, type } = req.body; if (!id || !to || !type) { return res.status(400).json({ error: "Campos obligatorios: to, type and id", }); } request.post( { url: `https://graph.facebook.com/v13.0/${req.params.id}/messages`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: `{ "messaging_product": "whatsapp", "recipient_type": "individual", "to": "${to}", "type": "${type}", "${type}": { "id": "${id}", }, }`, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };

Si ejecutas este punto de conexión en Postman con los detalles y los argumentos necesarios, se ve así:

Después de enviarlo, ves la siguiente salida en Postman, que incluye también el identificador del mensaje.

Ver elementos multimedia

Obtener la URL del archivo multimedia puede hacerse fácilmente con la operación GET y el identificador del archivo recuperado o almacenado.

exports.getMediaUrl = async (req, res) => { request.get( { url: `https://graph.facebook.com/v13.0/${req.params.id}`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };

Así se ve la solicitud y la respuesta en Postman tras obtener el elemento multimedia correctamente.

Eliminar archivos multimedia

Para eliminar archivos multimedia, usarás el mismo punto de conexión de la API de WhatsApp para solicitudes de archivos multimedia, pero con la operación DELETE.

exports.deleteMedia = async (req, res) => { request.delete( { url: `https://graph.facebook.com/v13.0/${req.params.id}`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };

Tras eliminar el archivo multimedia correctamente, la API envía la siguiente respuesta:

Obtén más información sobre la Plataforma de WhatsApp Business

Este tutorial es tan solo un ejemplo de lo que puedes hacer con la Plataforma de WhatsApp Business. Cuando planifiques tu próximo proyecto, consulta la documentación de la Plataforma de WhatsApp Business para conocer en detalle sus funcionalidades y limitaciones respecto a archivos multimedia.

Asegúrate de tener en cuenta lo siguiente:

• Los archivos multimedia subidos solo están disponibles durante 30 días
• Las URL de descarga generadas solo están disponibles durante cinco minutos
• Siempre guarda el identificador del archivo multimedia cuando lo subas

La siguiente es una lista de los tipos de archivos multimedia que se admiten actualmente. Consulta los tipos de archivos multimedia admitidos para obtener más información.

• Audio (<16 MB) – ACC, MP4, MPEG, AMR y OGG
• Documentos (<100 MB) – texto, PDF, Office y Open Office
• Imágenes (<5 MB) – JPEG y PNG
• Videos (<16 MB) – MP4 y 3GP
• Stickers (<100 kB) – WebP

Conclusión

LaPlataforma de WhatsApp Business te permite interactuar con tus clientes con mensajes multimedia enriquecidos. Desarrollar una aplicación basada en la API te permite recopilar y crear una biblioteca multimedia que los usuarios pueden usar para enviar mensajes de forma coherente y eficiente, lo que disminuye la necesidad de realizar tareas repetitivas.

Consulta el portal para desarrolladores de WhatsApp para empezar a desarrollar tu aplicación hoy mismo y conocer las demás opciones disponibles.