Innehållsförteckning
En webbplats gjord med HTML 5, JavaScript, CSS 3, kan köras på olika enheter med Apache Cordova. Om vi har en mobilapplikation och vi vill lagra, hantera och hämta data på ett effektivt och pålitligt sätt, ger Apache Cordova oss ett plugin för att hantera SQLite -databaser.Android å sin sida har redan i sin arkitektur alla nödvändiga verktyg för att skapa och hantera SQLite -databaser, så att vi kan infoga, ändra, konsultera och ta bort data. Denna databas kommer att vara lokal, det vill säga den kommer att förvaras på enheten där programmet körs.
I en annan handledning förklarade vi redan installationen av Apache Cordova, i den här kommer vi att göra ett program för att förstå hur en Sqlite -databas fungerar från Android.
Vi kommer att använda Linux-terminalen i det här fallet, men Apache Cordova är plattformsoberoende. Vi börjar med att skapa projektet från terminalen och i rotläge med följande kod:
cordova skapa app com.demo.app App01
cordova plattform lägg till androidVi antar att vi i Android Adv -manager har en enhet som redan är konfigurerad, men vi konfigurerar en som stöder Api 19 och framåt, det vill säga Android 4.4.2
cordova plugin lägg till https://github.com/brodysoft/Cordova-SQLitePlugin.gitVi ska testa att standardprogrammet fungerar, för detta går vi till terminalen och skriver följande kod
cordova emulera androidDet kommer att börja kompilera programmet och om allt fungerar bör vi se den emulerade enheten som visas nedan.
FÖRSTORA
Sedan ändrar vi blocket Jag har infört ett formulär för att mata in data
Linjenkommer att visa de inmatade data som finns i databasen. Inne i css -katalogen hittar vi index.css -filen, vi öppnar den här filen, vi tar bort dess innehåll och vi lägger till följande stilkod för att ge formen en design.Kontaktinformation
Gravera
- namn
- E-post
html, body, h1, form, fieldset, ol, li {marginal: 0; vaddering: 0; } kropp {bakgrund: #ffffff; färg: # 111111; font-family: Georgia, "Times New Roman", Times, serif; vaddering: 20px; } bild # kontakter {bakgrund: # 9cbc2c; -moz-border-radie: 5px; -webkit-gräns-radie: 5px; vaddering: 20px; bredd: 400px; höjd: 150px; } form # kontakter fältuppsättning {border: none; marginal-botten: 10px; } formulär # kontakter fältuppsättning: sista-av-typ {marginal-botten: 0; } formulär # kontakter legend {color: # 384313; teckenstorlek: 16px; font-weight: fet; vadderingsbotten: 10px; } form # kontakter> fieldset> legend: före {content: "Step" -räknare (fieldset) ":"; motökning: fältuppsättningar; } formulär # kontakter fältuppsättning fältset legend {color: # 111111; teckenstorlek: 13px; font-weight: normal; vadderingsbotten: 0; } form # kontakter ol li {bakgrund: # b9cf6a; bakgrund: rgba (255,255,255, .3); border-color: # e3ebc3; kantfärg: rgba (255,255,255, .6); kantstil: solid; kantbredd: 2px; -moz-border-radie: 5px; -webkit-gräns-radie: 5px; radhöjd: 30px; liststil: ingen; vaddering: 5px 10px; marginal-botten: 2px; } form # kontakter ol ol li {bakgrund: ingen; gräns: ingen; flyta till vänster; } formulär # kontakter etikett {float: left; teckenstorlek: 13px; bredd: 110px; } formulär # kontakter fältuppsättning fältmängdsetikett {bakgrund: ingen upprepning kvar 50%; radhöjd: 20px; vaddering: 0 0 0 30px; bredd: auto; } form # kontakter fältuppsättning fältuppsättningsetikett: sväva {markör: pekare; } formulär # kontakter textområde {bakgrund: #ffffff; gräns: ingen; -moz-border-radie: 3px; -webkit-gräns-radie: 3px; -khtml-gräns-radie: 3px; font: italic 13px Georgia, "Times New Roman", Times, serif; kontur: ingen; vaddering: 5px; bredd: 200px; } formulär # kontaktinmatning: inte ([typ = skicka]): fokus, formulär # kontakter textområde: fokus {bakgrund: #eaeaea; } form # kontaktknapp {bakgrund: # 384313; gräns: ingen; flyta till vänster; -moz-border-radie: 20px; -webkit-gräns-radie: 20px; -khtml-gräns-radie: 20px; gränsradie: 20px; färg: #ffffff; display: block; font: 14px Georgia, "Times New Roman", Times, serif; bokstavsavstånd: 1px; marginal: 7px 0 0 5px; vaddering: 7px 20px; text-skugga: 0 1px 1px # 000000; text-transform: versaler; } form # kontakter -knapp: sväng {bakgrund: # 1e2506; markör: pekare; }Efter att ha spelat in de två filerna kör vi programmet igen:
cordova emulera androidVi borde se följande skärm:
FÖRSTORA
Inne i filen sqlitedb.js skriver vi följande kod:
// Vi lägger som en händelse i det ögonblick som programmet startar och börjar kommunicera med enhetsdokumentet.addEventListener ("deviceready", onDeviceReady, false); // variabelfält i formuläret var namn, e -post; // Jag startar programmet Jag skapar databasfunktionen onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaktion (CreateDB, errorDB); } Varje transaktion i databasen görs med det definierade objektet db och utförs med transaktionsmetoden. Denna metod returnerar en parameter med resultatet av den exekveringen som lagras enligt konvention i tx -parametern, varje transaktion har en funktion som parameter vilket är själva transaktionen, till exempel skrivdata och en felfunktion om transaktionen misslyckas. Vi fortsätter med CreateDB -funktionen och 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 TEXT NOT NULL)'); } funktionsfelDB (tx, err) {alert ("SQL -fel:" + err); } // funktion Infoga data i databasfunktionen InsertSQL (tx) {name = document.getElementById ('name'). value; email = document.getElementById ('email'). value; tx.executeSql ('INSERT INTO contacts (name, email) VALUES ("' + name + '", "' + email + '")'); varning ('Logg tillagd'); } // funktion som genererar transaktionen för att lägga till datafunktionspost () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaktion (InsertSQL, errorDB); // Visa data från tabellen db.transaction (ConsultDB, errorDB); } // Vi konsulterar alla poster i kontakttabellen och resultatet används i en funktion ListDBfunction ConsultDB (tx) {tx.executeSql ('VÄLJ * FRÅN kontakter', [], ListDB, errorDB); } // ListDB -funktionen tar emot transaktionsparametern och postuppsättningen med innehållet i frågan, vi går igenom rekorduppsättningen och extraherar varje fält, vi genererar en html -lista och sedan visar vi den i en div med en listidentifierare genom innerHtml så dynamisk. funktion ListDB (tx, resultat) {var len = results.rows.length; var listing = ''; listing = listing.concat ("Listning:" + len + "kontakter"); för (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 kompilerar vi om applikationen från terminalen med följande kod
cordova emulera androidNär emulatorn distribueras med programmet kommer vi att börja lägga till poster till vår agenda och dessa visas nedan, enheten behåller data som vi matar in i ett virtuellt minne, det vill säga att databasen inte kommer att raderas varje gång När vi kör programmet i emulatorn eller i en verklig enhet kommer vi att kunna se data som vi registrerade.
FÖRSTORA
