Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de almacenamiento Ionic 5 / Angular y Cordova SQLite

 Ionic 5 es, hoy en día, uno de los marcos móviles híbridos gratuitos y de código abierto más populares para crear aplicaciones móviles híbridas para Android, iOS e incluso Windows Universal Platform.

Almacenamiento de datos en aplicaciones Ionic 5

Uno de los requisitos clave de una aplicación móvil es el almacenamiento de datos. Es cierto que puede usar el almacenamiento local como cualquier aplicación web (dado que las aplicaciones híbridas son aplicaciones web en esencia), pero tiene limitaciones como dificultades de consulta (es decir, no puede crear consultas de datos complejas) y capacidad: solo puede almacenar un máximo de 10 MB de datos.

Entonces, ¿qué solución tenemos?

¿Cómo utilizar SQLite con Ionic 5 para el almacenamiento de datos?

En este tutorial, veremos cómo usar SQLite, una versión ligera de SQL que no tiene limitación de capacidad (depende solo de la capacidad de almacenamiento de su dispositivo) y puede ejecutar consultas SQL complejas sobre datos. Ahora veamos cómo podemos usar SQLite con Ionic 5 y Angular.

Cree un proyecto Ionic 5 / Angular

Primero, comencemos por crear un nuevo proyecto Ionic basado en Angular. Abra su terminal en Linux / MAC o su símbolo del sistema en Windows y escriba los siguientes comandos para crear un nuevo proyecto:

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

No puede usar SQLite en el navegador, por lo que debe usar un emulador o su dispositivo móvil real. Antes de que pueda hacer eso, agreguemos una plataforma de destino (en nuestro caso, agregaremos Android)

ionic cordova platform add android 

Debe tener Java y Android SDK instalados en su sistema y la ANDROID_HOMEvariable de entorno configurada en la ubicación de su Android SDK.

Si desea apuntar a iOS, debe crear su aplicación en un sistema MAC.

Agregar el complemento Cordova SQLite

A continuación, agreguemos el complemento Cordova para usar SQLite

ionic cordova plugin add cordova-sqlite-storage

No vamos a crear una aplicación completa, sino un ejemplo simple que muestra cómo usar SQLite con Ionic.

Instalación del complemento Ionic Native 5

A continuación, debe instalar el complemento nativo de Ionic:

npm install @ionic-native/sqlite

A continuación, continúe y abra su src/app/home/home.page.tsarchivo y agregue la declaración de importación para importar SQLiteSQLiteObjectdesde ionic-native:

import { SQLite, SQLiteObject } from ‘ionic-native’;  

A continuación, agregue una variable de base de datos a su clase:

private database: SQLiteObject;

A continuación, debe inyectar a SQLitetravés del constructor:

constructor(private sqlite: SQLite) { }

A continuación, en el constructor agregue el siguiente código:

this.sqlite.create({
  name: 'items.db',
  location: 'default'
})
  .then((db: SQLiteObject) => {

    this.database = db;  
    db.executeSql(create table if not exists items(
        reference CHAR(10) PRIMARY KEY,
        name CHAR(30),
        qMin FLOAT,
        qReal FLOAT
      ))`, [])
      .then(() => console.log('Executed SQL'))
      .catch(e => console.log(e));


  })
  .catch(e => console.log(e));

Después de ejecutar su aplicación; items.dbSe creará una base de datos con el nombre y se creará una tabla de base de datos con el itemsnombre solo si no existe.

Ahora, ¿cómo podemos guardar algunos datos en los elementos de nuestra base de datos?

Para guardar datos, solo necesita escribir una consulta SQL Insert con algunos valores. Por ejemplo:

    let q = "INSERT INTO items VALUES (?, ?, ?, ?)";

A continuación, simplemente ejecute la consulta:

    this.database.executeSql(q, { "ITEM000001","ITEM 000001",1.0,100.0});

¿Cómo recuperar datos?

Nuevamente, para obtener o recuperar datos de la itemstabla de la base de datos, solo necesitamos usar la instrucción SQL correcta, esta vez es select:

let items = [];
this.database.executeSql("SELECT * FROM items ").then((r) => {

  if (r.res.rows.length > 0) {
    for (var i = 0; i < r.res.rows.length; i++) {
      items.push(r.res.rows.item(i));
    }
  }

Aquí está el ejemplo completo:

import {Component, OnInit} from '@angular/core';
import {NavController, Platform} from 'ionic-angular';

import { SQLite, SQLiteObject } from ‘ionic-native’;  


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

    private database: SQLiteObject;
    items: Array<any>;

    constructor(private platform: Platform) {

        this.platform.ready().then(() => {
            this.sqlite.create({

nombre: 'items.db', ubicación: 'predeterminado'}). then ((db: SQLiteObject) => {

this.database = db;  
this.createTables();

  .then(() => console.log('Executed SQL'))
  .catch(e => console.log(e));

}) .catch (e => console.log (e)); }); } createTables públicas () {this.database.executeSql ( create table if not exists items( reference CHAR(10) PRIMARY KEY, name CHAR(30), qMin FLOAT, qReal FLOAT )), {});
} public addItem () {this.database.executeSql (q, {"ITEM000001", "ITEM 000001", 1.0,100.0}). luego ((datos) => {console.log ("Success");}, ( e) => {console.log ("Error:" + JSON.stringify (e.err));}); }

    public findAll() {
        this.database.executeSql("SELECT * FROM items", []).then((data) => {
            this.items = [];
            if(data.rows.length > 0) {
                for(var i = 0; i < data.rows.length; i++) {
                    this.items.push(data.rows.item(i));
                }
            }
        }, (e) => {

            console.log("Errot: " + JSON.stringify(e));
        });
    }

}

A continuación, en su archivo de plantilla de inicio, debe agregar el siguiente código para llamar a las diversas operaciones para crear y leer datos:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title> Home </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

      <ion-button expand="block" (click)="addItem()">Add Item </ion-button>

      <ion-list>
        <ion-item *ngFor="let item of items">
          <ion-label>
            <h2> {{ item.name }}</h2>
            <p> {{ item.qReal }}</p>
          </ion-label>
        </ion-item>
      </ion-list>
    </div>


</ion-content>

Conclusión

Como puede ver, usar SQLite con Ionic 5 y Angular es muy fácil y directo. Todo lo que necesita hacer es instalar el complemento Cordova para SQLite y crear las consultas SQL y ejecutarlas.

Para obtener ejemplos más avanzados, solo necesita buscar cualquier tutorial sobre SQlite en la web. Lo que puede hacer normalmente con SQlite, puede hacerlo aquí en el caso de Ionic 5.

Publicar un comentario

0 Comentarios