Apache Cordova en Android - SQL met Javascript: Web SQL Database

We zullen ons alleen concentreren op Android en hoe gegevens op te slaan met Web SQL-database en JQuery Mobile.
In een eerdere tutorial hebben we gezien hoe we een eenvoudige applicatie kunnen ontwikkelen met Apache Cordova, Jquery mobile, html5 en css waarmee we records aan een Sqlite-database kunnen toevoegen, in dit geval zullen we zien wat elke functie in de code doet.

 Opendatabase () functie

De opendatabase-functie wordt gebruikt om een ​​database te maken of deze te openen als deze al is gemaakt, we hebben vier parameters nodig, de naam van de database, de versie, de naam van de database die wordt gezien en de grootte in bytes. Wanneer we een database maken en openen, wordt deze opgeslagen in de variabele die we in dit geval toewijzen db.

 functie CreartDB () {db = window.openDatabase ("Clients", "1.0", "Clients List", 1000000);}

We kunnen de functie ook uitvoeren wanneer u de applicatie op het Android-apparaat start
Terwijl de toepassing start, roepen we de functie aan die de database maakt

 // We voegen een gebeurtenis toe wanneer de toepassing is gestart document.addEventListener ("deviceready", DeviceHome, false); functie DeviceHome () {db = window.openDatabase ("Clients", "1.0", "Clients List", 1000000); } 

Het kan ook zijn dat we wat huiswerk moeten doen terwijl de applicatie opstart.In het vorige geval zagen we hoe je een functie aanroept terwijl de applicatie al gestart was.

 functie Starten () {document.addEventListener ("deviceready", ConfigureApp (), false); } function ConfigureAPP () {document.addEventListener ("resume", OtraFuncion (), false); } 

Van de HTML met de onload-gebeurtenis, dat wil zeggen, bij het laden van de pagina roepen we de functie Starten aan, terwijl het bij het starten (apparaatklaar) de ConfigureAPP-functie aanroept die op de achtergrond wordt uitgevoerd (hervatten).
Enkele evenementen die we kunnen gebruiken die beschikbaar zijn op Android zijn:
apparaatklaar: deze gebeurtenis vindt plaats wanneer de toepassing is gestart.
pauze: Deze gebeurtenis wordt geactiveerd wanneer een toepassing op de achtergrond wordt uitgevoerd.
vat samen: Deze gebeurtenis vindt plaats wanneer de toepassing van de achtergrond naar de voorgrond gaat.
online en offline: Deze gebeurtenis vindt plaats wanneer de toepassing verbinding maakt met of de verbinding verbreekt met een netwerk.
Er zijn andere gebeurtenissen die verband houden met interactie met de telefoon, maar we zullen die zien die meer verband houden met de besturing van de code.

 Transactie () functie 

Wanneer we een transactie van het type SQL willen uitvoeren, gebruiken we de transactiemethode. De functie bestaat uit drie parameters: een functie met de sql-query, een functie om een ​​fout te tonen als de query mislukt, en een functie om te laten zien of de query succesvol was.
De queryfunctie wordt uitgevoerd via de ExecuteSQL-methode. We zullen drie functies creëren om in een keten uit te voeren bij het starten van de applicatie, dit zijn:
raadpleegDB: met sql-query
error CDB (): wordt weergegeven als er een fout is in de sql-query
succes CDB (): zal een bericht tonen als de query succesvol was.

 script charset = "utf-8"> // Bij het starten van de toepassing maken we enkele sql-query's document.addEventListener ("deviceready", IniciaSQL, false); functie StartSQL () {var db = window.openDatabase ("Contacten", "1.0", "Contactenlijst", 400000); db.transactie (raadpleegDB, errorCB, successCB); } function queryDB (tx) {// Maak de tabel met contacten als deze niet is gemaakt tx.executeSql ('CREATE TABLE IF NOT EXISTS Contacts (id, name, email)'); // Voeg gegevens toe aan de tabel tx.executeSql ('INSERT INTO Contacts (id, name, email) VALUES (1, "José Cordova", ”[email protected]”)'); tx.executeSql ('INSERT INTO Contacts (id, naam, e-mail) WAARDEN (2, "Maria Alpei", ”[email protected]”) '); } // functie om de fout op te vangen in de transactiefunctie errorCDB (error) {alert ("Fout in de SQL-query:" + error.code); } // Functie om een ​​succesbericht weer te geven functie exitCDB () {alert ("Query succesvol!"); } 

Gegevens opvragen en weergeven met behulp van een sql-query die een array- of matrixtype retourneert SQLResultSetList

 functie queryDB (tx) {tx.executeSql ('SELECT * FROM Contacten', [], successCDB, errorCDB); } function db success (tx, results) {// we krijgen het aantal rijen var totalcontacts = results.rows.length; // we tonen het aantal contacten console.log ("Totaal aantal contacten:" + totaalcontacten); // We tonen de records in een lus waarin we elk veld van de array tonen voor (var i = 0; i

De functie SQLResultSetList heeft de eigenschap rijen die de records voor elke rij van de opgevraagde tabel bevat. Deze array wordt doorlopen met de functie row.item (i) en het rijnummer. Ook moeten we aangeven welk veld van die rij we willen tonen. Voorbeeld results.rows.item (i) .name.We kunnen dit veld ook tonen in een html-element, zoals een tekstveld dat verwijst naar zijn identifier.

 functie querySuccess (tx, resultaten) {var len = resultaten.rijen.lengte; document.getElementById ("divshow"). innerHTML + = "
GaanNaam

"; voor (var i = 0; i"+ resultaten.rijen.item (i) .n naam +""; } } 

Dan moeten we in de html-code in dit geval de div hebben met de identifier divmotrar zodat de tabel met de querygegevens wordt weergegeven.

De haakjes in de functie executeSQL worden gebruikt om parameters te verzenden. Deze eigenschap is optioneel omdat we niet altijd parameters naar de SQL-query hoeven te sturen. Als we parameters naar een query willen sturen, bijvoorbeeld om gegevens uit de database bij te werken:

 functie Update (id, naam) {db.transaction (functie (tx) {tx.executeSql ("UPDATE Contacts SET name" =? WHERE id =? ", [name, id], errorCDB);}); 

We hebben ook toegang tot functies met gebeurtenissen uit html, zoals klikken op een knop. Laten we een voorbeeld bekijken alsof we het standaard indexbestand van een Apache Cordova-project hebben, we kunnen de code voor de database en de html-code toevoegen met de knop Opnemen, wanneer op de knop Opnemen wordt geklikt, wordt een functie uitgevoerd die gegevens in de databank.

Graveren

Voordelen van ontwikkelen met WEB SQL DatabaseHet is niet nodig voor de programmeur of ontwikkelaars om alle platforms te kennen, aangezien het op elk platform of apparaat draait. Browsers, Android, IOS, enz., in sommige gevallen met minimale wijzigingen. Dit bespaart veel tijd aangezien zelfs grafisch ontwerpers of webmasters kunnen werken zonder noodzakelijkerwijs een programmeur te zijn, zelfs de kennis van JQuery die wordt toegepast op webontwikkeling wordt volledig gebruikt bij de ontwikkeling van Apache Cordova-applicaties.
Nadelen van ontwikkelen met WEB SQL DatabaseWeb Sql-database gebruikt de Sqlite-plug-in als een middel om informatie te verwerken en voor gegevenstransacties met het native platform, het maakt gebruik van JSON, waarbij verschillende functies en parameters worden gebruikt om het gegevenscomplex te verwerken.
Het is een ander project dan Android, dus het bevat veel functionaliteiten uit de native versie.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