Ionic 5 con CRUD de almacenamiento local y ejemplo de temática

By Edgar Dueñas, 05 August, 2020

Ionic 5 permite crear aplicaciones móviles multiplataforma para Android e iOS y aplicaciones web progresivas con una base de código. 

Aprenda a desarrollar su primera aplicación Ionic 5

En este tutorial, aprenderá a desarrollar su primera aplicación Ionic 5. Utilizará la última versión de Ionic CLI 5 para generar y trabajar con su proyecto.

La versión de PWA se puede implementar en la web utilizando páginas de GitHub, GitLab o Netlify, etc.

Usaremos la API de Ionic Storage para implementar las operaciones CRUD en el almacenamiento local. Y veremos cómo utilizar y componentes iónicos como tema ion-content, ion-listy ion-button, etc.


Para seguir con este tutorial, debe tener algunos requisitos previos:

Necesita una máquina de desarrollo con Node.js y npm instalados. Puede descargar las últimas versiones desde el sitio web oficial ,
Debe tener Git instalado en su sistema porque se usará para implementar su código fuente en GitHub,
Un editor de código o IDE para escribir su código. 
También necesita estar familiarizado con:

TypeScript,
JavaScript,
CSS y Sass,
HTML.

Instalación de Ionic CLI 5 y Cordova

Comenzará su viaje con Ionic 5 instalando la CLI de Ionic desde npm usando el siguiente comando:
 

 

Snippet
npm install -g ionic

Creación de su proyecto Ionic 5

Después de instalar Ionic CLI 5, puede crear un proyecto con un comando simple. En su terminal, ejecute:

Snippet
ionic start ionic-first-app blank --type=angular

Estamos creando un proyecto basado en Angular ( --type=angular), nombrado myappusando la blankplantilla.

Se le preguntará si desea Integrate your new app with Capacitor to target native iOS and Android? (y/N)? debe escribir y.

Después, ejecute el siguiente comando:

Snippet
ionic start

Y especifique interactivamente todas esas opciones cuando lo requiera la CLI.

Después de generar los archivos del proyecto e instalar las dependencias requeridas, la CLI de Ionic le preguntará si desea "¿Instalar el SDK gratuito de Ionic Appflow y conectar su aplicación?"

Escriba yy presiona Enter.

Entonces, ¿qué es el SDK de Ionic Appflow?

Ionic Appflow es un conjunto de servicios construido sobre Ionic que puede usar para actualizar su aplicación instantáneamente sin pasar por el proceso de revisión de la tienda de aplicaciones, empaquetar sus aplicaciones en la nube y monitorear errores, etc.

Más adelante veremos cómo podemos usarlo para empaquetar su aplicación en la nube sin necesidad de instalar Java, SDK de Android para apuntar a aplicaciones de Android o macOS y Xcode para aplicaciones de iOS.

Sirviendo su aplicación Ionic 5

Gracias a Ionic e Ionic CLI, puede desarrollar su aplicación del mismo modo que desarrolla aplicaciones web front-end (como las aplicaciones angulares, por ejemplo) utilizando un servidor de desarrollo local y el navegador. En su terminal, ejecute los siguientes comandos para servir su aplicación Ionic 5:

Snippet
cd ionic-first-app 
ionic serve

Esto iniciará un servidor de desarrollo que se ejecutará en el localhost: 8000 y automáticamente abrirá su navegador predeterminado y navegará a esa dirección.

La aplicación que estaremos construyendo

En este curso, crearemos una aplicación de administración de tareas simple que puede utilizar para administrar sus tareas. Aprenderá a implementar operaciones CRUD en su aplicación Ionic 5 utilizando el almacenamiento local y la base de datos IndexedDB del navegador .

Generando una nueva página

El iniciador en blanco ya viene con una página de inicio, agreguemos una página más que se llamara about.

Regrese a una nueva terminal, navegue a la carpeta de su proyecto y ejecute:

Snippet
ionic generate page about

La CLI de Ionic también ha agregado una nueva ruta en la src/app/app-routing.module.tsque contiene información de enrutamiento para su aplicación:

Snippet
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then( m => m.AboutPageModule)
  },
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Regrese a su navegador web, debería poder acceder a la página about a través de la ruta /about.

Implementación y tematización de la página Acerca de


Tenemos una nueva página acerca de sin contenido.

Abra src/app/about/about.page.htmly actualícelo de la siguiente manera:

Snippet
<ion-header translucent>
  <ion-toolbar color="primary">
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content color="primary" fullscreen>
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">About</ion-title>
    </ion-toolbar>
  </ion-header>
 
  <div>
    <strong>Todo v1.0</strong>
  </div>
</ion-content>

A continuación, abra src/app/about/about.page.scss y agregue los siguientes estilos:

Snippet
ion-content {
    --padding-bottom: 20px;
    --padding-end: 20px;
    --padding-start: 20px;
    --padding-top: 20px;
}

Tematización de la página de inicio

abrir src/app/home/home.page.htm ly actualiza lo siguiente:

Snippet
<ion-header translucent>
  <ion-toolbar color="primary">
    <ion-title>
      Todo
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content color="primary" fullscreen>
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Todo</ion-title>
    </ion-toolbar>
  </ion-header>
 
</ion-content>

A continuación, abra el archivo src/app/home/home.page.scss  elimine los estilos existentes y agregue lo siguiente:

Snippet
ion-content {
  --padding-bottom: 20px;
  --padding-end: 20px;
  --padding-start: 20px;
  --padding-top: 20px;
}

Importación del módulo de almacenamiento iónico

Usaremos el módulo Ionic Storage para trabajar con el almacenamiento local en nuestra aplicación.

Regrese a su terminal y ejecute el siguiente comando para instalar el paquete: @ionic/storage

Snippet
npm install --save @ionic/storage

Abra el archivo src/app/app.module.ts y la actualización es la siguiente:

Snippet
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
 
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
 
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
 
import { IonicStorageModule } from '@ionic/storage';
 
 
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), IonicStorageModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Creación de un servicio CRUD para almacenamiento de datos

Creemos ahora un servicio que encapsule el código para almacenar y recuperar todos para el almacenamiento local de su aplicación Ionic 5.

Regrese a su terminal y ejecute el siguiente comando:

Snippet
ionic generate service todo

Esto dará como resultado:

Snippet
> ng generate service todo
CREATE src/app/todo.service.spec.ts (323 bytes)
CREATE src/app/todo.service.ts (133 bytes)
[OK] Generated service!

Abra src/app/todo.service.tsy actualícelo de la siguiente manera:

Snippet
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
 
@Injectable({
  providedIn: 'root'
})
export class TodoService {
 
  constructor(public storage: Storage) { }
}

Importamos el servicio Ionic 5 Storage y lo inyectamos a través del constructor del servicio.

Luego, genere una interfaz TypeScript usando el siguiente comando:

Snippet
ionic generate interface todo

Abra el archivo src/app/todo.ts y actualícelo de la siguiente manera:

Snippet
export interface Todo {
    title: string; 
    note: string;
    completed: boolean;
}

A continuación, vuelva al archivo src/app/todo.service.ts e importe la interfaz de Todo:

Snippet
import { Todo } from './todo';

Finalmente, agregue los siguientes métodos:

Snippet
public async generateKey(): Promise<string>{
    let key = `todo${ parseInt(`${Math.random() * 100}`)}`;
    let ret = await this.storage.get(key);
 
    while(ret){
      key = `todo${ parseInt(`${Math.random() * 100}`)}`;
      ret = await this.storage.get(key);
    }
    return key;
  }
  public async read(): Promise<Todo[]>{
 
    let todos: Array<Todo> = [];
    await this.storage.forEach((v, key, i)=>{
      if(key.startsWith("todo")){
          todos.push(v);
      }
    });
 
    return todos;
  }
 
  public async create(key: string , todo: Todo){
    console.log("Creating todo: ", todo);
    return await this.storage.set(key, todo);
  }
 
  public async update(todo: Todo){
    return await this.storage.set(todo.key, todo);
  }
 
  public async delete(key: string){
    return await this.storage.remove(key);
  }

Creando la UI

Después de implementar el servicio para operaciones CRUD utilizando la base de datos de almacenamiento local.

Abra el archivo src/app/home/home.page.ts y comience importando Todointerfaz y TodoService:

Snippet
import { TodoService } from '../todo.service';
import { Todo } from '../todo';

A continuación, inyecte el servicio y defina un array todos de la siguiente manera:

Snippet
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  public todos: Array<Todo> = [];
  constructor(public todoService: TodoService) {}
}

A continuación, cuando se inicialice el componente, lea los todos del almacenamiento local y agréguelos al array todos:

Snippet
async ngOnInit(){
 
    this.todos = await this.todoService.read();
 
  }

A continuación, defina estos dos métodos para crear una tarea y obtener el icono apropiado según el estado de la tarea:

Snippet
 getIcon(todo){
    if(todo.completed) return 'checkmark-circle';
    else return 'stopwatch';
  }
  public async createTodo(){
    let key = await this.todoService.generateKey();
    let todo = {
      title: `${key}`,
      note: "A new todo",
      completed: true
    };
    await this.todoService.create(key,todo);
    this.todos = await this.todoService.read();
  }

El createTodo() crea un nuevo todo aleatorio cada vez que se llama.

A continuación, abra el src/app/home/home.page.htmlarchivo y actualícelo de la siguiente manera:

Snippet
<ion-header translucent>
  <ion-toolbar color="primary">
 
    <ion-title>
      Todo
    </ion-title>
  </ion-toolbar>
 
</ion-header>
 
<ion-content color="primary" fullscreen>
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Todo</ion-title>
    </ion-toolbar>
  </ion-header>
 
  <ion-button (click)="createTodo()" color="secondary" expand="block">
    Add todo
    <ion-icon name="add-circle" slot="start"></ion-icon>
  </ion-button>
 
  <ion-list style="background: var(--ion-color-primary);">
 
    <ion-item color="primary" *ngFor="let todo of todos">
      <ion-icon [name]="getIcon(todo)" slot="start">
 
      </ion-icon>
 
 
 
      <div slot="end">
 
      </div>
    </ion-item>
  </ion-list>
 
</ion-content>

Comments