ProyectoGrupal/doli-front/presentacion/guion_presentacion.md

Guion de presentación — Frontend (doli-front)

Tiempo estimado de esta parte: ~15 min dentro de los 50 min totales del equipo.

---

1. Introducción al frontend (2 min)

• Qué es doli-front: SPA que consume el BFF para mostrar y gestionar los datos de Dolibarr.
• Decisión técnica: Vanilla JS sin frameworks → sin dependencias de React/Vue, control total del DOM.
• Herramienta de build: Vite 7 — HMR instantáneo en desarrollo, build optimizado con ES Modules.

---

2. Arquitectura interna (3 min)

Mostrar la estructura de carpetas en el IDE:

src/
├── main.js          ← punto de entrada, monta layout
├── router.js        ← escucha hash, carga la página correcta
├── pages/           ← cada página es una función que devuelve un HTMLElement
├── services/        ← apiClient.js centraliza el fetch + JWT
└── components/      ← sidebar, modales reutilizables

Puntos clave a explicar:

• El router es hash-based (#/facturas, #/clientes…) → no necesita servidor con rutas configuradas.
• apiClient.js: adjunta el token JWT automáticamente en cada petición, redirige al login en 401.
• Cada página encapsula su propio estado, listeners y cleanup (sin estado global compartido).

---

3. Demo en vivo — recorrido por las páginas (8 min)

Abrir la app en el navegador y mostrar:

Dashboard

• Gráficas de facturas con Chart.js.
• Métricas en tarjetas (total clientes, facturas pendientes…).

Facturas de proveedores ← parte más completa

• Listar facturas con búsqueda en tiempo real.
• Abrir detalle: ver líneas, importes, estado.
• Cambiar estado: Borrador → Validada → Pagada (botones contextuales).
• Añadir línea a una factura en borrador.
• Registrar un pago (seleccionar tipo, importe, fecha).
• Eliminar factura en borrador con confirmación.

Contactos

• Búsqueda en tiempo real sobre la tabla.
• Ver detalle / editar inline.
• Crear nuevo contacto con selector de empresa.

Configuración

• Toggle tema claro/oscuro (persiste en localStorage).
• Temporizador de expiración del JWT en tiempo real.
• Configurar URL de webhook (Teams/Slack).
• Registro de certificado VeriFactu: selector de archivo .p12 → se convierte a base64 → se envía al BFF.

---

4. Decisiones técnicas destacables (2 min)

• Sin framework: cada página es una función render*() → fácil de leer, sin magia.
• FileReader API: el certificado .p12 se lee en el navegador y se convierte a base64 antes de enviarlo, sin exponer rutas del servidor.
• Asistente de voz: Whisper ejecutándose en local en el navegador con @huggingface/transformers (sin APIs externas de voz).
• Toast notifications: sistema propio ligero sin librerías externas.
• Cleanup de páginas: cada página registra un método cleanup() que el router llama al navegar, evitando memory leaks de intervals/listeners.

---

Capturas recomendadas para incluir en slides

• Captura del dashboard con las gráficas.
• Captura del modal de detalle de factura de proveedor (con líneas y pagos).
• Captura de la sección VeriFactu en ajustes.
• Diagrama simple del flujo: Página → apiClient → BFF.

---

Posibles preguntas del profesor

¿Por qué Vanilla JS y no React? → Para demostrar conocimiento de las APIs del navegador sin abstracciones. El proyecto es de tamaño manejable y no requería el overhead de un framework.

¿Cómo gestionas el estado? → Cada página tiene su propio estado local (variables en el closure). No hay estado global; el router destruye la página anterior antes de montar la nueva.

¿Cómo funciona el JWT? → El BFF devuelve un token al hacer login. El frontend lo guarda en localStorage y apiClient.js lo adjunta en el header Authorization: Bearer de cada petición.

¿Cómo se integra con VeriFactu? → La página de ajustes lee el .p12 como base64 con FileReader, lo envía al BFF, y el BFF lo reenvía al servicio Go que valida y almacena el certificado.