Edge Functions para notificaciones automáticas

Una arquitectura profesional de notificaciones no depende del frontend: se orquesta desde el backend con eventos automáticos. Aquí verás cómo usar Edge Functions y Realtime de Supabase para disparar notificaciones cuando hay un like o un comentario, con UI en vivo y control desde la base de datos.

¿Cómo automatizar notificaciones con Supabase Edge Functions y Realtime?

Para que las notificaciones sean confiables, la base de datos debe disparar un webhook a una edge function en cada like o comentario. Esa función recibe quién actuó, sobre qué post, quién es el dueño del post y, con eso, registra y publica la notificación en tiempo real.

• Flujo robusto: la BD dispara el evento y la función decide acciones como enviar correo, guardar notificación o mostrar un toast.
• UI en vivo: una campanita muestra burbujas y lista de notificaciones en tiempo real.
• Componentes clave: tabla de notificaciones, edge function y despliegue en Supabase.

¿Qué tabla de notificaciones necesitas?

Se crea desde el editor SQL de Supabase. La tabla incluye:

• ID primario e índice para escalabilidad.
• Campos: user_id (FK a auth.users), actor_id, type (like/comment), post_id, message, created_at.
• Publicación a Supabase Realtime activada para recibir cambios en vivo.

Beneficio: al activar Realtime en la tabla, la UI se puede suscribir y reaccionar a inserts/updates sin trabajo extra.

¿Cómo crear y desplegar la edge function en Deno?

Las edge functions corren en Deno, se invocan por HTTP y Supabase da plantillas (p. ej., webhook con Stripe, servidor WebSocket). Aquí el foco es una función que:

• Expone CORS y maneja método HTTP OPTIONS y POST.
• Valida campos requeridos: type, post_id, actor_id, post_owner_id y, si aplica, message.
• Evita notificar si el actor es el dueño del post.
• Consulta el perfil del actor para componer el mensaje.
• Inserta en la tabla notifications y responde con manejo de errores.
• Se nombra como "send notification" y se despliega para obtener una URL, métricas e invocations.

Fragmento ilustrativo (Deno/TypeScript):

// Estructura de la edge function (conceptual)
// Deno.serve(async (req) => {
//   if (req.method === 'OPTIONS') return corsResponse();
//   if (req.method !== 'POST') return error(405);
//
//   const { type, post_id, actor_id, post_owner_id, message } = await req.json();
//   // Validar requeridos y evitar self-notify.
//   // Buscar actor username.
//   // Insert en 'notifications' con type, post_id, user_id (post_owner_id), actor_id, message.
//   // Responder con éxito o error.
// });

Tras desplegar, el panel muestra la URL, estadísticas por rango (15 min, 1 h, 3 h, 1 día), invocations y logs para depuración.

¿Cómo invocarla desde el frontend en like y comment?

En la página principal (app/page.tsx) existen dos manejadores: handle like y handle comment. La idea es invocar la función solo si no hay error y si el usuario que actúa no es el dueño del post.

• Para like: enviar body con type: "like", post_id, actor_id, post_owner_id.
• Para comment: enviar body con type: "comment", post_id, actor_id, post_owner_id y message.

Fragmentos ilustrativos del payload:

{
  "type": "like",
  "post_id": "...",
  "actor_id": "...",
  "post_owner_id": "..."
}

{
  "type": "comment",
  "post_id": "...",
  "actor_id": "...",
  "post_owner_id": "...",
  "message": "Texto del comentario"
}

¿Cómo se muestran las notificaciones en tiempo real en la UI?

Se añadió un componente de campanita de notificaciones. Al suscribirse a Realtime, reacciona a cambios en la tabla notifications y muestra una burbuja cuando hay items con read: false del usuario logueado.

• Suscripción a un canal de cambios de Postgres en la tabla notifications.
• Filtro por user_id del usuario actual y por read === false.
• Inserta/actualiza la lista en memoria para render en vivo.
• Acción de "marcar como leídas" que cambia read a true y limpia la burbuja.

La verificación se hace en dos frentes: en el panel de funciones (invocations POST correctas) y en las tablas (se insertan el comentario en comments y la notificación en notifications con el mensaje mostrado en la UI).

¿Qué conceptos y habilidades clave se practican?

Dominas un patrón de eventos de producción: la base de datos reacciona y una función decide qué hacer con la señal. Estos son los puntos finos que refuerzas:

• Edge Functions en Deno: funciones server-side con CORS, métodos HTTP y despliegue administrado.
• Supabase Realtime: publicación en tablas y suscripción a canales de cambios de Postgres.
• Webhook desde la BD: la BD origina el evento, no el frontend.
• Validación de payload: campos type, post_id, actor_id, post_owner_id y message cuando aplica.
• Prevención de auto-notificación: no avisar si el actor es el dueño del post.
• Consulta de perfil: obtener actor username para construir el message.
• Inserción con manejo de errores: insert + select single en notifications.
• Índices e incrementalidad: index para escalar la tabla y mantener rendimiento.
• Panel de funciones: URL pública, métricas por ventana de tiempo, invocations y logs.
• UI reactiva: campanita que lee read: false, muestra burbujas y permite marcar como leídas.
• Manejadores de eventos: handle like y handle comment invocan "send notification" tras éxito.

¿Quieres que revisemos variantes como enviar email o mostrar toast además de la notificación interna? Cuéntame en comentarios qué flujo te gustaría implementar.