Header Ads Widget

Ticker

6/recent/ticker-posts

Uso de NoSQL PouchDB y SQLite con Ionic 5 y Angular: un ejemplo de CRUD

 En este tutorial aprenderemos a crear una aplicación móvil CRUD (abreviatura de Create, Read, Update y Delete) con Ionic 5 y Angular (anteriormente Ionic 3) usando PouchDB y SQLite.

Cubriremos estos puntos:

  • ¿Qué es PouchDB?
  • ¿Cómo crear un nuevo proyecto Ionic 5 / Angular usando Ionic CLI 5?
  • ¿Cómo instalar el complemento SQLite 2 Cordova?
  • ¿Cómo agregar la biblioteca PouchDB?
  • ¿Cómo agregar el adaptador SQLite para PouchDB?
  • ¿Cómo crear un servicio de base de datos para trabajar con PouchDB?
  • ¿Cómo crear diferentes páginas para mostrar, crear, editar y borrar los registros de la base de datos?
  • Finalmente, ¿cómo servir la aplicación localmente y usando un dispositivo real?

Este tutorial asume que ya tiene una máquina de desarrollo lista y configurada con:

  • Node.js y NPM instalados.
  • El Ionic CLI 5 instalado.
  • Herramientas de Java y SDK de Android instaladas en caso de que desee crear su aplicación para Android.
  • macOS y Xcode para crear aplicaciones iOS.

¡Así que si estás listo! empecemos.

¿Qué es PouchDB?

PouchDB en una base de datos de navegador NoSQL (no solo SQL) de código abierto basada en CouchDB. Se creó con el fin de permitir a los desarrolladores crear primeras aplicaciones web sin conexión, es decir, aplicaciones que pueden funcionar sin conexión cuando no hay conexión de red, almacenando datos localmente en las bases de datos del navegador, como el almacenamiento local o IndexedDB y también SQLite en caso de aplicaciones móviles. Y sincronizar datos con un servidor CouchDB cuando el usuario vuelve a estar en línea.

Para Ionic 5, puede usar almacenamiento local, IndexedDB o SQLite. Las dos primeras opciones tienen límites de almacenamiento pero son más rápidas. Para un almacenamiento ilimitado en dispositivos móviles, ya sea Android o iOS, puede usar SQLite.

PouchDB tiene muchas características. Veámoslos brevemente:

  • Es un navegador cruzado: funciona en todos los navegadores principales, como Mozilla Firefox, Google Chrome, Opera, Apple Safari, Microsoft IE (¿y tal vez Edge?) Y la plataforma Node.js.
  • Es liviano: PouchDB tiene solo 46 KB de tamaño, cuando está comprimido con gzip. Puede incluirlo con una <script>etiqueta simple en el navegador o instalarlo a través de npm en NodeJS.
  • Tiene una curva de aprendizaje corta: la API de PouchDB es fácil de aprender y usar.
  • Tiene capacidades de sincronización con un servidor CouchDB listo para usar.

Cree un nuevo proyecto Ionic 5 / Angular

Comencemos por crear un nuevo proyecto de Ionic 5 basado en Angular, usando Ionic CLI 5 (la última versión a la fecha de este escrito). Así que adelante, abra el terminal en Mac / Linux o el símbolo del sistema en Windows y ejecute el siguiente comando para generar un nuevo proyecto.

$ ionic start ionic-pouchdb-sqlite blank --type=angular

Espere a que el proyecto configure las dependencias y luego navegue dentro de la carpeta raíz:

cd ionic-pouchdb-sqlite

A continuación, debe agregar un montón de dependencias para permitir que PouchDB y SQLite funcionen.

Instalación del complemento SQLite Cordova

En Ionic 5, la base de datos SQLite nativa es la opción más adecuada cuando se trata de almacenar datos localmente, ya que le permite tener un almacenamiento ilimitado que, desafortunadamente, no es el caso de localStorage o IndexedDB. También SQLite es una base de datos portátil y basada en archivos.

Puede agregar compatibilidad con SQLite a su aplicación Ionic 5 utilizando varios complementos de Cordova, como:

  • Cordova-sqlite-storage: el complemento original de Cordova para SQLite.
  • cordova-plugin-sqlite-2: una bifurcación del complemento anterior con características adicionales.

Instalemos la bifurcación con:

$ ionic cordova plugin add cordova-plugin-sqlite-2

Agregar PouchDB

Para poder utilizar PouchDB, debe instalar una biblioteca de terceros disponible en npm:

$ npm install pouchdb --save

Adición del adaptador PouchDB Cordova para SQLite

A continuación, deberá instalar otro adaptador de terceros para usar SQLite con PouchDB

$ npm install pouchdb-adapter-cordova-sqlite --save

Eso es todo lo que necesita instalar para comenzar a usar PouchDB con SQLite en su aplicación Ionic. ¡Ahora comencemos a codificar!

Construiremos una pequeña aplicación que le permitirá realizar operaciones CRUD, es decir, crear, leer, actualizar y eliminar datos de empleados de una base de datos PouchDB + SQLIte.

La aplicación tiene muchas pantallas:

  • La pantalla de empleados que enumera a los empleados,
  • La pantalla para crear un empleado,
  • La pantalla para actualizar a un empleado.

El servicio de base de datos

Lo primero que necesitamos crear es el servicio de base de datos que se conecta a PouchDB y proporciona diferentes métodos para trabajar con la base de datos de los empleados.

Así que adelante y cree un proveedor de servicios usando ionic g service <name>

Asegúrese de estar dentro de la carpeta raíz del proyecto y luego ejecute lo siguiente:

ionic g service employee

Debe tener un EmployeeServiceproveedor generado dentro del src/app/employee.service.tsarchivo.

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


import { Injectable } from '@angular/core';

import * as PouchDB from 'pouchdb';  
import cordovaSqlitePlugin from 'pouchdb-adapter-cordova-sqlite';


@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  public pdb; 
  public employees;

  createPouchDB() {
        PouchDB.plugin(cordovaSqlitePlugin);
        this.pdb = new PouchDB('employees.db', 
        { adapter: 'cordova-sqlite' });
  }

}

Este código creará un archivo de base de datos SQLite llamado employees.dbe inicializará la base de datos PouchDB configurando el adaptador cordova-sqliteque indica a PouchDB que use SQLite para el almacenamiento en lugar del almacenamiento del navegador.

Asegúrese de importar el proveedor al src/app/app.module.tsarchivo y agregarlo a la providersmatriz.

También asegúrese de importar el proveedor de servicios e inyectarlo en el constructor de cualquier componente antes de poder usarlo.

Ahora agreguemos los métodos CRUD:

create(employee) {  
    return this.pdb.post(employee);
}   

Este método crea un nuevo empleado en la base de datos.

El post()método pertenece a la API de PouchDB y le permite crear nuevos objetos en la base de datos de PouchDB.

A continuación, agregaremos el update()método:

update(employee) {  
    return this.pdb.put(employee);
}   

Este método actualiza un empleado existente en la base de datos. Tenga en cuenta que debe pasar un objeto de empleado que tiene idla propiedad del empleado para actualizar.

A continuación, agregaremos el delete()método:

delete(employee) {  
    return this.pdb.delete(employee);
}   

Este método elimina a un empleado de la base de datos.

Finalmente, agregaremos el read()método:

read() {  
        function allDocs(){
                   this.pdb.allDocs({ include_docs: true})
            .then(docs => {
                this.employees = docs.rows.map(row => {
                    row.doc.Date = new Date(row.doc.Date);
                    return row.doc;
             });


                return this.employees;
            });
          }

          this.pdb.changes({ live: true, since: 'now', include_docs: true})
                    .on('change', ()=>{
                        allDocs().then((emps)=>{

                        this.employees = emps;
                        });
                    });
        return allDocs();

}

El read()método simplemente obtiene todos los empleados de la base de datos invocando el .allDocs()método que devuelve una Promesa que se resuelve en una matriz de todos los empleados en la base de datos. El map()método asigna la docsmatriz a la docs.rowsmatriz que contiene datos solo sin información específica de PouchDB que, obviamente, ¡no necesitamos!

El código también se convierte row.doc.Date(almacenado como JSON) a JavaScript ' Date().

También estamos atentos a los cambios de la base de datos de PouchDB, por lo que siempre que haya un cambio (crear, eliminar o actualizar después de haber recuperado a todos los empleados al principio), la función se allDocs()vuelve a llamar para actualizar la employeesmatriz.

Nota : tenga en cuenta que esta no es la forma más eficaz de actualizar la employeesmatriz cuando se producen cambios. En una aplicación de producción, puede cambiar este código para actualizar o eliminar solo los elementos afectados, no la matriz completa.

Creación de pantallas de interfaz de usuario de aplicaciones

Ahora que hemos creado nuestro proveedor de servicios que se encarga de conectarse a PouchDB y SQLite y proporciona todos los métodos CRUD para interactuar con la base de datos de PouchDB. Creemos diferentes páginas que nos permitan listar y hacer operaciones en la employeesbase de datos.

Ya tenemos una página de inicio que vive en src/app/homeAbra la home.page.htmlactualización del archivo actualícela para mostrar la lista de empleados que usan <ion-list>.

<ion-header>
  <ion-navbar>
    <ion-title>The Employees Database</ion-title>
    <ion-buttons end>
      <button ion-button (click)="addEmployee()">
          <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>    
  </ion-navbar>
</ion-header>

<ion-content padding>

    <ion-list>
        <ion-item *ngFor="let emp of employees" (click)="showDetails(employee)">
          <div>{{ emp.firstName }} {{emp.lastName}}</div>
        </ion-item>
      </ion-list>

</ion-content>

A continuación, debemos agregar el código para incluir a los empleados en el src/home/home.page.tsarchivo. Así que abra el archivo y luego actualice de la siguiente manera:

import { Component, , OnInit  } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { EmployeePage } from './../employee/employee.page.ts';
import { EmployeeService } from '../employee.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
  public employees : [] = [];
  constructor(public modalCtrl: ModalController, public employeeService : EmployeeService) {


  }
    ngOnInit() {

            this.employeeService.createPouchDB();

            this.employeeService.read()
                .then(employees => {
                    this.employees = employees;
                })
                .catch((err)=>{});

    }

    showDetails(employee) {
        let modal = this.modalCtrl.create(EmployeePage, { employee: employee });
        modal.present();
    }  


}

A continuación, necesitamos generar una nueva página para los detalles del empleado, así que continúe y ejecute el siguiente comando en su terminal:

$ ionic g page employee

Esto generará una employeecarpeta dentro app/Abra src/app/employee/employee.page.htmly actualícelo de la siguiente manera:

<ion-header>

  <ion-navbar>
    <ion-title> Employee Details</ion-title>
    <ion-buttons end *ngIf="canDelete">
      <button ion-button (click)="delete()">
          <ion-icon name="trash"></ion-icon>
      </button>
    </ion-buttons>    
  </ion-navbar>

</ion-header>


<ion-content>
    <ion-list>
        <ion-item>
            <ion-label>First Name</ion-label>
            <ion-input text-right type="text" [(ngModel)]="employee.firstName"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Last Name</ion-label>
            <ion-input text-right type="text" [(ngModel)]="employee.lastName"></ion-input>
        </ion-item>        
    </ion-list>
    <button ion-button block (click)="addOrUpdate()">Add/Update Employee</button>
</ion-content>

A continuación, actualice el src/app/employee/employee.page.tsarchivo de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import { NavParams , ViewController } from 'ionic-angular';
import { EmployeeService } from '../employee.service';



@@Component({
  selector: 'app-employee',
  templateUrl: 'employee.page.html',
  styleUrls: ['employee.page.scss']
})
export class EmployeePage implements OnInit {
  employee: any = {};
  canDelete : false;
  canUpdate : false;    
  constructor(navParams: NavParams, private employeeService: EmployeeService) {

  }
ngOnInit(){
    var employee = this.navParams.get('employee');
    if(employee){
            this.employee = employee;
            this.canDelete = true;
            this.canUpdate = true;
    }
}

    addOrUpdate() {


        if (this.canUpdate) {
            this.employeeService.update(this.employee)
                .catch(()=>{});
        } else {
            this.employeeService.create(this.employee)
                .catch(()=>{});
        }

        this.viewCtrl.dismiss(this.employee);
    }

    delete() {
        this.employeeService.delete(this.employee)
            .catch(()=>{});

        this.viewCtrl.dismiss(this.employee);
    }



}

Sirviendo la aplicación

Hemos terminado nuestro ejemplo CRUD simple con PouchDB y SQLite. Ahora puede servir su aplicación localmente para probarla. Continúe y ejecute el siguiente comando:

$ ionic serve

También puede conectar su dispositivo Android o iOS para ejecutar la aplicación en un dispositivo real en lugar del navegador.

$ ionic run ios
$ ionic run android

Conclusión

A lo largo de este tutorial, hemos visto paso a paso cómo crear una aplicación móvil Ionic 5 y Angular desde cero usando Ionic CLI 5 y hemos agregado los métodos CRUD esenciales para crear, leer, actualizar y eliminar elementos de una base de datos SQLIte usando PouchDB.

Publicar un comentario

0 Comentarios