Android -applikasjoner med Apache Cordova og SQlite

Et nettsted laget med HTML 5, JavaScript, CSS 3, kan kjøres på forskjellige enheter ved hjelp av Apache Cordova. Hvis vi har en mobilapplikasjon og vi vil lagre, administrere og hente data på en effektiv og pålitelig måte, gir Apache Cordova oss et plugin for å håndtere SQLite -databaser.
Android på sin side bringer allerede inn sin arkitektur alle nødvendige verktøy for å lage og administrere SQLite -databaser, slik at vi kan sette inn, endre, konsultere og slette data. Denne databasen vil være lokal, det vil si at den blir lagret på enheten der applikasjonen kjører.
I en annen opplæring forklarte vi allerede installasjonen av Apache Cordova, i denne vil vi lage et program for å forstå hvordan en Sqlite -database fungerer fra Android.
Vi vil bruke Linux-terminalen i dette tilfellet, men Apache Cordova er plattformplattform. Vi starter med å lage prosjektet fra terminalen og i rotmodus ved å bruke følgende kode:

 cordova opprett app com.demo.app App01

Når vi har opprettet, legger vi til plattformen, enheten som dette vil bli utført på lar deg konfigurere emulatoren i dette tilfellet vil det være Android, fra terminalen skriver vi følgende kode:

 cordova plattform legg til android

Vi antar at vi i Android Adv -manager har en enhet som allerede er konfigurert, men vi konfigurerer en som støtter Api 19 og utover, det vil si Android 4.4.2

Nå skal vi installere programtillegget for å kunne jobbe med Sqlite, fra terminalen skal vi utføre følgende kommando som vil laste ned og installere programtillegget.

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

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

 cordova emulere android

Det vil begynne å kompilere applikasjonen, og hvis alt fungerer, bør vi se den emulerte enheten som vist nedenfor.

FORSTØRRE

Når vi har bekreftet at programmet fungerer, begynner vi å utvikle vårt eksempel, vi åpner index.html -filen, vi legger til følgende javascript -bibliotek i toppteksten

Deretter modifiserer vi blokken Jeg har innarbeidet et skjema for å legge inn data

Kontaktinformasjon

Navn
E-post

Gravere

Linjenvil vise de angitte dataene som finnes i databasen. Inne i css -katalogen finner vi index.css -filen, vi åpner denne filen, vi sletter innholdet og vi legger til følgende stilkode for å gi skjemaet et design.

 html, body, h1, form, fieldset, ol, li {margin: 0; polstring: 0; } kropp {bakgrunn: #ffffff; farge: # 111111; font-family: Georgia, "Times New Roman", Times, serif; polstring: 20px; } danner # kontakter {bakgrunn: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; polstring: 20px; bredde: 400px; høyde: 150px; } form # kontakter feltsett {border: none; margin-bunn: 10px; } form # kontakter feltsett: siste av typen {margin-bottom: 0; } skjema # kontakter legende {color: # 384313; skriftstørrelse: 16px; font-weight: fet skrift; polstring-bunn: 10px; } form # kontakter> feltsett> forklaring: før {content: "Step" -teller (feltsett) ":"; mot-økning: feltsett; } form # kontakter feltsett feltsett forklaring {farge: # 111111; skriftstørrelse: 13px; font-weight: normal; polstring-bunn: 0; } skjema # kontakter ol li {bakgrunn: # b9cf6a; bakgrunn: rgba (255,255,255, .3); border-color: # e3ebc3; kantfarge: rgba (255,255,255, .6); kantstil: solid; kantbredde: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; linjehøyde: 30px; liste-stil: ingen; polstring: 5px 10px; margin-bunn: 2px; } skjema # kontakter ol ol li {bakgrunn: ingen; grense: ingen; flyte: venstre; } skjema # kontakter etikett {float: left; skriftstørrelse: 13px; bredde: 110px; } skjema # kontakter feltsett feltsett etikett {bakgrunn: ingen no-repeat igjen 50%; linjehøyde: 20px; polstring: 0 0 0 30px; bredde: auto; } form # kontakter feltsett feltsett etikett: svev {markør: peker; } skjema # kontakter tekstområde {bakgrunn: #ffffff; grense: ingen; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; font: kursiv 13px Georgia, "Times New Roman", Times, serif; omriss: ingen; polstring: 5px; bredde: 200px; } skjema # kontakter input: ikke ([type = send]): fokus, skjema # kontakter tekstområde: fokus {bakgrunn: #eaeaea; } skjema # kontakter -knapp {bakgrunn: # 384313; grense: ingen; flyte: venstre; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; kant-radius: 20px; farge: #ffffff; display: blokk; font: 14px Georgia, "Times New Roman", Times, serif; mellomrom mellom bokstaver: 1px; margin: 7px 0 0 5px; polstring: 7px 20px; tekstskygge: 0 1px 1px # 000000; tekst-transform: store bokstaver; } knapp # kontakter: hold markøren {bakgrunn: # 1e2506; markør: peker; }

Etter å ha spilt inn de to filene kjører vi programmet igjen:

 cordova emulere android

Vi bør se følgende skjermbilde:

FORSTØRRE

Nå som vi har designet som fungerer, må vi lage javascript -koden for å administrere databasen. For dette vil vi lage en fil i js -katalogen som vil bli kalt sqlitedb.js, og vi vil referere til den ved å legge til følgende kode:

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

 // Vi legger som en hendelse i det øyeblikket programmet starter og begynner kommunikasjonen med enhetsdokumentet.addEventListener ("deviceready", onDeviceReady, false); // variable felt i skjemaet var navn, e -post; // Jeg starter programmet Jeg oppretter databasefunksjonen onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaksjon (CreateDB, errorDB); } Hver transaksjon i databasen utføres med det definerte objektet db og utføres med transaksjonsmetoden. Denne metoden returnerer en parameter med resultatet av den utførelsen som er lagret etter konvensjon i tx -parameteren, hver transaksjon har en funksjon som parameter som er selve transaksjonen, for eksempel skrive data og en feilfunksjon i tilfelle transaksjonen mislykkes. Vi fortsetter med CreateDB -funksjonen og errorDB -funksjonen CreateDB -funksjonen (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL)'); } funksjonsfeilDB (tx, err) {alert ("SQL error:" + err); } // funksjon Sett inn data i databasefunksjonen InsertSQL (tx) {name = document.getElementById ('name'). value; email = document.getElementById ('email'). verdi; tx.executeSql ('INSERT INTO contacts (name, email) VALUES ("' + name + '", "' + email + '")'); varsel ('Logg lagt til'); } // funksjon som genererer transaksjonen for å legge til datafunksjonsoppføring () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaksjon (InsertSQL, errorDB); // Vis data fra tabellen db.transaction (ConsultDB, errorDB); } // Vi konsulterer alle postene i kontakttabellen, og resultatet brukes i en funksjon ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // ListDB -funksjonen mottar transaksjonsparameteren og rekordsettet med innholdet i spørringen, vi går gjennom rekordsettet og trekker ut hvert felt, vi genererer en html -liste og deretter viser vi den i en div med en listeidentifikator gjennom innerHtml så dynamisk. funksjon ListDB (tx, resultater) {var len = results.rows.length; var listing = ''; listing = listing.concat ("Oppføring:" + len + "kontakter"); for (var i = 0; i
'+ results.rows.item (i) .name+' '+ results.rows.item (i) .email); } document.getElementById ('list'). innerHTML = list; }

Når vi har all koden, kompilerer vi applikasjonen fra terminalen med følgende kode

 cordova emulere android

Når emulatoren er distribuert med applikasjonen, begynner vi å legge til poster på vår agenda, og disse vil vises oppført nedenfor, enheten beholder dataene vi legger inn vedvarende i et virtuelt minne, det vil si at databasen ikke vil bli slettet hver gang Når vi kjører programmet i emulatoren eller i en ekte enhet, vil vi kunne se dataene vi registrerte.

FORSTØRRE

For å eliminere disse dataene må vi lage en sql -spørring for å eliminere tabellen og gjenskape den eller slette bare dataene, vi vil se dette i en annen opplæring.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng