12 KiB
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:
# 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:
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:
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:
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:
<!-- 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:
<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
<!-- 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:
Componentes Básicos
<!-- 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:
Formularios y Entrada
<!-- 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:
Feedback y Alertas
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:
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:
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:
-
Creación del proyecto:
# 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 -
Desarrollo en navegador web:
# Iniciar servidor de desarrollo con recarga en vivo ionic serve -
Pruebas en dispositivo real:
# Añadir plataforma Android ionic capacitor add android # Ejecutar en dispositivo con recarga en vivo ionic capacitor run android --livereload -
Compilación para producción:
# 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.