Applicazioni Android con Apache Cordova e SQlite

Un sito web realizzato con HTML 5, JavaScript, CSS 3, può essere eseguito su diversi dispositivi utilizzando Apache Cordova. Se disponiamo di un'applicazione mobile e desideriamo archiviare, gestire e recuperare i dati in modo efficiente e affidabile, Apache Cordova ci fornisce un plug-in per gestire i database SQLite.
Android da parte sua porta già nella sua architettura tutti gli strumenti necessari per creare e gestire database SQLite, così possiamo inserire, modificare, consultare e cancellare dati. Questo database sarà locale, ovvero verrà conservato sul dispositivo in cui è in esecuzione l'applicazione.
In un altro tutorial abbiamo già spiegato l'installazione di Apache Cordova, in questo realizzeremo un'applicazione per capire come funziona un database Sqlite da Android.
Useremo il terminale Linux in questo caso, ma Apache Cordova è multipiattaforma. Inizieremo creando il progetto da terminale e in modalità root utilizzando il seguente codice:

 cordova create app com.demo.app App01

Una volta creata aggiungiamo la piattaforma, il dispositivo in cui questa verrà eseguita permette di configurare l'emulatore in questo caso sarà Android, da terminale scriviamo il seguente codice:

 piattaforma cordova aggiungi Android

Supponiamo che nel gestore Android Adv abbiamo un dispositivo già configurato, ma ne configuriamo uno che supporti Api 19 in poi, ovvero Android 4.4.2

Ora installeremo il plugin per poter lavorare con Sqlite, dal terminale eseguiremo il seguente comando che scaricherà e installerà il plugin.

 plug-in cordova aggiungere https://github.com/brodysoft/Cordova-SQLitePlugin.git

Verificheremo che l'applicazione predefinita funzioni, per questo andiamo al terminale e scriviamo il seguente codice

 cordova emula Android

Inizierà a compilare l'applicazione e se tutto funziona dovremmo vedere il dispositivo emulato come mostrato di seguito.

INGRANDIRE

Una volta verificato che l'applicazione funziona inizieremo a sviluppare il nostro esempio, apriamo il file index.html, aggiungiamo la seguente libreria javascript nell'intestazione

Quindi modifichiamo il blocco Ho incorporato un modulo per inserire i dati

Informazioni sui contatti

Nome
E-mail

Incidere

La lineaservirà per mostrare i dati inseriti trovati nel database. All'interno della directory css troviamo il file index.css, apriamo questo file, eliminiamo il suo contenuto e aggiungiamo il seguente codice di stile per dare un design al form.

 html, body, h1, form, fieldset, ol, li {margin: 0; imbottitura: 0; } corpo {sfondo: #ffffff; colore: # 111111; font-family: Georgia, "Times New Roman", Times, serif; imbottitura: 20px; } form # contatti {background: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; imbottitura: 20px; larghezza: 400 px; altezza: 150px; } form # contatti fieldset {border: none; margine inferiore: 10px; } form # contatti fieldset: last-of-type {margin-bottom: 0; } form # legenda contatti {color: # 384313; dimensione del carattere: 16px; font-weight: grassetto; fondo imbottitura: 10px; } form # contatti> fieldset> legenda: prima {content: "Step" counter (fieldset) ":"; controincremento: fieldset; } form # contatti fieldset fieldset legend {color: # 111111; dimensione del carattere: 13px; font-weight: normale; fondo-imbottitura: 0; } form # contatti ol li {background: # b9cf6a; sfondo: rgba (255,255,255, .3); colore del bordo: # e3ebc3; colore del bordo: rgba (255,255,255, .6); stile bordo: solido; larghezza del bordo: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; altezza della linea: 30px; stile elenco: nessuno; imbottitura: 5px 10px; margine inferiore: 2px; } form # contatti ol ol li {background: nessuno; confine: nessuno; galleggiante: sinistro; } form # label contatti {float: left; dimensione del carattere: 13px; larghezza: 110px; } form # contatti fieldset fieldset label {background: nessuno no-repeat left 50%; altezza della linea: 20px; riempimento: 0 0 0 30px; larghezza: automatico; } form # contatti fieldset fieldset label: hover {cursor: pointer; } form # contact textarea {background: #ffffff; confine: nessuno; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; font: corsivo 13px Georgia, "Times New Roman", Times, serif; contorno: nessuno; imbottitura: 5px; larghezza: 200px; } form # contatti input: not ([type = submit]): focus, form # contatti textarea: focus {background: #eaeaea; } form # contatti pulsante {background: # 384313; confine: nessuno; galleggiante: sinistro; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; raggio di confine: 20px; colore: #ffffff; blocco di visualizzazione; font: 14px Georgia, "Times New Roman", Times, serif; spaziatura tra lettere: 1px; margine: 7px 0 0 5px; imbottitura: 7px 20px; text-shadow: 0 1px 1px # 000000; text-transform: maiuscolo; } form # contatti pulsante: hover {background: # 1e2506; cursore: puntatore; }

Dopo aver registrato i due file eseguiamo nuovamente l'applicazione:

 cordova emula Android

Dovremmo vedere la seguente schermata:

INGRANDIRE

Ora che abbiamo il design funzionante dovremo creare il codice javascript per gestire il database. Per questo creeremo un file nella directory js che si chiamerà sqlitedb.js e lo faremo riferimento aggiungendo il seguente codice:

All'interno del file sqlitedb.js scriviamo il seguente codice:

 // Mettiamo come evento il momento in cui l'applicazione si avvia e inizia la comunicazione con il dispositivo document.addEventListener ("deviceready", onDeviceReady, false); // campi variabili della forma var name, email; // avvio l'applicazione creo la funzione database onDeviceReady() {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Ogni transazione sul database viene effettuata con l'oggetto definito db e viene eseguita con il metodo Transaction, questo metodo restituisce un parametro con il risultato di tale esecuzione che viene memorizzato per convenzione nel parametro tx, ogni transazione ha una funzione come parametro che è la transazione stessa, ad esempio scrittura di dati e una funzione di errore nel caso in cui la transazione fallisca. Continuiamo con la funzione CreateDB e la funzione errorDB Funzione CreateDB (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contatti (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, nome TEXT NOT NULL, email TEXT NOT NULL)'); } function errorDB (tx, err) {avviso ("Errore SQL:" + err); } // function Inserisce i dati nel database function InsertSQL (tx) {name = document.getElementById ('name').value; email = document.getElementById ('email').value; tx.executeSql ('INSERT INTO contact (name, email) VALUES ("' + name + '", "' + email + '")'); alert ("Registro aggiunto"); } // funzione che genera la transazione per aggiungere dati funzione record () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (InsertSQL, errorDB); // Mostra i dati dalla tabella db.transaction (ConsultDB, errorDB); } // Consultiamo tutti i record della tabella contatti e il risultato viene utilizzato in una funzione ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contatti', [], ListDB, errorDB); } // La funzione ListDB riceve il parametro della transazione e il recordset con il contenuto della query, esaminiamo il recordset ed estraiamo ogni campo, generiamo una lista html e poi la mostriamo in un div con un identificatore di lista tramite innerHtml così dinamico. function ListDB (tx, results) {var len = results.rows.length; var lista = ''; lista = lista.concat ("Elenco:" + len + "contatti"); per (var i = 0; i
'+ results.rows.item (i) .name +' '+ results.rows.item (i) .email); } document.getElementById ('lista') innerHTML = lista; }

Quando abbiamo tutto il codice ricompiliamo l'applicazione da terminale con il seguente codice

 cordova emula Android

Quando l'emulatore viene distribuito con l'applicazione, inizieremo ad aggiungere record alla nostra agenda e questi appariranno elencati di seguito, il dispositivo mantiene i dati che stiamo inserendo in modo persistente in una memoria virtuale, vale a dire che il database non verrà eliminato ogni volta che eseguiamo l'applicazione nell'emulatore o in un dispositivo reale saremo in grado di vedere i dati che stavamo registrando.

INGRANDIRE

Per eliminare questi dati dovremo fare una query sql per eliminare la tabella e ricrearla o eliminare solo i dati, lo vedremo in un altro tutorial.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo