Android-Anwendungen mit Apache Cordova und SQlite

Eine mit HTML 5, JavaScript, CSS 3 erstellte Website kann mit Apache Cordova auf verschiedenen Geräten ausgeführt werden. Wenn wir eine mobile Anwendung haben und Daten effizient und zuverlässig speichern, verwalten und abrufen möchten, bietet uns Apache Cordova ein Plugin für den Umgang mit SQLite-Datenbanken.
Android seinerseits bringt in seiner Architektur bereits alle notwendigen Tools zum Erstellen und Verwalten von SQLite-Datenbanken mit, damit wir Daten einfügen, ändern, konsultieren und löschen können. Diese Datenbank ist lokal, dh sie wird auf dem Gerät gespeichert, auf dem die Anwendung ausgeführt wird.
In einem anderen Tutorial haben wir bereits die Installation von Apache Cordova erklärt, in diesem werden wir eine Anwendung erstellen, um zu verstehen, wie eine Sqlite-Datenbank von Android aus funktioniert.
In diesem Fall verwenden wir das Linux-Terminal, aber Apache Cordova ist plattformübergreifend. Wir beginnen damit, das Projekt vom Terminal aus und im Root-Modus mit dem folgenden Code zu erstellen:

 cordova App erstellen com.demo.app App01

Nach der Erstellung fügen wir die Plattform hinzu, das Gerät, auf dem dies ausgeführt wird, ermöglicht die Konfiguration des Emulators. In diesem Fall handelt es sich um Android. Vom Terminal aus schreiben wir den folgenden Code:

 Cordova-Plattform Android hinzufügen

Wir nehmen an, dass wir im Android Adv Manager bereits ein Gerät konfiguriert haben, aber wir konfigurieren eines, das Api 19 aufwärts unterstützt, also Android 4.4.2

Jetzt werden wir das Plugin installieren, um mit Sqlite arbeiten zu können. Vom Terminal aus führen wir den folgenden Befehl aus, der das Plugin herunterlädt und installiert.

 Cordova-Plugin hinzufügen https://github.com/brodysoft/Cordova-SQLitePlugin.git

Wir werden testen, ob die Standardanwendung funktioniert, dazu gehen wir zum Terminal und schreiben den folgenden Code

 Cordova emulieren Android

Es beginnt mit der Kompilierung der Anwendung und wenn alles funktioniert, sollten wir das emulierte Gerät wie unten gezeigt sehen.

VERGRÖSSERN

Sobald wir überprüft haben, dass die Anwendung funktioniert, beginnen wir mit der Entwicklung unseres Beispiels, öffnen die Datei index.html und fügen die folgende Javascript-Bibliothek in die Kopfzeile ein

Dann modifizieren wir den Block Ich habe ein Formular zur Dateneingabe eingebunden

Kontaktinformationen

Name
Email

Gravieren

Die Liniedient dazu, die eingegebenen Daten anzuzeigen, die in der Datenbank gefunden wurden. Im css-Verzeichnis finden wir die Datei index.css, öffnen diese Datei, löschen ihren Inhalt und fügen den folgenden Stilcode hinzu, um dem Formular ein Design zu geben.

 html, body, h1, form, fieldset, ol, li {margin: 0; Polsterung: 0; } Körper {Hintergrund: #ffffff; Farbe: # 111111; Schriftfamilie: Georgia, "Times New Roman", Times, Serifen; Polsterung: 20px; } Formular # Kontakte {Hintergrund: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; Polsterung: 20px; Breite: 400px; Höhe: 150px; } Formular # Kontakte Feldgruppe {border: none; Rand-unten: 10px; } form # Kontakte Feldgruppe: last-of-type {margin-bottom: 0; } Formular # Kontaktlegende {color: # 384313; Schriftgröße: 16px; Schriftdicke: fett; Polsterung-unten: 10px; } form # contacts> fieldset> legend: before {content: "Step" counter (fieldsets) ":"; Gegeninkrement: Feldsätze; } Formular # Kontakte Fieldset Fieldset Legende {color: # 111111; Schriftgröße: 13px; Schriftstärke: normal; Polsterung-unten: 0; } form # Kontakte ol li {Hintergrund: # b9cf6a; Hintergrund: rgba (255,255,255, .3); Rahmenfarbe: # e3ebc3; Rahmenfarbe: rgba (255,255,255, .6); Bordüre-Stil: solide; Rahmenbreite: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; Zeilenhöhe: 30px; Listenstil: keine; Polsterung: 5px 10px; Rand-unten: 2px; } Formular # Kontakte ol ol li {Hintergrund: keine; Rand: keine; Schwimmer: links; } form # Kontakte Label {float: left; Schriftgröße: 13px; Breite: 110px; } form # kontakte fieldset fieldset label {hintergrund: keine no-repeat left 50%; Zeilenhöhe: 20px; Auffüllen: 0 0 0 30px; Breite: automatisch; } form # kontakte fieldset fieldset label: hover {cursor: pointer; } Formular # Kontakte Textbereich {Hintergrund: #ffffff; Rand: keine; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-Grenzradius: 3px; Schriftart: kursiv 13px Georgia, "Times New Roman", Times, Serifen; Umriss: keine; Polsterung: 5px; Breite: 200px; } Formular # Kontakte Eingabe: nicht ([Typ = Absenden]): Fokus, Formular # Kontakte Textbereich: Fokus {Hintergrund: #eaeaea; } Formular # Kontaktschaltfläche {Hintergrund: # 384313; Rand: keine; Schwimmer: links; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-Grenzradius: 20px; Randradius: 20px; Farbe: #ffffff; Bildschirmsperre; Schriftart: 14px Georgia, "Times New Roman", Times, Serifen; Buchstabenabstand: 1px; Rand: 7px 0 0 5px; Polsterung: 7px 20px; Textschatten: 0 1px 1px # 000000; Texttransformation: Großbuchstaben; } Formular # Kontaktschaltfläche: hover {Hintergrund: # 1e2506; Cursor: Zeiger; }

Nachdem wir die beiden Dateien aufgenommen haben, führen wir die Anwendung erneut aus:

 Cordova emulieren Android

Wir sollten den folgenden Bildschirm sehen:

VERGRÖSSERN

Nachdem das Design nun funktioniert, müssen wir den Javascript-Code erstellen, um die Datenbank zu verwalten. Dazu erstellen wir im js-Verzeichnis eine Datei mit dem Namen sqlitedb.js und verweisen darauf, indem wir den folgenden Code hinzufügen:

In die Datei sqlitedb.js schreiben wir den folgenden Code:

 // Wir setzen als Ereignis den Moment, in dem die Anwendung startet und die Kommunikation mit dem Gerät beginnt document.addEventListener ("deviceready", onDeviceReady, false); // variable Felder der Form var name, email; // Ich starte die Anwendung Ich erstelle die Datenbankfunktion onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaktion (CreateDB, errorDB); } Jede Transaktion auf der Datenbank erfolgt mit dem definierten Objekt db und wird mit der Methode Transaction ausgeführt Diese Methode gibt einen Parameter mit dem Ergebnis dieser Ausführung zurück, der per Konvention im Parameter tx gespeichert wird, jede Transaktion hat eine Funktion als Parameter Dies ist die Transaktion selbst, zum Beispiel Daten schreiben und eine Fehlerfunktion für den Fall, dass die Transaktion fehlschlägt. Wir fahren mit der CreateDB-Funktion und der errorDB-Funktion 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)'); } Funktion errorDB (tx, err) {alert ("SQL-Fehler:" + err); } // Funktion Daten in die Datenbank einfügen Funktion InsertSQL (tx) {name = document.getElementById ('name').value; email = document.getElementById ('email').Wert; tx.executeSql ('INSERT INTO Kontakte (Name, E-Mail) WERTE ("' + Name + '", "' + E-Mail + '")'); Warnung ('Protokoll hinzugefügt'); } // Funktion, die die Transaktion zum Hinzufügen von Daten generiert Function record () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaktion (InsertSQL, errorDB); // Daten aus Tabelle db.transaction anzeigen (ConsultDB, errorDB); } // Wir konsultieren alle Datensätze der Kontakttabelle und das Ergebnis wird in einer Funktion verwendet ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // Die ListDB-Funktion empfängt den Transaktionsparameter und das Recordset mit dem Inhalt der Abfrage, wir gehen das Recordset durch und extrahieren jedes Feld, wir generieren eine HTML-Liste und zeigen sie dann in einem div mit einem Listenbezeichner durch innerHtml so dynamisch. Funktion ListDB (tx, Ergebnisse) {var len = results.rows.length; var-Auflistung = ''; Listing = Listing.concat ("Listing:" + len + "Kontakte"); für (var i = 0; i
'+ results.rows.item (i) .name +' '+ results.rows.item (i) .email); } document.getElementById ('Liste').innerHTML = Liste; }

Wenn wir den gesamten Code haben, kompilieren wir die Anwendung vom Terminal aus mit dem folgenden Code

 Cordova emulieren Android

Wenn der Emulator mit der Anwendung bereitgestellt wird, beginnen wir, unserer Agenda Datensätze hinzuzufügen und diese werden unten aufgelistet. Das Gerät speichert die Daten, die wir eingeben, dauerhaft in einem virtuellen Speicher, d Wenn wir die Anwendung im Emulator oder auf einem echten Gerät ausführen, können wir die Daten sehen, die wir registriert haben.

VERGRÖSSERN

Um diese Daten zu entfernen, müssen wir eine SQL-Abfrage durchführen, um die Tabelle zu entfernen und neu zu erstellen oder nur die Daten zu löschen. Wir werden dies in einem anderen Tutorial sehen.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