288 lines
8.3 KiB
Markdown
288 lines
8.3 KiB
Markdown
# 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.
|
|
|