diff --git a/presentaciones/levi/capturas/portada.png b/presentaciones/levi/capturas/portada.png new file mode 100644 index 0000000..eb19f77 Binary files /dev/null and b/presentaciones/levi/capturas/portada.png differ diff --git a/presentaciones/levi/codigo_interno.md b/presentaciones/levi/codigo_interno.md index f2cae93..cd1299e 100644 --- a/presentaciones/levi/codigo_interno.md +++ b/presentaciones/levi/codigo_interno.md @@ -1,4 +1,34 @@ + +# Dashboard de Proyectos Dolibarr + +![Foto portada](capturas/portada.png) + +**Alumno:** Levi Planelles Granata
+**Ciclo:** Desarrollo de aplicaciones multiplataforma
+**Asignatura:** Proyecto intermododular + +--- + +## Índice +- [1) Infraestructura (Docker)](#infraestructura-docker) +- [2) Variables de entorno (configuración)](#variables-entorno-configuracion) +- [3) Proxy API (seguridad de la API key)](#proxy-api-seguridad-api-key) +- [4) Cliente central de Dolibarr](#cliente-central-dolibarr) +- [5) Servicios de proyectos (CRUD)](#servicios-proyectos-crud) +- [6) Mapeo de datos y estados](#mapeo-datos-estados) +- [7) Autenticación (login)](#autenticacion-login) +- [8) Middleware de acceso](#middleware-acceso) +- [9) Seed de datos (demo reproducible)](#seed-datos-demo) +- [10) Conexión entre piezas (flujo resumido)](#conexion-piezas-flujo) + +--- + + ## 1) Infraestructura (Docker) @@ -7,11 +37,13 @@ - Docker permite reproducir el entorno en cualquier máquina. - Sin Dolibarr activo, la API devuelve errores de conexión. -**Docker Desktop** +**Docker Desktop**
![Docker Desktop](capturas/servicios-levantados.png) +
*** -**Docker compose** +**Docker compose**
![Docker Compose](capturas/docker-compose.png) +
**Explicación:** - Se levantan 2 servicios: MariaDB y Dolibarr. @@ -21,32 +53,36 @@ --- + ## 2) Variables de entorno (configuración) **Por qué es importante:** - La app no funciona sin apuntar a la API de Dolibarr. - La API key se mantiene en servidor y no se expone al cliente. -**Env local (API borrada por temas de seguridad...)** +**Env local (API borrada por temas de seguridad...)**
![Env Local](capturas/env-local.png) + **Explicación:** - La URL y la API key son el puente con Dolibarr. - Existen variables legacy `NEXT_PUBLIC_*` por compatibilidad. --- + ## 3) Proxy API (seguridad de la API key) **Por qué es importante:** - El frontend nunca habla directamente con Dolibarr. - El proxy agrega la key en servidor y protege credenciales. -**Métodos GET/POST/PUT/DELETE:** +**Métodos GET/POST/PUT/DELETE:**
![Route.ts](capturas/route.png) *** -**Ejemplo llamada:** +**Ejemplo llamada:**
![Ejemplo llamada](capturas/ejemplo-llamada.png) +
**Explicación:** @@ -57,20 +93,24 @@ --- + ## 4) Cliente central de Dolibarr **Por qué es importante:** - Centraliza todas las llamadas a la API. - Simplifica los métodos de los servicios (proyectos, tareas, usuarios). -**Direct Fetch:** +**Direct Fetch:**
![Direct Fetch](capturas/direct-fetch.png) +
*** -**Proxy Fetch:** +**Proxy Fetch:**
![Proxy Fetch](capturas/proxy-fetch.png) +
*** -**Decisión según entorno** +**Decisión según entorno**
![Decisión según entorno](capturas/decision.png) +
**Explicación:** @@ -80,20 +120,24 @@ --- + ## 5) Servicios de proyectos (CRUD) **Por qué es importante:** - Toda la lógica de proyectos vive aquí. - La UI solo consume estos métodos, no la API directa. -**CRUD Proyectos:** +**CRUD Proyectos:**
![CRUD Projects Service](capturas/crud-proyectos.png) +
*** -**CRUD Avanzado:** +**CRUD Avanzado:**
![CRUD Advanced Service](capturas/crud-avanzado.png) +
*** -**Ejemplo funcionamiento:** +**Ejemplo funcionamiento:**
![GET Endpoint example](capturas/ejemplo-endpoint-getprojects.png) +
**Explicación:** - `getProjects()` obtiene datos y los mapea a formato UI. - `createProject()` crea en Dolibarr y devuelve el proyecto completo. @@ -101,17 +145,20 @@ --- + ## 6) Mapeo de datos y estados **Por qué es importante:** - Dolibarr devuelve datos crudos, la UI necesita formato amigable. - Se normalizan fechas, presupuesto y progreso. -**Interfaz cruda y de UI para Proyectos:** +**Interfaz cruda y de UI para Proyectos:**
![Interfaces proyectos](capturas/interfaces-proyectos.png) +
*** -**Mapeador Proyectos:** +**Mapeador Proyectos:**
![Mapeador Proyectos](capturas/mapeador-proyectos.png) +
**Explicación:** - Estados oficiales: 0 Borrador, 1 Activo, 2 Cerrado. @@ -119,17 +166,20 @@ --- + ## 7) Autenticación (login) **Por qué es importante:** - El acceso está protegido por credenciales reales de Dolibarr. - El token se guarda y permite navegar por la app. -**Servicio de autenticación:** +**Servicio de autenticación:**
![Auth Service](capturas/auth-service.png) +
*** -**Servicio de autenticación - 2:** +**Servicio de autenticación - 2:**
![Auth Service 2](capturas/auth-service-2.png) +
**Explicación:** - El login pide token a Dolibarr. @@ -138,19 +188,16 @@ --- + ## 8) Middleware de acceso -**Qué capturar:** -- Archivo `middleware.ts` -- Lectura de cookie `dolibarr_auth_token` -- Redirección a `/login` - **Por qué es importante:** - Protege rutas privadas cuando no hay token. - Bloquea acceso directo a la app sin autenticación. -**Middleware:** +**Middleware:**
![Middleware](capturas/middleware.png) +
**Explicación:** - Si no hay token, redirige a login. @@ -159,14 +206,16 @@ --- + ## 9) Seed de datos (demo reproducible) **Por qué es importante:** - Permite crear datos realistas en minutos. - La demo es consistente para la presentación. -**Seed script:** +**Seed script:**
![Seed Script](capturas/seed.png) +
**Explicación:** - El seed elimina proyectos previos. @@ -176,10 +225,12 @@ --- + ## 10) Conexión entre piezas (flujo resumido) -**Diagrama visual** +**Diagrama visual**
![Diagrama de Flujo Principal](capturas/diagrama.svg) +
**Explicación:** - La UI nunca toca la API directamente.