En esta actividad, crearás una aplicación móvil básica utilizando Ionic, TypeScript y Angular. Aprenderás a configurar el entorno de desarrollo, crear una nueva aplicación Ionic, añadir componentes, y desplegar la aplicación en un dispositivo o emulador. La aplicación que construirás será una lista de tareas simple (ToDo List).

Herramientas Necesarias

1. Node.js y npm: Para gestionar paquetes y dependencias.
2. Ionic CLI: Para crear y gestionar aplicaciones Ionic.
3. Angular CLI: Para desarrollar aplicaciones Angular.
4. Capacitor: Para interactuar con las funcionalidades nativas del dispositivo.

Comandos necesarios

• npm install -g @ionic/cli: Instala Ionic CLI globalmente.
• ionic start myTodoApp blank --type=angular: Crea una nueva aplicación Ionic con Angular.
• cd myTodoApp: Navega al directorio del proyecto.
• ionic serve: Inicia un servidor de desarrollo.
• ionic generate page my-page: Genera una nueva página.
• ionic build: Construye la aplicación para producción.
• npx cap add android: Añade la plataforma Android.
• npx cap add ios: Añade la plataforma iOS.
• npx cap sync: Sincroniza los cambios con las plataformas nativas.
• npx cap open android: Abre el proyecto en Android Studio.
• npx cap open ios: Abre el proyecto en Xcode.

Sigue estos pasos para configurar tu entorno de desarrollo:

1. Instalar Node.js y npm
2. Instalar Ionic CLI: npm install -g @ionic/cli

Sigue estos pasos para crear una nueva aplicación Ionic:

1. Crear el Proyecto: ionic start myTodoApp blank --type=angular
2. Navegar al Directorio del Proyecto: cd myTodoApp
3. Servir la Aplicación: ionic serve

Genera una página para la lista de tareas utilizando el siguiente comando:

Edita los siguientes archivos para implementar la lógica de la lista de tareas:

tasks.page.html

<ion-header>
  <!-- Barra de herramientas con el título de la página -->
  <ion-toolbar>
    <ion-title>
      Lista de Tareas
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Itera sobre las tareas y muestra cada una -->
  <ion-item *ngFor="let task of tasks">
    <ion-label>{{ task }}</ion-label>
    <ion-button fill="clear" (click)="deleteTask(task)">Delete</ion-button>
  </ion-item>
  <!-- Entrada para una nueva tarea -->
  <ion-item>
    <ion-input [(ngModel)]="newTask" placeholder="Nueva tarea"></ion-input>
    <ion-button (click)="addTask()">Añadir</ion-button>
  </ion-item>
</ion-content>

                

tasks.page.ts

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

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.page.html',
  styleUrls: ['./tasks.page.scss'],
})
export class TasksPage {
  tasks: string[] = [];
  newTask: string = '';

  constructor() { }

  // Añade una nueva tarea a la lista
  addTask() {
    if (this.newTask.trim().length > 0) {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }

  // Elimina una tarea de la lista
  deleteTask(task: string) {
    const index = this.tasks.indexOf(task);
    if (index > -1) {
      this.tasks.splice(index, 1);
    }
  }
}

                

Sigue estos pasos para construir y sincronizar la aplicación:

1. Construir la Aplicación: ionic build
2. Añadir Plataformas:
   • npx cap add android
   • npx cap add ios
3. Sincronizar Capacitor: npx cap sync

Despliega la aplicación en Android Studio y Xcode siguiendo estos pasos:

1. Abrir en Android Studio: npx cap open android
2. Abrir en Xcode: npx cap open ios