taller-ionic/cap3.md

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:

{
  "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.