HTML 5 – Parte 6 – Armazenando dados com Web SQL Databases

Publicado em 19/10/2010

3


Olá pessoal, tudo certin?

Se você chegou agora e quiser ver o que já escrevi sobre o assunto, consulte:

No post anterior falei sobre a API de armazenamento Web Storage que, como indiquei, parece uma versão “turbinada” (saudável e recomendada) dos odiosos cookies. O que vou mostrar hoje é uma outra API de armazenamento client-side definida na especificação, a Web SQL Databases.

Sobre a Web SQL Databases

Web SQL Databases é uma API alternativa para armazenamento e acesso a dados. Como o dome indica, temos aqui um banco de dados de verdade onde podemos realizar consultas SQL. Se você (diferente de mim) é fera em SQL, deverá se sentir confortável com essa especificação. Se você deseja saber um pouco mais sobre a sintaxe aceita na especificação, visite a página do SQLite.

A especificação não define claramente os limites dos bancos de dados que podemos criar utilizando essa espeficação. Quando você cria um banco de dados poderá sugerir um tamanho máximo que esse banco poderá ocupar. Logo, pode estimar 2MB ou 20MB Alegre, por exemplo. Fica a cargo do browser definir a política para aprovação do tamanho. Por padrão, seja amigo de seu usuário e ocupe o menor espaço possível.

Um dos recursos legais da especificação é que você poderá informar um código de callback para ser executado quando uma instrução SQL for completada. Devido a natureza desse modelo, a API para acesso ao banco de dados é, naturalmente, assíncrona. Isso signica que precisamos tomar cuidado ao escrever nosso JavaScript para garantir que as operações ocorram corretamente. Entretanto, as instruções SQL são enfileiradas em ordem, logo, podemos executar operações para criação de uma tabela, e depois, operações para preencher essa mesma tabela, sem medos. Em outras palavras, se desejamos executar código que utilize o banco com garantias de que a interação anterior foi completada (consultas e exclusões, por exemplo), devemos usar callbacks. Em qualquer outro caso, podemos executar outras operações sem preocupações.

Determinando se o Browser oferece suporte a Web SQL Databases

O seguinte código testa se o browser utilizado oferece suporte para Web SQL Databases:


              

                1 doctype html>  2 <meta charset=utf-8>  3 <script>  4 if (window.openDatabase) 5 { 6 alert("Este browser suporta Web SQL Databases"); 7 } 8 else  9 { 10 alert("Este browser suporta NÃO Web SQL Databases"); 11 } 12 script>
              

              

              

            

            
Atualmente, apenas Chrome, Opera e Safari oferecem suporte nativo para essa API. (O IE9 [beta, eu sei], não deu nem sinal!)

            
Abrindo e criando bancos de dados

            
A primeira tentativa de abrir um banco de dados (que ainda não existe), faz com esse banco de dados seja criado. Podemos ter apenas uma versão para um nome de banco de dados por vez. Logo, se há uma versão 1.0 criada para um banco, não podemos criar outra versão (1.1, por exemplo) sem intervenção direta da aplicação. Nesse post, eu vou iginorar o assunto versionamento.

            
Para criar um banco de dados, devemos utilizar uma instrução no seguinte formato:

            

              

              

                1 var db = openDatabase( 2 'meuBanco', 3 '1.0', 4 'My database', 5 2 * 1024 * 1024 6 );
              

              

              

            

            
O primeiro parâmetro (meuBanco), é o nome que quero dar ao banco de dados. O segundo (1.0), é a versão. O teceiro (My database), é um descritivo. Por fim, o quarto, é o tamanho desejado (no caso, 2 MB).

            
Simples assim!

            
Criando tabelas

            
Para criar tabelas (e para executar qualquer outra operação no banco de dados), antes precisa iniciar uma “transação” e, com o callback, criar a tabela. O callback da transação recebe um argumento contendo o objeto da transação, que é o objeto que permite a execução de instruções SQL através do método executeSql. Observe:

            

              

              

                1 var db = openDatabase( 2 'meuBanco', 3 '1.0', 4 'My database', 5 2 * 1024 * 1024  6 ); 7  8 db.transaction( function (tx) { 9 tx.executeSql('CREATE TABLE contacts (id, name)'); 10 });
              

              

              

            

            
O método executeSql espera quatro argumentos (sendo apenas o primeiro obrigatório):

            
    
              
  1. a instrução SQL que deverá ser executada;
    2. 
              
  2. argumentos para a instrução SQL;
    3. 
              
  3. callback para sucesso;
    4. 
              
  4. callback para falha;
    5. 
            

            
No pequeno bloco que apresentei, por exemplo, se a tabela contacts já estiver presente, um erro será disparado. Entretanto, como não especifiquei nenhum callback, um erro não causaria qualquer prejuízo ao fluxo de execução.

            
No meu próximo exemplo, entretanto, desejo fazer uma carga inicial de dados e isso acontece apenas se a tabela existir. Para não incorrer em uma falta, usemos uma alternativa de sintaxe para o comando que cria tabelas. Observe:

            

              

              

                1 var db = openDatabase( 2 'meuBanco', 3 '1.0', 4 'My database', 5 2 * 1024 * 1024  6 ); 7  8 db.transaction( function (tx) { 9 tx.executeSql( 10 'CREATE TABLE IF NOT EXISTS contacts (id, name)', 11 [], 12 function () 13 { 14 alert("código para carga de dados"); 15 } 16 ); 17 });
              

              

              

            

            

            
CRUD

            
Já sabemos como criar tabelas. Como proceder para incluir dados? Para recuperar? Para excluir? Para modificar? Para excluir? Simples, usando simplesmente o SQL que já conhece. Observe alguns exemplos:

            

              

              

                1 var db = openDatabase( 2 'meuBanco', 3 '1.0', 4 'My database', 5 2 * 1024 * 1024  6 ); 7  8 db.transaction( function (tx) { 9 tx.executeSql( 10 'CREATE TABLE IF NOT EXISTS contacts (id, name)', 11 [], 12 function () 13 { 14 tx.executeSql( 15 'INSERT INTO contacts (id, name) VALUES (1, "Elemar")'); 16 tx.executeSql( 17 'INSERT INTO contacts (id, name) VALUES (2, "Bill Gates")'); 18 } 19 ); 20 }); 21 22 db.transaction( function (tx) { 23 tx.executeSql( 24 'SELECT * FROM contacts', 25 [], 26 function (tx, results) 27 { 28 var len = results.rows.length; 29 alert('Existem ' + len + ' registros!'); 30 for (var i = 0; i < len; i++) 31 { 32 var row = results.rows.item(i); 33 alert(row.id + ': ' + row.name); 34 } 35 }, 36 function (tx, error) 37 { 38 alert('ooops ' + error.message); 39 } 40 ); 41 }); 42 43 db.transaction( function (tx) { 44 tx.executeSql( 45 'DROP TABLE contacts', 46 [], 47 function (tx, results) 48 { 49 alert('Tabela excluída'); 50 }, 51 function (tx, error) 52 { 53 alert('ooops ' + error.message); 54 } 55 ); 56 });
              

              

              

            

            
Simples! Não acha?

            
Definindo HTML5

            
Como prometido, durante essa série, na medida em que vamos conhecendo mais detalhes do HTML5, vou tentar ir criando uma definição para a linguagem. Com o que temos aqui, podemos dizer que:

            

              
HTML5 é a sucessora oficial para o HTML 4.01, que está sendo desenvolvida paralelamente pelo W3C e pelo WHATWG, que dá ênfase maior para a semântica do que para a sintaxe. Incorporou mais significado aos documentos mediante novas TAGs de indicação ao conteúdo. Além disso, simplificou drasticamente a criação de formulários e players de áudio/vídeo reduzindo muito a necessidade da escrita de código JavaScript ou plugins. Define também duas novas API de persistência bem superiores ao mecanismo de cookies, sendo que uma delas é um banco de dados com suporte para SQL.

            

            
Por enquanto, é o que temos. Vamos avançar mais nos estudos para poder complementar essa definição!

            
Bem pessoal… por hoje, era isso!

            
Smiley piscando

            
            

              Etiquetado:
            

            

              Publicado em: Sem categoria