Quantcast

SQLite Ionic | Aprende a usarlas como un profesional aquí

Aitor Sánchez - Blog - Oct. 27, 2023, 10:03 a.m.

¿Buscando la manera de guardar datos de tu aplicación en el teléfono de tu usuario? O, quizás ya sabes cómo hacerlo mediante SQLite Ionic, pero te falta conocer algún detalle cómo, por ejemplo, los parámetros de una función o el nombre de un campo de clase ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo puedes persistir los datos de tu app en el dispositivo de tu cliente mediante la librería SQLite Ionic.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

 

Instalación de SQLite en Ionic

Cómo con todos los componentes desacoplados del core, y que requieren plugin de sistema, es necesario que lo instalemos. Para ello vamos a usar las siguientes dos líneas de consola:

 

$ ionic cordova plugin add cordova-sqlite-storage
$ npm install @awesome-cordova-plugins/sqlite

 

La primera instalará el plugin para la comunicación con la parte nativa del sistema. Y la segunda instalará el módulo que permitirá la comunicación de nuestro código TS con el plugin.

Vale, ya está instalado, continuemos.

 

Configuración de SQLite Ionic

Por otro lado, también debemos de incluir el módulo en nuestros providers para comenzar a usarlos. Recuerdo, cómo he hecho ya en algunos capítulos del curso, que no es necesario que esté en el AppModule.ts cómo lo ponen en todos los sitios. Podemos meterlo en el module que queramos. Eso sí, el rango del alcance de uso se limitará a ese componente y a las herencias de él.

Para esto vamos a utilizar el siguiente código:

 

...
import {SQLite} from "@awesome-cordova-plugins/sqlite/ngx"

...

providers: [
...,
SQLite,
...,
]

...

 

Bien, pues así ya estaríamos a disposición de usarlo donde queramos.

 

Plataformas soportadas

  • Android
  • iOS
  • macOS
  • Windows

 

Vale, ¿y cómo se usa?

Antes de comenzar a aburrirte con la parafernalia, siempre me gusta meter un ejemplo de código para que puedas ver por ti mismo cómo funciona todo, antes de nada.

 

import { SQLite, SQLiteObject } from '@awesome-cordova-plugins/sqlite/ngx';

constructor(private sqlite: SQLite) { }

...

this.sqlite.create({
  name: 'data.db',
  location: 'default'
})
  .then((db: SQLiteObject) => {
    //Lo ideal sería guardar esta instancia de SQLiteObject en una variables estática para utilizarla desde un servicio con un patrón singleton.
    db.executeSql('create table danceMoves(id INTERGER PRIMARY KEY, name VARCHAR(32))', [])
      .then(() => console.log('Executed SQL'))
      .catch(e => console.log(e));
  })
  .catch(e => console.log(e));

 

Aunque básico, el ejemplo no va más allá de esto. Cabe la imaginación, por ejemplo, de aguantar el puntero de la base de datos con un método get o una variable estática en la clase AppModule. Eso, e inicializar todo a partir de la promesa que devuelve la función “create” para que no tengamos problemas.

Pero vamos que el uso básico lo tenemos aquí. Ahora vamos a ver los entresijos de esta clase. Así podremos realizar muchas más cositas.

 

Cómo funciona SQLite

Aunque no debería de incluirlo aquí directamente. Si no en un artículo apartado específico para ello.

 En resumidas cuentas, el sistema genera un archivito “xml” o “html” (si, html) que contiene los datos que nosotros queremos ir persistiendo. Estos datos se alojarán en pares de clave valor. Aunque parezca algo rudimentario nos da muchísima funcionalidad.

Tenemos que objetar que se vuelve lenta de manera exponencial cuando crecen. Pero cómo son para apps tampoco crecen mucho. Así que es un sistema óptimo para este fin.

Y, básicamente, SQLite es esto. Si quieres conocer algo más sobre esto, este enlace es el de la web oficial. Hasta que yo haga el tutorial, puedes acceder a través de él.

Bien, sigamos…

 

Funciones y métodos de Ionic para SQLite

Cómo hago siempre, y para no perder la costumbre, decirte que solo veremos los métodos de esta clase explícitamente. No veremos métodos del padre. Así que, si echas en falta alguno, asegúrate que no sean de alguno de sus parientes. Y si finalmente no está en ellos, dímelo y estaré encantado de agrégalo en cuanto lo vea J

create(config)

  • Será el método que inicializa todo el sistema. El que abre el archivo de la base de datos cuando es llamado, etc…
  • Parámetros
    • config -> SQLiteDatabaseConfig -> Será la clase/interface que contiene la configuración de la base de datos. Veremos sus campos más abajo en el artículo.
  • Retorna una promesa que tendremos que controlar y nos informará cuando todo esté iniciado correctamente. Dentro de esta viene la instancia del objeto SQLiteObject que es el que hará todo el trabajo duro. También lo veremos ahora, más abajo.

 

echoTest()

  • Básicamente nos permite verificar que todo está como tiene que estar. Verifica si el código Javascript y el nativo están instalados.
  • Retorna una promesa que tendremos que controlar y dentro lleva el resultado del test en un objeto “any”.

 

selfTest()

  • También sirve para verificar que todo esté correcto. La diferencia de este con el anterior, es que este verifica si la base de datos está correcta y se puede conectar con ella.
  • Retorna una promesa que tenemos que controlar y que dentro lleva el resultado en un tipo “any”.

 

deleteDatabase(config)

  • Al contrario que “create”, este nos permite eliminar una base de datos.
  • Parámetros:
    • config -> SQLiteDatabaseConfig -> La configuración de la base de datos que queremos eliminar. Cómo he dicho en el “create”, veremos los campos de esta clase más abajo.
  • Retorna una promesa que tendremos que controlar y que lleva consigo el resultado de la eliminación en un tipo “any”.

 

Y listo, ya no hay más métodos de nuestro módulo. Ahora vamos a pasar a ver los de las clases dependientes que hemos visto. Adelante…

SQLiteObject

Cómo he dicho en el método “create”. Este es el objeto que se va a encargar de todo en el sistema. Digamos, en pocas palabras, que es la “conexión” con la base de datos. Y ahora vamos a ver todas sus funciones.

 

  • databaseFeatures()
  • openDBs()
  • addTransaction()
  • transaction(fn)
  • readTransaction()
  • startNextTransaction()
  • open()
  • close()
  • executeSql(consulta)
  • sqlBatch(consulta[])
  • abortallPendingTransactions()

 

No es necesario que las comentemos, su propio nombre indica lo que hacen. Las más importantes, quizás, son “executeSql(cadena)”, que ejecuta la cadena que se ha pasado cómo parámetro, y sqlBatch(querys[]), que ejecutará todas las consultas que se le pasen de manera secuencial.

 

 

SQLiteDatabaseConfig

Cómo hemos visto en el ejemplo de “create”, y en la especificación de “deleteDatabase”, este esta es la clase que tenemos que utilizar cómo parámetro en estos métodos.

Dicho esto, esta interface cuenta con los siguientes campos:

  • name -> string -> El nombre de la base de datos
  • location -> string -> La localización de la base de datos. EJ: “default”
  • iosDatabaseLocation -> string -> La localización de la base de datos en iOS. EJ: “library”
  • createFromLocation -> number -> Este parámetro es para crear una base de datos que ya está rellenada.
    • Ej: openDatabase({name: "my.db", location: 'default', createFromLocation: 1})
  • key -> string -> Es para dar soporte a base de datos encriptadas. Este sería el campo de la contraseña.
    • Ej: openDatabase({ name: 'my-encrypted.db', key: 'user-password-here', location: 'default' });

 

SQLiteTransaction

Esta clase es un poco más compleja. Pero básicamente se trata de un sistema para realizar operaciones pre-programadas en la base de datos. Pero de momento, para lo que nos compete, no es necesario que lo especifiquemos más. Solo con conocer que está ahí, es suficiente. Cuando lo vayas a usar sabrás hacerlo sin necesidad de que yo te lo tenga que explicar.

 

Y si te gusta más ver que leer, en video también

 

 

Algo más que quizás te interesa

La optimización del logo de tu app es una tarea necesaria para ganar más instalaciones, y por extensión más dinero, con tus apps. Por esto hemos creado esta herramienta para ti. Podrás evaluar y optimizar tus logos y espiar los de la competencia. No es espoileo más, entra en el enlace.

 

Pues aquí termina este artículo. Nos vemos en el siguiente ¡Hasta entonces, que vaya bien!

Otros artículos que te pueden interesar

Ionic Keyboard | Con ejemplos claros y sencillos

¿Necesitas recoger información del usuario, la lógica del teclado natural no...

Firebase en Ionic - Qué es y cómo puedes utiliz...

¿Pensando en integrar Firebase dentro de tu app hecha en Ionic? O, quizás, ya lo ha...

Ionic Loading | Muestra el progreso de los que ...

¿Quieres mostrar un cuadro de dialogo a tus usuarios cúando, por ejemplo, hagas pet...

Notificaciones Push Ionic | de 0 a 100 Úsalas c...

¿Buscando querer avisar a tus usaurios de una nueva noticia u oferta dentro de tu aplicaci...

Ionic Email Composer | Aprende cómo usarlo aquí

¿Pensando en incluir funcionalidades de envío y composición de emails con Io...

SearchBar en Ionic - Qué es y cómo lo podemos usar

¿Pensando en incluir una barra de búsqueda, o search bar, en tu aplicación d...

OneSignal Ionic | La guía más completa disponib...

¿Interesado en incluir notificaciones push en tu app hecha en Ionic? O, quizás, lo ...

Background Mode Ionic - Cómo ejecutar tareas en...

¿Quieres realizar tareas asíncronas en tu aplicación con el componente Backg...

Ionic Camera - Cómo usarla con ejemplos incluidos

¿Pensando en incluir funcionalidades de cámara en tu app Ionic con el compomente Io...

File Transfer Ionic | Aquí tienes la guía más c...

¿Pensando en enviar, o recibir, archivos desde internet en tu app? O, quizás, ya sa...