Conectar tu aplicación con la API de WhatsApp requiere un paso fundamental: configurar un webhook que permita la comunicación bidireccional entre tu servidor y los servicios de Meta. A continuación, se explica paso a paso cómo lograrlo usando Node.js, Express y herramientas como port forwarding en Visual Studio Code.
¿Cómo preparar el servidor con el código base de Meta?
Meta proporciona un código de ejemplo en su documentación que sirve como punto de partida para construir el webhook. Este código utiliza Express como servidor web y Axios para realizar peticiones HTTP hacia la API de WhatsApp [0:30]. La lógica inicial es sencilla: cada vez que envías un mensaje al bot, este replica exactamente el mismo texto a modo de eco.
Para comenzar, se crea el archivo server.js en la raíz del proyecto con el comando touch server.js y se pega el código proporcionado por Meta [1:30]. Sin embargo, este código necesita ajustes para trabajar correctamente con variables de entorno y mantener buenas prácticas de seguridad.
¿Por qué usar variables de entorno con dotenv?
El paquete dotenv permite cargar configuraciones sensibles desde un archivo .env sin exponerlas en el código fuente [2:08]. Se importa con import 'dotenv/config' y se crea el archivo .env con las siguientes variables:
WEBHOOK_VERIFY_TOKEN: palabra secreta que solo tú y Meta conocen para validar la conexión.API_TOKEN: token de acceso para autenticarte con la API de WhatsApp.PORT: puerto del servidor, en este caso 3000.BUSINESS_PHONE: identificador del número de teléfono de negocio.API_VERSION: versión de la API que se obtiene del panel de desarrolladores.
Es crucial agregar el archivo .env al .gitignore para que las credenciales nunca lleguen al repositorio [2:50]. Para que otros desarrolladores sepan qué variables necesitan, se crea un archivo .env.example con la misma estructura pero sin valores reales.
¿Qué cambios se hacen al código de ejemplo?
El código original de Meta tiene la versión de la API hardcodeada como v18. Se reemplaza por la variable API_VERSION para controlarla dinámicamente [4:07]. También se actualizan las referencias en las peticiones de Axios, cambiando los valores fijos por las variables de entorno correspondientes como BUSINESS_PHONE y API_TOKEN en el header de autorización [4:30].
¿Cómo configurar nodemon y resolver el error de módulos?
Para desarrollo, se configura nodemon creando un archivo nodemon.json con las siguientes opciones [6:15]:
watch: carpeta src que nodemon va a monitorear.ext: extensiones .json y .js.ignore: carpetas como node_modules y public.exec: comando node server.js que se ejecuta al detectar cambios.
Al ejecutar npm start, puede aparecer un error relacionado con el sistema de módulos de JavaScript [7:30]. Esto ocurre porque el código usa la sintaxis import/export (ES Modules) en lugar de require (CommonJS). La solución es agregar "type": "module" en el package.json [8:00].
¿Cómo exponer el servidor local a Internet con port forwarding?
Una vez que el servidor corre en localhost:3000, necesita ser accesible desde Internet para que Meta pueda comunicarse con él. Visual Studio Code ofrece la funcionalidad de port forwarding [8:40], que permite enviar un puerto local a una URL pública.
En la pestaña de Puertos del editor, se selecciona el puerto 3000 y se cambia la visibilidad a pública [9:50]. Esto genera una URL accesible que se usa para configurar el webhook en el panel de Meta. Es importante recordar que esta solución es exclusivamente para modo desarrollo y no debe usarse en producción [9:20].
¿Cómo conectar el webhook con Meta y enviar el primer mensaje?
En el panel de Meta, dentro de la sección de webhooks, se pega la URL pública generada agregando /webhook al final. Se ingresa el verify token que coincide con la variable WEBHOOK_VERIFY_TOKEN del archivo .env [10:50]. Al presionar Verify and Save, Meta valida la conexión.
Después de verificar, se habilitan tres suscripciones clave [11:25]:
- Messages: para recibir mensajes entrantes.
- Templates: para gestionar plantillas.
- Templates quality update: para actualizaciones de calidad.
Si al enviar un mensaje aparece un error 401 indicando que la sesión ha expirado [12:05], se debe generar un nuevo access token desde el panel de Meta en API Setup y actualizar la variable API_TOKEN en el archivo .env.
Tras reiniciar el servidor y enviar "hola mundo" desde WhatsApp, el bot replica el mensaje confirmando que la conexión funciona correctamente [12:55]. Estos mensajes solo funcionan con los números registrados en la configuración de prueba.
¿Ya lograste que tu bot respondiera? Modifica la lógica para que el mensaje de respuesta sea diferente al eco y comparte tu resultado en los comentarios.
