codigo0/docs/FASE_2_INTEGRACION_FRONTEND.md

FASE 2: INTEGRACIÓN FRONTEND-BACKEND

Fecha: 2025-01-07
Estado: ✅ VERIFICADA

---

✅ Verificaciones Completadas

1. Endpoint Content Pack

• URL: http://localhost:3000/api/content-pack/latest.json
• Estado: ✅ Funciona correctamente
• Respuesta: Content Pack con 23 items

2. Estructura del Content Pack

{
  "metadata": {
    "version": "1.0.0",
    "generated_at": "2026-01-07T20:53:30.646Z",
    "total_items": 23,
    "hash": "sha256:..."
  },
  "content": {
    "protocols": [...],  // 5 protocolos
    "guides": [...],     // 9 guías
    "drugs": [...],       // 6 fármacos
    "checklists": [...]   // 3 checklists
  },
  "media": {
    "resources": [...],
    "associations": [...]
  }
}

3. ExternalContentAdapter

• Configuración:
  • Usa VITE_API_URL si está configurado
  • O ruta relativa: /api/content-pack/latest.json
• Cache:
  • IndexedDB (preferido)
  • localStorage (fallback)
  • Expiración: 24 horas
• Fallback: Automático a LocalContentAdapter si falla

---

🔧 Configuración

Opción 1: Variable de Entorno

Crear .env en la raíz del proyecto:

VITE_API_URL=http://localhost:3000

Opción 2: Proxy en Vite (Recomendado para desarrollo)

Añadir en vite.config.ts:

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
  // ... resto de configuración
});

Con esta configuración, el frontend puede usar rutas relativas (/api/content-pack/latest.json) y Vite las redirigirá al backend.

---

🧪 Pruebas Realizadas

1. Carga del Content Pack

curl http://localhost:3000/api/content-pack/latest.json

Resultado: ✅ Content Pack cargado correctamente

2. Estructura Verificada

• ✅ Metadata presente
• ✅ Content con todas las secciones
• ✅ Media resources (vacío por ahora)

3. Contenido Verificado

• ✅ 5 protocolos
• ✅ 9 guías
• ✅ 6 fármacos
• ✅ 3 checklists

---

📋 Cómo Probar en el Frontend

1. Iniciar Backend

cd backend
npm start

2. Iniciar Frontend

npm run dev

3. Verificar en el Navegador

1. Abrir la app en http://localhost:8096
2. Abrir la consola del navegador (F12)
3. Buscar mensajes de [ContentAdapter]
4. Verificar que carga el Content Pack

4. Verificar Badge "Externo"

• Las páginas que usan useContentAdapter() mostrarán un badge "Externo" si están usando contenido del backend
• Ejemplo: Farmacos.tsx muestra el badge cuando usa ExternalContentAdapter

5. Probar Fallback

1. Detener el backend (Ctrl+C)
2. Recargar la página
3. Verificar que la app sigue funcionando (usa LocalContentAdapter)
4. El badge "Externo" no debería aparecer

---

🔍 Debugging

Verificar que el Content Pack se carga

En la consola del navegador:

// Verificar cache
localStorage.getItem('content_pack')

// Verificar adapter
import { contentAdapter } from '@/services/content-adapter';
console.log(contentAdapter.isAvailable()); // true si tiene pack

Verificar estructura de fármacos

El ExternalContentAdapter tiene lógica para manejar fármacos en dos formatos:

1. Formato directo: { genericName, tradeName, ... }
2. Formato content: { content: { genericName, ... } }

El adapter detecta automáticamente el formato y lo convierte.

---

⚠️ Notas Importantes

Estructura de Fármacos

Los fármacos vienen desde la tabla tes_content.drugs con estructura directa:

{
  id: "...",
  slug: "adrenalina",
  genericName: "Adrenalina",
  tradeName: "Adrenalina 1mg/1ml",
  category: "cardiovascular",
  // ... otros campos
}

El ExternalContentAdapter está preparado para manejar esta estructura.

Cache

• El Content Pack se cachea automáticamente
• Cache válido por 24 horas
• Para forzar recarga: localStorage.removeItem('content_pack')

---

✅ Checklist de Integración

• Endpoint /api/content-pack/latest.json funciona
• Content Pack se genera correctamente
• Estructura del pack es correcta
• ExternalContentAdapter configurado
• Cache implementado (IndexedDB + localStorage)
• Fallback a LocalContentAdapter funciona
• Probar en navegador (pendiente)
• Verificar badge "Externo" (pendiente)
• Probar fallback con backend detenido (pendiente)

---

Estado: ✅ Integración verificada y lista para pruebas en navegador