Android-applicaties met Apache Cordova en SQlite

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

Eenmaal gemaakt, voegen we het platform toe, het apparaat waarop dit zal worden uitgevoerd, maakt het mogelijk om de emulator te configureren, in dit geval zal het Android zijn, vanaf de terminal schrijven we de volgende code:

 cordova-platform Android toevoegen

We 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

Nu gaan we de plug-in installeren om met Sqlite te kunnen werken, vanaf de terminal gaan we de volgende opdracht uitvoeren die de plug-in zal downloaden en installeren.

 cordova plug-in toevoegen https://github.com/brodysoft/Cordova-SQLitePlugin.git

We gaan testen of de standaardtoepassing werkt, hiervoor gaan we naar de terminal en schrijven de volgende code:

 cordova emuleren Android

Het zal beginnen met het compileren van de applicatie en als alles werkt, zouden we het geëmuleerde apparaat moeten zien zoals hieronder getoond.

VERGROTEN

Zodra we hebben geverifieerd dat de applicatie werkt, zullen we beginnen met het ontwikkelen van ons voorbeeld, we openen het index.html-bestand, we voegen de volgende javascript-bibliotheek toe aan de header

Dan passen we het blok aan Ik heb een formulier opgenomen om gegevens in te voeren

Contactgegevens

Naam
E-mail

Graveren

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.

 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 Android

We zouden het volgende scherm moeten zien:

VERGROTEN

Nu het ontwerp werkt, moeten we de javascript-code maken om de database te beheren. Hiervoor zullen we een bestand maken in de js-map met de naam sqlitedb.js en we zullen ernaar verwijzen door de volgende code toe te voegen:

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 Android

Wanneer 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

Om deze gegevens te verwijderen, moeten we een sql-query maken om de tabel te verwijderen en deze opnieuw te maken of alleen de gegevens te verwijderen, we zullen dit in een andere zelfstudie zien.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven