SQLite y IONIC – Como hacer un CRUD completo

Hola a todos, hoy os voy a explicar como podemos hacer un CRUD SQLite en IONIC.

En IONIC podemos usar sqlite que nos permite hacer bases de datos locales, esto en móviles es muy útil, ya que nos permite gestionar de forma fácil y local datos de forma rápida, algo que en un móvil es muy necesario.

Crear proyecto IONIC

Primero, debemos crear nuestro proyecto IONIC, tenemos un tutorial aquí:

IONIC 7 – Guía sobre como crear tu primera aplicación

Ya hicimos en otro tutorial como conectar sqlite en IONIC.

discoduroderoer.es/integracion-de-sqlite-en-aplicaciones-ionic-con-capacitor

Continuaremos desde ese código.

Preparación del CRUD

Vamos a preparar un pequeño formulario y una lista para testear nuestro CRUD.

Fichero home.ts

import { Component } from '@angular/core';
import { SqliteService } from '../services/sqlite.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public language: string;
  public languages: string[];

  constructor(private sqlite: SqliteService) {
    this.language = '';
    this.languages = [];
  }

  // Al entrar, leemos la base de datos
  ionViewWillEnter(){
    this.read();
  }

  create(){

  }

  read(){

  }
  
  update(language: string){

  }

  delete(language: string){

  }

}

Fichero home.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      CRUD SQLite
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  
  <!-- Formulario para añadir un elemento -->
  <ion-item>
    <ion-input label="Lenguaje de programacion: " [(ngModel)]="language" name="language"></ion-input>
    <ion-button (click)="create()">
      <ion-icon name="add-outline"></ion-icon>
    </ion-button>
  </ion-item>

  <!-- Lista de todos los elementos -->
  <ion-list>
    <ion-item-sliding *ngFor="let language of languages">

      <!-- elemento -->
      <ion-item>
        <ion-label>{{language}}</ion-label>
      </ion-item>

      <!-- opciones -->
      <ion-item-options>
        <ion-item-option color="warning" (click)="update(language)">
          <ion-icon name="pencil-outline" slot="icon-only"></ion-icon>
        </ion-item-option>
        <ion-item-option color="danger" (click)="delete(language)">
          <ion-icon name="trash-outline" slot="icon-only"></ion-icon>
        </ion-item-option>
      </ion-item-options>
      
    </ion-item-sliding>


  </ion-list>


</ion-content>

CREATE con SQLITE

Para crear un registro, realizaremos el siguiente proceso:

  1. Definimos la sentencia SQL.
  2. Obtenemos el nombre de la base de datos.
  3. Usamos el método executeSet de CapacitorSQLite para ejecutar la instrucción, le pasaremos el nombre de la base de datos, la sentencia y los valores.
  4. Si estamos en web, debemos llamar al método saveToStore pasándole el nombre de la base de datos.
  5. Devolvemos los cambios.

sqlite.service.ts

async create(language: string) {
  // Sentencia para insertar un registro
  let sql = 'INSERT INTO languages VALUES(?)';
  // Obtengo la base de datos
  const dbName = await this.getDbName();
  // Ejecutamos la sentencia
  return CapacitorSQLite.executeSet({
    database: dbName,
    set: [
      {
        statement: sql,
        values: [
          language
        ]
      }
    ]
  }).then((changes: capSQLiteChanges) => {
    // Si es web, debemos guardar el cambio en la webstore manualmente
    if (this.isWeb) {
      CapacitorSQLite.saveToStore({ database: dbName });
    }
    return changes;
  }).catch(err => Promise.reject(err))
}

home.ts

create(){
  // Creamos un elemento en la base de datos
  this.sqlite.create(this.language.toUpperCase()).then( (changes) =>{
    console.log(changes);
    console.log("Creado");
    this.language = '';
    this.read(); // Volvemos a leer
  }).catch(err => {
    console.error(err);
    console.error("Error al crear");
  })
}

READ con SQLITE

Ahora vamos a leer todos los registros, realizaremos el siguiente proceso:

  1. Definimos la sentencia SQL.
  2. Obtenemos el nombre de la base de datos.
  3. Usamos el método query de CapacitorSQLite para ejecutar la consulta, le pasaremos el nombre de la base de datos y la sentencia. Le pasaremos el array de values vacio para que funcione en Android.
  4. Creamos un array vacio donde guardaremos los valores.
  5. En caso de que estemos en IOS, eliminaremos la primera fila ya que contiene el nombre de las columnas.
  6. Recorremos los valores y los insertamos en el array.

sqlite.service.ts

async read() {
  // Sentencia para leer todos los registros
  let sql = 'SELECT * FROM languages';
  // Obtengo la base de datos
  const dbName = await this.getDbName();
  // Ejecutamos la sentencia
  return CapacitorSQLite.query({
    database: dbName,
    statement: sql,
    values: [] // necesario para android
  }).then((response: capSQLiteValues) => {
    let languages: string[] = [];

    // Si es IOS y hay datos, elimino la primera fila
    // Esto se debe a que la primera fila es informacion de las tablas
    if (this.isIOS && response.values.length > 0) {
      response.values.shift();
    }

    // recorremos los datos
    for (let index = 0; index < response.values.length; index++) {
      const language = response.values[index];
      languages.push(language.name);
    }
    return languages;

  }).catch(err => Promise.reject(err))
}

home.ts

read(){
  // Leemos los datos de la base de datos
  this.sqlite.read().then( (languages: string[]) => {
    this.languages = languages;
    console.log("Leido");
    console.log(this.languages);
  }).catch(err => {
    console.error(err);
    console.error("Error al leer");
  })
}

UPDATE con SQLITE

Ya teniendo los datos, ahora podemos actualizar los datos, realizaremos el siguiente proceso:

  1. Definimos la sentencia SQL.
  2. Obtenemos el nombre de la base de datos.
  3. Usamos el método executeSet de CapacitorSQLite para ejecutar la instrucción, le pasaremos el nombre de la base de datos, la sentencia y los valores.
  4. Si estamos en web, debemos llamar al método saveToStore pasándole el nombre de la base de datos.
  5. Devolvemos los cambios.

sqlite.service.ts

async update(newLanguage: string, originalLanguage: string) {
  // Sentencia para actualizar un registro
  let sql = 'UPDATE languages SET name=? WHERE name=?';
  // Obtengo la base de datos
  const dbName = await this.getDbName();
  // Ejecutamos la sentencia
  return CapacitorSQLite.executeSet({
    database: dbName,
    set: [
      {
        statement: sql,
        values: [
          newLanguage,
          originalLanguage
        ]
      }
    ]
  }).then((changes: capSQLiteChanges) => {
    // Si es web, debemos guardar el cambio en la webstore manualmente
    if (this.isWeb) {
      CapacitorSQLite.saveToStore({ database: dbName });
    }
    return changes;
  }).catch(err => Promise.reject(err))
}

home.ts

update(language: string){
  // Actualizamos el elemento (language) por el nuevo elemento (this.language)
  this.sqlite.update(this.language.toUpperCase(), language).then( (changes) => {
    console.log(changes);
    console.log("Actualizado");
    this.language = '';
    this.read(); // Volvemos a leer
  }).catch(err => {
    console.error(err);
    console.error("Error al actualizar");
  })
}

DELETE con SQLITE

Debemos poder eliminar datos, realizaremos el siguiente proceso:

    1. Definimos la sentencia SQL.
    2. Obtenemos el nombre de la base de datos.
    3. Usamos el método executeSet de CapacitorSQLite para ejecutar la instrucción, le pasaremos el nombre de la base de datos, la sentencia y los valores.
    4. Si estamos en web, debemos llamar al método saveToStore pasándole el nombre de la base de datos.
    5. Devolvemos los cambios.

sqlite.service.ts

async delete(language: string) {
    // Sentencia para eliminar un registro
    let sql = 'DELETE FROM languages WHERE name=?';
    // Obtengo la base de datos
    const dbName = await this.getDbName();
    // Ejecutamos la sentencia
    return CapacitorSQLite.executeSet({
      database: dbName,
      set: [
        {
          statement: sql,
          values: [
            language
          ]
        }
      ]
    }).then((changes: capSQLiteChanges) => {
      // Si es web, debemos guardar el cambio en la webstore manualmente
      if (this.isWeb) {
        CapacitorSQLite.saveToStore({ database: dbName });
      }
      return changes;
    }).catch(err => Promise.reject(err))
  }

home.ts

delete(language: string){
  // Borramos el elemento
  this.sqlite.delete(language).then( (changes) => {
    console.log(changes);
    console.log("Borrado");
    this.read(); // Volvemos a leer
  }).catch(err => {
    console.error(err);
    console.error("Error al borrar");
  })
}

Aquí os dejo el repositorio en Github.

Por último, os dejo un video donde os explico todo lo anterior, a partir del minuto 21:36.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *