Apache Cordova und Android - SQL mit Javascript: Web-SQL-Datenbank

Wir werden uns nur auf Android konzentrieren und wie man Daten mit speichert Web-SQL-Datenbank und JQuery Mobile.
In einem früheren Tutorial haben wir gesehen, wie man mit Apache Cordova, Jquery Mobile, HTML5 und CSS eine einfache Anwendung entwickelt, die es uns ermöglicht, Datensätze zu einer Sqlite-Datenbank hinzuzufügen. In diesem Fall werden wir sehen, was jede Funktion im Code macht.

 Opendatabase()-Funktion

Die Funktion opendatabase wird verwendet, um eine Datenbank zu erstellen oder sie zu öffnen, wenn sie bereits erstellt wurde. Wir benötigen vier Parameter, Name der Datenbank, Version, Name der Datenbank, die angezeigt wird, und die Größe in Bytes. Wenn wir eine Datenbank erstellen und öffnen, wird sie in der Variablen gespeichert, die wir in diesem Fall db zuweisen.

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

Wir können die Funktion auch ausführen, wenn Sie die Anwendung auf dem Android-Gerät starten
Während die Anwendung startet, rufen wir die Funktion auf, die die Datenbank erstellt

 // Wir fügen ein Ereignis hinzu, wenn die Anwendung gestartet wurde document.addEventListener ("deviceready", DeviceHome, false); Funktion DeviceHome () {db = window.openDatabase ("Clients", "1.0", "Clients List", 1000000); } 

Möglicherweise müssen wir auch während des Starts der Anwendung einige Hausaufgaben machen.Im vorherigen Fall haben wir gesehen, wie eine Funktion aufgerufen wird, wenn die Anwendung bereits gestartet wurde.

 Funktion Starting () {document.addEventListener ("deviceready", ConfigureApp (), false); } Funktion ConfigureAPP () {document.addEventListener ("resume", OtraFuncion (), false); } 

Aus dem HTML mit dem onload-Ereignis, d. h. beim Laden der Seite, rufen wir die Starting-Funktion auf, während sie beim Start (deviceready) die ConfigureAPP-Funktion aufruft, die im Hintergrund ausgeführt wird (resume).
Einige Ereignisse, die wir auf Android verwenden können, sind:
gerätebereit: Dieses Ereignis tritt ein, wenn die Anwendung gestartet wurde.
Pause: Dieses Ereignis wird ausgelöst, wenn eine Anwendung im Hintergrund ausgeführt wird.
fasst zusammen: Dieses Ereignis tritt auf, wenn die Anwendung vom Hintergrund in den Vordergrund wechselt.
online und offline: Dieses Ereignis tritt auf, wenn die Anwendung eine Verbindung zu einem Netzwerk herstellt oder von diesem trennt.
Es gibt andere Ereignisse im Zusammenhang mit der Interaktion mit dem Telefon, aber wir werden diejenigen sehen, die eher mit der Kontrolle des Codes verbunden sind.

 Transaktion () Funktion 

Wenn wir eine Transaktion vom Typ SQL ausführen möchten, verwenden wir die Transaktionsmethode. Die Funktion besteht aus drei Parametern: einer Funktion mit der SQL-Abfrage, einer Funktion, die einen Fehler anzeigt, wenn die Abfrage fehlschlägt, und einer Funktion, die anzeigt, ob die Abfrage erfolgreich war.
Die Abfragefunktion wird über die Methode ExecuteSQL ausgeführt. Wir werden drei Funktionen erstellen, die beim Starten der Anwendung in einer Kette ausgeführt werden. Dies sind:
konsultierenDB: mit SQL-Abfrage
FehlerCDB(): zeigt an, ob ein Fehler in der SQL-Abfrage vorliegt
Erfolgs-CDB (): zeigt eine Meldung an, wenn die Abfrage erfolgreich war.

 script charset = "utf-8"> // Beim Starten der Anwendung führen wir einige SQL-Abfragen aus document.addEventListener ("deviceready", IniciaSQL, false); Funktion StartSQL () {var db = window.openDatabase ("Kontakte", "1.0", "Kontaktliste", 400000); db.transaktion (consultDB, errorCB, successCB); } function queryDB (tx) {// Erstellen Sie die Kontakttabelle, wenn sie nicht erstellt wurde tx.executeSql ('TABELLE ERSTELLEN, WENN NICHT EXISTS Kontakte (ID, Name, E-Mail)'); // Daten in die Tabelle einfügen tx.executeSql ('INSERT INTO Contacts (id, name, email) VALUES (1, "José Cordova", ”[email protected]”)'); tx.executeSql ('INSERT INTO Contacts (ID, Name, E-Mail) WERTE (2, "Maria Alpei", "[email protected]") '); } // Funktion zum Abfangen des Fehlers in der Transaktion Funktion errorCDB (error) {alert ("Fehler in der SQL-Abfrage:" + error.code); } // Funktion zum Anzeigen einer Erfolgsmeldung function exitCDB () {alert ("Abfrage erfolgreich!"); } 

So fragen Sie Daten ab und zeigen sie mit einer SQL-Abfrage an, die einen Array- oder Matrixtyp zurückgibt SQLResultSetList

 Funktion queryDB (tx) {tx.executeSql ('SELECT * FROM Contacts', [], successCDB, errorCDB); } function db success (tx, results) {// wir erhalten die Anzahl der Zeilen var totalcontacts = results.rows.length; // wir zeigen die Anzahl der Kontakte console.log ("Total Contacts:" + totalcontacts); // Wir zeigen die Datensätze in einer Schleife, in der wir jedes Feld des Arrays für (var i = 0; i

Die Funktion SQLResultSetList verfügt über die rows-Eigenschaft, die die Datensätze für jede Zeile der abgefragten Tabelle enthält. Dieses Array wird mit der Funktion rows.item (i) und der Zeilennummer durchlaufen. Wir müssen auch angeben, welches Feld dieser Zeile wir anzeigen möchten. Beispiel results.rows.item (i) .name.Wir können dieses Feld auch in einigen HTML-Elementen anzeigen, z. B. in einem Textfeld, das auf seinen Bezeichner verweist.

 Funktion querySuccess (tx, results) {var len = results.rows.length; document.getElementById ("divshow"). innerHTML + = "
gehenName

"; für (var i = 0; i"+ results.rows.item (i) .n Name +""; } } 

Dann müssen wir im HTML-Code in diesem Fall das div mit der Kennung divmotrar haben, damit die Tabelle mit den Abfragedaten angezeigt wird.

Die Klammern in der executeSQL-Funktion werden verwendet, um Parameter zu senden. Diese Eigenschaft ist optional, da wir nicht immer Parameter an die SQL-Abfrage senden müssen Wenn wir Parameter an eine Abfrage senden möchten, um beispielsweise Daten aus der Datenbank zu aktualisieren:

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

Wir können auch auf Funktionen mit Ereignissen aus HTML zugreifen, wie zum Beispiel das Klicken auf eine Schaltfläche. Sehen wir uns ein Beispiel an, als ob wir die Standardindexdatei eines Apache Cordova-Projekts haben. Wir können den Code für die Datenbank und den HTML-Code mit der Schaltfläche Aufzeichnen hinzufügen. Wenn Sie auf die Schaltfläche Aufzeichnen klicken, wird eine Funktion ausgeführt, die Daten in die Datei einfügt Datenbank.

Gravieren

Vorteile der Entwicklung mit WEB SQL DatabaseEs ist nicht notwendig, dass der Programmierer oder Entwickler alle Plattformen kennt, da es auf jeder Plattform oder jedem Gerät läuft. Browser, Android, IOS usw., teilweise mit minimalen Änderungen. Das spart viel Zeit, da auch Grafikdesigner oder Webmaster arbeiten können, ohne unbedingt Programmierer zu sein, sogar das Wissen von Jquery, das auf die Webentwicklung angewendet wird, wird bei der Entwicklung von Apache Cordova-Anwendungen voll genutzt.
Nachteile der Entwicklung mit WEB SQL DatabaseDie Web-SQL-Datenbank verwendet das Sqlite-Plugin zur Verarbeitung von Informationen und für Datentransaktionen mit der nativen Plattform verwendet sie JSON, das verschiedene Funktionen und Parameter verwendet, um den Datenkomplex zu verarbeiten.
Es ist ein anderes Projekt als Android, daher enthält es viele Funktionen der nativen Version.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben