MetaHook - WhatsApp Webhook Handler

Este proyecto es una solución completa para manejar webhooks de WhatsApp (Meta API) utilizando Supabase como backend (Base de datos y Edge Functions) y una interfaz de administración construida con React, Vite y Tailwind CSS.

Características

• Recepción de Webhooks: Valida y procesa eventos entrantes de WhatsApp Business API.
• Gestión de Números: Configura múltiples números de teléfono con sus propios tokens de verificación y URLs de destino.
• Dashboard en Tiempo Real: Visualiza eventos, estados de entrega y estadísticas.
• Reintento de Eventos: Mecanismo para reenviar eventos fallidos.
• Arquitectura Serverless: Utiliza Supabase Edge Functions para escalabilidad.

Tecnologías

• Frontend: React, TypeScript, Vite, Tailwind CSS, shadcn/ui.
• Backend: Supabase (PostgreSQL, Edge Functions).
• Infraestructura: Docker (opcional para despliegue del frontend).

Prerrequisitos

• Node.js (v18+)
• NPM o Bun
• Docker (opcional)
• Cuenta en Supabase
• Supabase CLI (npm install -g supabase)

Configuración del Proyecto

1. Clonar el repositorio

git clone <tu-repositorio>
cd metaflow-whisper

2. Configuración de Supabase

1. Crea un nuevo proyecto en Supabase.
2. Obtén las credenciales de tu proyecto (Project URL, Anon Key, Service Role Key).
3. Inicia sesión en Supabase CLI:

   supabase login

4. Vincula tu proyecto local con el proyecto remoto:

   supabase link --project-ref <tu-project-id>

5. Aplica las migraciones de base de datos:

   supabase db push

   Esto creará las tablas necesarias: number_configs, webhook_events, edge_stats y las funciones RPC.

3. Configuración de Variables de Entorno (Frontend)

Copia el archivo de ejemplo y configura tus credenciales:

cp .env.example .env

Edita .env con tus valores:

VITE_SUPABASE_URL=https://<tu-project-id>.supabase.co
VITE_SUPABASE_ANON_KEY=<tu-anon-key>
VITE_SUPABASE_PUBLISHABLE_KEY=<tu-publishable-key>
VITE_SUPABASE_PROJECT_ID=<tu-project-id>

4. Despliegue de Edge Functions

Las funciones metawebhook y resend-webhook manejan la lógica del servidor.

1. Despliega las funciones:

   supabase functions deploy metawebhook
   supabase functions deploy resend-webhook

2. Configura los secretos de las funciones (necesarios para que funcionen en producción):

   supabase secrets set SUPABASE_URL=https://<tu-project-id>.supabase.co SUPABASE_SERVICE_ROLE_KEY=<tu-service-role-key>

5. Ejecución Local (Frontend)

Instala las dependencias y corre el servidor de desarrollo:

npm install
npm run dev

Abre http://localhost:8080 en tu navegador.

Despliegue con Docker

Para desplegar la aplicación frontend usando Docker:

1. Construye la imagen pasando las variables de entorno como argumentos de construcción (build args):

   docker build \
     --build-arg VITE_SUPABASE_URL=https://<tu-project-id>.supabase.co \
     --build-arg VITE_SUPABASE_PUBLISHABLE_KEY=<tu-publishable-key> \
     --build-arg VITE_SUPABASE_PROJECT_ID=<tu-project-id> \
     -t metahook-frontend .

2. Ejecuta el contenedor:

   docker run -d -p 80:80 metahook-frontend

Estructura de Base de Datos

• number_configs: Almacena la configuración de cada número de teléfono (token de verificación, URL de webhook destino).
• webhook_events: Log de todos los eventos recibidos y su estado de procesamiento.
• edge_stats: Estadísticas de uso de las funciones Edge.

Uso

1. Configura un número en la tabla number_configs (puedes hacerlo desde el dashboard de Supabase o mediante SQL).
2. Configura el Webhook en tu App de Meta usando la URL de la función metawebhook y el token que definiste.
   • URL: https://<project-ref>.supabase.co/functions/v1/metawebhook
   • Token: El que hayas puesto en verify_token en number_configs.
3. Los eventos aparecerán en el Dashboard en tiempo real.

Licencia

MIT