43 aplicativo-com-banco-de-dados-utilizando-intelxdk - CodeHamper

Aplicativo com banco de dados utilizando IntelXDK

Aprenda a criar um aplicativo utilizando um banco de dados local




Iremos criar um aplicativo utilizando um banco de dados para fazer uma interação no nosso aplicativo, para criar iremos utilizar uma ferramenta chamada IntelXDK, onde pode ser baixado pelo site da intel (https://software.intel.com/pt-br/intel-xdk) .

Nesse aplicativo iremos utilizar  um banco de dados localmente. O Web SQL storage é uma interface para um banco de dados relacional SQL. O Web SQL utiliza o SQLite3 como a engine de banco de dados. É suportado pelos navegadores Safari, Chrome e Opera. A primeira coisa que precisamos fazer é verificar se o navegador suporta o Web SQL Storage.

Primeiro vamos escolher um modelo no IntelXDK, no caso foi escolhido o modelo Tab View App, onde já possui um tab para utilizar como navegação.

Agora vamos implementar nosso aplicativo. Primeiro vamos verificar se é suportado.

function getopenDb() {
    try {
        if (window.openDatabase) {                    
            return window.openDatabase;                    
        } else {
            alert('HTML5 nao suportado');
            return undefined;
        }
    }
    catch (e) {
        alert(e);
        return undefined;
    }            
}

Criando a tabela

Uma vez que temos acesso ao objeto de armazenamento, precisamos criar uma tabela. A função abaixo cria uma tabela somente se a tabela não existir. Nós chamamos a função getopenDb() que está detalhada abaixo, e se o Web SQL for suportado, chamamos o método db.transaction para iniciar a transação de criação da tabela. Após isso, chamamos a função executeSql() para executar a query de criação da tabela. Segue abaixo a função.

function createTable() {
    var openDB = getopenDb();
    if(!openDB)
    {                
        return;               
    }
    else
    {
        db = openDB('mydatabase', '1.0', 'my db', 2*1024*1024);
        db.transaction(function (t) {
        t.executeSql('CREATE TABLE IF NOT EXISTS
            myTable(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL DEFAULT "Code", age INT NOT NULL);', [], null, null);               
        
    });
    selRows();
    return db;
    }            
}

Obter o objeto de armazenamento na inicialização.
No início da secção de scripts, executamos o código abaixo. "db" é o objeto que iremos usar para executar os comandos.

 

var db = createTable();
Inserindo dados na tabela
Precisamos chamar o método db.transaction para iniciar a transação de inserção, e então chamar a função executeSql() para executar a query de  Insert na tabela. Segue abaixo a função
function insert() {
    if(!db)
    {                
        return;                
    }
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    db.transaction(function (t) {
        t.executeSql("INSERT INTO myTable('name','age')
           values('" + name + "'," + age + ");", [], null, null);
        alert("Inserida com Sucesso!");
        selRows();
    });
}

Selecionando da tabela
Esta função é similar à função apresentada anteriormente. A função abaixo irá selecionar da base de dados e apresentar os resultados.

function selRows() {
    
    var q = "select * from myTable";
    
    db.transaction(function (t) {
        t.executeSql(q, null, function (t, data) {
            var html = "<table><tr><td>ID</td><td>Name</td><td>Age</td></tr>";
            for (var i = 0; i < data.rows.length; i++) {
                  html += "<tr><td>" +
                  data.rows.item(i).id + "</td><td>" +
                  data.rows.item(i).name + "</td><td>" +
                  data.rows.item(i).age + "</td></tr>";
            }
            html += "</table>";
            var el = document.getElementById("main");
            el.innerHTML = html;
        });
    });
}

 

Nesse aplicativo foi alterar a função para chamar o alerta, no caso estamos utilizando uma função já implementada do aplicativo, que pode ser chamada através do seguinte código:


$.afui.popup('texto');

Para ver o projeto completo e poder baixar inteiro, acesso o link abaixo:


https://github.com/carlosstenzel/BlocoDeNotas1

Gostou? Tem algum duvida? Comente para que possa saber se foi útil esse artigo ;)


CodeHamper © 2017 - Todos os direitos reservados