Aplicativos Android com Apache Cordova e SQlite

Um site feito com HTML 5, JavaScript, CSS 3 pode ser executado em diferentes dispositivos usando Apache Cordova. Se temos um aplicativo móvel e queremos armazenar, gerenciar e recuperar dados de forma eficiente e confiável, o Apache Cordova nos fornece um plugin para lidar com bancos de dados SQLite.
O Android, por sua vez, já traz em sua arquitetura todas as ferramentas necessárias para criar e gerenciar bancos de dados SQLite, para que possamos inserir, modificar, consultar e excluir dados. Este banco de dados será local, ou seja, será mantido no dispositivo onde o aplicativo está rodando.
Em outro tutorial já explicamos a instalação do Apache Cordova, neste faremos um aplicativo para entender como funciona um banco de dados Sqlite do Android.
Usaremos o terminal Linux neste caso, mas o Apache Cordova é multiplataforma. Começaremos criando o projeto a partir do terminal e em modo raiz usando o seguinte código:

 cordova criar aplicativo com.demo.app App01

Uma vez criada adicionamos a plataforma, o dispositivo em que esta será executada permite configurar o emulador neste caso será o Android, a partir do terminal escrevemos o seguinte código:

 plataforma cordova adicionar android

Supomos que no gerenciador Android Adv temos um dispositivo já configurado, mas configuramos um que suporte Api 19 em diante, que é o Android 4.4.2

Agora vamos instalar o plugin para poder trabalhar com o Sqlite, a partir do terminal vamos executar o seguinte comando que irá baixar e instalar o plugin.

 plugin cordova add https://github.com/brodysoft/Cordova-SQLitePlugin.git

Vamos testar se o aplicativo padrão funciona, para isso vamos ao terminal e escrevemos o seguinte código

 cordova emular android

Ele começará a compilar o aplicativo e se tudo funcionar, devemos ver o dispositivo emulado conforme mostrado abaixo.

PROLONGAR

Assim que verificarmos que o aplicativo funciona, começaremos a desenvolver nosso exemplo, abrimos o arquivo index.html, adicionamos a seguinte biblioteca javascript no cabeçalho

Então nós modificamos o bloco Eu incorporei um formulário para inserir dados

Dados de contato

Nome
E-mail

Gravar

A linhaservirá para mostrar os dados inseridos encontrados no banco de dados. Dentro do diretório css encontramos o arquivo index.css, abrimos este arquivo, apagamos seu conteúdo e adicionamos o seguinte código de estilo para dar um desenho ao formulário.

 html, corpo, h1, formulário, conjunto de campos, ol, li {margem: 0; preenchimento: 0; } corpo {plano de fundo: #ffffff; cor: # 111111; família da fonte: Georgia, "Times New Roman", Times, serif; preenchimento: 20px; } formulário # contatos {background: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; preenchimento: 20px; largura: 400px; altura: 150px; } form # contacts fieldset {border: none; margin-bottom: 10px; } form # contacts fieldset: last-of-type {margin-bottom: 0; } form # contacts legend {color: # 384313; tamanho da fonte: 16px; intensidade da fonte: Negrito; acolchoamento inferior: 10px; } form # contacts> fieldset> legend: before {content: "Step" counter (fieldsets) ":"; contra-incremento: conjuntos de campos; } formulário # contatos fieldset fieldset legend {color: # 111111; tamanho da fonte: 13px; peso da fonte: normal; acolchoamento inferior: 0; } formulário # contatos ol li {background: # b9cf6a; fundo: rgba (255,255,255, 0,3); border-color: # e3ebc3; cor da borda: rgba (255,255,255, .6); estilo de borda: sólido; largura da borda: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; altura da linha: 30px; estilo de lista: nenhum; preenchimento: 5px 10px; margin-bottom: 2px; } formulário # contatos ol ol li {background: none; fronteira: nenhum; flutuar: esquerda; } formulário # marcador de contatos {float: left; tamanho da fonte: 13px; largura: 110px; } formulário # contatos fieldset fieldset label {background: nenhum sem repetição à esquerda 50%; altura da linha: 20px; preenchimento: 0 0 0 30px; largura: automático; } formulário # contatos fieldset fieldset rótulo: hover {cursor: ponteiro; } formulário # contatos textarea {background: #ffffff; fronteira: nenhum; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; fonte: itálico 13px Georgia, "Times New Roman", Times, serif; esboço: nenhum; preenchimento: 5px; largura: 200px; } formulário # entrada de contatos: não ([type = enviar]): focus, formulário # contatos textarea: focus {background: #eaeaea; } botão do formulário # contatos {background: # 384313; fronteira: nenhum; flutuar: esquerda; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; raio da borda: 20px; cor: #ffffff; display: bloco; fonte: 14px Georgia, "Times New Roman", Times, serif; espaçamento entre letras: 1px; margem: 7px 0 0 5px; preenchimento: 7px 20px; sombra do texto: 0 1px 1px # 000000; transformação de texto: maiúsculas; } botão do formulário # contatos: hover {background: # 1e2506; cursor: ponteiro; }

Depois de gravar os dois arquivos, executamos o aplicativo novamente:

 cordova emular android

Devemos ver a seguinte tela:

PROLONGAR

Agora que temos o design funcionando, teremos que fazer o código javascript para gerenciar o banco de dados. Para isso, criaremos um arquivo no diretório js que se chamará sqlitedb.js e faremos referência a ele adicionando o seguinte código:

Dentro do arquivo sqlitedb.js, escrevemos o seguinte código:

 // Colocamos como evento o momento em que a aplicação é iniciada e começa a comunicação com o dispositivo document.addEventListener ("deviceready", onDeviceReady, false); // campos de variáveis ​​do formulário var name, email; // Eu inicio o aplicativo, crio a função de banco de dados onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Cada transação no banco de dados é feita com o objeto definido db e é executada com o método transaction.Este método retorna um parâmetro com o resultado dessa execução que é armazenado por convenção no parâmetro tx, cada transação tem uma função como parâmetro que é a própria transação, por exemplo, gravar dados e uma função de erro no caso de falha da transação. Continuamos com a função CreateDB e a função errorDB CreateDB function (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, nome TEXT NOT NULL, email TEXT NOT NULL)'); } função errorDB (tx, err) {alert ("erro SQL:" + err); } // função Inserir dados no banco de dados function InsertSQL (tx) {name = document.getElementById ('name'). value; email = document.getElementById ('email'). value; tx.executeSql ('INSERT INTO contacts (name, email) VALUES ("' + name + '", "' + email + '")'); alerta ('Log adicionado'); } // função que gera a transação para adicionar dados function record () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (InsertSQL, errorDB); // Mostra os dados da tabela db.transaction (ConsultDB, errorDB); } // Consultamos todos os registros da tabela de contatos e o resultado é utilizado em uma função ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // A função ListDB recebe o parâmetro de transação e o conjunto de registros com o conteúdo da consulta, passamos pelo conjunto de registros e extraímos cada campo, geramos uma lista html e depois a mostramos em uma div com um identificador de lista por meio de innerHtml. dinâmico. função ListDB (tx, resultados) {var len = results.rows.length; var listagem = ''; listagem = listagem.concat ("Listagem:" + len + "contatos"); para (var i = 0; i
'+ results.rows.item (i) .name +' '+ results.rows.item (i) .email); } document.getElementById ('list'). innerHTML = list; }

Quando tivermos todo o código, recompilamos o aplicativo do terminal com o seguinte código

 cordova emular android

Quando o emulador for implantado com o aplicativo começaremos a adicionar registros à nossa Agenda e estes aparecerão listados abaixo, o dispositivo mantém os dados que estamos inserindo persistentemente em uma memória virtual, ou seja, o banco de dados não será excluído a cada Cada vez que executarmos a aplicação no emulador ou em um dispositivo real poderemos ver os dados que estávamos registrando.

PROLONGAR

Para eliminar esses dados teremos que fazer uma consulta sql para eliminar a tabela e recriá-la ou excluir apenas os dados, veremos isso em outro tutorial.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo