Diagramas de Ingeniería
Table of Contents
Este documento contiene los diagramas de ingeniería del sistema UnoSportClub, incluyendo arquitectura, flujos de datos, modelos y diagramas UML.
Arquitectura General
El siguiente diagrama muestra la arquitectura general del sistema.
Haz click en el diagrama para verlo en tamaño completo.
graph TB
subgraph "Capa de Presentación"
A1[App Principal
app.unosportclub.com.co] A2[Panel Operador
panel.unosportclub.com.co] A3[Panel Entrenador
trainer.unosportclub.com.co] A4[Panel Control
control.unosportclub.com.co] end subgraph "Firebase Services" F1[Firebase Hosting] F2[Firebase Functions] F3[Firebase Auth] end subgraph "Capa de Aplicación" B1[Express.js API] B2[Middleware Auth] B3[Routes Handlers] B4[Relay System] end subgraph "Capa de Datos" D1[(PostgreSQL
Base de Datos)] end subgraph "Integraciones Externas" E1[Webhooks] E2[Payment Gateway] end A1 --> F1 A2 --> F1 A3 --> F1 A4 --> F1 F1 --> F2 F2 --> B1 B1 --> B2 B2 --> B3 B3 --> D1 B3 --> F3 B3 --> B4 B4 --> A1 B4 --> A2 B4 --> A3 B4 --> A4 B3 --> E1 E1 --> E2 style A1 fill:#e1f5ff style A2 fill:#e1f5ff style A3 fill:#e1f5ff style A4 fill:#e1f5ff style F2 fill:#fff4e1 style B1 fill:#fff4e1 style D1 fill:#ffe1f5
app.unosportclub.com.co] A2[Panel Operador
panel.unosportclub.com.co] A3[Panel Entrenador
trainer.unosportclub.com.co] A4[Panel Control
control.unosportclub.com.co] end subgraph "Firebase Services" F1[Firebase Hosting] F2[Firebase Functions] F3[Firebase Auth] end subgraph "Capa de Aplicación" B1[Express.js API] B2[Middleware Auth] B3[Routes Handlers] B4[Relay System] end subgraph "Capa de Datos" D1[(PostgreSQL
Base de Datos)] end subgraph "Integraciones Externas" E1[Webhooks] E2[Payment Gateway] end A1 --> F1 A2 --> F1 A3 --> F1 A4 --> F1 F1 --> F2 F2 --> B1 B1 --> B2 B2 --> B3 B3 --> D1 B3 --> F3 B3 --> B4 B4 --> A1 B4 --> A2 B4 --> A3 B4 --> A4 B3 --> E1 E1 --> E2 style A1 fill:#e1f5ff style A2 fill:#e1f5ff style A3 fill:#e1f5ff style A4 fill:#e1f5ff style F2 fill:#fff4e1 style B1 fill:#fff4e1 style D1 fill:#ffe1f5
Flujos del Sistema
Flujo de Reserva
El siguiente diagrama muestra el flujo completo de creación de una reserva.
Haz click en el diagrama para verlo en tamaño completo.
sequenceDiagram
participant U as Usuario
participant F as Frontend
participant API as Backend API
participant DB as PostgreSQL
participant R as Relay System
U->>F: Selecciona tipo cancha
F->>API: GET /account/courts?type={id}
API->>DB: Consulta disponibilidad
DB-->>API: Canchas disponibles
API-->>F: Lista de canchas
F-->>U: Muestra canchas disponibles
U->>F: Selecciona fecha/hora
F->>F: Valida disponibilidad local
U->>F: Completa detalles reserva
F->>API: POST /account/bookings
{court_id, date, time, ...} API->>DB: BEGIN TRANSACTION API->>DB: Verifica disponibilidad DB-->>API: Disponible API->>DB: INSERT INTO reservation API->>DB: COMMIT TRANSACTION DB-->>API: Reservation ID API->>R: Notifica nueva reserva API-->>F: {id, status: 'confirmed'} R-->>F: WebSocket: Nueva reserva F-->>U: Muestra confirmación
{court_id, date, time, ...} API->>DB: BEGIN TRANSACTION API->>DB: Verifica disponibilidad DB-->>API: Disponible API->>DB: INSERT INTO reservation API->>DB: COMMIT TRANSACTION DB-->>API: Reservation ID API->>R: Notifica nueva reserva API-->>F: {id, status: 'confirmed'} R-->>F: WebSocket: Nueva reserva F-->>U: Muestra confirmación
Modelo de Datos
El siguiente diagrama muestra el modelo entidad-relación de la base de datos.
Haz click en el diagrama para verlo en tamaño completo.
erDiagram
USER ||--o{ CLIENT : "tiene"
CLIENT ||--o{ RESERVATION : "realiza"
CLIENT ||--o{ PAYMENT : "realiza"
COURT ||--o{ RESERVATION : "tiene"
COURT_TYPE ||--o{ COURT : "clasifica"
RESERVATION_TYPE ||--o{ RESERVATION : "tipo"
PAYMENT_TYPE ||--o{ PAYMENT : "tipo"
DOCUMENT_TYPE ||--o{ CLIENT : "documento"
TARIFF ||--o{ RESERVATION : "aplica"
USER {
string uid PK
string email
string display_name
}
CLIENT {
int id PK
int user_id FK
string first_name
string last_name
string document
int document_type_id FK
string phone_number
}
COURT {
int id PK
int court_type_id FK
string name
string description
boolean active
}
COURT_TYPE {
int id PK
string name
string description
}
RESERVATION {
int id PK
int client_id FK
int court_id FK
int reservation_type_id FK
date reservation_date
time start_time
time end_time
string status
decimal price
}
PAYMENT {
int id PK
int client_id FK
int reservation_id FK
int payment_type_id FK
decimal amount
date payment_date
string status
}
RESERVATION_TYPE {
int id PK
string name
string description
}
PAYMENT_TYPE {
int id PK
string name
string description
}
DOCUMENT_TYPE {
int id PK
string name
string code
}
TARIFF {
int id PK
int court_type_id FK
int reservation_type_id FK
decimal price
date valid_from
date valid_to
}
Arquitectura de Despliegue
graph TB
subgraph "Internet"
U[Usuarios]
end
subgraph "Firebase Hosting"
H1[app.unosportclub.com.co]
H2[panel.unosportclub.com.co]
H3[trainer.unosportclub.com.co]
H4[control.unosportclub.com.co]
end
subgraph "Firebase Functions"
F1[API Function
us-central1] F2[Relay System] end subgraph "Firebase Services" FA[Firebase Authentication] FS[Firebase Storage] end subgraph "Cloud SQL" DB[(PostgreSQL
Instance)] end subgraph "External Services" PG[Payment Gateway] WH[Webhook Endpoints] end U --> H1 U --> H2 U --> H3 U --> H4 H1 --> F1 H2 --> F1 H3 --> F1 H4 --> F1 F1 --> FA F1 --> DB F1 --> F2 F1 --> PG F1 --> WH F2 --> H1 F2 --> H2 F2 --> H3 F2 --> H4 style H1 fill:#e1f5ff style H2 fill:#e1f5ff style H3 fill:#e1f5ff style H4 fill:#e1f5ff style F1 fill:#fff4e1 style DB fill:#ffe1f5 style FA fill:#ffe1f5
us-central1] F2[Relay System] end subgraph "Firebase Services" FA[Firebase Authentication] FS[Firebase Storage] end subgraph "Cloud SQL" DB[(PostgreSQL
Instance)] end subgraph "External Services" PG[Payment Gateway] WH[Webhook Endpoints] end U --> H1 U --> H2 U --> H3 U --> H4 H1 --> F1 H2 --> F1 H3 --> F1 H4 --> F1 F1 --> FA F1 --> DB F1 --> F2 F1 --> PG F1 --> WH F2 --> H1 F2 --> H2 F2 --> H3 F2 --> H4 style H1 fill:#e1f5ff style H2 fill:#e1f5ff style H3 fill:#e1f5ff style H4 fill:#e1f5ff style F1 fill:#fff4e1 style DB fill:#ffe1f5 style FA fill:#ffe1f5
Sistema Relay
El sistema Relay proporciona notificaciones en tiempo real.
Haz click en el diagrama para verlo en tamaño completo.
graph TB
subgraph "Backend"
B1[Express Server]
B2[Relay Helper]
B3[Socket.io Server]
end
subgraph "Events"
E1[Reservation Created]
E2[Payment Received]
E3[Status Changed]
E4[Availability Updated]
end
subgraph "Relay Destinations"
D1[yo - Single User]
D2[ustedes - Multiple Users]
D3[nosotros - All Users]
D4[room - Specific Room]
end
subgraph "Frontend Clients"
F1[App Principal]
F2[Panel Operador]
F3[Panel Entrenador]
F4[Panel Control]
end
B1 --> E1
B1 --> E2
B1 --> E3
B1 --> E4
E1 --> B2
E2 --> B2
E3 --> B2
E4 --> B2
B2 --> B3
B3 --> D1
B3 --> D2
B3 --> D3
B3 --> D4
D1 --> F1
D2 --> F2
D3 --> F3
D4 --> F4
style B1 fill:#fff4e1
style B2 fill:#fff4e1
style B3 fill:#fff4e1
style F1 fill:#e1f5ff
style F2 fill:#e1f5ff
style F3 fill:#e1f5ff
style F4 fill:#e1f5ff
Referencias
Para más información sobre los diagramas y la arquitectura del sistema, consulta:
-
Arquitectura del Software - Descripción detallada de la arquitectura
-
Modelo de Datos - Modelo completo de la base de datos
-
Flujos de Trabajo - Flujos de negocio del sistema
Los diagramas completos están disponibles en el directorio docs/milestones/ingenieria/diagramas/ en formato Mermaid (.mmd).