Tutorial de base de datos Ionic Angular SQLite; a lo largo de esta guía paso a paso, descubrirá cómo crear una operación CRUD de SQLite en la aplicación Ionic Angular con la ayuda del paquete SQLite.

Idealmente, SQLite es una base de datos robusta utilizada exclusivamente para crear un sistema de base de datos en dispositivos más pequeños que nos permiten realizar consultas SQL y construir una aplicación simple con operaciones CRUD.

Genéricamente, en esta guía rápida, demostraremos cómo crear una base de datos SQLite, crear una tabla e insertar en la base de datos del dispositivo, agregar o insertar datos en la tabla.

Obtenga, obtenga o lea datos de la tabla, elimine una fila de la tabla y actualice la fila de la tabla en la aplicación móvil sin conexión iónica sqlite.

Ejemplo de la aplicación móvil Ionic 6 SQLite Offline CRUD

• Paso 1: Configurar entorno iónico
• Paso 2: Actualizar rutas
• Paso 3: Instalar el complemento SQLite
• Paso 4: Actualizar la clase del módulo de aplicación
• Paso 6: Crear servicio CRUD SQLite
• Paso 7: Implementar Crear y Eliminar
• Paso 8: Obtener recopilación de datos y lista de visualización
• Paso 9: Implementar actualización o edición
• Paso 10: Prueba la aplicación Ionic Crud

Configurar entorno iónico

Ionic CLI es una herramienta imprescindible; Por lo tanto, comience con la instalación. Ejecute el comando para iniciar el proceso de instalación:

npm install -g @ionic/cli

JuergaCOPIAR

A continuación, instale la nueva aplicación angular iónica en blanco:

ionic start ionic-sqlite-crud blank --type=angular

JuergaCOPIAR

Dirígete a la carpeta del proyecto:

cd ionic-sqlite-crud

JuergaCOPIAR

A continuación, genere páginas o componentes iónicos con la ayuda del comando sugerido. Asegúrese de eliminar la página de inicio porque no la necesitamos.

ng generate page create

ng generate page edit

JuergaCOPIAR

Eliminar errores de tipo

Debe eliminar los errores de tipo estricto, asegúrese de establecer angularCompilerOptions en el archivo tsconfig.json.“strictTemplates”: false

Actualizar rutas

A continuación, dirígete al archivo de enrutamiento de la aplicación; Agregue la propiedad ID en la ruta de edición establezca considerablemente la creación como una ruta predeterminada.

Actualice el archivo app-routing.module.ts:

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'create',
    pathMatch: 'full'
  },
  {
    path: 'create',
    loadChildren: () => import('./create/create.module').then( m => m.CreatePageModule)
  },  
  {
    path: 'edit/:id',
    loadChildren: () => import('./edit/edit.module').then( m => m.EditPageModule)
  },
];

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

export class AppRoutingModule { }

Instalar el complemento SQLite

Este es el paso más esencial; según las instrucciones, necesitamos instalar los complementos SQLite más Ionic native core.

Abra el terminal, escriba command y luego ejecute.

npm install @ionic-native/sqlite

ionic cordova plugin add cordova-sqlite-storage

npm i @ionic-native/core

Actualizar la clase del módulo de aplicación

Además, necesitamos importar el complemento SQLite a la clase de módulo de la aplicación, y nos da acceso a sus métodos y funciones para usar en toda la aplicación.

Actualice el archivo 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';

// plugins
import { SQLite } from '@ionic-native/sqlite/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    SQLite,
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

Crear servicio CRUD SQLite

El servicio angular es mejor para la capacidad de administración del código y el paradigma de reutilización. En consecuencia, genere el servicio para la aplicación móvil ionic offline crud utilizando el siguiente comando.

ng g service crud

En el siguiente paso, tenemos que crear y agregar, leer, actualizar y eliminar métodos. Lo más importante es que tenemos que invocar la conexión de la base de datos SQLite en la aplicación Ionic desde el archivo de servicio iónico y angular.

El sqlite ofrece el método create, que toma el nombre y la ubicación de la base de datos e inicializa la conexión de la base de datos SQLite.

El comando anterior manifestó el archivo crud.service.ts, ábralo y actualice el código sugerido dentro del archivo.

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';

@Injectable({
  providedIn: 'root'
})

export class CrudService {
  
  private dbInstance: SQLiteObject;
  readonly db_name: string = "remotestack.db";
  readonly db_table: string = "userTable";
  USERS: Array <any> ;

  constructor(
    private platform: Platform,
    private sqlite: SQLite    
  ) { 
    this.databaseConn();
  }

    // Create SQLite database 
    databaseConn() {
        this.platform.ready().then(() => {
          this.sqlite.create({
              name: this.db_name,
              location: 'default'
            }).then((sqLite: SQLiteObject) => {
              this.dbInstance = sqLite;
              sqLite.executeSql(`
                  CREATE TABLE IF NOT EXISTS ${this.db_table} (
                    user_id INTEGER PRIMARY KEY, 
                    name varchar(255),
                    email varchar(255)
                  )`, [])
                .then((res) => {
                  // alert(JSON.stringify(res));
                })
                .catch((error) => alert(JSON.stringify(error)));
            })
            .catch((error) => alert(JSON.stringify(error)));
        });   
    }

    // Crud
    public addItem(n, e) {
      // validation
      if (!n.length || !e.length) { 
        alert('Provide both email & name');
        return;
      }
      this.dbInstance.executeSql(`
      INSERT INTO ${this.db_table} (name, email) VALUES ('${n}', '${e}')`, [])
        .then(() => {
          alert("Success");
          this.getAllUsers();
        }, (e) => {
          alert(JSON.stringify(e.err));
        });
    }

    getAllUsers() {
      return this.dbInstance.executeSql(`SELECT * FROM ${this.db_table}`, []).then((res) => {
        this.USERS = [];
        if (res.rows.length > 0) {
          for (var i = 0; i < res.rows.length; i++) {
            this.USERS.push(res.rows.item(i));
          }
          return this.USERS;
        }
      },(e) => {
        alert(JSON.stringify(e));
      });
    }

    // Get user
    getUser(id): Promise<any> {
      return this.dbInstance.executeSql(`SELECT * FROM ${this.db_table} WHERE user_id = ?`, [id])
      .then((res) => { 
        return {
          user_id: res.rows.item(0).user_id,
          name: res.rows.item(0).name,  
          email: res.rows.item(0).email
        }
      });
    }

    // Update
    updateUser(id, name, email) {
      let data = [name, email];
      return this.dbInstance.executeSql(`UPDATE ${this.db_table} SET name = ?, email = ? WHERE user_id = ${id}`, data)
    }  

    // Delete
    deleteUser(user) {
      this.dbInstance.executeSql(`
      DELETE FROM ${this.db_table} WHERE user_id = ${user}`, [])
        .then(() => {
          alert("User deleted!");
          this.getAllUsers();
        })
        .catch(e => {
          alert(JSON.stringify(e))
        });
    }

}

Tenemos que realizar múltiples tareas utilizando el archivo de servicio, la plataforma de importación primero, los módulos SQLite y SQLiteObject. Estos son esenciales para crear y configurar la conexión de base de datos SQLite cuando la plataforma está lista.

Para manejar las operaciones CRUD estamos usando SQLite, que permite escribir consultas MYSql con el método executeSql(). Además, creamos la conexión de la base de datos SQLite, creamos la base de datos, creamos e insertamos la tabla en la base de datos. Además, addItem(), getAllUsers(), getUser(), updateUser() y deleteUser() para controlar eventos CRUD.

Implementar Crear y Eliminar

En este paso, aprenderemos a implementar cómo crear y mostrar la función de lista en la página iónica utilizando SQLite.

En este paso, agregaremos un formulario básico para permitir a los usuarios ingresar datos como el nombre y el correo electrónico usando ngModel. Utilice CrudService importando y agregando al método constructor, acceda a los métodos de creación de usuarios, obtenga la lista de usuarios de la base de datos SQLite y elimine el objeto de usuario de la base de datos SQLite.

Agregue código en el archivo create.page.ts:

import { Component, OnInit } from '@angular/core';
import { CrudService } from '../crud.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.page.html',
  styleUrls: ['./create.page.scss'],
})

export class CreatePage implements OnInit {

  nameVal: string = "";
  emailVal: string = "";

  constructor(
   private crud: CrudService
  ) {
    this.crud.databaseConn(); 
  }

  ngOnInit() { }

  ionViewDidEnter() {  
    this.crud.getAllUsers()
  }
   
  createUser(){
    this.crud.addItem(this.nameVal, this.emailVal);
  }
   
  remove(user) {
    this.crud.deleteUser(user);
  }
  
}

Para mostrar la recopilación de datos, utilice la directiva ngFor para iterar sobre la colección USERS y mostrarla en el componente de interfaz de usuario del elemento iónico.

Agregue código en el archivo create.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Ionic SQLite Storage Example</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <!-- Create -->
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input [(ngModel)]="nameVal"></ion-input>
  </ion-item>
  
  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input [(ngModel)]="emailVal"></ion-input>
  </ion-item>

  <ion-button color="success" expand="block" (click)="createUser()">
    Add User
  </ion-button>

  
  <!-- Read -->
  <ion-item *ngFor="let user of crud.USERS">
    <ion-label>
      <h2><strong>{{ user.name }}</strong></h2>
      <p>{{ user.email }}</p>
    </ion-label>

    <div class="item-note" item-end>
      <ion-icon color="primary" name="create" style="zoom:1.3" [routerLink]="['/edit/', user.user_id]"></ion-icon>
      
      <ion-icon color="danger" name="trash" style="zoom:1.3" (click)="remove(user.user_id)"></ion-icon>
    </div>
  </ion-item>
  
</ion-content>

Implementar actualización o edición

Por último, implementaremos la función de edición o actualización, así que asegúrese de crear el formulario e insertar los valores del blog utilizando el servicio angular.

Además, usamos la API ActivatedRoute para obtener el identificador de usuario de la url, y se está pasando al método getUser(). Esto es obtener el objeto de usuario único de la base de datos SQLite, también utilizando el método updateUser() para actualizar los datos de usuario.

Actualice el archivo edit.page.ts:

import { Component, OnInit } from '@angular/core';
import { CrudService } from '../crud.service';
import { ActivatedRoute, Router } from "@angular/router";

@Component({
  selector: 'app-edit',
  templateUrl: './edit.page.html',
  styleUrls: ['./edit.page.scss'],
})

export class EditPage implements OnInit {
  id: any;
  nameVal: string = "";
  emailVal: string = "";

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private crud: CrudService
  ) { 
    this.id = this.activatedRoute.snapshot.paramMap.get('id');

    this.crud.getUser(this.id).then((res) => {
      this.nameVal = res['name'];
      this.emailVal = res['email']; 
    })
  }

  ngOnInit() { }

  onUpdate() {
     this.crud.updateUser(this.id, this.nameVal, this.emailVal).then(() => {
        this.router.navigate(['/create']);
     })
  }

}

Abra y actualice el archivo edit.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Edit</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input [(ngModel)]="nameVal"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input [(ngModel)]="emailVal"></ion-input>
  </ion-item>

  <ion-button color="dark" expand="block" (click)="onUpdate()">
    Update
  </ion-button>
</ion-content>

Prueba la aplicación Ionic Crud

En el paso final, debe seguir las instrucciones recomendadas para iniciar la aplicación de ejemplo de crud iónico:

Incluye la plataforma:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

A partir de entonces, cree la compilación ejecutable:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

En última instancia, ejecute la aplicación en el dispositivo:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l