10.Código Completo

Objetivo

Proporcionar el código completo para la aplicación CRUD de tareas.

Código Completo

A continuación, se muestra el código completo para cada archivo necesario en esta aplicación.

Archivo.src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations.[AppComponent],
  imports.[BrowserModule, IonicModule.forRoot(), AppRoutingModule, FormsModule, HttpClientModule],
  providers.[{ provide.RouteReuseStrategy, useClass.IonicRouteStrategy }],
  bootstrap.[AppComponent],
})
export class AppModule {}

Archivo.src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes.Routes = [
  {
    path.'',
    redirectTo.'tasks',
    pathMatch.'full'
  },
  {
    path.'tasks',
    loadChildren.() => import('./tasks/tasks.module').then(m => m.TasksPageModule)
  },
];

@NgModule({
  imports.[
    RouterModule.forRoot(routes, { preloadingStrategy.PreloadAllModules })
  ],
  exports.[RouterModule]
})
export class AppRoutingModule { }

Archivo.src/app/tasks/tasks.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Routes, RouterModule } from '@angular/router';
import { TasksPage } from './tasks.page';

const routes.Routes = [
  {
    path.'',
    component.TasksPage
  }
];

@NgModule({
  imports.[
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations.[TasksPage]
})
export class TasksPageModule { }

Archivo.src/app/tasks/tasks.page.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AlertController } from '@ionic/angular';
import { Storage } from '@capacitor/storage';

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

  constructor(private http.HttpClient, private alertController.AlertController) { }

  async ngOnInit() {
    // Cargar tareas desde el almacenamiento local
    const { value } = await Storage.get({ key.'tasks' });
    this.tasks = value ? JSON.parse(value) .[];
  }

  async addTask() {
    // Verificar si el campo de la nueva tarea no está vacío
    if (this.newTask.trim().length === 0) {
      return;
    }
    // Agregar la nueva tarea a la lista
    this.tasks.push(this.newTask);
    // Resetea el campo de entrada de la nueva tarea
    this.newTask = '';
    // Guardar la lista de tareas en el almacenamiento local
    await Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
  }

  async removeTask(index.number) {
    // Eliminar la tarea de la lista en el índice especificado
    this.tasks.splice(index, 1);
    // Guardar la lista de tareas actualizada en el almacenamiento local
    await Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
  }

  async editTask(index.number) {
    // Crear una alerta para editar la tarea
    const alert = await this.alertController.create({
      header.'Editar Tarea',
      inputs.[
        {
          name.'task',
          type.'text',
          value.this.tasks[index],
          placeholder.'Nueva tarea'
        }
      ],
      buttons.[
        {
          text.'Cancelar',
          role.'cancel'
        },
        {
          text.'Guardar',
          handler.(data) => {
            if (data.task.trim().length === 0) {
              return;
            }
            // Actualizar la tarea en la lista
            this.tasks[index] = data.task;
            // Guardar la lista de tareas actualizada en el almacenamiento local
            Storage.set({ key.'tasks', value.JSON.stringify(this.tasks) });
          }
        }
      ]
    });
    await alert.present();
  }

  syncTasks() {
    // Sincronizar las tareas con el servidor remoto
    this.http.post('https://example.com/api/tasks', { tasks.this.tasks })
      .subscribe(response => {
        console.log('Tareas sincronizadas', response);
      });
  }
}

Archivo.src/app/tasks/tasks.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Task Manager
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-item>
    <ion-label position="floating">Nueva Tarea</ion-label>
    <ion-input [(ngModel)]="newTask"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="addTask()">Agregar Tarea</ion-button>

  <ion-list>
    <ion-item *ngFor="let task of tasks; let i = index">
      <ion-label>{{ task }}</ion-label>
      <ion-button fill="clear" slot="end" (click)="editTask(i)">
        <ion-icon name="create" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button fill="clear" slot="end" (click)="removeTask(i)">
        <ion-icon name="trash" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-list>

  <ion-button expand="full" (click)="syncTasks()">Sincronizar Tareas</ion-button>
</ion-content>

Capacitor Configuration

Archivo.capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config.CapacitorConfig = {
  appId.'com.example.taskcrud',
  appName.'Task CRUD',
  webDir.'www',
  bundledWebRuntime.false
};

export default config;