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