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í:
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
CRUD SQLite |
CREATE con SQLITE
Para crear un registro, realizaremos el siguiente proceso:
- Definimos la sentencia SQL.
- Obtenemos el nombre de la base de datos.
- 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.
- Si estamos en web, debemos llamar al método saveToStore pasándole el nombre de la base de datos.
- Devolvemos los cambios.
sqlite.service.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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:
- Definimos la sentencia SQL.
- Obtenemos el nombre de la base de datos.
- 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.
- Creamos un array vacio donde guardaremos los valores.
- En caso de que estemos en IOS, eliminaremos la primera fila ya que contiene el nombre de las columnas.
- Recorremos los valores y los insertamos en el array.
sqlite.service.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
- Definimos la sentencia SQL.
- Obtenemos el nombre de la base de datos.
- 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.
- Si estamos en web, debemos llamar al método saveToStore pasándole el nombre de la base de datos.
- Devolvemos los cambios.
sqlite.service.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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:
-
- Definimos la sentencia SQL.
- Obtenemos el nombre de la base de datos.
- 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.
- Si estamos en web, debemos llamar al método saveToStore pasándole el nombre de la base de datos.
- Devolvemos los cambios.
sqlite.service.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
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.
Deja una respuesta