Cuprins
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
platforma cordova adaugă androidPresupunem 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
plugin cordova add https://github.com/brodysoft/Cordova-SQLitePlugin.gitVom testa că aplicația implicită funcționează, pentru aceasta mergem la terminal și scriem următorul cod
cordova emulează AndroidVa începe să compileze aplicația și dacă totul funcționează, ar trebui să vedem dispozitivul emulat așa cum se arată mai jos.
MARI
Apoi modificăm blocul Am încorporat un formular pentru introducerea datelor
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.Informații de contact
Grava
- Nume
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ă AndroidAr trebui să vedem următorul ecran:
MARI
Î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ă AndroidCâ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
