Blog do Marcos » WebApp

Usando a API “Web SQL Database” do HTML 5

Marcos — Thu, 08 Jul 2010 03:16:57 +0000

Como vimos no artigo anterior, uma das novidades do HTML 5 é o Web SQL Database, que permite utilizar SQL para armazenar dados no lado do cliente através do SQLite. Vamos ver o seu funcionamento passo-a-passo a seguir:

Abrindo uma Conexão

var db = openDatabase('CONTATOS', '0.1', 'Lista de contatos', 200000);

O código acima cria um objeto de banco de dados “db” com 4 argumentos:

1. Nome do banco de dados;
2. Versão;
3. Descrição;
4. Tamanho estimado da base de dados.

Não se preocupe com o tamanho da base de dados pois ela é flexível. Aparentemente ao exceder o tamanho o navegador mostrará ao usuário uma janela pedindo autorização para expandir o espaço.

Para testar se a conexão foi criada com sucesso, basta verificar se “db” é nulo:


if (! db) alert ("Falha ao conectar no banco de dados.");

É muito importante fazer este teste de conexão antes de qualquer outro código pois existem várias razões pela qual o navegador poderá negar acesso ao banco, como por exemplo por questões de segurança e espaço.

Criando uma Tabela


db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS contatos (id INTEGER PRIMARY  KEY AUTOINCREMENT, nome VARCHAR, tel INTEGER)');
});

(Para saber os Datatypes do SQLite visite a página Datatypes In SQLite Version 3.)

Executando Consultas

O bacana desta API é que ela trata as operações como transações. Com transações é possível reverter as operações em caso de erro. Cada transação pode conter várias SQL e caso alguma apresente falha, nada é alterado no banco, preservando sua consistência.

Há também erro e callbacks de sucesso na transação, assim você pode gerenciar os erros, mas é importante entender que as operações têm a capacidade de reverter as mudanças.

Transação é uma simples função que contém os códigos SQL:


db.transaction(function (tx) {
        // Aqui acontece a mágina com a SQL utilizando o objeto "tx" que foi passado por parâmetro
});

Para ficar mais claro, vamos a alguns exemplos:

Inserindo um Registro


db.transaction(function(tx) {
        tx.executeSql('INSERT INTO contatos (nome, tel) VALUES (?,?)', ['Marcos', '2222-3333'], null, function(tx, e) {
                // caso ocorra algum erro
                alert(e.message);
        });
});

Lendo os Registros


// busca os contatos do banco
db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM contatos', [], function (tx, resultado) {
                for (i = 0; i &lt; resultado.rows.length; i++)
                        alert(resultado.rows.item(i)['nome']);
        });
});

Exemplo Funcional

Atenção, verifique se o seu navegador tem suporte a Web SQL Database antes de clicar no exemplo.

Simples Exemplo de uso do HTML Web SQL Storage.

Gostou? Deixe um comentário!

HTML 5, Web Storage e Web SQL Database

Marcos — Wed, 07 Jul 2010 23:36:26 +0000

Ouvimos e lemos todos os dias sobre as funcionalidades do HTML5 e suas benfeitorias para um design mais interativo e eficiente, porém existe uma novidade que ainda foi pouco comentada não diz respeito a layout especificamente.

Web Storage

O Web Storage (ou DOM Storage) é uma API que permite gravar dados no lado do cliente. Provavelmente no futuro ela será responsável pela extinção do Cookie.

Suas vantagens são grandes em relação ao Cookie, a começar pela capacidade de armazenamento de dados, que varia de navegador para navegador mas mantém uma média de 5mb por domínio, outra vantagem é que ao contrário do cookie ele não tem data para expirar, isso acontece somente por questões de espaço e falha de segurança. Um detalhe interessante, é que os dados não são transitados a cada requisição de página com o servidor, como faz o cookie.

Para quem quiser testar a API Web Storage:

Para definir uma variável:


sessionStorage.setItem('chave','valor');

e para resgata-la:


sessionStorage.getItem('chave');

No entanto, o Web Storage continua sendo uma forma simples de armazenamento de dados chave/valor, o que não resolve o problema de aplicações que desejam funcionar de maneira Offline como faríamos com o extinto Google Gears.

Web SQL Database

Para um armazenamento mais elaborado e de forma estruturada, o W3C criou Web SQL Database. Este é o cara que faz a revolução no armazenamento de dados no lado do cliente.

Como parte do HTML 5, o W3C está trabalhando em um rascunho do Web SQL Database API, uma especificação que abrange armazenar e acessar dados através de SQL. A especificação da linguagem SQL que é descrito na documentação é o de SQLite 3.6.19.

Esta API permite que as páginas da web interajam com um banco de dados incorporado no cliente, o que é útil para aplicações que desejam armazenar dados localmente ou para navegação offline.

Infelizmente nem todas as versões novas de navegadores implementaram esta API:

Internet Explorer 8.0 –Não Suporta
Firefox 3.6.3 –Não Suporta
Chrome 5.0 – Suporta (acho que desde a versão 4)
Safari 5.0 –Suporta

Por ser um pouco maior, (vou colocar) coloquei o exemplo de utilização desta API no próximo artigo.

Queria saber a opinião das pessoas que leem este blog se tem ideias ou projetos em mente para utilização de recursos offline.
Então comente abaixo!

Aplicativos Web

Marcos — Sun, 20 Sep 2009 21:20:32 +0000

A tendência mundial de Cloud Computing está se firmando a cada dia. Novos aplicativos plataforma web são lançados diariamente e nas mais diversas áreas.

Muita coisa boa vem sendo feita. Hoje praticamente para tudo que você precisar, você vai encontrar um aplicativo na web, desde um controle financeiro pessoal a gráficos na versão online do Photoshop.

Essa tendência de aplicativos nas nuvens não é por acaso, as tecnologias web (principalmente de interface) vem tendo uma evolução muito grande nos últimos tempos. Os navegadores estão alterando seus compiladores JavaScript para que eles se tornem mais rápidos e confiáveis, os avanços do HTML5, CSS3, e é claro não podemos deixar de lembrar na convergência para o uso de padrões web que a cada dia que passa ganha mais força.

O uso de Frameworks sem dúvida alguma é algo que realmente enriquece a aplicação. Hoje o jQuery tem plugins para praticamente qualquer coisa que você precise, com a vantagem de um código cross-browser, organizado e de fácil personalização (ao contrário das ferramentas do Visual Studio .Net da Microsoft).

Outro framework que tenho utilizado para algumas aplicações web é o ExtJS, que está em sua terceira versão do Framework Javascript, e na minha opinião é o que tem elementos de interfaces mais ricas que as demais. Outra coisa que se destaca é a facilidade com que se cria elementos complexos como grid, menu e formulários. Já tem disponível desde a versão 2.0 a tradução para o português para calendário e outros elementos básicos. Outra vantagem é a facilidade de se abstrair o banco de dados podendo trabalhar com XML e Json. Vale lembrar que o ExtJS está licensiado pela GPL v3.0 e para uso comercial deve-se adquirir a licença.

Por último e não menos importante, vale ressaltar um grande avanço que está engatinhando e vem sendo impulsionado principalmente pelo Google que é o suporte offline de aplicações web. Isso vem sendo testado através do aplicativo Google Gears, que está em versão beta mas já trás módulos funcionais como:

LocalServer Recursos de aplicativo de armazenamento em cache e servidor local (HTML, JavaScript, imagens etc.);
Banco de dados Armazenamento local de dados em um banco de dados relacional que pode ser totalmente pesquisado;
WorkerPool Seus aplicativos de web ficam com maior capacidade de resposta, executando de forma assíncrona as operações com uso intenso de recursos.

A versão 0.4 trouxe ainda Geolocation, Acesso a arquivos da máquina, dentre outras coisas. Vale lembrar que o Gears já vem instalado por padrão no Chrome, mas pode ser instalado no Firefox, IE e Safari (windows, linux e Mac).

O Google Gears realmente abre um caminho fantástico para aplicativos que requerem uma dependência mais crítica. Mais informações estão disponíveis no site do desenvolvedor da API.