trello_fake/presentaciones/levi/codigo_interno.md

241 lines
6.1 KiB
Markdown
Raw Permalink Normal View History

2026-05-14 06:44:59 +00:00
<style>
a {
color: black
}
</style>
# Dashboard de Proyectos Dolibarr
![Foto portada](capturas/portada.png)
**Alumno:** Levi Planelles Granata <br>
**Ciclo:** Desarrollo de aplicaciones multiplataforma<br>
**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)
---
<a id="infraestructura-docker"></a>
2026-05-14 06:44:59 +00:00
## 1) Infraestructura (Docker)
**Por qué es importante:**
2026-05-14 06:44:59 +00:00
- El proyecto depende de Dolibarr y una base de datos real.
- Docker permite reproducir el entorno en cualquier máquina.
- Sin Dolibarr activo, la API devuelve errores de conexión.
2026-05-14 06:44:59 +00:00
**Docker Desktop**<br>
2026-05-14 08:36:17 +00:00
![Docker Desktop](capturas/servicios-levantados.png)
<br>
2026-05-14 08:36:17 +00:00
***
**Docker compose**<br>
2026-05-14 08:36:17 +00:00
![Docker Compose](capturas/docker-compose.png)
<br>
2026-05-14 06:44:59 +00:00
2026-05-14 08:36:17 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- Se levantan 2 servicios: MariaDB y Dolibarr.
- Dolibarr expone el puerto `8200` para acceder al ERP.
- Las credenciales y módulos se configuran por variables de entorno.
- Los volúmenes guardan datos persistentes.
2026-05-14 06:44:59 +00:00
---
<a id="variables-entorno-configuracion"></a>
## 2) Variables de entorno (configuración)
2026-05-14 06:44:59 +00:00
**Por qué es importante:**
2026-05-14 06:44:59 +00:00
- 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...)**<br>
2026-05-14 08:36:17 +00:00
![Env Local](capturas/env-local.png)
2026-05-14 06:44:59 +00:00
2026-05-14 08:36:17 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- La URL y la API key son el puente con Dolibarr.
- Existen variables legacy `NEXT_PUBLIC_*` por compatibilidad.
---
<a id="proxy-api-seguridad-api-key"></a>
2026-05-14 06:44:59 +00:00
## 3) Proxy API (seguridad de la API key)
**Por qué es importante:**
2026-05-14 06:44:59 +00:00
- El frontend nunca habla directamente con Dolibarr.
- El proxy agrega la key en servidor y protege credenciales.
**Métodos GET/POST/PUT/DELETE:**<br>
2026-05-14 08:36:17 +00:00
![Route.ts](capturas/route.png)
***
**Ejemplo llamada:**<br>
2026-05-14 08:36:17 +00:00
![Ejemplo llamada](capturas/ejemplo-llamada.png)
<br>
2026-05-14 06:44:59 +00:00
2026-05-14 08:36:17 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- Todas las llamadas pasan por `/api/dolibarr/...`.
- Se construye la URL real con `DOLIBARR_API_URL`.
- Se reenvían los métodos HTTP y se manejan errores.
- La API key nunca se expone al navegador; se inyecta en servidor.
2026-05-14 06:44:59 +00:00
---
<a id="cliente-central-dolibarr"></a>
2026-05-14 06:44:59 +00:00
## 4) Cliente central de Dolibarr
**Por qué es importante:**
2026-05-14 06:44:59 +00:00
- Centraliza todas las llamadas a la API.
2026-05-14 08:36:17 +00:00
- Simplifica los métodos de los servicios (proyectos, tareas, usuarios).
**Direct Fetch:**<br>
2026-05-14 08:36:17 +00:00
![Direct Fetch](capturas/direct-fetch.png)
<br>
2026-05-14 08:36:17 +00:00
***
**Proxy Fetch:**<br>
2026-05-14 08:36:17 +00:00
![Proxy Fetch](capturas/proxy-fetch.png)
<br>
2026-05-14 08:36:17 +00:00
***
**Decisión según entorno**<br>
2026-05-14 08:36:17 +00:00
![Decisión según entorno](capturas/decision.png)
<br>
2026-05-14 06:44:59 +00:00
2026-05-14 08:36:17 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- Si es servidor usa llamada directa.
- Si es cliente usa el proxy interno.
- Se aplica caché corta (`revalidate: 60`).
2026-05-14 06:44:59 +00:00
---
<a id="servicios-proyectos-crud"></a>
2026-05-14 06:44:59 +00:00
## 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.
2026-05-14 06:44:59 +00:00
**CRUD Proyectos:**<br>
![CRUD Projects Service](capturas/crud-proyectos.png)
<br>
***
**CRUD Avanzado:**<br>
![CRUD Advanced Service](capturas/crud-avanzado.png)
<br>
***
**Ejemplo funcionamiento:**<br>
![GET Endpoint example](capturas/ejemplo-endpoint-getprojects.png)
<br>
**Explicación:**
2026-05-14 06:44:59 +00:00
- `getProjects()` obtiene datos y los mapea a formato UI.
- `createProject()` crea en Dolibarr y devuelve el proyecto completo.
- Se controla el flujo de errores en un solo lugar.
---
<a id="mapeo-datos-estados"></a>
2026-05-14 06:44:59 +00:00
## 6) Mapeo de datos y estados
**Por qué es importante:**
2026-05-14 06:44:59 +00:00
- Dolibarr devuelve datos crudos, la UI necesita formato amigable.
- Se normalizan fechas, presupuesto y progreso.
**Interfaz cruda y de UI para Proyectos:**<br>
![Interfaces proyectos](capturas/interfaces-proyectos.png)
<br>
***
**Mapeador Proyectos:**<br>
![Mapeador Proyectos](capturas/mapeador-proyectos.png)
<br>
2026-05-14 06:44:59 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- Estados oficiales: 0 Borrador, 1 Activo, 2 Cerrado.
- El mapper convierte campos y define etiquetas visibles.
---
<a id="autenticacion-login"></a>
## 7) Autenticación (login)
2026-05-14 06:44:59 +00:00
**Por qué es importante:**
- El acceso está protegido por credenciales reales de Dolibarr.
2026-05-14 06:44:59 +00:00
- El token se guarda y permite navegar por la app.
**Servicio de autenticación:**<br>
![Auth Service](capturas/auth-service.png)
<br>
***
**Servicio de autenticación - 2:**<br>
![Auth Service 2](capturas/auth-service-2.png)
<br>
2026-05-14 06:44:59 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- El login pide token a Dolibarr.
- Si es correcto, se guarda en localStorage y cookie.
- Se usa luego para validar sesiones.
---
<a id="middleware-acceso"></a>
2026-05-14 06:44:59 +00:00
## 8) Middleware de acceso
**Por qué es importante:**
2026-05-14 06:44:59 +00:00
- Protege rutas privadas cuando no hay token.
- Bloquea acceso directo a la app sin autenticación.
2026-05-14 06:44:59 +00:00
**Middleware:**<br>
![Middleware](capturas/middleware.png)
<br>
2026-05-14 06:44:59 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- Si no hay token, redirige a login.
- Si hay token, permite navegar.
- No valida con Dolibarr en cada request; solo comprueba token local.
2026-05-14 06:44:59 +00:00
---
<a id="seed-datos-demo"></a>
2026-05-14 06:44:59 +00:00
## 9) Seed de datos (demo reproducible)
**Por qué es importante:**
2026-05-14 06:44:59 +00:00
- Permite crear datos realistas en minutos.
- La demo es consistente para la presentación.
2026-05-14 06:44:59 +00:00
**Seed script:**<br>
![Seed Script](capturas/seed.png)
<br>
2026-05-14 06:44:59 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- El seed elimina proyectos previos.
- Crea 14 proyectos con tareas.
- Los que están al 100% se cierran (status 2).
- Se ejecuta con `npm run seed`.
2026-05-14 06:44:59 +00:00
---
<a id="conexion-piezas-flujo"></a>
## 10) Conexión entre piezas (flujo resumido)
2026-05-14 06:44:59 +00:00
**Diagrama visual**<br>
![Diagrama de Flujo Principal](capturas/diagrama.svg)
<br>
2026-05-14 06:44:59 +00:00
**Explicación:**
2026-05-14 06:44:59 +00:00
- La UI nunca toca la API directamente.
- El proxy y el cliente central simplifican el acceso.
- Dolibarr sigue siendo la fuente única de verdad.
2026-05-14 06:44:59 +00:00
---