✅ Android aplikacije s Apache Cordovom i SQlite

Sadržaj

Web stranica izrađena s HTML 5, JavaScript, CSS 3, može se izvesti na različitim uređajima pomoću Apache Cordove. Ako imamo mobilnu aplikaciju i želimo pohranjivati, upravljati i dohvatiti podatke na učinkovit i pouzdan način, Apache Cordova nam pruža dodatak za rukovanje SQLite bazama podataka.
Android sa svoje strane već u svojoj arhitekturi sadrži sve potrebne alate za stvaranje i upravljanje SQLite bazama podataka, tako da možemo umetati, mijenjati, pregledavati i brisati podatke. Ova će baza podataka biti lokalna, odnosno čuvat će se na uređaju na kojem je aplikacija pokrenuta.
U drugom vodiču već smo objasnili instalaciju Apache Cordove, u ovom ćemo izraditi aplikaciju za razumijevanje kako Sqlite baza podataka radi s Androida.
U ovom slučaju koristit ćemo Linux terminal, ali Apache Cordova ima više platformi. Počet ćemo stvaranjem projekta s terminala i u korijenskom načinu rada pomoću sljedećeg koda:

 cordova izradi aplikaciju com.demo.app App01

Nakon stvaranja dodajemo platformu, uređaj na kojem će se to izvesti omogućuje konfiguriranje emulatora u ovom slučaju to će biti Android, s terminala pišemo sljedeći kod:

 platforma cordova dodaj android

Pretpostavljamo da u Android Adv manageru već imamo konfiguriran uređaj, ali konfiguriramo onaj koji podržava Api 19 pa nadalje, to je Android 4.4.2

Sada ćemo instalirati dodatak kako bismo mogli raditi sa Sqliteom, s terminala ćemo izvršiti sljedeću naredbu koja će preuzeti i instalirati dodatak.

 dodatak cordova dodaj https://github.com/brodysoft/Cordova-SQLitePlugin.git

Pokušat ćemo provjeriti radi li zadana aplikacija. Za to idemo na terminal i upisujemo sljedeći kod

 Cordova oponaša Android

Počet će sastavljati aplikaciju i ako sve funkcionira, trebali bismo vidjeti emulirani uređaj kao što je prikazano u nastavku.

POVEĆAJTE

Nakon što provjerimo funkcionira li aplikacija, počet ćemo razvijati naš primjer, otvorimo datoteku index.html, dodamo sljedeću javascript knjižnicu u zaglavlje

Zatim mijenjamo blok Uključio sam obrazac za unos podataka

Kontakt podaci

Ime
E-mail

Gravirati

Crtaposlužit će za prikaz unesenih podataka pronađenih u bazi podataka. Unutar direktorija css nalazimo datoteku index.css, otvaramo ovu datoteku, brišemo njezin sadržaj i dodajemo sljedeći kod stila kako bismo oblikovanju dali oblik.

 html, body, h1, form, fieldset, ol, li {margin: 0; punjenje: 0; } tijelo {pozadina: #ffffff; boja: # 111111; font-family: Georgia, "Times New Roman", Times, serif; punjenje: 20px; } formirati # kontakte {pozadina: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; punjenje: 20px; širina: 400px; visina: 150px; } form # contacts fieldset {border: none; margin-bottom: 10px; } form # contacts fieldset: last-of-type {margin-bottom: 0; } formirati # kontakt legendu {boja: # 384313; font-size: 16px; font-weight: bold; padding-bottom: 10px; } form # contacts> fieldset> legend: before {content: "Step" counter (fieldsets) ":"; kontra-prirast: skupovi polja; } form # contacts fieldset legend field {color: # 111111; font-size: 13px; font-weight: normal; padding-bottom: 0; } formirati # kontakta ol li {background: # b9cf6a; pozadina: rgba (255,255,255,, 3); border-color: # e3ebc3; obrub u boji: rgba (255,255,255, .6); obrubljeni stil: čvrst; širina obruba: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; linija-visina: 30px; list-style: none; punjenje: 5px 10px; margin-bottom: 2px; } formirati # kontakta ol ol li {background: none; granica: nema; plovak: lijevo; } obrazac # oznaka kontakata {float: left; font-size: 13px; širina: 110px; } form # contacts fieldset label set field {background: none bez ponavljanja lijevo 50%; linija-visina: 20px; padding: 0 0 0 30px; širina: auto; } form # contacts fieldset label set: hover {pokazivač: pokazivač; } form # contacts textarea {background: #ffffff; granica: nema; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; font: italic 13px Georgia, "Times New Roman", Times, serif; obris: nema; punjenje: 5px; širina: 200px; } obrazac # unos kontakata: not ([type = submit]): focus, form # contacts textarea: focus {background: #eaeaea; } obrazac # gumb za kontakte {pozadina: # 384313; granica: nema; plovak: lijevo; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; boja: #ffffff; prikaz: blok; font: 14px Georgia, "Times New Roman", Times, serif; razmak između slova: 1px; margina: 7px 0 0 5px; punjenje: 7px 20px; tekstualna sjena: 0 1px 1px # 000000; tekstualna transformacija: velika slova; } obrazac # gumb gumb: hover {background: # 1e2506; pokazivač: pokazivač; }

Nakon snimanja dvije datoteke ponovno pokrećemo aplikaciju:

 Cordova oponaša Android

Trebali bismo vidjeti sljedeći zaslon:

POVEĆAJTE

Sada kada dizajn radi, morat ćemo napraviti javascript kôd za upravljanje bazom podataka. Za to ćemo stvoriti datoteku u js direktoriju koja će se zvati sqlitedb.js i referencirat ćemo je dodavanjem sljedećeg koda:

Unutar sqlitedb.js datoteke zapisujemo sljedeći kod:

 // Kao događaj stavljamo trenutak pokretanja aplikacije i početka komunikacije s uređajem document.addEventListener ("deviceready", onDeviceReady, false); // promjenjiva polja obrasca var name, email; // Pokrećem aplikaciju Kreiram funkciju baze podataka onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Svaka transakcija u bazi podataka izrađena je s definiranim objektom db i izvršava se metodom transakcije. Ova metoda vraća parametar s rezultatom tog izvršenja koji je konvencionalno pohranjen u parametru tx, svaka transakcija ima funkciju parametra koja je sama transakcija, na primjer upisivanje podataka i funkcija pogreške u slučaju da transakcija ne uspije. Nastavljamo s funkcijom CreateDB i funkcijom errorDB funkcijom 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)'); } error errorDB (tx, err) {alert ("SQL pogreška:" + err); } // funkcija Umetanje podataka u funkciju baze podataka InsertSQL (tx) {name = document.getElementById ('name'). value; email = document.getElementById ('email'). vrijednost; tx.executeSql ('INSERT INTO contacts (name, email) VALUES ("' + ime + '", "' + e -pošta + '")'); alert ('Dnevnik dodan'); } // funkcija koja generira transakciju za dodavanje podatkovne funkcije record () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (InsertSQL, errorDB); // Prikaz podataka iz tablice db.transaction (ConsultDB, errorDB); } // Provjeravamo sve zapise tablice kontakata i rezultat se koristi u funkciji ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // Funkcija ListDB prima parametar transakcije i skup zapisa sa sadržajem upita, prolazimo kroz skup zapisa i izdvajamo svako polje, generiramo html popis, a zatim ga prikazujemo u div -u s identifikatorom popisa kroz innerHtml pa dinamičan. funkcija ListDB (tx, rezultati) {var len = results.rows.length; var listing = ''; listing = listing.concat ("Oglas:" + len + "kontakti"); za (var i = 0; i
'+ results.rows.item (i) .name+' '+ results.rows.item (i) .email); } document.getElementById ('popis'). innerHTML = popis; }

Kad imamo sav kôd, ponovno kompajliramo aplikaciju s terminala sa sljedećim kodom

 Cordova oponaša Android

Kad se emulator implementira s aplikacijom, počet ćemo dodavati zapise u svoj dnevni red, a oni će se pojaviti ispod, uređaj čuva podatke koje trajno unosimo u virtualnu memoriju, što znači da se baza podataka neće brisati svaki put. Kad izvršimo aplikaciju u emulatoru ili na stvarnom uređaju, moći ćemo vidjeti podatke koje smo registrirali.

POVEĆAJTE

Da bismo uklonili ove podatke, morat ćemo napraviti sql upit za uklanjanje tablice i ponovno je stvoriti ili izbrisati samo podatke, to ćemo vidjeti u drugom vodiču.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod