codificar y decodificar datos 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 con datos codificados en la tabla SQLITE.
5) Obtener datos codificados desde 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-encode.

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-encode 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.setUkStd("Directorio actual: "+unik.getPath(5))

          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.setUkStd("Directorio actual: "+unik.getPath(5))

        unik.sqliteInit('bd.sqlite')
        var sql='CREATE TABLE IF NOT EXISTS tabla(
                        id INTEGER PRIMARY KEY AUTOINCREMENT,
                        data TEXT
                )'
        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 codificado

import QtQuick 2.0
import QtQuick.Controls 2.0

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

    Component.onCompleted: {
        unik.setUkStd("Directorio actual: "+unik.getPath(5))

        unik.sqliteInit('bd.sqlite')
        var sql='CREATE TABLE IF NOT EXISTS tabla(
                        id INTEGER PRIMARY KEY AUTOINCREMENT,
                        data TEXT
                )'
        unik.sqlQuery(sql);


        var sqliteUserPass = 'miusuario'

        var sqliteKeyPass = 'miclave'

        var data = 'Nuevo Mundo\n\n'
                +'Un nuevo mundo apareció,\n'
                +'meta mensaje apareció.\n'
                +'Me sorprendió tomando el sol\n'
                +'en la terraza.\n'

                +'Un hongo en el cielo se formó\n'
                +'y explotaron las estrellas,\n'
                +'alguien tiró la bomba,\n'
                +'todo se puso violeta.\n\n'

                +'Naranja, amarillo, negro,\n'
                +'nubes de titanio,\n'
                +'por fin volaron\n'
                +'todas las ciudades al espacio.\n\n'

                +'Espero que sea un sueño,\n'
                +'nadie sabe quién lo hizo,\n'
                +'la lava del volcán\n'
                +'del odio de nuestro delirio.\n\n'

                +'Los pájaros de hidrógeno\n'
                +'implotaron en el aire,\n'
                +'cabezas de elefantes\n'
                +'en los centros comerciales.\n\n'

                +'Y ahora, ¿Cómo mierda\n'
                +'van a criar a sus hijos?\n'
                +'Los códigos binarios\n'
                +'los volvieron estúpidos.\n\n'

                +'Chiquitos encerrados\n'
                +'en sus casas de plata,\n'
                +'mirando por las redes\n'
                +'cómo todos se matan.\n\n'

                +'Las bandas, en Rosario,\n'
                +'se re-cagan a tiros,\n'
                +'yo busco en la música,\n'
                +'la fe y lo maldito.\n\n'

                +'Enciendo, entiendo, elijo\n'
                +'y amo amar este fuego,\n'
                +'enciendo, entiendo, elijo\n'
                +'y amo mis compañeros.\n\n'

                +'Ya se quemaron todos\n'
                +'los bosques del planeta,\n'
                +'artistas, empresarios,\n'
                +'abogados, proxenetas.\n\n'

                +'Los dioses sólo viven\n'
                +'en películas de culto\n'
                +'que ya no se verán\n'
                +'en este nuevo mundo.\n\n'

                +'Es posible que sea cierto,\n'
                +'es posible que mis besos\n'
                +'sean, en el nuevo mundo,\n'
                +'besos de un amor profundo.\n\n'

                +'Nuevo mundo delirante,\n'
                +'nuevo mundo sin escapes,\n'
                +'nuevo mundo sin controles,\n'
                +'nuevo mundo ya sin sol.\n\n'

                +'Al nuevo mundo van mis hijos,\n'
                +'los robots, los niños ewoks\n'
                +'nuevo mundo, nuevas pistas,\n'
                +'nuevas grandes utopías.\n\n'

                +'Autor: Fito Pàez\n'
                +'Album: La Ciudad Liberada\n\n'

        sql='INSERT INTO tabla(data)VALUES(\''+unik.encData(data, sqliteUserPass, sqliteKeyPass)+'\')'                
    }
}


Explicación del código

Cramos 2 variables del tipo JavaScript para nuestros datos de acceso a los datos que codificaremos. Estas 2 variables pueden ser utilizadas por ejemplo por los datos de acceso de usuario y clave de una aplicacion o los datos de acceso que nos parezcan los mas conveniente. Estos 2 datos deben ser del tipo string para ser utilizados en el metodo encData() y decData() de unik.

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"

    Flickable{    
        width: app.width
        height: app.height
        contentWidth: datos.width
        contentHeight: datos.contentHeight
        TextArea{
            id:datos
            width: app.width*0.8
            x:app.width*0.1
            height: contentHeight
            font.pixelSize: 20
            wrapMode: Text.WrapAnywhere
        }
    }    

    Component.onCompleted: {    
        unik.setUkStd("Directorio actual: "+unik.getPath(5))
        unik.sqliteInit('bd.sqlite')
        var sql='CREATE TABLE IF NOT EXISTS tabla(
                        id INTEGER PRIMARY KEY AUTOINCREMENT,
                        data TEXT
                )'
        unik.sqlQuery(sql);
        
        var sqliteUserPass = 'miusuario'

        var sqliteKeyPass = 'miclave'

        var data = 'Nuevo Mundo\n\n'
                +'Un nuevo mundo apareció,\n'
                +'meta mensaje apareció.\n'
                +'Me sorprendió tomando el sol\n'
                +'en la terraza.\n'

                +'Un hongo en el cielo se formó\n'
                +'y explotaron las estrellas,\n'
                +'alguien tiró la bomba,\n'
                +'todo se puso violeta.\n\n'

                +'Naranja, amarillo, negro,\n'
                +'nubes de titanio,\n'
                +'por fin volaron\n'
                +'todas las ciudades al espacio.\n\n'

                +'Espero que sea un sueño,\n'
                +'nadie sabe quién lo hizo,\n'
                +'la lava del volcán\n'
                +'del odio de nuestro delirio.\n\n'

                +'Los pájaros de hidrógeno\n'
                +'implotaron en el aire,\n'
                +'cabezas de elefantes\n'
                +'en los centros comerciales.\n\n'

                +'Y ahora, ¿Cómo mierda\n'
                +'van a criar a sus hijos?\n'
                +'Los códigos binarios\n'
                +'los volvieron estúpidos.\n\n'

                +'Chiquitos encerrados\n'
                +'en sus casas de plata,\n'
                +'mirando por las redes\n'
                +'cómo todos se matan.\n\n'

                +'Las bandas, en Rosario,\n'
                +'se re-cagan a tiros,\n'
                +'yo busco en la música,\n'
                +'la fe y lo maldito.\n\n'

                +'Enciendo, entiendo, elijo\n'
                +'y amo amar este fuego,\n'
                +'enciendo, entiendo, elijo\n'
                +'y amo mis compañeros.\n\n'

                +'Ya se quemaron todos\n'
                +'los bosques del planeta,\n'
                +'artistas, empresarios,\n'
                +'abogados, proxenetas.\n\n'

                +'Los dioses sólo viven\n'
                +'en películas de culto\n'
                +'que ya no se verán\n'
                +'en este nuevo mundo.\n\n'

                +'Es posible que sea cierto,\n'
                +'es posible que mis besos\n'
                +'sean, en el nuevo mundo,\n'
                +'besos de un amor profundo.\n\n'

                +'Nuevo mundo delirante,\n'
                +'nuevo mundo sin escapes,\n'
                +'nuevo mundo sin controles,\n'
                +'nuevo mundo ya sin sol.\n\n'

                +'Al nuevo mundo van mis hijos,\n'
                +'los robots, los niños ewoks\n'
                +'nuevo mundo, nuevas pistas,\n'
                +'nuevas grandes utopías.\n\n'

                +'Autor: Fito Pàez\n'
                +'Album: La Ciudad Liberada\n\n'

        sql='INSERT INTO tabla(data)VALUES(\''+unik.encData(data, sqliteUserPass, sqliteKeyPass)+'\')'
        unik.sqlQuery(sql);

         

        var rows = unik.getSqlData('tabla', 'SELECT * FROM tabla', 'sqlite')
        for(var i=0;i<rows.length;i++){
            datos.text= unik.decData(rows[i].col[1], sqliteUserPass, sqliteKeyPass)+'\n\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