Android -applikationer med Apache Cordova og SQlite

Et websted lavet med HTML 5, JavaScript, CSS 3, kan eksekveres på forskellige enheder ved hjælp af Apache Cordova. Hvis vi har en mobilapplikation, og vi vil gemme, administrere og hente data på en effektiv og pålidelig måde, giver Apache Cordova os et plugin til håndtering af SQLite -databaser.
Android på sin side bringer allerede i sin arkitektur alle de nødvendige værktøjer til at oprette og administrere SQLite -databaser, så vi kan indsætte, ændre, konsultere og slette data. Denne database vil være lokal, det vil sige, den vil blive opbevaret på den enhed, hvor applikationen kører.
I en anden vejledning forklarede vi allerede installationen af ​​Apache Cordova, her vil vi lave en applikation for at forstå, hvordan en Sqlite -database fungerer fra Android.
Vi vil bruge Linux-terminalen i dette tilfælde, men Apache Cordova er cross-platform. Vi starter med at oprette projektet fra terminalen og i rodtilstand ved hjælp af følgende kode:

 cordova opret app com.demo.app App01

Når vi har oprettet tilføjer vi platformen, den enhed, hvor dette vil blive udført, gør det muligt at konfigurere emulatoren i dette tilfælde vil det være Android, fra terminalen skriver vi følgende kode:

 cordova platform tilføj android

Vi formoder, at vi i Android Adv -manager allerede har en enhed konfigureret, men vi konfigurerer en, der understøtter Api 19 og fremefter, det vil sige Android 4.4.2

Nu skal vi installere pluginet for at kunne arbejde med Sqlite, fra terminalen skal vi udføre følgende kommando, der vil downloade og installere plugin.

 cordova plugin tilføj https://github.com/brodysoft/Cordova-SQLitePlugin.git

Vi vil teste, at standardprogrammet virker, for dette går vi til terminalen og skriver følgende kode

 cordova emulere android

Det begynder at kompilere applikationen, og hvis alt fungerer, skal vi se den emulerede enhed som vist nedenfor.

FORSTØRRE

Når vi har kontrolleret, at applikationen fungerer, begynder vi at udvikle vores eksempel, vi åbner index.html -filen, vi tilføjer følgende javascript -bibliotek i overskriften

Derefter ændrer vi blokken Jeg har indarbejdet en formular til indtastning af data

Kontakt information

Navn
E-mail

Gravere

Linjentjener til at vise de indtastede data, der findes i databasen. Inde i css -biblioteket finder vi index.css -filen, vi åbner denne fil, vi sletter dens indhold, og vi tilføjer følgende stilkode for at give formen et design.

 html, body, h1, form, fieldset, ol, li {margin: 0; polstring: 0; } krop {baggrund: #ffffff; farve: # 111111; font-family: Georgia, "Times New Roman", Times, serif; polstring: 20px; } form # kontakter {baggrund: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; polstring: 20px; bredde: 400px; højde: 150px; } form # kontaktfeltsæt {border: none; margin-bund: 10px; } form # kontakter feltsæt: sidste-af-typen {margin-bottom: 0; } form # kontakter legende {farve: # 384313; skrifttype: 16px; skrifttype-vægt: fed; polstring-bund: 10px; } form # kontakter> fieldset> legend: før {content: "Step" -tæller (feltsæt) ":"; modforøgelse: feltsæt; } form # kontakter fieldset fieldset legend {color: # 111111; skrifttype: 13px; font-vægt: normal; polstring-bund: 0; } form # kontakter ol li {baggrund: # b9cf6a; baggrund: rgba (255,255,255, .3); border-color: # e3ebc3; kantfarve: rgba (255,255,255, .6); kantstil: solid; kantbredde: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; linjehøjde: 30px; liste-stil: ingen; polstring: 5px 10px; margin-bund: 2px; } form # kontakter ol ol li {baggrund: ingen; grænse: ingen; flyde: venstre; } form # kontakt etiket {float: left; skrifttype: 13px; bredde: 110px; } form # kontakter fieldset fieldset label {baggrund: ingen no-repeat venstre 50%; linjehøjde: 20px; polstring: 0 0 0 30px; bredde: auto; } form # kontakter fieldset fieldset label: svæve {cursor: pointer; } form # kontakter tekstområde {baggrund: #ffffff; grænse: ingen; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; skrifttype: kursiv 13px Georgien, "Times New Roman", Times, serif; omrids: ingen; polstring: 5px; bredde: 200px; } input # formular # kontakter: ikke ([type = indsend]): fokus, form # kontakter tekstområde: fokus {baggrund: #eaeaea; } knap til # kontaktpersoner {baggrund: # 384313; grænse: ingen; flyde: venstre; -moz-border-radius: 20px; -webkit-grænse-radius: 20px; -khtml-border-radius: 20px; grænse-radius: 20px; farve: #ffffff; display: blok; skrifttype: 14px Georgien, "Times New Roman", Times, serif; mellemrum mellem bogstaver: 1px; margen: 7px 0 0 5px; polstring: 7px 20px; tekstskygge: 0 1px 1px # 000000; tekst-transform: store bogstaver; } knap til kontakt # form: svæver {baggrund: # 1e2506; markør: pointer; }

Efter at have optaget de to filer kører vi applikationen igen:

 cordova emulere android

Vi skulle se følgende skærm:

FORSTØRRE

Nu hvor vi har designet til at fungere, bliver vi nødt til at lave javascript -koden for at administrere databasen. Til dette vil vi oprette en fil i js -biblioteket, der vil blive kaldt sqlitedb.js, og vi vil referere til den ved at tilføje følgende kode:

Inde i filen sqlitedb.js skriver vi følgende kode:

 // Vi sætter som en begivenhed i det øjeblik applikationen starter og begynder kommunikation med enhedsdokumentet.addEventListener ("deviceready", onDeviceReady, false); // variable felter i formen var navn, e -mail; // Jeg starter programmet Jeg opretter databasefunktionen onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaktion (CreateDB, errorDB); } Hver transaktion på databasen foretages med det definerede objekt db og udføres med transaktionsmetoden. Denne metode returnerer en parameter med resultatet af den eksekvering, der er gemt efter konvention i tx -parameteren, hver transaktion har en funktion som parameter som er selve transaktionen, f.eks. skrive data og en fejlfunktion, hvis transaktionen mislykkes. Vi fortsætter med CreateDB -funktionen og errorDB -funktionen CreateDB -funktion (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEKST NOT NULL)'); } funktionsfejlDB (tx, fejl) {alert ("SQL fejl:" + fejl); } // funktion Indsæt data i databasefunktionen InsertSQL (tx) {name = document.getElementById ('navn'). værdi; email = document.getElementById ('email'). værdi; tx.executeSql ('INSERT INTO contacts (name, email) VALUES ("' + name + '", "' + email + '")'); alarm ('Log tilføjet'); } // funktion, der genererer transaktionen for at tilføje datafunktionspost () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaktion (InsertSQL, errorDB); // Vis data fra tabel db.transaction (ConsultDB, errorDB); } // Vi konsulterer alle registreringer i kontakttabellen, og resultatet bruges i en funktion ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // ListDB -funktionen modtager transaktionsparameteren og rekordsættet med forespørgselens indhold, vi går gennem rekordsættet og udtrækker hvert felt, vi genererer en html -liste, og derefter viser vi den i en div med en listeidentifikator gennem innerHtml så dynamisk. funktion ListDB (tx, resultater) {var len = results.rows.length; var listing = ''; listing = listing.concat ("Fortegnelse:" + len + "kontakter"); for (var i = 0; i
'+ results.rows.item (i) .name+' '+ results.rows.item (i) .email); } document.getElementById ('liste'). innerHTML = liste; }

Når vi har al koden, kompilerer vi applikationen fra terminalen med følgende kode

 cordova emulere android

Når emulatoren er implementeret med applikationen, begynder vi at tilføje optegnelser til vores dagsorden, og disse vises nedenfor, enheden beholder de data, vi indtaster vedvarende, i en virtuel hukommelse, det vil sige, at databasen ikke vil blive slettet hver gang Når vi udfører applikationen i emulatoren eller i en rigtig enhed, vil vi kunne se de data, vi registrerede.

FORSTØRRE

For at fjerne disse data bliver vi nødt til at lave en sql -forespørgsel for at fjerne tabellen og genskabe den eller kun slette dataene, vi vil se dette i en anden vejledning.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt