PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM. Prof. Angelo Augusto Frozza, M.Sc.

Transcrição

1 PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS ARMAZENAMENTO EM BD NO DM Prof. Angelo Augusto Frozza, M.Sc.

2 ROTEIRO Introdução App de exemplo Implementação do exemplo Testes realizados Compatibilidade Dúvidas... Referências consultadas

3 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 o banco de dados/tabelas Realizar querys CRUD (Create Retrieve Update Delete) Implementar funções de tratamento de erros e atualizações de status.

4 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();

5 APP DE EXEMPLO O app de exemplo está disponível no site

6 IMPLEMENTAÇÃO DO EXEMPLO Baseada em três estruturas: HTML (index.html) A interface para o usuário JavaScript (offlinedatabasejs.js) 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

7 IMPLEMENTAÇÃO DO EXEMPLO

8 IMPLEMENTAÇÃO DO EXEMPLO O JavaScript deve possuir: Funções para a criação do BD e das tabelas (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;

9 IMPLEMENTAÇÃO DO EXEMPLO Funções para a criação do BD 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

10 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;

11 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 + ".");

12 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 + ".");

13 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 + ".");

14 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 + ".");

15 IMPLEMENTAÇÃO DO EXEMPLO Funções para tratamento de erros errorhandler = function(transaction, error){ updatestatus("erro: " + error.message); return true;

16 IMPLEMENTAÇÃO DO EXEMPLO Funções para atualizações de status function updatestatus(status){ document.getelementbyid('status').innerhtml = status;

17 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.

18 TESTES REALIZADOS Testes com sucesso Acesso local no Android (Galaxy Tab 2.0 browser Opera) Acesso on-line no Android (browser Opera) Acesso on-line em um iphone 4 Acesso on-line no Chrome (notebook) Acesso local no Chrome (notebook)

19 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)

20 COMPATIBILIDADE

21 DÚVIDAS... Por que o BD do app on-line é diferente do local? Onde fica armazenado o arquivo físico do BD? Como indicar sempre a mesma localização do BD, independente do Browser? Como indicar uma localização fora da área do BD? Precisamos encontrar um emulador de dispositivo móvel genérico Precisamos encontrar templates para HTML 5 mobile (JQuery Mobile)

22 DÚVIDAS... Onde fica armazenado o arquivo físico do BD? Google Chrome (Windows Vista) \Users\_username_\AppData\Local\Google\Chrome\User Data\Default\databases

23 REFERÊNCIAS CONSULTADAS Como gravar dados no Android Parte III Banco de Dados SQLite dados+no+android+ SQLite offline em dispositivos móveis com HTML5 Trabalhando com Banco de Dados SQLite no Android 85 Using SQLite with PhoneGap webos

24 REFERÊNCIAS CONSULTADAS HTML 5 Parte 6 Armazenando dados com Web SQL Databases armazendando-dados-com-web-sql-databases/ HTML 5: Database