Meta
Desarrolladores

Cómo implementar webhooks desde la Plataforma de WhatsApp Business

Persona con lentes en casa trabajando en una computadora portátil

Los webhooks permiten a los servicios enviar datos de forma sencilla cada vez que sucede algo. Configuras una aplicación o un servidor para recibir mensajes e indicas la dirección al servicio. Cuando se activa un evento en el servicio, simplemente llama al webhook para enviar el mensaje a tu aplicación.

La Plataforma de WhatsApp Business ofrece varias opciones para distintos eventos que puedes integrar en tu aplicación o servicio siempre que estos admitan HTTPS y tengan un certificado SSL válido. De esta forma, puedes automatizar respuestas a mensajes de WhatsApp en tiempo real.

En este artículo, analizaremos maneras de configurar webhooks para que se conecten con WhatsApp. También seguiremos un tutorial que demuestra cómo configurar una aplicación que recibe mensajes y los almacena en una base de datos.

Implementación de webhooks

Empresas de cualquier tamaño pueden aprovechar WhatsApp para entablar conversaciones bidireccionales con sus clientes. Algunos de los casos de uso son el servicio de atención al cliente y marketing.

Los webhooks pueden enviar notificaciones sobre distintos tipos de eventos. Por ejemplo, el webhook de mensajes procesa los eventos de mensajes recibidos. Puedes usar este webhook para filtrar consultas habituales y disminuir el trabajo de los agentes de atención al cliente. Se envían mensajes sencillos al servicio de chatbot para formular una respuesta, mientras que cualquier asunto que no se responda de inmediato, se remite a agentes en tiempo real.

Los eventos de mensajes recibidos también pueden incluir contenido multimedia, si los usuarios envían imágenes, o información de la interacción, si los usuarios hacen clic en un botón para responder un mensaje en lugar de escribir una respuesta.

Ahora que vimos algunos casos de uso de webhooks de WhatsApp, empecemos el tutorial. Analizaremos un caso de uso simple en el que los clientes proporcionan sus opiniones a través de mensajes de WhatsApp. Te mostraremos cómo almacenar estas opiniones en una base de datos para poder analizarlas e identificar temas comunes o la opinión general sobre un producto específico.

Receptor de webhooks Node.js con AWS Lambda

Supón que tu empresa quiere usar la Plataforma de WhatsApp Business para ponerse en contacto con los clientes mediante un mensaje que les solicita que opinen sobre un producto que compraron. Tu empresa quiere que el cliente responda el mensaje con su opinión y almacenarla en una base de datos.

Para ello, crearás una función de AWS Lambda con Node.js y almacenarás los datos en DynamoDB. Usar estas tecnologías proporciona una pila completa sin servidor, lo que elimina la carga de la infraestructura al desarrollar y te permite escalarla o disminuirla automáticamente de acuerdo con la demanda. Esto también ayuda a flexibilizar los precios, ya que solo pagas por lo que usas.

Configura tu aplicación

Primero, inicializa un nuevo proyecto en Node.js. Usar Serverless Framework es una buena opción, ya que simplifica la configuración y la implementación de funciones de AWS Lambda.

Ingresa los siguientes comandos para inicializar el proyecto:

npm init serverless create --template aws-nodejs npm install -s express serverless-http serverless-offline

Una vez inicializado el proyecto, crea un punto de conexión para verificar tu aplicación con la Plataforma de WhatsApp Business. Esto es un requisito al crear tu app en Meta for Developers.

Sustituye el código estándar en handler.js con el siguiente código:

const serverless = require('serverless-http') const express = require('express') const app = express() const token = process.env.TOKEN app.get('/webhooks', (req, res) => { if ( req.query['hub.mode'] == 'subscribe' && req.query['hub.verify_token'] == token ) { res.send(req.query['hub.challenge']); } else { res.sendStatus(400); } }) module.exports.handler = serverless(app);

El punto de conexión es muy sencillo: devuelve el parámetro hub.challenge que el sistema de verificación envía como parámetro de solicitud.

Luego, configura el punto de conexión en el archivo YAML Serverless. Este archivo YAML define las funciones, los puntos de conexión y cualquier recurso que deba crearse al implementar el proyecto en AWS.

Esto simplifica el proceso de implementación y elimina la necesidad de cualquier configuración manual. Agrupa cualquier código y configuraciones de infraestructura adicionales, como la creación de recursos o definiciones de permisos.
Sustituye el código estándar de serverless.yml con el siguiente código:

service: whatsapp-webhooks frameworkVersion: '2' provider: name: aws runtime: nodejs14.x lambdaHashingVersion: 20201221 environment: TOKEN: ${env:APP_TOKEN} plugins: - serverless-offline functions: app: handler: handler.handler events: - http: ANY / - http: 'ANY {proxy+}'

La sección «Plugins» incluye Serverless Offline, que emula AWS Lambda y el gateway de la API para que puedas probar el punto de conexión localmente antes de implementarlo en AWS.

La sección «Functions» define la ubicación del controlador del punto de conexión y define qué eventos HTTP lo activan. Para simplificar, configura el controlador para que responda a cualquier evento.

La sección «Provider» incluye la variable de entorno TOKEN. Este token secreto se requiere para enviar el mensaje de verificación de Meta for Developers.

Para definir el token, explora una variable de entorno con el nombre «APP_TOKEN» en tu terminal. Por ejemplo, usa el siguiente comando:

export APP_TOKEN=testtoken

Cuando se haya implementado el servicio, la variable TOKEN tomará el valor de la variable APP_TOKEN local y quedará a disposición de la función Lambda en AWS.

Prueba tu aplicación

Ahora que tu proyecto está configurado, prueba la función localmente.

Usa el siguiente comando para ejecutar el proyecto en modo sin conexión:

serverless offline

Cuando la aplicación esté en funcionamiento, ejecuta el siguiente comando en otra ventana, ya que la aplicación controlará la ventana actual. Asegúrate de sustituir el valor de TOKEN con el valor del token que definiste anteriormente:

curl -v "http://localhost:3000/dev/webhooks?hub.mode=subscribe&hub.verify_token=testtoken"

Las respuestas de estado 204 y la salida deberían ser similares a esta:

* Trying 127.0.0.1... * TCP_NODELAY set * Connected to localhost (127.0.0.1) port 3000 (#0) > GET /dev/webhooks?hub.mode=subscribe&hub.verify_token=testtoken HTTP/1.1 > Host: localhost:3000 > User-Agent: curl/7.64.1 > Accept: */* > < HTTP/1.1 204 No Content < x-powered-by: Express < content-type: application/json; charset=utf-8 < cache-control: no-cache < Date: Thu, 21 Apr 2022 16:28:24 GMT < Connection: keep-alive < Keep-Alive: timeout=5 < * Connection #0 to host localhost left intact * Closing connection 0

Luego, implementa tu aplicación en AWS ejecutando el siguiente comando:

serverless deploy

AWS devolverá el punto de conexión a la terminal cuando se termine de implementar la aplicación.

Configura el webhook

Luego, comienza el proceso de verificación creando una app de Facebook.

En el panel de navegación izquierdo del panel de apps, selecciona PRODUCTOS. Luego, selecciona Webhooks en las opciones. En el menú desplegable, selecciona Cuenta de WhatsApp Business.

Configurar webhooks

Luego, ingresa la URL de la devolución de llamada con el punto de conexión proporcionado por AWS. El token debería ser el mismo que usaste en el archivo serverless.yml.

Editar suscripción de la cuenta de WhatsApp Business

Cuando se haya verificado la aplicación, podrás ver todos los distintos campos de objetos a los que se puede suscribir el webhook. Cada uno ofrece la opción de probarlo y suscribirse.

Editar suscripción de la cuenta de WhatsApp Business

El campo que nos interesa es el de mensajes, que envía mensajes al punto de conexión cuando los recibe. Cada uno de los webhooks envía una solicitud POST a la misma URL de devolución de llamada que proporcionaste al verificar la aplicación.

Luego, escribe el código para recuperar las solicitudes POST y almacenar los datos en DynamoDB.

Agrega el siguiente código al archivo handler.js:

const AWS = require('aws-sdk') const dynamoDb = new AWS.DynamoDB.DocumentClient(); app.post('/webhooks', (req, res) => { const body = JSON.parse(req.body) if(body.field !== 'messages'){ // not from the messages webhook so dont process return res.sendStatus(400) } const reviews = body.value.messages.map((message)=>{ const reviewInfo = { TableName: process.env.REVIEW_TABLE, Item: { phonenumber: message.from, review: message.text.body } } return dynamoDb.put(reviewInfo).promise() }) // return 200 code once all reviews have been written to dynamoDB return Promise.all(reviews).then((data) => res.sendStatus(200)); })

Este código comienza por instalar el paquete npm AWS SDK para que puedas usar el cliente de documentos de DynamoDB. Luego, la función verifica que la solicitud se haya enviado a través del webhook de mensajes. En ese caso, la función crea un elemento "Review" que incluye la opinión y el número de teléfono del cliente (proporcionado por el webhook). El webhook envía cada mensaje como una matriz en el campo mensajes, por lo que puede enviar varios al mismo tiempo. La función recorre los mensajes y crea una matriz de promesas PUT de DynamoDB que pueden ejecutarse después para almacenar los datos.

Configurar DynamoDB

Este ejemplo sencillo obtiene los datos y los almacena sin modificarlos como registro de DynamoDB. En este punto, puedes agregar una funcionalidad para analizar el mensaje según lo requieras con el fin de implementar más lógicas comerciales.

Para ello, debes proporcionar algunos datos de configuración para DynamoDB en la configuración de Serverless. Ahora, el archivo serverless.yml completo debería verse así:

service: whatsapp-webhooks frameworkVersion: '2' provider: name: aws runtime: nodejs14.x lambdaHashingVersion: 20201221 region: eu-west-1 iamRoleStatements: - Effect: "Allow" Action: - dynamodb:Query - dynamodb:Scan - dynamodb:GetItem - dynamodb:PutItem - dynamodb:UpdateItem - dynamodb:DeleteItem Resource: arn:aws:dynamodb:us-east-1:111111111111:table/${self:provider.environment.REVIEW_TABLE} environment: TOKEN: ${env:APP_TOKEN} REVIEW_TABLE: reviews plugins: - serverless-offline functions: app: handler: handler.handler events: - http: ANY / - http: 'ANY {proxy+}' resources: Resources: ReviewsTable: Type: 'AWS::DynamoDB::Table' Properties: TableName: ${self:provider.environment.REVIEW_TABLE} AttributeDefinitions: - AttributeName: phonenumber AttributeType: S KeySchema: - AttributeName: phonenumber KeyType: HASH ProvisionedThroughput: ReadCapacityUnits: 1 WriteCapacityUnits: 1

El archivo ahora contiene instrucciones de permisos administrativos adicionales en la sección "Provider" que permiten a la función de Lambda leer y escribir datos en la tabla de DynamoDB. El archivo también contiene una sección "Resources" que configura la tabla de DynamoDB, la clave de la tabla y la capacidad de rendimiento aprovisionada. Durante las pruebas, la asignación de unidades de capacidad se establece en un valor bajo. Pero esto puede configurarse durante producción para escalar según la demanda.

Prueba la aplicación

Ahora, cuando implementes tu aplicación Serverless, la tabla de DynamoDB se creará y configurará automáticamente, y la función de Lambda tendrá todos los permisos que necesita para escribir datos en la tabla. Esto vuelve a destacar la efectividad de usar Serverless Framework, ya que todos los requisitos de infraestructura se resuelven con una configuración sencilla.

Una vez que hayas realizado la implementación, regresa a Meta for Developers y selecciona el botón Probar en la fila del campo de mensajes. Se abrirá una nueva ventana de ejemplo del campo que se ve así:

Ejemplo del campo de mensajes

Este ejemplo muestra el formato de la carga que se envía cada vez que un mensaje se envía a la cuenta. Selecciona Enviar a mi servidor y, luego, ve a DynamoDB en la consola de AWS para ver el nuevo registro con una revisión que contenga el texto de prueba:

Ventana de elementos devueltos

Conclusión

Esta fue solo una simple aplicación de prueba para demostrar la facilidad de configurar un receptor de webhooks con Serverless Framework. Al usar tecnologías sin servidor como AWS Lambda y DynamoDB, esta aplicación puede escalarse de un simple prototipo a un servicio listo para producción capaz de manejar un gran volumen de rendimiento.

Puedes usar webhooks en la Plataforma de WhatsApp Business para automatizar la administración de cuentas de clientes y la interacción con estas. La documentación oficial de webhooks de WhatsApp brinda información más completa sobre cómo usar webhooks en un sistema de producción. Ten en cuenta que la documentación de webhooks omite el campo [messages]. Usa la referencia sobre webhooks para ver una lista completa de los campos disponibles para suscripción.

Al desarrollar receptores de webhooks, es importante pensar en el costo y la escalabilidad. La solución debe poder manejar picos de demanda generados por un gran volumen de clientes que se pongan en contacto contigo por WhatsApp al mismo tiempo. En otros momentos, la demanda podría caer cuando los clientes no se contacten contigo, por ejemplo, durante la noche, por lo que es ideal que disminuya la escala de la solución para reducir costos. También debería aumentar la escala de la solución a medida que crece la base de clientes.

Es clave elegir las herramientas apropiadas. Serverless Framework, AWS Lambda y DynamoDB eran adecuadas para este receptor de webhooks, pero tienes que analizar las necesidades específicas de tu empresa. La solución en este artículo cumple las demandas de escalabilidad variable, se adapta para mantener bajos los costos durante períodos de poco uso y elimina la necesidad de administrar la infraestructura. Esto facilita la implementación y la administración para los desarrolladores.

Consulta la guía oficial de configuración de webhooks de WhatsApp para obtener información más detallada sobre cómo usar webhooks en tu aplicación.

Publicaciones relacionadas

Usamos cookies para personalizar el contenido, adaptar y evaluar los anuncios, y ofrecer una experiencia más segura. Al hacer clic o navegar en el sitio, aceptas que recopilemos información dentro y fuera de Meta mediante cookies. Obtén más información, incluida la relativa a los controles disponibles, aquí: [privacidad]