Aplicații Android cu Apache Cordova și SQlite

Un site web realizat cu HTML 5, JavaScript, CSS 3, poate fi executat pe diferite dispozitive folosind Apache Cordova. Dacă avem o aplicație mobilă și dorim să stocăm, să gestionăm și să preluăm date într-un mod eficient și fiabil, Apache Cordova ne oferă un plugin pentru gestionarea bazelor de date SQLite.
Android, la rândul său, aduce deja în arhitectura sa toate instrumentele necesare pentru crearea și gestionarea bazelor de date SQLite, astfel încât să putem insera, modifica, consulta și șterge date. Această bază de date va fi locală, adică va fi păstrată pe dispozitivul pe care rulează aplicația.
Într-un alt tutorial am explicat deja instalarea Apache Cordova, în aceasta vom crea o aplicație pentru a înțelege cum funcționează o bază de date Sqlite din Android.
Vom folosi terminalul Linux în acest caz, dar Apache Cordova este multiplataforma. Vom începe prin crearea proiectului de la terminal și în modul root folosind următorul cod:

 cordova create app com.demo.app App01

Odată creată adăugăm platforma, dispozitivul în care acesta va fi executat permite configurarea emulatorului în acest caz va fi Android, de la terminal scriem următorul cod:

 platforma cordova adaugă android

Presupunem că în Android Adv Manager avem un dispozitiv deja configurat, dar îl configurăm pe unul care acceptă Api 19 în continuare, adică Android 4.4.2

Acum vom instala pluginul pentru a putea lucra cu Sqlite, de la terminal vom executa următoarea comandă care va descărca și instala pluginul.

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

Vom testa că aplicația implicită funcționează, pentru aceasta mergem la terminal și scriem următorul cod

 cordova emulează Android

Va începe să compileze aplicația și dacă totul funcționează, ar trebui să vedem dispozitivul emulat așa cum se arată mai jos.

MARI

Odată ce verificăm că aplicația funcționează, vom începe să dezvoltăm exemplul nostru, deschidem fișierul index.html, adăugăm următoarea bibliotecă javascript în antet

Apoi modificăm blocul Am încorporat un formular pentru introducerea datelor

Informații de contact

Nume
E-mail

Grava

Liniava servi pentru a afișa datele introduse găsite în baza de date. În directorul css găsim fișierul index.css, deschidem acest fișier, îi ștergem conținutul și adăugăm următorul cod de stil pentru a da un design formularului.

 html, body, h1, form, fieldset, ol, li {margin: 0; umplutură: 0; } corp {fundal: #ffffff; culoare: # 111111; font-family: Georgia, „Times New Roman”, Times, serif; umplutură: 20 px; } formează # contacte {fundal: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; umplutură: 20 px; lățime: 400px; înălțime: 150px; } form # contacts fieldset {border: none; marginea de jos: 10 px; } formular # contacte set de câmpuri: ultimul tip {margin-bottom: 0; } formularul # legenda contactelor {color: # 384313; dimensiunea fontului: 16 px; font-weight: bold; fund de umplutură: 10 px; } formularul # contacte> set de câmpuri> legendă: înainte de {content: contor "Pas" (seturi de câmpuri) ":"; contraincrement: seturi de câmpuri; } formular # contacte set de câmpuri legenda setului de câmpuri {color: # 111111; dimensiunea fontului: 13 px; font-weight: normal; fund de umplutură: 0; } form # contacts ol li {background: # b9cf6a; fundal: rgba (255.255.255, .3); border-color: # e3ebc3; border-color: rgba (255.255.255, .6); stil de bordură: solid; lățimea chenarului: 2 px; -moz-border-radius: 5px; -webkit-border-radius: 5px; înălțimea liniei: 30 px; list-style: nici unul; umplutură: 5px 10px; marginea de jos: 2 px; } form # contacts ol ol li {background: none; hotar: nici unul; plutește la stânga; } formează # etichetă de contacte {float: left; dimensiunea fontului: 13 px; lățime: 110px; } formează # contacte set de câmpuri etichetă set de câmpuri {fundal: nici unul fără repetare la stânga 50%; înălțimea liniei: 20 px; umplutură: 0 0 0 30px; lățime: auto; } formular # contacte set de câmpuri etichetă set de câmpuri: hover {cursor: pointer; } form # contacts textarea {background: #ffffff; hotar: nici unul; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; font: italic 13px Georgia, "Times New Roman", Times, serif; contur: nici unul; umplutură: 5 px; lățime: 200px; } form # contacts input: not ([type = submit]): focus, formular # contacts textarea: focus {background: #eaeaea; } formular # buton contacte {fundal: # 384313; hotar: nici unul; plutește la stânga; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; raza chenarului: 20px; culoare: #ffffff; display: bloc; font: 14px Georgia, "Times New Roman", Times, serif; spațierea literelor: 1 px; margine: 7px 0 0 5px; umplutură: 7px 20px; text-shadow: 0 1px 1px # 000000; text-transform: majuscule; } butonul formularului # contacte: plasați cursorul {background: # 1e2506; cursor: pointer; }

După înregistrarea celor două fișiere, rulăm din nou aplicația:

 cordova emulează Android

Ar trebui să vedem următorul ecran:

MARI

Acum că avem proiectarea funcțională, va trebui să facem codul javascript pentru a gestiona baza de date. Pentru aceasta vom crea un fișier în directorul js care se va numi sqlitedb.js și îl vom referi adăugând următorul cod:

În fișierul sqlitedb.js scriem următorul cod:

 // Punem ca eveniment în momentul în care aplicația pornește și începe comunicarea cu dispozitivul document.addEventListener („deviceready”, onDeviceReady, false); // câmpuri variabile ale formularului var nume, e-mail; // Pornesc aplicația Creez funcția bază de date onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Fiecare tranzacție din baza de date se face cu obiectul definit db și se execută cu metoda tranzacției. Această metodă returnează un parametru cu rezultatul acelei execuții care este stocat prin convenție în parametrul tx, fiecare tranzacție are o funcție ca parametru care este tranzacția în sine, de exemplu, scrie date și o funcție de eroare în cazul în care tranzacția eșuează. Continuăm cu funcția CreateDB și funcția errorDB Funcția CreateDB (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL)'); } function errorDB (tx, err) {alert ("SQL error:" + err); } // funcție Inserare date în funcția bază de date InsertSQL (tx) {nume = document.getElementById ('nume'). valoare; email = document.getElementById ('email'). valoare; tx.executeSql ('INSERT INTO contacts (name, email) VALUE ("' + nume + '", "' + email + '")'); alert ('Jurnal adăugat'); } // funcție care generează tranzacția pentru a adăuga înregistrarea funcției de date () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (InsertSQL, errorDB); // Afișați datele din tabelul db.transaction (ConsultDB, errorDB); } // Consultăm toate înregistrările tabelului de contacte și rezultatul este utilizat într-o funcție ListDBfuncție ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // Funcția ListDB primește parametrul de tranzacție și setul de înregistrări cu conținutul interogării, trecem prin setul de înregistrări și extragem fiecare câmp, generăm o listă html și apoi o afișăm într-un div cu un identificator de listă prin innerHtml deci dinamic. funcție ListDB (tx, rezultate) {var len = results.rows.length; var listing = "; listing = listing.concat ("Listare:" + len + "contacte"); pentru (var i = 0; i
'+ results.rows.item (i) .name +' '+ results.rows.item (i) .email); } document.getElementById ('list'). innerHTML = list; }

Când avem tot codul, recompilăm aplicația de la terminal cu următorul cod

 cordova emulează Android

Când emulatorul este implementat cu aplicația, vom începe să adăugăm înregistrări la Agenda noastră și acestea vor apărea listate mai jos, dispozitivul păstrează datele pe care le introducem în mod persistent într-o memorie virtuală, adică nu se va șterge baza de date la fiecare când executăm aplicația în emulator sau într-un dispozitiv real, vom putea vedea datele pe care le înregistram.

MARI

Pentru a elimina aceste date va trebui să facem o interogare sql pentru a elimina tabelul și a-l recrea sau a șterge doar datele, vom vedea acest lucru într-un alt tutorial.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv