✅ Apache Cordova e Android - SQL com Javascript: Banco de dados Web SQL

Índice

Vamos nos concentrar apenas no Android e como armazenar dados com Banco de dados Web SQL e JQuery Mobile.
Em um tutorial anterior, vimos como desenvolver um aplicativo simples com Apache Cordova, Jquery mobile, html5 e css que nos permitiria adicionar registros a um banco de dados Sqlite, neste caso veremos o que cada função faz dentro do código.

 Função Opendatabase ()

A função opendatabase é usada para criar um banco de dados ou abri-lo caso já tenha sido criado, são necessários quatro parâmetros, nome do banco de dados, versão, nome do banco de dados que será visualizado e o tamanho em bytes. Quando criamos e abrimos um banco de dados, ele é salvo na variável que atribuímos neste caso db.

 function CreartDB () {db = window.openDatabase ("Clients", "1.0", "Clients List", 1000000);}

Também podemos executar a função ao iniciar o aplicativo no dispositivo Android
Enquanto o aplicativo é iniciado, chamamos a função que cria o banco de dados

 // Adicionamos um evento quando o aplicativo é iniciado document.addEventListener ("deviceready", DeviceHome, false); função DeviceHome () {db = window.openDatabase ("Clientes", "1.0", "Lista de clientes", 1000000); }

Também podemos precisar fazer alguns trabalhos de casa enquanto o aplicativo está sendo iniciado.No caso anterior, vimos como chamar uma função quando o aplicativo já havia sido iniciado.

 function Starting () {document.addEventListener ("deviceready", ConfigureApp (), false); } função ConfigureAPP () {document.addEventListener ("resume", OtraFuncion (), false); }

A partir do HTML com o evento onload, ou seja, ao carregar a página chamamos a função Starting, enquanto ao iniciar (deviceready) chama a função ConfigureAPP que rodará em background (resume).
Alguns eventos que podemos usar disponíveis no Android são:
deviceready: este evento ocorre quando o aplicativo é iniciado.
pausa: Este evento é disparado quando um aplicativo começa a ser executado em segundo plano.
resume: Este evento ocorre quando o aplicativo passa do segundo plano para o primeiro plano.
online e offline: Este evento ocorre quando o aplicativo se conecta ou desconecta de uma rede.
Existem outros eventos relacionados à interação com o telefone, mas veremos aqueles que estão mais associados ao controle do código.

 Função Transaction ()

Quando queremos realizar uma transação do tipo SQL, usamos o método de transação. A função consiste em três parâmetros: uma função com a consulta sql, uma função para mostrar erro se a consulta falhar e uma função para mostrar se a consulta foi bem-sucedida.
A função de consulta será realizada através do método ExecuteSQL. Vamos criar três funções para executar em cadeia ao iniciar o aplicativo, são elas:
consultDB: com consulta sql
errorCDB (): irá mostrar se há um erro na consulta sql
sucesso CDB (): irá mostrar uma mensagem se a consulta for bem-sucedida.

 script charset = "utf-8"> // Ao iniciar a aplicação, fazemos algumas consultas sql document.addEventListener ("deviceready", IniciaSQL, false); função StartSQL () {var db = window.openDatabase ("Contatos", "1.0", "Lista de contatos", 400000); db.transaction (consultDB, errorCB, successCB); } function queryDB (tx) {// Cria a tabela de contatos se não for criada tx.executeSql ('CREATE TABLE IF NOT EXISTS Contacts (id, name, email)'); // Insira os dados na tabela tx.executeSql ('INSERT INTO Contacts (id, name, email) VALUES (1, "José Cordova”, ”[email protected]”)'); tx.executeSql ('INSERT INTO Contacts (id, nome, email) VALORES (2, “Maria Alpei”, ”[email protected]”) '); } // função para capturar o erro na função de transação errorCDB (erro) {alert ("Erro na consulta SQL:" + error.code); } // Função para exibir uma mensagem de sucesso function exitCDB () {alert ("Consulta bem-sucedida!"); }

Como consultar dados e exibi-los usando uma consulta sql que retorna um tipo de array ou matriz SQLResultSetList

 função queryDB (tx) {tx.executeSql ('SELECT * FROM Contacts', [], successCDB, errorCDB); } function db success (tx, results) {// obtemos o número de linhas var totalcontacts = results.rows.length; // mostramos o número de contatos console.log ("Total de contatos:" + totalcontacts); // Mostramos os registros em um loop onde mostramos cada campo do array para (var i = 0; i

A função SQLResultSetList possui a propriedade rows que contém os registros para cada linha da tabela consultada. Este array é percorrido com a função rows.item (i) e o número da linha. Devemos também indicar qual campo dessa linha queremos mostrar. Exemplo results.rows.item (i) .name. Também podemos mostrar este campo em algum elemento html, como um campo de texto referindo-se ao seu identificador.

 função querySuccess (tx, results) {var len = results.rows.length; document.getElementById ("divshow"). innerHTML + = "
IrNome

"; para (var i = 0; i"+ results.rows.item (i) .n name +""; } }

Então, no código html, devemos ter neste caso o div com o identificador divmotrar para que a tabela com os dados da consulta seja exibida.

Os colchetes na função executeSQL são usados para enviar parâmetros. Esta propriedade é opcional, pois nem sempre precisaremos enviar parâmetros para a consulta SQL. Se quisermos enviar parâmetros para uma consulta, por exemplo, para atualizar dados do banco de dados:

 função Update (id, nome) {db.transaction (function (tx) {tx.executeSql ("UPDATE Contacts SET name" =? WHERE id =? ", [nome, id], errorCDB);});

Também podemos acessar funções com eventos de html, como clicar em um botão. Veamos un ejemplo como si tenemos el archivo index por defecto de un proyecto Apache Cordova podemos añadir el código para la base de datos y el código html con el botón Grabar, al hacer clic en el botón Grabar se ejecutara una función que insertara datos en la base de dados.


Gravar

Vantagens de desenvolver com base de dados WEB SQLNão é necessário que o programador ou desenvolvedores conheçam todas as plataformas, pois elas são executadas em qualquer plataforma ou dispositivo. Navegadores, Android, IOS, etc, em alguns casos com alterações mínimas. Isso economiza muito tempo, pois até mesmo designers gráficos ou webmasters podem trabalhar sem necessariamente ser um programador, mesmo o conhecimento de Jquery que é aplicado ao desenvolvimento web é totalmente utilizado no desenvolvimento de aplicativos Apache Cordova.
Desvantagens de desenvolver com base de dados WEB SQLO banco de dados Web Sql utiliza o plugin Sqlite como meio de processamento de informações e para transações de dados com a plataforma nativa, utiliza JSON, o que torna o uso de diferentes funções e parâmetros para lidar com a complexidade dos dados.
É um projeto diferente do Android por isso incorpora muitas funcionalidades da versão nativa.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo