Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de CRUD de base de datos SQLite Ionic 4

 En esta segunda parte de nuestra serie de tutoriales para crear una aplicación simple de administración de productos del mundo real con Ionic 5, Angular y SQLite, procederemos a implementar nuestras operaciones CRUD de base de datos para crear, leer, actualizar y eliminar productos de la base de datos.

Aquí hay un resumen de lo que hicimos en la parte anterior.

  • Creamos un nuevo proyecto basado en Ionic 5 y Angular,
  • Instalamos tanto el complemento Cordova SQLite como su envoltorio Ionic Native,
  • Creamos y configuramos nuestro servicio de datos para encapsular las operaciones de SQLite.
  • Creamos nuestra base de datos SQLite y las diversas tablas SQL (Productos, Familias, Ubicaciones y Transacciones).
  • Creamos una interfaz de usuario simple con botones y modales iónicos.

Ahora implementemos las operaciones CRUD de SQLite que nos permitirán agregar y manipular datos en nuestra aplicación.

Adición de métodos CRUD de SQLite a nuestro servicio de datos

Abra el src/app/data.service.tsarchivo y agreguemos los siguientes cuatro métodos para trabajar con nuestra base de datos SQLite:

  • El create(tableName , item)método que se utilizará para crear filas de datos e insertar elementos en la base de datos SQLite.
  • El list(tableName)método que se utilizará para leer y listar filas de datos de la base de datos SQLite.
  • El update(tableName , item)método que se utilizará para actualizar filas de datos.
  • El remove(tableName , item)método que se utilizará para eliminar una fila especificada por su ID de la base de datos SQLite.

Vea también cómo usar TypeORM con la base de datos SQLite e Ionic 5

Creando datos SQLite

veamos ahora una implementación del create()método que toma dos parámetros, tableNameque se refiere al nombre de la tabla SQL y itemque contiene los datos para insertar:

    public create(tableName,item){
        let sqlText;
        let values ;
        switch(tableName){
            case "families":
                sqlText = "INSERT INTO families (reference , name ,unit) VALUES (?,?,?)";
                values = [item.reference || null , item.name || null, item.unit || null] 
                break;
            case "locations":
                sqlText = "INSERT INTO locations (name) VALUES (?)";
                values = [item.name || null ] 
                break;
            case "transactions":
                sqlText = "INSERT INTO transactions (date , quantity ,unitCost , reason , upc , comment , product_id) VALUES (?,?,?,?,?,?,?)";
                values = [item.date || null , item.quantity || null, item.unitCost || null ,item.reason || null,item.upc || null , item.comment || null ,item.product_id || null]         
                break;
            case "products":
                sqlText = "INSERT INTO products (sku,barcode,title,description,quantity,unit,unitPrice,minQuantity,family_id,location_id) VALUES (?,?,?,?,?,?,?,?,?,?)";
                values = [item.sku || null , item.barcode || null, item.title || null, item.description || null, item.quantity || null,item.unit || null, item.unitPrice || null, item.minQuantity || null, item.family_id || null, item.location_id || null ]                    
                break;
            default :
            return ;

        }
        return this.database.executeSql(sqlText,values);
    }

En el create()método, primero agregamos una declaración de cambio para tomar una decisión sobre la consulta SQLite que se va a generar y los valores que se deben insertar, según el nombre de la tabla. A continuación, llamamos al executeSql(sqlText,values)método con la consulta adecuada y los valores de los datos como parámetros, que ejecuta la consulta SQL contra nuestra base de datos SQLite.

Actualizar filas de datos

El update()método toma dos parámetros, el nombre de la tabla y los datos del nuevo artículo. El objeto del elemento también tiene la identificación del elemento anterior para actualizar:

    public update(tableName,item){
        let sqlText;
        let values ;
        switch(tableName){
            case "families":
                sqlText = "UPDATE families SET (reference , name , unit ) = ( ? , ? , ? ) where id = ? ;";
                values = [item.reference || null , item.name || null, item.unit || null , item.id] 
                break;
            case "locations":
                sqlText = "UPDATE locations SET name = ? where id = ? ; ";
                values = [item.name || null , item.id] 
                break;
            case "transactions":
                sqlText = "UPDATE transactions SET (date , quantity ,unitCost , reason , upc , comment , product_id)  = (?,?,?,?,?,?,?) where id = ? ; ";
                values = [item.date || null , item.quantity || null, item.unitCost || null ,item.reason || null,item.upc || null , item.comment || null ,item.product_id || null , item.id]         
                break;
            case "products":
                sqlText = "UPDATE products SET (sku,barcode,title,description,quantity,unit,unitPrice,minQuantity,family_id,location_id) = (?,?,?,?,?,?,?,?,?,?) where id = ? ; ";
                values = [item.sku || null , item.barcode || null, item.title || null, item.description || null, item.quantity || null,item.unit || null, item.unitPrice || null, item.minQuantity || null, item.family_id || null, item.location_id || null , item.id ]                    
                break;
            default :
            return ;

        }
        return this.database.executeSql(sqlText,values);

    } 

El método crea las consultas de actualización SQL basadas en el nombre de la tabla y los valores para actualizar y vuelve a llamar al executeSql(sqlText,values)método para ejecutar la consulta en la base de datos.

Eliminar filas SQL

El remove()método toma dos parámetros, el primero es el nombre de la tabla de destino y el segundo es el elemento a eliminar.

Pasamos todo el elemento, pero solo necesitamos ideliminar la fila de la base de datos SQLite:

    public remove(tableName, item){
        let sqlText;
        let values ;
        sqlText = `delete from ${tableName} where id = ? `;
        values = [item.id || null ] 
        return this.database.executeSql(sqlText,values);    
    }

No necesitamos una switchdeclaración para tomar una decisión sobre la tabla, ya que esta consulta no es compleja y no requiere todas las columnas de la tabla, sino solo la idque es una columna común entre todas las tablas SQLite.

Nota : Estamos utilizando cadenas de plantillas de TypeScript para insertar dinámicamente la tabla en la consulta.

Estamos utilizando vuelta garrapatas para la cadena y insertamos el nombre de tabla utilizando el operador de interpolación: ${}.

Después de construir la consulta, simplemente llamamos al executeSql(sqlText,values)método para ejecutar la consulta en la base de datos.

Leer datos de la base de datos SQLite

La última operación CRUD es la lectura de datos de la base de datos. Este método necesita más trabajo ya que necesitamos implementar la paginación, por lo que será el tema de la siguiente parte, pero para una implementación simple que obtenga datos de la base de datos. Puede hacer algo de la siguiente manera:

    public list(tableName){
        let sqlText;
        let values =[];
        sqlText = `select * from ${tableName} `;
        return this.database.executeSql(sqlText,values);    
    }

Por ahora, solo usamos una select *declaración SQL y construimos la consulta con plantillas de cadenas de TypeScript usando el operador de interpolación y luego ejecutamos la consulta contra la base de datos con el executeSql(sqlText,values)método.

Conclusión

En este tutorial, continuamos construyendo nuestra sencilla aplicación móvil multiplataforma del mundo real para administrar el stock de productos con Ionic 5 mediante la implementación de las operaciones SQLite CRUD (Crear, Leer, Actualizar y Eliminar).

En la siguiente parte, vamos a mejorar la operación de lectura de datos agregando paginación para que podamos recuperar datos de la base de datos SQLite en pequeños fragmentos. Este es un paso obligatorio si desea crear una aplicación eficaz que no bloquee su interfaz de usuario si la base de datos contiene grandes cantidades de datos.

Publicar un comentario

0 Comentarios