Inhaltsverzeichnis
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
Cordova-Plattform Android hinzufügenWir 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
Cordova-Plugin hinzufügen https://github.com/brodysoft/Cordova-SQLitePlugin.gitWir werden testen, ob die Standardanwendung funktioniert, dazu gehen wir zum Terminal und schreiben den folgenden Code
Cordova emulieren AndroidEs beginnt mit der Kompilierung der Anwendung und wenn alles funktioniert, sollten wir das emulierte Gerät wie unten gezeigt sehen.
VERGRÖSSERN
Dann modifizieren wir den Block Ich habe ein Formular zur Dateneingabe eingebunden
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.Kontaktinformationen
Gravieren
- Name
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 AndroidWir sollten den folgenden Bildschirm sehen:
VERGRÖSSERN
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; iWenn wir den gesamten Code haben, kompilieren wir die Anwendung vom Terminal aus mit dem folgenden Code
'+ results.rows.item (i) .name +' '+ results.rows.item (i) .email); } document.getElementById ('Liste').innerHTML = Liste; }
Cordova emulieren AndroidWenn 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