taller-ionic/cap1.md

# Taller: Desarrollo con Angular e Ionic

## Capítulo 1: Introducción a Angular e Ionic

## 1. ¿Qué es Angular?

Angular es un framework de desarrollo front-end mantenido por Google, diseñado para crear aplicaciones web de una sola página (SPA) y aplicaciones móviles. Algunas características clave:

- **Basado en componentes**: Toda la interfaz se construye mediante componentes reutilizables
- **TypeScript**: Utiliza TypeScript como lenguaje principal, añadiendo tipos estáticos a JavaScript
- **Completo**: Ofrece soluciones integradas para enrutamiento, formularios, HTTP, animaciones, etc.
- **Modular**: Su arquitectura permite dividir la aplicación en módulos funcionales
- **Reactivo**: Facilita la programación reactiva mediante RxJS

Angular utiliza un sistema de "detección de cambios" para mantener sincronizada la interfaz de usuario con el estado de la aplicación, lo que permite crear interfaces dinámicas y reactivas.

## 2. Angular CLI: La Herramienta de Línea de Comandos

El Angular CLI (Command Line Interface) es una herramienta oficial que simplifica enormemente el desarrollo con Angular:

```bash
# Instalación global
npm install -g @angular/cli

# Crear nuevo proyecto
ng new mi-proyecto

# Generar componentes, servicios, etc.
ng generate component mi-componente
ng generate service mi-servicio

# Iniciar servidor de desarrollo
ng serve

# Construir para producción
ng build --prod
```

Beneficios del CLI:

- **Scaffolding**: Generación de código con estructura y configuración correctas
- **Herramientas de desarrollo**: Servidor local con recarga en vivo (live reload)
- **Optimización**: Empaquetado y minificación para producción
- **Testing**: Configuración automática para pruebas unitarias e integración
- **Actualización**: Facilita la actualización entre versiones de Angular

## 3. Angular vs Desarrollo Web Tradicional

Angular se asemeja al desarrollo de páginas web normales, pero con una estructura y enfoque diferentes:

| Desarrollo Web Tradicional | Desarrollo con Angular |
|---------------------------|------------------------|
| Páginas HTML separadas | Aplicación de una sola página (SPA) |
| jQuery para manipular DOM | Vinculación de datos bidireccional |
| JavaScript vanilla | TypeScript con tipos estáticos |
| Recarga completa entre páginas | Navegación sin recarga (enrutamiento SPA) |
| Mezcla de lógica y presentación | Separación modelo-vista-controlador |
| Scripts y estilos globales | Encapsulación de componentes |

A pesar de las diferencias, los conocimientos de HTML, CSS y JavaScript son totalmente aplicables en Angular, ya que seguimos trabajando con estos lenguajes fundamentales pero de manera estructurada.

## 4. Componentes Básicos de Angular

#### Componentes

El elemento fundamental de las aplicaciones Angular:

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-contador',
  template: `
    <div>
      <h2>Contador: {{ contador }}</h2>
      <button (click)="incrementar()">+</button>
      <button (click)="decrementar()">-</button>
    </div>
  `,
  styles: [`
    div { text-align: center; }
    button { margin: 0 5px; }
  `]
})
export class ContadorComponent {
  contador = 0;
  
  incrementar() {
    this.contador++;
  }
  
  decrementar() {
    this.contador--;
  }
}
```

#### Módulos

Organizan la aplicación en bloques funcionales:

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ContadorComponent } from './contador/contador.component';

@NgModule({
  declarations: [
    AppComponent,
    ContadorComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

#### Servicios

Encapsulan la lógica de negocio y son inyectables en componentes:

```typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DatosService {
  private datos = ['Primer elemento', 'Segundo elemento'];
  
  getDatos() {
    return this.datos;
  }
  
  agregarDato(dato: string) {
    this.datos.push(dato);
  }
}
```

#### Directivas

Modifican el comportamiento del DOM:

```html
<!-- Directiva estructural *ngFor -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

<!-- Directiva estructural *ngIf -->
<div *ngIf="mostrarContenido">
  Este contenido es condicional
</div>

<!-- Directiva de atributo -->
<p [ngStyle]="{'color': color, 'font-size': tamano + 'px'}">
  Texto con estilo dinámico
</p>
```

#### Pipes

Transforman datos para su visualización:

```html
<p>{{ fecha | date:'dd/MM/yyyy' }}</p>
<p>{{ precio | currency:'EUR' }}</p>
<p>{{ nombre | uppercase }}</p>
<p>{{ textoLargo | slice:0:50 }}...</p>
```

## 5. ¿Qué es Ionic?

Ionic es un framework de desarrollo de aplicaciones móviles híbridas que se construye sobre Angular:

- **Multiplataforma**: Una única base de código para iOS, Android y web
- **Componentes nativos**: UI con apariencia y comportamiento nativo
- **Capacitor/Cordova**: Acceso a APIs nativas del dispositivo
- **Rendimiento optimizado**: Aplicaciones rápidas y responsivas

## 6. Componentes UI de Ionic

Ionic ofrece una amplia biblioteca de componentes que siguen las directrices de diseño de iOS y Android:

#### Navegación y Estructura

```html
<!-- Tabs -->
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Inicio</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="search">
      <ion-icon name="search"></ion-icon>
      <ion-label>Buscar</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
      <ion-label>Perfil</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

<!-- Menú lateral -->
<ion-menu side="start" menuId="first">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Menú</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Inicio</ion-item>
      <ion-item>Perfil</ion-item>
      <ion-item>Configuración</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
```

> **Nota:** Para ver ejemplos interactivos de estos componentes, visite la documentación oficial:
> - [Ionic Tabs](https://ionicframework.com/docs/api/tabs)
> - [Ionic Menu](https://ionicframework.com/docs/api/menu)

#### Componentes Básicos

```html
<!-- Botones -->
<ion-button>Botón Estándar</ion-button>
<ion-button fill="outline">Botón Outline</ion-button>
<ion-button expand="block" color="success">Botón Block</ion-button>

<!-- Cards -->
<ion-card>
  <ion-card-header>
    <ion-card-subtitle>Subtítulo</ion-card-subtitle>
    <ion-card-title>Título Principal</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    Contenido detallado de la tarjeta que puede incluir
    texto, imágenes y otros elementos.
  </ion-card-content>
</ion-card>

<!-- Listas -->
<ion-list>
  <ion-list-header>Usuarios</ion-list-header>
  <ion-item>
    <ion-avatar slot="start">
      <img src="avatar.png">
    </ion-avatar>
    <ion-label>
      <h2>Juan Pérez</h2>
      <p>Desarrollador</p>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-avatar slot="start">
      <img src="avatar2.png">
    </ion-avatar>
    <ion-label>
      <h2>María García</h2>
      <p>Diseñadora</p>
    </ion-label>
  </ion-item>
</ion-list>
```

> **Nota:** Puede visualizar estos componentes en la documentación oficial:
> - [Ionic Buttons](https://ionicframework.com/docs/api/button)
> - [Ionic Cards](https://ionicframework.com/docs/api/card)
> - [Ionic Lists](https://ionicframework.com/docs/api/list)

#### Formularios y Entrada

```html
<!-- Inputs básicos -->
<ion-item>
  <ion-label position="floating">Nombre</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Email</ion-label>
  <ion-input type="email"></ion-input>
</ion-item>

<!-- Selectores -->
<ion-item>
  <ion-label>Categoría</ion-label>
  <ion-select>
    <ion-select-option value="deportes">Deportes</ion-select-option>
    <ion-select-option value="musica">Música</ion-select-option>
    <ion-select-option value="tecnologia">Tecnología</ion-select-option>
  </ion-select>
</ion-item>

<!-- Toggle y checkbox -->
<ion-item>
  <ion-label>Notificaciones</ion-label>
  <ion-toggle slot="end"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Acepto términos</ion-label>
  <ion-checkbox slot="start"></ion-checkbox>
</ion-item>
```

> **Nota:** Consulte la documentación oficial para ver ejemplos interactivos:
> - [Ionic Input](https://ionicframework.com/docs/api/input)
> - [Ionic Select](https://ionicframework.com/docs/api/select)
> - [Ionic Toggle](https://ionicframework.com/docs/api/toggle)
> - [Ionic Checkbox](https://ionicframework.com/docs/api/checkbox)

#### Feedback y Alertas

```typescript
import { AlertController, ToastController, LoadingController } from '@ionic/angular';

constructor(
  private alertCtrl: AlertController,
  private toastCtrl: ToastController,
  private loadingCtrl: LoadingController
) {}

async mostrarAlerta() {
  const alert = await this.alertCtrl.create({
    header: 'Alerta',
    subHeader: 'Información importante',
    message: '¿Estás seguro de realizar esta acción?',
    buttons: ['Cancelar', 'Aceptar']
  });
  await alert.present();
}

async mostrarToast() {
  const toast = await this.toastCtrl.create({
    message: 'Operación completada con éxito',
    duration: 2000,
    position: 'bottom',
    color: 'success'
  });
  toast.present();
}

async mostrarCargando() {
  const loading = await this.loadingCtrl.create({
    message: 'Cargando datos...',
    duration: 2000
  });
  await loading.present();
}
```

> **Nota:** Para más información sobre alertas y elementos interactivos, consulte:
> - [Ionic Alert](https://ionicframework.com/docs/api/alert)
> - [Ionic Toast](https://ionicframework.com/docs/api/toast)
> - [Ionic Loading](https://ionicframework.com/docs/api/loading)

## 7. Capacitor: El Puente Nativo

Capacitor es el framework que permite a Ionic acceder a las capacidades nativas del dispositivo:

- Cámara y galería de fotos
- Geolocalización
- Almacenamiento persistente
- Notificaciones push
- Sensores del dispositivo
- Archivos y sistema de archivos

Ejemplo básico de uso de Capacitor:

```typescript
import { Camera, CameraResultType } from '@capacitor/camera';

async function tomarFoto() {
  const imagen = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  
  // Usar la imagen (imagen.webPath)
  const imagenUrl = imagen.webPath;
}
```

## 8. Ciclo de Desarrollo con Ionic y Angular

El proceso típico de desarrollo con Ionic y Angular incluye:

1. **Creación del proyecto**:
   ```bash
   # Crear un nuevo proyecto (por defecto usa Angular)
   ionic start mi-proyecto-ionic
   
   # Especificar el framework (angular, react, vue)
   ionic start mi-proyecto-ionic --type=angular
   ```

2. **Desarrollo en navegador web**:
   ```bash
   # Iniciar servidor de desarrollo con recarga en vivo
   ionic serve
   ```

3. **Pruebas en dispositivo real**:
   ```bash
   # Añadir plataforma Android
   ionic capacitor add android
   
   # Ejecutar en dispositivo con recarga en vivo
   ionic capacitor run android --livereload
   ```

4. **Compilación para producción**:
   ```bash
   # Construir la aplicación optimizada
   ionic build --prod
   
   # Copiar los archivos a las plataformas nativas
   npx cap copy
   
   # Abrir el proyecto en Android Studio para ajustes finales
   npx cap open android
   ```

## Resumen

Angular e Ionic forman una poderosa combinación para desarrollar aplicaciones móviles multiplataforma:

- Angular proporciona la estructura, organización y lógica
- Ionic aporta componentes UI con aspecto nativo
- Capacitor permite acceder a características nativas del dispositivo
- El desarrollo es similar al web tradicional, pero más estructurado y optimizado

En los siguientes capítulos, exploraremos más a fondo cada uno de estos conceptos y construiremos paso a paso una aplicación completa de reservas para un gimnasio, además de la creación básica de un proyecto vacío.

## Recursos y Documentación

- [Documentación oficial de Angular](https://angular.io/docs)
- [Documentación de Ionic Framework](https://ionicframework.com/docs)
- [Capacitor Docs](https://capacitorjs.com/docs)
- [Angular CLI](https://cli.angular.io/)
- [TypeScript](https://www.typescriptlang.org/docs/)