levi.2526
/
trello_fake
mirror of https://github.com/LeviPlanelles/trello_fake.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
trello_fake/presentaciones/levi/codigo_interno.md

6.1 KiB
Raw Blame History

Dashboard de Proyectos Dolibarr

Foto portada

Alumno: Levi Planelles Granata
Ciclo: Desarrollo de aplicaciones multiplataforma
Asignatura: Proyecto intermododular

Índice

1) Infraestructura (Docker)

Por qué es importante:

  • 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.

Docker Desktop
Docker Desktop

Docker compose
Docker Compose

Explicación:

  • 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.

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

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:
Route.ts

Ejemplo llamada:
Ejemplo llamada

Explicación:

  • 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.

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

Proxy Fetch:
Proxy Fetch

Decisión según entorno
Decisión según entorno

Explicación:

  • Si es servidor usa llamada directa.
  • Si es cliente usa el proxy interno.
  • No se aplica caché en servidor (cache: 'no-store').

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 Projects Service

CRUD Avanzado:
CRUD Advanced Service

Ejemplo funcionamiento:
GET Endpoint example
Explicación:

  • 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.

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:
Interfaces proyectos

Mapeador Proyectos:
Mapeador Proyectos

Explicación:

  • Estados oficiales: 0 Borrador, 1 Activo, 2 Cerrado.
  • El mapper convierte campos y define etiquetas visibles.

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:
Auth Service

Servicio de autenticación - 2:
Auth Service 2

Explicación:

  • El login pide token a Dolibarr.
  • Si es correcto, se guarda en localStorage y cookie.
  • Se usa luego para validar sesiones.

8) Middleware de acceso

Por qué es importante:

  • Protege rutas privadas cuando no hay token.
  • Bloquea acceso directo a la app sin autenticación.

Middleware:
Middleware

Explicación:

  • Si no hay token, redirige a login.
  • Si hay token, permite navegar.
  • No valida con Dolibarr en cada request; solo comprueba token local.

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

Explicación:

  • 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.

10) Conexión entre piezas (flujo resumido)

Diagrama visual
Diagrama de Flujo Principal

Explicación:

  • La UI nunca toca la API directamente.
  • El proxy y el cliente central simplifican el acceso.
  • Dolibarr sigue siendo la fuente única de verdad.