Innholdsfortegnelse
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
cordova plattform legg til androidVi 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
cordova plugin legg til https://github.com/brodysoft/Cordova-SQLitePlugin.gitVi skal teste at standardprogrammet fungerer, for dette går vi til terminalen og skriver følgende kode
cordova emulere androidDet vil begynne å kompilere applikasjonen, og hvis alt fungerer, bør vi se den emulerte enheten som vist nedenfor.
FORSTØRRE
Deretter modifiserer vi blokken Jeg har innarbeidet et skjema for å legge inn data
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.Kontaktinformasjon
Gravere
- Navn
- E-post
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 androidVi bør se følgende skjermbilde:
FORSTØRRE
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 androidNå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
