Armazenamento em BD local com JavaScript

PROGRAMAÇÃO PARA
DISPOSITIVOS MÓVEIS
ARMAZENAMENTO
EM
BD NO DM
Prof. Angelo Augusto Frozza, M.Sc.
http://about.me/TilFrozza
ROTEIRO
Introdução
 App de exemplo
 Implementação do exemplo
 Testes realizados
 Compatibilidade
 Dúvidas...
 Referências consultadas

INTRODUÇÃO

O HTML5 contém adicionais altamente interessantes
para o desenvolvimento de apps mobile

A criação e interação com um banco de dados off-line é
uma delas
Isto sem necessitar o uso de uma linguagem back-end, como
PHP;
 Apenas usando JavaScript, que permite

Criar uma tabela
 Realizar querys CRUD (Create – Retrieve – Update – Delete)
 Implementar funções de tratamento de erros e atualizações de status.

INTRODUÇÃO

Esta funcionalidade é permitida em navegadores que
suportam HTML5 e SQLite

É possível detectar isso ao iniciar a aplicação, por meio de um
script ;
if (!window.openDatabase) {
updateStatus("Erro: Seu navegador não permite
banco de dados.");
} else {
initDB();
createTables();
queryAndUpdateOverview();
}
APP DE EXEMPLO

O app de exemplo está disponível no site
http://blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/
http://www.ifc-camboriu.edu.br/~frozza/2013.1/demoSQLT
IMPLEMENTAÇÃO DO EXEMPLO

Baseada em três estruturas:

HTML (index.html)


JavaScript (offlinedatabaseJS.js)


A interface para o usuário
Criação do BD, as funções de CRUD, tratamento e atualizações de
status
Manifest (offlinedatabase.manifest)

Responsável por “salvar” o arquivo com as funções para uso off-line
IMPLEMENTAÇÃO DO EXEMPLO
IMPLEMENTAÇÃO DO EXEMPLO

O JavaScript deve possuir:

Funções para a criação da tabela (função ao iniciar a
aplicação);

Funções CRUD para manipulação dos dados;

Funções para tratamento de erros;

Funções para atualizações de status;
IMPLEMENTAÇÃO DO EXEMPLO

Funções para a criação da tabela (função ao iniciar a
aplicação);
var db = window.openDatabase (name,
version, displayName, size);
name – nome da instância do banco de dados
 version (opcional) – versão do banco de dados
 displayName (opcional) – nome de exibição do banco de
dados
 size (opcional) – tamanho do banco de dados em bytes

IMPLEMENTAÇÃO DO EXEMPLO

Funções para a criação da tabela (função ao iniciar a aplicação);
var query = 'CREATE TABLE IF NOT EXISTS tbExemplo(
id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
nome VARCHAR NOT NULL, idade VARCHAR NOT NULL);';
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [],
nullDataHandler, errorHandler);
alert("Tabela 'tbExemplo' status: OK.");
});
} catch (e) {
alert("Erro: Data base 'tbExemplo'
não criada " + e + ".");
return;
}
IMPLEMENTAÇÃO DO EXEMPLO

Funções CRUD para manipulação dos dados;
function onCreate(){
var nome = document.itemForm.nome.value;
var idade = document.itemForm.idade.value;
if (nome == "" || idade == "") {
alert("Erro: 'Nome' e 'Idade' são campos obrigatórios!");
} else {
var query = "insert into tbExemplo(nome, idade) VALUES (?, ?);";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [nome, idade], function(transaction, results){
if (!results.rowsAffected) {
alert("Erro: Inserção não realizada");
} else {
updateForm("", "", "");
alert("Inserção realizada, linha id: " + results.insertId);
queryAndUpdateOverview();
}
}, errorHandler);
});
}
catch (e) {
alert("Erro: INSERT não realizado " + e + ".");
}
}
}
IMPLEMENTAÇÃO DO EXEMPLO

Funções CRUD para manipulação dos dados;
function onUpdate(){
var id = document.itemForm.id.value;
var nome = document.itemForm.nome.value;
var idade = document.itemForm.idade.value;
if (nome == "" || idade == "") {
alert("'Nome' e 'Idade' são campos obrigatórios!");
} else {
var query = "update tbExemplo set nome=?, idade=? where id=?;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [nome, idade, id], function(transaction, results){
if (!results.rowsAffected) {
alert("Erro: Update não realizado.");
} else {
updateForm("", "", "");
alert("Update realizado:" + results.rowsAffected);
queryAndUpdateOverview();
}
}, errorHandler);
});
} catch (e) {
alert("Erro: UPDATE não realizado " + e + ".");
}
}
}
IMPLEMENTAÇÃO DO EXEMPLO

Funções CRUD para manipulação dos dados;
function onSelect(htmlLIElement){
var id = htmlLIElement.getAttribute("id");
query = "SELECT * FROM tbExemplo where id=?;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [id], function(transaction, results){
var row = results.rows.item(0);
updateForm(row['id'], row['nome'], row['idade']);
}, function(transaction, error){
alert("Erro: " + error.code + "<br>Mensagem: " + error.message);
});
});
} catch (e) {
alert("Error: SELECT não realizado " + e + ".");
}
}
IMPLEMENTAÇÃO DO EXEMPLO

Funções CRUD para manipulação dos dados;
function onDelete(){
var id = document.itemForm.id.value;
var query = "delete from tbExemplo where id=?;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [id], function(transaction, results){
if (!results.rowsAffected) {
alert("Erro: Delete não realizado.");
}
else {
updateForm("", "", "");
alert("Linhas deletadas:" + results.rowsAffected);
queryAndUpdateOverview();
}
}, errorHandler);
});
}
catch (e) {
alert("Erro: DELETE não realizado " + e + ".");
}
}
IMPLEMENTAÇÃO DO EXEMPLO

Funções para tratamento de erros
errorHandler = function(transaction, error){
updateStatus("Erro: " + error.message);
return true;
}
IMPLEMENTAÇÃO DO EXEMPLO

Funções para atualizações de status
function updateStatus(status){
document.getElementById('status').innerHTML = status;
}
IMPLEMENTAÇÃO DO EXEMPLO

O arquivo .manifest possui apenas o nome do arquivo
JavaScript que deve ser transferido para o DM

Indica que o mesmo deve ser armazenado no cache de forma
a ser acessado off-line.
TESTES REALIZADOS

Testes com sucesso

Acesso local no Android 4.0.4 (Galaxy Tab 2.0 – browser
Opera)

Acesso on-line no Android 4.0.4 (browser Opera)

Acesso on-line em um iPhone 4

Acesso on-line no Chrome (notebook)

Acesso local no Chrome (notebook)
TESTES REALIZADOS

Testes falhos

Acesso on-line no Windows Phone 7.5 e 7.8

Acesso on-line e local no Firefox (20.0.1)

Acesso on-line e local no IE (9)
COMPATIBILIDADE
DÚVIDAS...

Por que o BD do app on-line é diferente do local?

Onde fica armazenado o arquivo físico do BD?

Precisamos encontrar um emulador de dispositivo móvel
genérico

Precisamos encontrar templates para HTML 5 mobile
(JQuery Mobile)
REFERÊNCIAS CONSULTADAS
Como gravar dados no Android – Parte III – Banco de
Dados SQLite
http://www.henriquelacerda.com.br/index.php?s=Como+gravar+
dados+no+Android+

SQLite offline em dispositivos móveis com HTML5
http://blog.vilourenco.com.br/como-criar-sqlite-offline-emdispositivos-moveis-com-html5/

Trabalhando com Banco de Dados SQLite no Android
http://www.portalandroid.org/comunidade/viewtopic.php?f=7&t=1
85

Using SQLite with PhoneGap-0.9.5 webOS
http://www.digitaldogbyte.com/tag/sqlite/

REFERÊNCIAS CONSULTADAS
HTML 5 – Parte 6 – Armazenando dados com Web
SQL Databases
http://elemarjr.net/2010/10/19/html-5-parte-6armazendando-dados-com-web-sql-databases/

HTML 5: Database
http://rogeriolino.com/2010/03/11/html5-database/
