SQL do lado do Cliente? Web SQL Database com HTML5

Já pensou em utilizar SQL do lado do Cliente? Bom, agora isso é possível, com o HTML 5 podemos utilizar o Web SQL Database.

Ele traz uma API de banco de dados SQL Web, por enquanto ainda é uma especificação separada do HTML 5, mas já introduz um conjunto de APIs para manipular base de dados do lado do cliente utilizando SQL.

Estamos supondo que você já conheça e trabalhe com o SQL, mas caso não saiba o que é, recomendamos um mini curso de MySQL.

Por enquanto, Web SQL Database está suportado nas últimas versões do Chorme, Safari e Opera.

Esta postagem é baseada no artigo em inglês: Web SQL Database

 

Os métodos principais:

Há três seguintes métodos fundamentais definidos na especificação de que vamos mostrar nesta postagem:

1. openDataBase: Este método cria o objeto de banco de dados, depois utiliza um banco de dados existente ou criar um novo.
2. transaction: Este método controlar a transação e  nos retorna uma confirmação ou anulação com base no que foi executado.
3. executeSql: Este método é usado para executar um consulta SQL.

 

Abrindo Base de dados:

O openDataBase método cuida da abertura de um banco de dados se ele já existe, este método irá criá-lo se ele não existe.

Para criar e abrir um banco de dados, use o seguinte código:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

 

Acima método tem quatro parâmetros:

1. Nome do banco
2. Número da versão
3. Descrição de texto
4. Tamanho da base de dados

 

Execução de consultas:

Para executar uma consulta, deve ser utilizado a função database.transaction (). Esta função precisa de um único argumento, mas pode ser passado o 2º e 3º parametro para verificar se foi completado com sucesso o comando, segue exemplo de duas consultas, uma simples e outra debugando:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

// Simples
db.transaction (function (tx) {  
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");
});

// Debugando
db.transaction (function (tx) {  
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)",
       function(tx){
           /*Sucesso*/       },
       function(erro){
           /*Error*/       });
});

 

As consultas acima irão criar uma tabela chamada LOGS na base de dados “Teste’.

 

Inserir dados:

Para inserir dados  na tabela, utilizamos a função transaction() também, só que, desta vez com o INSERT para popular a tabela, veja o exemplo:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");

   // Os 3 null represetam
   // 1º - Um array contendo dados
   // 2º - Função para sucesso
   // 3º - Função para Erro
   // Vamos explicá-los mais abaixo
   tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 01') ", null, null, null);
   tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 02') ", null, null, null);
});

 

Também podemos passar valores dinâmicos, utilizamos a seguinte sintaxe:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {

  var novo_log = 'Resultado do Log de Teste 01';

   // Os 3 null estão sendo mostrados aqui
   // 1º - Um array contendo dados, estamos passando apenas um valor com o novo_log
   // 2º - Função para sucesso
   // 3º - Função para Erro
   // Vamos explicá-los mais abaixo
  tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");
  tx.executeSql ("INSERT INTO REGISTROS (log) VALUES (?)",[novo_log],null,null);      
});

 

Aqui novo_log é uma variável e executeSql mapeia cada item no argumento de matriz para o “?”, isto é, poderíamos ter vários “?” e no final teríamos [var_1,var_2,var_3], sendo que, ele utilizará a ordem exata das variáveis para popular a query.

 

Lendo os dados:

Para ler os registros já existentes usamos um callback para capturar os resultados da seguinte forma:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
    tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null);
});

db.transaction (function (tx) {
   tx.executeSql ('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p> Registros encontrados:" + len + "</ p>";
   for (i = 0; i <len; i ++) {
      console.log(results.rows.item(i) .log);
   }
 }, null);
});

 

Exemplo final:

Então, finalmente, vamos  criar um exemplo em HTML 5,  este exemplo está funcional e testado no Chrome versão Versão 39.0.2171.71 m.

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
    tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null);
   console.log('Log mensagem criada e linha inserida');
});

db.transaction(function(tx){
    tx.executeSql(       
        "SELECT * FROM LOGS",
        [],
        function(tx, result){
            console.log('Deu certo!');
            var len = result.rows.length, i;
            for(i=0;i<len;i++){
                console.log( result.rows.item(i) );
            }
        },
        function(tx, error){
            console.log('Deu errado!');
            console.log(error);
        }
    );
});

 

Isso produziria o seguinte resultado:

Log mensagem criada e linha inserida
Deu certo!
Object {id: 1, log: "Resultado do Log de Teste 01"}
Object {id: 2, log: "Resultado do Log de Teste 02"}

 

Conclusão:

É bem simples utilizar e depende apenas de um pouco de treino, nos testes detectamos que a sua persistência é como uma sessão, ao fechar o browser perde-se o objeto, mas ao trocar de página dentro do mesmo domínio o mesmo permanece.

Já pensou em utilizar esta nova funcionalidade com o evento onBeforeUnload para rastrear todo o caminho que um usuário caminhou dentro do seu site? A utilização ficará por conta da imaginação de vocês.

 

Um exemplo que encontramos no GitHub e que vale a pena ver:
Link original do código aqui.

https://gist.github.com/andyj/1599544

Link de uma aplicação feita com Web Sql.
HTML5 webSQL app synching with a php MySQL server

Se gostaram, compartilhem e façam comentários, sugestões, correções e correções sempre são bem vindas. A Turbosite tem o comprometimento em divulgar conhecimento!

---

 

Quer servidores Seguros, Estáveis, com uptime de 99,9%, no Brasil e de baixo Custo? A Turbosite é sua resposta.

Hospedagem de Sites, Data Center e Registro de Domínio Grátis só aqui!