# Taller: Desarrollo con Angular e Ionic

## Capítulo 3: Estructura de la Aplicación de Reservas para Gimnasio

En este capítulo, detallaremos la estructura y planificación de nuestra aplicación de reservas para gimnasio. Esto nos servirá como guía para el desarrollo que realizaremos en los siguientes capítulos.

## 1. Definición de Requisitos

Nuestra aplicación de reservas para gimnasio debe cumplir con los siguientes requisitos:

### Funcionalidades Principales

-   **Ver clases disponibles**: Listado de clases con información sobre horarios, instructores y plazas
-   **Reservar clases**: Posibilidad de reservar una clase si hay plazas disponibles
-   **Gestionar reservas**: Ver, modificar y cancelar reservas existentes
-   **Perfil de usuario**: Información básica del usuario y preferencias
-   **Notificaciones**: Recordatorios de clases reservadas

### Tipos de Usuario

-   **Clientes**: Pueden ver clases, hacer reservas y gestionar su perfil
-   **Administradores**: Pueden gestionar clases, instructores y ver estadísticas (para una versión futura)

## 2. Planificación de la Estructura

### Entidades Principales

1.  **Clases (GymClass)**
    
    -   ID
    -   Nombre
    -   Descripción
    -   Instructor
    -   Horario (Inicio/Fin)
    -   Capacidad máxima
    -   Reservas actuales
2.  **Reservas (Booking)**
    
    -   ID
    -   ID de Usuario
    -   ID de Clase
    -   Fecha
    -   Estado (Confirmada, Cancelada, Pendiente)
3.  **Usuario (User)**
    
    -   ID
    -   Nombre
    -   Email
    -   Foto de perfil
    -   Preferencias

### Páginas Principales

1.  **Inicio/Login**
    
    -   Autenticación de usuarios
    -   Pantalla de bienvenida
2.  **Lista de Clases**
    
    -   Mostrar todas las clases disponibles
    -   Filtros por día, tipo, instructor
3.  **Detalle de Clase**
    
    -   Información completa de la clase
    -   Botón para reservar
    -   Lista de participantes (opcional)
4.  **Mis Reservas**
    
    -   Lista de reservas del usuario
    -   Opciones para cancelar/modificar
5.  **Perfil**
    
    -   Datos del usuario
    -   Preferencias
    -   Estadísticas (opcional)

## 3. Diseño de la Arquitectura

### Estructura de Carpetas

```
gym-reservation-app/
├── src/
│   ├── app/
│   │   ├── core/             # Servicios core, guards, interceptores
│   │   │   ├── services/
│   │   │   ├── guards/
│   │   │   └── interceptors/
│   │   ├── shared/           # Componentes compartidos
│   │   │   ├── components/
│   │   │   ├── directives/
│   │   │   └── pipes/
│   │   ├── models/           # Interfaces y modelos
│   │   ├── pages/            # Páginas principales
│   │   │   ├── auth/
│   │   │   ├── classes/
│   │   │   ├── class-detail/
│   │   │   ├── bookings/
│   │   │   └── profile/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── app-routing.module.ts
│   ├── assets/
│   │   ├── icon/
│   │   └── images/
│   ├── environments/
│   └── theme/
└── capacitor.config.ts

```

### Arquitectura y Patrones

Utilizaremos una arquitectura basada en:

1.  **Componentes**: Encapsulan partes de la UI y su lógica asociada
2.  **Servicios**: Manejan la lógica de negocio y el acceso a datos
3.  **Modelos**: Definen las estructuras de datos
4.  **Enrutamiento**: Gestiona la navegación entre páginas
5.  **Patrón Observable**: Para gestionar flujos de datos asincrónicos

## 4. Diseño de la Base de Datos

Para esta versión inicial, utilizaremos almacenamiento local mediante Capacitor/Storage. En una versión futura, podríamos migrar a Firebase o una API REST.

**Estructura del almacenamiento local**:

```json
{
  "classes": [
    {
      "id": "1",
      "name": "Yoga",
      "description": "Clase de yoga para todos los niveles",
      "instructor": "María López",
      "startTime": "2025-04-22T08:00:00",
      "endTime": "2025-04-22T09:00:00",
      "maxCapacity": 15,
      "currentBookings": 8
    },
    // Más clases...
  ],
  "bookings": [
    {
      "id": "1",
      "userId": "user123",
      "classId": "1",
      "className": "Yoga",
      "date": "2025-04-22T08:00:00",
      "status": "confirmed"
    },
    // Más reservas...
  ],
  "users": [
    {
      "id": "user123",
      "name": "Usuario Demo",
      "email": "usuario@ejemplo.com",
      "profilePic": "avatar.jpg",
      "preferences": {
        "notifications": true,
        "favoriteClasses": ["1", "3"]
      }
    },
    // Más usuarios...
  ]
}

```

## 5. Flujos de Navegación

### Flujo Principal

1.  **Inicio**: El usuario abre la aplicación
2.  **Autenticación**: El usuario inicia sesión (simulado en esta versión)
3.  **Tabs**: Navegación principal con tabs
    -   Tab 1: Clases disponibles
    -   Tab 2: Mis reservas
    -   Tab 3: Perfil

### Flujo de Reserva

1.  Usuario navega a "Clases disponibles"
2.  Usuario selecciona una clase específica
3.  En la pantalla de detalle, pulsa "Reservar Clase"
4.  Se muestra confirmación y se redirige a "Mis Reservas"

### Flujo de Cancelación

1.  Usuario navega a "Mis Reservas"
2.  Usuario desliza una reserva hacia la izquierda
3.  Pulsa en "Cancelar"
4.  Se muestra confirmación y se actualiza la lista



## 6. Integración con Capacitor

Para mejorar la experiencia de usuario y aprovechar las capacidades nativas, integraremos los siguientes plugins de Capacitor:

1.  **@capacitor/local-notifications**
    
    -   Enviar recordatorios de clases
    -   Notificaciones de confirmación de reservas
2.  **@capacitor/camera**
    
    -   Permitir a los usuarios actualizar su foto de perfil
    -   Opción de tomar foto o seleccionar de la galería
3.  **@capacitor/preferences (antes Storage)**
    
    -   Almacenar datos de usuario
    -   Guardar preferencias
    -   Persistir información de clases y reservas
4.  **@capacitor/device** (opcional)
    
    -   Obtener información del dispositivo para personalizar la experiencia

## 7. Plan de Implementación

Para desarrollar la aplicación seguiremos estos pasos:

1.  **Configuración del proyecto**
    
    -   Crear proyecto Ionic con Angular
    -   Instalar dependencias necesarias
2.  **Implementación de los modelos de datos**
    
    -   Definir interfaces TypeScript para las entidades
3.  **Servicios Core**
    
    -   Implementar servicios para gestionar clases
    -   Implementar servicios para gestionar reservas
    -   Implementar servicio de autenticación (mock)
4.  **Componentes Shared**
    
    -   Crear componentes reutilizables (tarjetas, listas, etc.)
5.  **Páginas principales**
    
    -   Implementar página de listado de clases
    -   Implementar página de detalle de clase
    -   Implementar página de mis reservas
    -   Implementar página de perfil
6.  **Navegación y enrutamiento**
    
    -   Configurar las rutas
    -   Implementar navegación entre páginas
7.  **Capacitor y funcionalidades nativas**
    
    -   Integrar notificaciones
    -   Integrar cámara
    -   Implementar almacenamiento persistente
8.  **Pruebas y ajustes**
    
    -   Probar funcionalidades
    -   Ajustar estilos y mejorar UX

## 8. Consideraciones para Versiones Futuras

En futuras versiones se podrían incluir:

1.  **Autenticación real**
    
    -   Integración con Firebase Auth o similares
    -   Roles de usuario (cliente/admin)
2.  **Backend real**
    
    -   API REST o Firebase para datos en tiempo real
    -   Sincronización entre dispositivos
3.  **Funcionalidades avanzadas**
    
    -   Pagos para clases premium
    -   Calendarios personalizados
    -   Estadísticas de asistencia
    -   Chat con instructores
4.  **Mejoras UX/UI**
    
    -   Temas personalizables
    -   Animaciones
    -   Modo oscuro/claro

## Conclusión

En este capítulo hemos definido la estructura de nuestra aplicación de reservas para gimnasio, estableciendo una base sólida para el desarrollo. Con esta planificación, podemos proceder a la implementación paso a paso, siguiendo las mejores prácticas de Angular e Ionic.

En el siguiente capítulo, comenzaremos con la implementación práctica, creando el proyecto base y desarrollando los modelos y servicios esenciales.

