Workshop: Arquitectura y Diagramas con IA

Paso 1.1: Ir a Claude.ai o ChatGPT

Paso 1.2: Usar el Prompt de Arquitectura

Soy desarrolladora full-stack con Java Spring Boot y React.

Quiero crear [DESCRIPCIÓN DE VUESTRO PROYECTO - copiáis de arriba].

Necesito una arquitectura SIMPLE Y CLARA con:

BACKEND (Spring Boot):
- Qué Controllers necesito (con sus endpoints principales)
- Qué Services con su lógica
- Qué Repositories
- Qué Entities/Models (con sus atributos principales)
- DTOs si son necesarios

FRONTEND (React):
- Qué Pages/Vistas principales
- Qué Components clave
- Qué llamadas a la API hace cada page

BASE DE DATOS:
- Qué tablas necesito
- Relaciones entre tablas

Dame la estructura en formato texto claro, bien organizado y SIN código.
Solo la arquitectura y nombres de clases/componentes.

Ejemplo para Proyecto 1 (Reserva de Salas)

Soy desarrolladora full-stack con Java Spring Boot y React.

Quiero crear una app para reservar salas de reuniones en una oficina donde:
- Ver salas disponibles con capacidad y equipamiento
- Reservar sala (fecha, hora inicio, hora fin)
- Ver mis reservas activas
- Cancelar reserva
- Dashboard admin: ver todas las reservas del día

Necesito una arquitectura SIMPLE Y CLARA con:

BACKEND (Spring Boot):
- Qué Controllers necesito (con sus endpoints principales)
- Qué Services con su lógica
- Qué Repositories
- Qué Entities/Models (con sus atributos principales)
- DTOs si son necesarios

FRONTEND (React):
- Qué Pages/Vistas principales
- Qué Components clave
- Qué llamadas a la API hace cada page

BASE DE DATOS:
- Qué tablas necesito
- Relaciones entre tablas

Dame la estructura en formato texto claro, bien organizado y SIN código.
Solo la arquitectura y nombres de clases/componentes.

Paso 1.3: Copiar la Respuesta

BACKEND (Spring Boot):

Controllers:
- RoomController
  - GET /api/rooms → listar todas las salas
  - GET /api/rooms/{id} → obtener detalle de sala
  - POST /api/rooms → crear sala (admin)

- ReservationController
  - GET /api/reservations → listar mis reservas
  - POST /api/reservations → crear reserva
  - DELETE /api/reservations/{id} → cancelar reserva
  - GET /api/reservations/today → reservas del día (admin)

Services:
- RoomService
  - Lógica: obtener salas disponibles en un horario
  - Validar capacidad y equipamiento

- ReservationService
  - Lógica: verificar disponibilidad antes de reservar
  - Validar que la sala esté libre en el horario
  - No permitir reservas en el pasado

Repositories:
- RoomRepository extends JpaRepository<Room, Long>
- ReservationRepository extends JpaRepository<Reservation, Long>

Entities:
- Room
  - id: Long
  - name: String
  - capacity: Integer
  - equipment: String (proyector, pizarra, etc)
  - isAvailable: Boolean

- Reservation
  - id: Long
  - room: Room (ManyToOne)
  - userName: String
  - reservationDate: LocalDate
  - startTime: LocalTime
  - endTime: LocalTime

DTOs:
- ReservationRequestDTO (userName, roomId, date, startTime, endTime)
- RoomAvailabilityDTO (room info + available slots)

FRONTEND (React):

Pages:
- HomePage: vista general con lista de salas
- RoomDetailPage: detalle de sala + formulario de reserva
- MyReservationsPage: lista de mis reservas
- AdminDashboardPage: todas las reservas del día

Components:
- RoomCard: muestra una sala en la lista
- ReservationForm: formulario para crear reserva
- ReservationList: lista de reservas con botón cancelar
- TimeSlotPicker: selector de hora inicio/fin

BASE DE DATOS:

Tablas:
- rooms (id, name, capacity, equipment, is_available)
- reservations (id, room_id, user_name, reservation_date, start_time, end_time)

Relaciones:
- reservations.room_id → rooms.id (ManyToOne)

Paso 2.1: Abrir Cursor

Paso 2.2: Crear el Archivo de Arquitectura

Paso 2.3: Usar Cursor Agent Mode para Generar Diagramas

Analiza la arquitectura que está en este archivo y crea 2 diagramas Mermaid:

1. DIAGRAMA DE ARQUITECTURA GENERAL (graph TB):
   - Muestra Frontend (React) con las pages principales
   - Muestra Backend (Spring Boot) con las 3 capas: Controllers → Services → Repositories
   - Muestra Base de Datos (PostgreSQL)
   - Muestra las flechas de comunicación HTTP entre capas
   - Usa colores para diferenciar: Frontend en azul, Backend en morado, BD en verde

2. DIAGRAMA DE CLASES (classDiagram):
   - Muestra todas las Entities con sus atributos
   - Muestra las relaciones entre entidades (OneToMany, ManyToOne, etc)
   - Indica el tipo de dato de cada atributo

Genera ambos diagramas en bloques ```mermaid dentro de este mismo archivo.
Añádelos AL FINAL del archivo después de todo el contenido actual.

Analiza la arquitectura que está en este archivo y crea 2 diagramas Mermaid:

1. DIAGRAMA DE ARQUITECTURA GENERAL (graph TB):
   - Muestra Frontend (React) con las pages principales
   - Muestra Backend (Spring Boot) con las 3 capas: Controllers → Services → Repositories
   - Muestra Base de Datos (PostgreSQL)
   - Muestra las flechas de comunicación HTTP entre capas
   - Usa colores para diferenciar: Frontend en azul, Backend en morado, BD en verde

2. DIAGRAMA DE SECUENCIA (sequenceDiagram):
   - Muestra el flujo de la funcionalidad PRINCIPAL del proyecto
   - Ejemplo: "Usuario crea una reserva" o "Usuario registra un gasto"
   - Muestra: User → Frontend → Controller → Service → Repository → Database
   - Incluye las respuestas de vuelta

Genera ambos diagramas en bloques ```mermaid dentro de este mismo archivo.
Añádelos AL FINAL del archivo después de todo el contenido actual.

Paso 2.4: Revisar lo que Cursor Generó

[... toda vuestra arquitectura anterior ...]

---

## DIAGRAMAS

### Diagrama de Arquitectura General

```mermaid
graph TB
    subgraph Frontend[React Frontend]
        HP[HomePage]
        RDP[RoomDetailPage]
        MRP[MyReservationsPage]
    end

    subgraph Backend[Spring Boot Backend]
        RC[RoomController]
        RSC[ReservationController]
        RS[RoomService]
        RES[ReservationService]
        RR[RoomRepository]
        RER[ReservationRepository]
    end

    DB[(PostgreSQL)]

    HP -->|GET /api/rooms| RC
    RDP -->|POST /api/reservations| RSC
    RC --> RS
    RSC --> RES
    RS --> RR
    RES --> RER
    RR --> DB
    RER --> DB

    style Frontend fill:#6366f1,color:#fff
    style Backend fill:#8b5cf6,color:#fff
    style DB fill:#10b981,color:#fff
```

### Diagrama de Clases

```mermaid
classDiagram
    class Room {
        +Long id
        +String name
        +Integer capacity
        +String equipment
        +Boolean isAvailable
    }

    class Reservation {
        +Long id
        +String userName
        +LocalDate reservationDate
        +LocalTime startTime
        +LocalTime endTime
    }

    Room "1" --> "many" Reservation : has
```

Paso 2.5: Ver los Diagramas Renderizados

Paso 2.6: Hacer Screenshots de los Diagramas

Paso 3.1: Volver a Claude/ChatGPT

Perfecto, ahora necesito crear una presentación en Gamma.

Ayúdame a crear el contenido para 4 slides:

SLIDE 1 - PORTADA:
- Título atractivo para mi proyecto
- Subtítulo que explique en 1 frase qué hace
- Stack: Java Spring Boot + React + PostgreSQL

SLIDE 2 - ¿QUÉ RESUELVE?:
- Descripción breve del proyecto (2-3 líneas)
- Lista de 4-5 funcionalidades principales (bullets muy cortos)

SLIDE 3 - ARQUITECTURA DEL SISTEMA:
- Título: "Arquitectura del Sistema"
- 3-4 bullets explicando:
  * Capa Frontend (qué hace)
  * Capa Backend (qué hace)
  * Comunicación entre capas
  * Base de datos
[Aquí voy a poner la imagen del diagrama de arquitectura]

SLIDE 4 - MODELO DE DATOS (o FLUJO):
- Título: "Modelo de Datos" (o "Flujo de Secuencia" si hicisteis ese diagrama)
- 2-3 bullets explicando las entidades principales y sus relaciones
  (o explicando el flujo paso a paso)
[Aquí voy a poner la imagen del diagrama de clases/secuencia]

Dame SOLO el texto para cada slide, sin formato markdown, en español, texto claro y corto.

Paso 3.2: Copiar el Contenido de los Slides

SLIDE 1 - PORTADA
Título: Sistema de Reserva de Salas Inteligente
Subtítulo: Gestión eficiente de espacios de trabajo colaborativos
Stack: Java Spring Boot + React + PostgreSQL

SLIDE 2 - ¿QUÉ RESUELVE?
Descripción: Plataforma digital para optimizar el uso de salas de reuniones,
eliminando conflictos de reservas y facilitando la gestión de espacios en tiempo real.

Funcionalidades:
• Visualización en tiempo real de salas disponibles
• Reserva rápida con validación de disponibilidad
• Gestión de reservas personales (ver y cancelar)
• Panel administrativo con vista diaria completa
• Filtros por capacidad y equipamiento

SLIDE 3 - ARQUITECTURA DEL SISTEMA
Título: Arquitectura del Sistema

• Frontend React: Interfaz intuitiva con vistas de catálogo, detalle de salas y gestión de reservas
• Backend Spring Boot: API REST con 3 capas (Controllers, Services, Repositories) que valida
  disponibilidad y gestiona lógica de negocio
• Comunicación: Peticiones HTTP (GET, POST, DELETE) entre cliente y servidor
• Base de Datos PostgreSQL: Almacena información de salas y reservas con relaciones definidas

SLIDE 4 - MODELO DE DATOS
Título: Modelo de Datos

• Entidad Room: Define salas con capacidad, equipamiento y estado de disponibilidad
• Entidad Reservation: Registra reservas con fecha, horario y usuario asociado
• Relación ManyToOne: Múltiples reservas pueden pertenecer a una misma sala

Paso 4.1: Ir a Gamma.app

Paso 4.2: Usar el Modo de IA de Gamma

Paso 4.3: Pegar el Contenido en Gamma

[PEGÁIS AQUÍ TODO EL CONTENIDO DE LOS 4 SLIDES]

Además:
- Estilo: Moderno y profesional
- Colores: Morado (#4737bb) y azul (#6366f1)
- En Slide 3 y Slide 4, deja espacio para que yo añada imágenes de diagramas

Paso 4.4: Dejar que Gamma Genere las Slides

Paso 4.5: Añadir las Imágenes de los Diagramas

Paso 4.6: Ajustes Finales (Opcional)

Paso 4.7: Guardar y Obtener el Link

Estructura de la Presentación (3 min por equipo)