crear una aplicación sqlite con unik



Nota: Para utilizar este tutorial es necesario unik version 2.5 o superior.

Si aún no conoces QML y te preguntas ¿Porqué y cuáles son las ventajas de programar en QML?, aquí tienes algo de información sobre sus características y ventajas. https://nsdocs.blogspot.com.ar/2018/01/programar-en-qml-cuales-son-sus-ventajas.html

Si te preguntas ¿Porqué programar en QML utilizando unik?, aqui tienes información sobre cuáles son sus Pros y sus Contras. https://nsdocs.blogspot.com.ar/2018/02/porque-programar-en-qml-utilizando-unik.html

En este tutorial se enseñará a crear una aplicacion que consistira en lo siguiente:

1) Crear una ventana principal de aplicación de manera sencilla y rapida con QML.
2) Crear y conectar a una base de datos SQLITE de manera rápida y sencilla con unik.
3) Crear tabla SQLITE.
4) Insertar un registro en la tabla SQLITE.
5) Obtener datos de una tabla SQLITE.

Requisitos para utilizar este tutorial

1) Instalar el unik qml engine. Tamaño 100Mb. desde AQUI
2) Un editor de texto.

Paso 1: Crear carpeta de nuestra aplicación
Por ejemplo qml-sqlite.

Paso 2: Crear el archivo QML principal para la Ventana Principal de nuestra aplicación. El archivo lo crearemos dentro de la nuestra carpeta qml-sqlite y  lo llamaremos "main.qml".

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow{
    id: app
    visible:  true
    visibility: "Maximized"
}

Explicación del código

Las primeras 2 lineas importan las librerias que utilizaremos en nuestra aplicación. Por último creamos un elemento QML del tipo ApplicationWindow{} que nos permite abrir o mostrar la ventana principal de nuestra aplicación. Le hemos seteado algunos parametros básicos. Un id de nombre "app", que la ventana sea visible y que se inicie como una ventana maximizada.

Paso 3: Inicializar la base de datos sqlite

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow{
    id: app
    visible:  true
    visibility: "Maximized"

    Component.onCompleted: {
        unik.sqliteInit('bd.sqlite')
    }
}


Explicación del código

Hemos agregado un disparador onCompleted que se utiliza para ejecutar un bloque de código cuando un componente ha sido cargado de manera completa. Al terminar de cargarse la ventana principal ejecutara una función de unik. La función sqliteInit() de unik sirve para inicializar una base de datos sqlite. Esta función requiere 1 parametro para el nombre o path absoluto de la ubicación del archivo sqlite que deseamos crear.

Paso 4: Crear una tabla sqlite

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow{
    id: app
    visible:  true
    visibility: "Maximized"

    Component.onCompleted: {
        unik.sqliteInit('bd.sqlite')
        var sql='CREATE TABLE IF NOT EXISTS tabla(
                        id INTEGER PRIMARY KEY AUTOINCREMENT,
                        nombre TEXT,
                        edad NUMERIC
                )'
        unik.sqlQuery(sql);
    }
}


Explicación del código

Creamos una variable JavaScript del tipo string llamada "sql". Esta variable contiene la sentencia SQL necesaria para crear nuestra simple tabla de ejemplo llamada "tabla". Luego ejecutamos un método de unik llamado sqlQuery(). Esta función ejecuta la sentencia SQL preparada en el string mencionado.

Paso 5: Insertar un registro

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow{
    id: app
    visible:  true
    visibility: "Maximized"

    Component.onCompleted: {
        unik.sqliteInit('bd.sqlite')
        var sql='CREATE TABLE IF NOT EXISTS tabla(
                        id INTEGER PRIMARY KEY AUTOINCREMENT,
                        nombre TEXT,
                        edad NUMERIC
                )'
        unik.sqlQuery(sql);

        sql='INSERT INTO tabla(nombre,edad)VALUES(\'Juan\', \'40\')'
        unik.sqlQuery(sql);        
    }
}

Explicación del código

Creamos o redifinimos el valor de la variable JavaScript llamada "sql". En este caso la sentencia SQL que utilizaremos es la que se utiliza para insertar un registro en una tabla. Volvemos a ejecutar el método de unik sqlQuery().

Hemos ingresado en la base de datos, dentro de la tabla llamada "tabla", los siguientes datos: En la columna nombre el dato "Juan" y en la columna edad el dato "40".

Paso 6: Obtener datos de la tabla

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow{
    id: app
    visible:  true
    visibility: "Maximized"

    Text{
        id: datos
        width: app.width/2
        anchors.centerIn: parent
        font.pixelSize: 30
        wrapMode: Text.WordWrap
    }

    Component.onCompleted: {
        unik.sqliteInit('bd.sqlite')
        var sql='CREATE TABLE IF NOT EXISTS tabla(
                        id INTEGER PRIMARY KEY AUTOINCREMENT,
                        nombre TEXT,
                        edad NUMERIC
                )'
        unik.sqlQuery(sql);

         sql='INSERT INTO tabla(nombre,edad)VALUES(\'Juan\', \'40\')'
         unik.sqlQuery(sql);

        var rows = unik.getSqlData('tabla', 'SELECT * FROM tabla', 'sqlite')
        for(var i=0;i<rows.length;i++){
                datos.text += rows[i].col[1]+'\n'
        }

    }
}

Explicación del código

Creamos un elemento QML del tipo Text{} con el id "datos". Este aparecerá centrado en la ventana principal y nos mostrará el nombre obtenido desde la base de datos en la tabla de ejemplo.

Creamos una variable JavaScript del tipo array llamada "rows". Atención! Estamos utilizando un método de unik llamado  getSqlData(). Este método nos devuelve un dato del tipo array de objetos bidimensional. Esto significa que el array "rows" contiene cuál si fuese una grilla o tabla, una clase de matriz de datos. Creamos un bucle "for" para recorrer dicha matriz de datos.

Asignamos un valor a la propiedad "text" del elemento Text{} haciendo referencia al id "datos". El valor que le asignamos son la totalidad de datos que se encuentren en la segunda columna del array o matriz de datos. El rows[i] puede ser rows[0], rows[1], rows[2] ... etc dependiendo de la cantidad de filas que tenga la tabla. El rows[i].col[0] corresponde a la columna "id", El rows[i].col[1] corresponde a la columna "nombre" y el rows[i].col[2] corresponde a la columna "edad".

El Text{} de id "datos" irá mostrando repetidas veces el nombre "Juan" por cada vez que se ejecute la aplicación de este ejemplo.

Paso 7: Ejecutar la aplicación del tutorial en unik

Desde el sistema operativo GNU/Linux, Windows o Macos, hay que ejecutar unik con 2 de los siguientes parámetros:

Explicamos lo que ejecutaremos
unik [param 1=-folder] [param 2=folder location]

Modo de ejecución final de Ejemplo en GNU/Linux
/home/nextsigner/Escritorio/unik.AppImage -folder /home/nextsigner/Escritorio/qml-sqlite

Modo de ejecución final de Ejemplo en Windows
"C:\Program Files (x86)\unik\unik.exe" -folder C:/Users/qt/Desktop/qml-sqlite

Modo de ejecución final de Ejemplo en Macos
/Applications/unik.app/Contents/MacOS/unik -folder /Users/qt/Desktop/qml-sqlite

Mas info: nextsigner@gmail.com

Comentarios

Entradas populares