Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de Ionic 5 Modals y SQLite: Cree una aplicación Product Manager

 En este tutorial, usaremos Ionic 5 y Angular para crear una aplicación móvil simple para administrar productos en stock.

Usaremos el complemento SQLite para conservar los datos y el complemento del escáner de código de barras para escanear códigos de barras. También usaremos Ionic Modals para crear nuestra interfaz de usuario.

Nuestra aplicación de ejemplo se puede utilizar para administrar un inventario de productos. Es conveniente para demostrar varias características de Ionic 5 que le permiten crear aplicaciones de la vida real para sus clientes.

En este tutorial, aprenderemos cómo usar el complemento Cordova SQLite para crear y completar tablas de bases de datos SQL y cómo usar el complemento Barcode Cordova para escanear códigos de barras de productos.

También veremos conceptos básicos de Ionic 5 / Angular como componentes, proveedores, páginas y modales.

También puede leer cómo usar Ionic 5 con una base de datos SQLite en el servidor

Inicio de un nuevo proyecto Ionic 5 / Angular

Comencemos nuestro viaje generando una aplicación Ionic 5 / Angular en blanco.

Si es la primera vez que usa Ionic, asegúrese de configurar primero su entorno de desarrollo local e instalar Ionic CLI 5 (la última versión al momento de escribir este artículo).

Usaremos Ionic 5 con Angular y TypeScript, que es un superconjunto de JavaScript con conceptos de programación orientada a objetos y tipos fuertes.

Ahora, abra su terminal en Linux / MAC o símbolo del sistema en Windows y ejecute el siguiente comando:

$ ionic start product-inventory-manager blank --type=angular 

A continuación, navegue dentro de la carpeta de su proyecto y entregue su aplicación:

$ cd product-inventory-manager
$ ionic serve 

Entendamos lo que hemos hecho.

Primero generamos una nueva aplicación Ionic 5 basada en Angular y la blankplantilla, luego navegamos dentro de la carpeta que aloja los archivos de la aplicación y entregamos la aplicación usando el ionic servecomando.

Podrás jugar con tu aplicación Ionic 5 usando un navegador web desde la http://localhost:8100dirección.

Agregar una plataforma de destino

Dado que probaremos nuestra aplicación en un dispositivo real, necesitamos agregar al menos una plataforma de destino. Vamos a agregar, androidpero siéntase libre de agregar ioswindowssi necesita apuntar a estas plataformas:

$ ionic cordova platform add android 

A continuación, ejecute su aplicación en un dispositivo USB conectado real usando:

$ ionic cordova run android -l

Gracias a live relaod (-l), todos los cambios que realice en el código de su proyecto se sincronizarán en el dispositivo.

Adición del complemento Cordova SQLite y su contenedor nativo iónico

Ahora, nuestro siguiente paso será instalar el complemento Cordova para SQLite, así que dirígete nuevamente a tu terminal y ejecuta el siguiente comando:

$ ionic cordova plugin add cordova-sqlite-storage --save

A continuación, agreguemos el contenedor Ionic Native para SQLite:

$ npm install --save @ionic-native/sqlite4 

Para poder usar SQLite en su aplicación, debe agregarlo a la lista de providersen src/app/app.module.ts:

/* [...] */

import { SQLite } from '@ionic-native/sqlite';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SQLite,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

Después de esto, podrá inyectar SQLite en cualquier componente y llamar a sus métodos para crear y trabajar con una base de datos SQLite.

Creando nuestro primer servicio angular

Vamos a agregar cualquier código que interactúe con SQLite en un servicio separado, así que creemos un nuevo servicio de datos usando el generador Ionic CLI 5:

$ ionic g service data 

Se generará un nuevo servicio en el src/app/data.service.tsarchivo.

Puedes inyectar este servicio a tus componentes para usarlo.

Abra el src/pages/home/home.page.tsarchivo e importe, luego inyecte a DataServicetravés del constructor del componente:

import { DataService } from '../data.service';

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


  constructor(public dataService: DataService) { }

}

Creando la base de datos SQLite

Abra el src/app/data.service.tsarchivo y comience importando SQLite y SQLiteObjectdesde el @ionic-native/sqlitepaquete e inyéctelo a través del constructor del servicio. A continuación, llame al create()método para crear una data.dbbase de datos en la ubicación predeterminada del sistema de archivos de su dispositivo:

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(public sqlite: SQLite) { 
    this.sqlite.create({name: "data.db", location: "default"})      .then((db : SQLiteObject) => {
            this.database = db;
    }, (error) => {
            console.log("ERROR: ", error);
    });     
  }
}

Antes de crear tablas SQL, pensemos en la estructura de nuestra base de datos.

Requisitos comerciales y modelado de bases de datos

Nuestra aplicación móvil tiene muchos requisitos, básicamente los usuarios deben poder agregar, eliminar, modificar y enumerar

  • Productos con paginación.
  • Familias de productos con paginación.
  • Ubicaciones,
  • Actas.

Un producto tiene una ubicación y pertenece a una familia de productos. También los siguientes atributos:

  • Título,
  • Descripción,
  • Precio unitario,
  • SKU (Unidad de mantenimiento de existencias),
  • Código de barras (ISBN, UPC, etc.),
  • Cantidad.

Una transacción tiene los siguientes atributos:

  • Fecha,
  • Cantidad,
  • Costo unitario,
  • Razón (Stock nuevo - Rentabilidad utilizable - Rentabilidad inutilizable),
  • UPC (Código de producto universal),
  • Comentario,
  • Producto

Para mantenerlo simple:

  • Una familia tiene atributos de nombre, referencia y unidad,
  • Una ubicación tiene un atributo de nombre

Todas las tablas tienen un atributo id que se utiliza como clave principal.

Creando tablas SQL con SQLite

Primero, agregue las declaraciones SQL para crear sus tablas de datos de la siguiente manera:

        @Injectable()
        export class DataService {

        public database: SQLiteObject;

        productTable : string = `CREATE TABLE IF NOT EXISTS  products (
                                    id INTEGER PRIMARY KEY,
                                    sku TEXT,
                                    barcode TEXT,
                                    title TEXT NOT NULL,
                                    description TEXT,
                                    quantity REAL,
                                    unit VARCHAR,
                                    unitPrice REAL,
                                    minQuantity INTEGER,
                                    familly_id INTEGER,
                                    location_id INTEGER,
                                    FOREIGN KEY(familly_id) REFERENCES famillies(id),
                                    FOREIGN KEY(location_id) REFERENCES locations(id)
                                    );`;

        familyTable : string = `CREATE TABLE IF NOT EXISTS famillies (
                                    id INTEGER PRIMARY KEY,
                                    reference VARCHAR(32) NOT NULL,
                                    name TEXT NOT NULL,
                                    unit VARCHAR);`;

        locationTable : string = `CREATE TABLE IF NOT EXISTS locations (
                                        id INTEGER PRIMARY KEY,
                                        name TEXT NOT NULL);`;

        transactionTable : string = `CREATE TABLE IF NOT EXISTS transactions (
                                        id INTEGER PRIMARY KEY,
                                        date TEXT,
                                        quantity REAL,
                                        unitCost REAL,
                                        reason VARCHAR,
                                        upc TEXT,
                                        comment TEXT,
                                        product_id INTEGER,
                                        FOREIGN KEY(product_id) REFERENCES products(id));`;

A continuación, agregue un método para crear las tablas:

    async createTables(){
        try {
            await this.database.executeSql(this.familyTable, {});
            await this.database.executeSql(this.locationTable,{});
            await this.database.executeSql(this.productTable,{});
            await this.database.executeSql(this.transactionTable,{});
        }catch(e){
            console.log("Error !");
        }
    }

A continuación, cambie el constructor del servicio para llamar al createTables()método:

    constructor(public sqlite :SQLite) {

            this.sqlite.create({name: "data.db", location: "default"}).then((db : SQLiteObject) => {
                    this.database = db;
                    this.createTables();
                }, (error) => {
                    console.log("ERROR: ", error);
            }); 

    }

Si ejecuta su aplicación, se debe crear una base de datos con cuatro tablas.

Creando la UI

Abra el src/pages/home/home.page.htmly el siguiente código:

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>



<ion-content padding>
<ion-list>
    <ion-item>
        <button ion-button (click)="openModal('FamilyListPage')" full>MANAGE FAMILIES</button>
    </ion-item>

    <ion-item>
        <button ion-button (click)="openModal('LocationListPage')" full>MANAGE LOCATIONS</button>
    </ion-item>

    <ion-item>
        <button ion-button (click)="openModal('ProductListPage')" full>MANAGE PRODUCTS</button>
    </ion-item>

    <ion-item>
        <button ion-button (click)="openModal('TransactionListPage')" full>MANAGE TRANSACTIONS</button>
    </ion-item>

</ion-list>
</ion-content>

Estamos agregando una lista iónica con cuatro botones que llama al openModal()método para abrir la página especificada.

Creación de modales iónicos 5

A continuación, abra el src/pages/home/home.page.tsarchivo y agregue el openModal()método que abre un modal con la página especificada pasada como parámetro:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';


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


  constructor(
    public modalController: ModalController
  ) { }

  async openModal(page) {
    const modal = await this.modalController.create({
      component: page,
      componentProps: {
      }
  });

    return await modal.present();
 }
}

Creación de páginas de Ionic 5

Con Ionic CLI 5 cree las siguientes páginas:

$ ionic g page FamilyList $ ionic g page FamilyDetails

$ ionic g page LocationList $ ionic g page LocationDetails

$ ionic g page ProductList $ ionic g page Detalles del producto

$ ionic g página TransactionList $ ionic g página TransactionDetails

Conclusión

¡Ese es el final de este tutorial!

Hemos instalado y configurado el complemento Cordova SQlite y hemos creado las tablas de base de datos necesarias y las diferentes páginas de nuestra aplicación. También agregamos una interfaz de usuario simple con la que cuatro botones Ionic para navegar en nuestra aplicación usando modales Ionic.

Nos vemos en la siguiente parte para seguir construyendo nuestra aplicación de gestión de stock de productos con Ionic 5, Angular y SQLite.

Publicar un comentario

0 Comentarios