Inhoudsopgave
Een website gemaakt met HTML 5, JavaScript, CSS 3 kan op verschillende apparaten worden uitgevoerd met Apache Cordova. Als we een mobiele applicatie hebben en we gegevens op een efficiënte en betrouwbare manier willen opslaan, beheren en ophalen, biedt Apache Cordova ons een plug-in om SQLite-databases te verwerken.Android van zijn kant brengt in zijn architectuur al alle benodigde tools om SQLite-databases te maken en te beheren, zodat we gegevens kunnen invoegen, wijzigen, raadplegen en verwijderen. Deze database is lokaal, dat wil zeggen dat deze wordt bewaard op het apparaat waarop de toepassing wordt uitgevoerd.
In een andere tutorial hebben we de installatie van Apache Cordova al uitgelegd, hierin zullen we een applicatie maken om te begrijpen hoe een Sqlite-database werkt vanuit Android.
We zullen in dit geval de Linux-terminal gebruiken, maar Apache Cordova is platformonafhankelijk. We beginnen met het maken van het project vanaf de terminal en in de root-modus met behulp van de volgende code:
cordova app maken com.demo.app App01
cordova-platform Android toevoegenWe veronderstellen dat we in de Android Adv-manager al een apparaat hebben geconfigureerd, maar we configureren er een die Api 19 en later ondersteunt, namelijk Android 4.4.2
cordova plug-in toevoegen https://github.com/brodysoft/Cordova-SQLitePlugin.gitWe gaan testen of de standaardtoepassing werkt, hiervoor gaan we naar de terminal en schrijven de volgende code:
cordova emuleren AndroidHet zal beginnen met het compileren van de applicatie en als alles werkt, zouden we het geëmuleerde apparaat moeten zien zoals hieronder getoond.
VERGROTEN
Dan passen we het blok aan Ik heb een formulier opgenomen om gegevens in te voeren
De lijnzal dienen om de ingevoerde gegevens in de database te tonen. In de css-map vinden we het bestand index.css, we openen dit bestand, we verwijderen de inhoud ervan en we voegen de volgende stijlcode toe om een ontwerp aan het formulier te geven.Contactgegevens
Graveren
- Naam
html, body, h1, form, fieldset, ol, li {marge: 0; opvulling: 0; } lichaam {achtergrond: #ffffff; kleur: # 111111; font-familie: Georgia, "Times New Roman", Times, schreef; opvulling: 20px; } formulier # contacten {achtergrond: # 9cbc2c; -moz-grens-radius: 5px; -webkit-grens-radius: 5px; opvulling: 20px; breedte: 400px; hoogte: 150px; } formulier # contacten fieldset {border: geen; marge-onder: 10px; } formulier # contacten fieldset: last-of-type {margin-bottom: 0; } formulier # contactenlegenda {kleur: # 384313; lettergrootte: 16px; lettergewicht: vet; opvulling-bodem: 10px; } form # contacten> fieldset> legend: before {content: "Step" counter (fieldsets) ":"; counter-increment: veldensets; } formulier # contacten fieldset fieldset legend {kleur: # 111111; lettergrootte: 13px; lettergewicht: normaal; opvulling-bodem: 0; } formulier # contacten ol li {achtergrond: # b9cf6a; achtergrond: rgba (255,255,255, .3); randkleur: # e3ebc3; randkleur: rgba (255,255,255, .6); randstijl: solide; grensbreedte: 2px; -moz-grens-radius: 5px; -webkit-grens-radius: 5px; lijnhoogte: 30px; lijststijl: geen; opvulling: 5px 10px; marge-onder: 2px; } formulier # contacten ol ol li {achtergrond: geen; grens: geen; zweven: links; } formulier # contacten label {float: left; lettergrootte: 13px; breedte: 110px; } formulier # contacten fieldset fieldset label {achtergrond: geen no-repeat left 50%; lijnhoogte: 20px; opvulling: 0 0 0 30px; breedte: automatisch; } formulier # contacten fieldset fieldset label: hover {cursor: pointer; } formulier # contacten tekstgebied {achtergrond: #ffffff; grens: geen; -moz-grens-radius: 3px; -webkit-grens-radius: 3px; -khtml-grensstraal: 3px; lettertype: cursief 13px Georgia, "Times New Roman", Times, schreef; overzicht: geen; opvulling: 5px; breedte: 200px; } formulier # contacten invoer: niet ([type = indienen]): focus, formulier # contacten tekstgebied: focus {achtergrond: #eaeaea; } formulier # contacten knop {achtergrond: # 384313; grens: geen; zweven: links; -moz-grens-radius: 20px; -webkit-grens-radius: 20px; -khtml-grens-radius: 20px; grensradius: 20px; kleur: #ffffff; weergave: blok; lettertype: 14px Georgia, "Times New Roman", Times, schreef; letter-spatiëring: 1px; marge: 7px 0 0 5px; opvulling: 7px 20px; tekstschaduw: 0 1px 1px # 000000; teksttransformatie: hoofdletters; } formulier # contacten knop: zweef {achtergrond: # 1e2506; cursor: aanwijzer; }Na het opnemen van de twee bestanden voeren we de applicatie opnieuw uit:
cordova emuleren AndroidWe zouden het volgende scherm moeten zien:
VERGROTEN
In het sqlitedb.js-bestand schrijven we de volgende code:
// We plaatsen als een gebeurtenis op het moment dat de applicatie start en begint te communiceren met het apparaat document.addEventListener ("deviceready", onDeviceReady, false); // variabele velden van het formulier var naam, e-mail; // Ik start de applicatie Ik maak de databasefunctie onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transactie (CreateDB, errorDB); } Elke transactie in de database wordt gemaakt met het gedefinieerde object db en wordt uitgevoerd met de transactiemethode. Deze methode retourneert een parameter met het resultaat van die uitvoering die volgens afspraak is opgeslagen in de tx-parameter, elke transactie heeft een functie als parameter dat is de transactie zelf, bijvoorbeeld gegevens schrijven en een foutfunctie voor het geval de transactie mislukt. We gaan verder met de CreateDB-functie en de errorDB-functie CreateDB-functie (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contacten (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL)'); } functie errorDB (tx, err) {waarschuwing ("SQL-fout:" + err); } // function Gegevens invoegen in de database functie InsertSQL (tx) {name = document.getElementById ('naam'). waarde; email = document.getElementById ('e-mail').waarde; tx.executeSql ('INSERT INTO contacten (naam, e-mail) VALUES ("' + naam + '", "' + e-mail + '")'); waarschuwing ('Log toegevoegd'); } // functie die de transactie genereert om gegevensfunctierecord toe te voegen () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transactie (InsertSQL, errorDB); // Toon gegevens uit tabel db.transaction (ConsultDB, errorDB); } // We raadplegen alle records van de contactentabel en het resultaat wordt gebruikt in een functie ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacten', [], ListDB, errorDB); } // De ListDB-functie ontvangt de transactieparameter en de recordset met de inhoud van de query, we gaan door de recordset en extraheren elk veld, we genereren een html-lijst en dan tonen we deze in een div met een lijst-ID via innerHtml dus dynamisch. functie ListDB (tx, resultaten) {var len = resultaten.rijen.lengte; var-lijst = ''; listing = listing.concat ("Vermelding:" + len + "contacten"); voor (var i = 0; i
'+ resultaten.rijen.item (i) .naam +' '+ resultaten.rijen.item (i) .e-mail); } document.getElementById ('lijst'). innerHTML = lijst; }Wanneer we alle code hebben, compileren we de applicatie opnieuw vanaf de terminal met de volgende code:
cordova emuleren AndroidWanneer de emulator met de applicatie wordt geïmplementeerd, beginnen we records toe te voegen aan onze agenda en deze worden hieronder weergegeven. Het apparaat bewaart de gegevens die we voortdurend invoeren in een virtueel geheugen, dat wil zeggen dat de database niet elke keer wordt verwijderd keer dat we de applicatie in de emulator of op een echt apparaat uitvoeren, kunnen we de gegevens zien die we aan het registreren waren.
VERGROTEN
