Diagrama UML - Plataforma INNOVATECH (Semillero)

Documento tecnico de arquitectura funcional: casos de uso, clases e interacciones entre Usuario, Frontend Angular, Backend Express y Base de Datos PostgreSQL.

Frontend: Angular 21 Backend: Express + Node.js DB: PostgreSQL Fecha: 2026-02-15

1) UML de Casos de Uso

Sistema Plataforma Registros Sanitarios Usuario Administrador Consultar registros Consultar productos Buscar / Filtrar / Paginar Ver detalle de estado Importar CSV de registros Actualizar datos (refresh) include include extend

Actor principal: Usuario. Actor con permisos ampliados: Administrador (carga CSV y actualizacion intensiva).

2) UML de Clases (Aplicacion + Datos)

Frontend::App (semillero/src/app/app.ts) - http: HttpClient - view, search, limit, offset (signals) - registros[], productos[] + load() + uploadCsv() + buildParams() + setView(), nextPage(), prevPage() Backend::Express API (backend/server.js) - app: Express - pool: pg.Pool - upload: multer + GET /api/health + GET /api/productos + GET /api/registros + POST /api/registros/import Servicio Importacion CSV (funciones en server.js) + cleanValue(), normalizeDate() + dedupeRows(), buildInsertQuery() + getActorId() cacheado Responsabilidad: - parsear CSV y mapear columnas - upsert a productos/registros/actores DB::productos + id_producto: text (PK) + nombre_comercial: text + categoria_general: text + grupo, marca, presentacion_comercial + vida_util, nivel_riesgo, usos DB::registros_sanitarios + id_registro: text (PK) + id_producto: text (FK productos) + expediente, estado_registro + fecha_vencimiento, modalidad + observaciones + id_titular: bigint (FK actores) + id_rol: bigint (FK actores) DB::actores + id_actor: bigserial (PK) + tipo: text (Titular|Rol) + nombre, ciudad, pais + rol_actividad UNIQUE(tipo,nombre,ciudad,pais,rol_actividad) HTTP /api/* usa SQL upsert actores 1..* FK id_titular / id_rol

Las clases de dominio visibles en frontend son Producto y Registro. El backend concentra logica de consulta, paginacion y proceso ETL (CSV -> tablas relacionales).

3) UML de Interacciones (Secuencia)

A) Flujo de consulta (registros/productos) Usuario Frontend App Express API PostgreSQL 1) Buscar / cambiar vista / paginar 2) GET /api/registros|productos?q,limit,offset 3) SELECT + JOIN + ORDER + LIMIT/OFFSET 4) rows[] 5) JSON {items, limit, offset} 6) Render tabla + estado en UI B) Flujo de importacion CSV 1) Selecciona archivo CSV y enviar 2) POST /api/registros/import (multipart/form-data) 3) upsert actores, productos y registros (batch) 4) conteos procesados (respuesta) 5) JSON {processed, inserted, skipped} 6) Mensaje de exito + recarga /api/registros

4) Puentes entre Frontend, Backend, Archivos y APIs

Flujo Frontend (archivo/metodo) API Backend (archivo/logica) Datos involucrados
Consulta de productos semillero/src/app/app.ts
metodo load() con endpoint='productos'		 GET /api/productos?q=&limit=&offset= backend/server.js
ruta app.get('/api/productos'), SQL filtrado + paginacion		 Tabla productos
Consulta de registros semillero/src/app/app.ts
metodo load() con endpoint='registros'		 GET /api/registros?q=&limit=&offset= backend/server.js
ruta app.get('/api/registros'), LEFT JOIN con actores/productos		 Tablas registros_sanitarios, productos, actores
Importacion CSV semillero/src/app/app.ts
metodo uploadCsv() con FormData(file)		 POST /api/registros/import backend/server.js
multer + csv-parse + upserts por lotes		 Inserta/actualiza actores, productos, registros_sanitarios
Proxy de desarrollo semillero/proxy.conf.json
redirige /api a backend local		 /api -> http://localhost:3000 Permite que Angular (4200) consuma Express (3000) sin CORS local Canal de integracion FE/BE

Modelo de datos formal definido en backend/comando.sql. Endpoints y proceso ETL definidos en backend/server.js. La UI que consume estas APIs esta en semillero/src/app/app.ts y semillero/src/app/app.html.