Saltar al contenido

SQLite Ionic | Aprende a usarlas como un profesional aquí

SQLite Ionic

¿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?

Si no has respondido que SÍ a alguna de estas dos preguntas, déjame decirte que este sitio no es para ti. De lo contrario, déjame decirte que no eres el único, ni serás el último, que pasa por aquí a intentar dar solución a sus dudas.

Es más, hasta los que somos más expertos en el tema necesitamos de estos artículos cuando utilizamos algo que no hemos usado nunca, o que llevamos mucho tiempo sin usar, así que tranquilo.

Mi nombre es Aitor Sánchez González, soy desarrollador de apps desde el año 2014, y en este artículo te enseñaré cómo puedes persistir datos de tu app en el dispositivo de tu cliente mediante la librería SQLite Ionic.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

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.

 

Más tutoriales de Ionic

 

Y el tutorial en vídeo para los más ganduletes

 

Ya solo queda despedirme y darte las gracias por estar aquí, apoyando la causa cómo muchos otros que lo hacen. Si no lo has hecho ya, pásate por aquí, es el círculo. Si no sabes lo que es, te aconsejo que accedas por que dentro están todos los detalles.

Pues nos vemos en el sgiuiente artículo. Hasta entonces, que vaya bien.