Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Die Beispielanwendung mit der Datenbank verbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Cordova-SQLite-Plug-in ermöglicht es, sowohl Datenbanken als auch Tabellen nur bei Bedarf anzulegen.
08:36

Transkript

Nachdem meine Anwendung sich erfolgreich zu SQLite verbinden kann, wie dieser Code hier zeigt, möchte ich die SQLite-Datenbank nun gerne in meinem Service benutzen. Hier wird ja bisher einfach nur ein Array im Speicher gehalten. Und stattdessen möchte ich hier ganz gerne auf eine Datenbank zugreifen. Dazu lösche ich zunächst einmal diesen Dummy-Code hier, mit dem ich nur geprüft habe, ob die Verbindung in Ordnung ist. Als nächstes gehe ich hin und würde ganz gerne innerhalb meines SavedItemsService Zugriff auf die SQLite-Datenbank erhalten. Typischerweise nutzt man jetzt in einer Angular-Anwendung Dependency-Injection, um eine Datenbankverbindung oder Ähnliches in den Konstruktor zu injizieren. Das Plug-In, das ich installiert habe, zum Zugriff auf SQLite, ist nicht speziell auf die Zusammenarbeit mit Angular oder Ionic vorbereitet. Dafür gibt es allerdings ein kleines Paket. Und dieses Paket heißt "ngCordova". Ich kann dies installieren, indem ich hier im Bereich "Abhängigkeiten" unter "Bower" "Bower-Pakete verwalten" wähle. Unter "Durchsuchen" gebe ich nun "ngcordova" ein und installiere das entsprechende Paket. Was jetzt installiert wird, ist ein Wrapper, und mit diesem Wrapper kann ich dann später direkt per Dependency-Injection auf die Datenbank zugreifen. Dazu muss ich in meiner App angeben, dass mein Modul eine Abhängigkeit auf das ngCordova-Modul hat. Außerdem muss ich die entsprechende Code-Datei laden. Und diese Code-Datei, die befindet sich im Ordner www/lib/ngCordova. Und zwar ist das hier im Ordner "dist" die ng-cordova.js. Also gehe ich zurück in die index.html. Und hier werde ich direkt unter dem Ionic-Skript dieses neue Skript laden. Also: "script src" ist gleich "lib" und dann "ngCordova", und innerhalb von "ngCordova" "dist", und jetzt hier die ng-cordova.js-Datei. Anschließend kann ich jetzt in meinen SavedItemsService dieses Objekt injizieren, indem ich hier sage, dass ich im Konstruktor den Dienst "cordovaSQLite" erwarte. Was ein wenig schade ist, ist, dass es leider keine IntelliSense für diesen Dienst gibt. Es gibt nämlich keine TypeScript-Definitionsdatei. Bedeutet: Man muss die API hier ein wenig kennen. Innerhalb meines Konstruktors werde ich jetzt auf die Datenbank zugreifen. Und das geschieht wie folgt. Ich lege mir erstmal ein Feld "db" an, vom Typ "any", und sage anschließend: "db" ist gleich "$cordovaSQLite.openDB". Und dann gebe ich noch den Namen meiner Datenbank an. Und dieses Angeben des Namens, das erfolgt über ein Parameter-Objekt. Und zwar gibt es hier die Eigenschaft "name". Und die setze ich auf "savedItems.db". Was jetzt passiert, ist Folgendes. Dieser Aufruf sorgt dafür, dass die Datenbank, falls es sie gibt, geöffnet wird, und falls es noch nicht gibt, dann wird sie für mich erstellt. Im nächsten Schritt werde ich nun hingehen und die Tabellen erzeugen, falls es sie noch nicht gibt. Und dazu sage ich hier: "$cordovaSQLite.execute". Und an "execute" muss ich jetzt die Datenbank übergeben, und als nächstes einen String, nämlich meine Abfrage. Und dieser String, der lautet: "CREATE TABLE IF NOT EXISTS savedItems". Heißt also: Er soll die Tabelle "savedItems" anlegen, falls sie nicht schon besteht. Und ich breche hier einmal um. Dann kann man das etwas besser lesen. Und zwar mit folgenden Feldern: "id", und das ist ein integer, und das ist der primary key. Dann haben wir die description, und die ist vom Typ "text". Außerdem haben wir das Feld "price", und das ist vom Typ "numeric". Und wir haben das Feld "date", und das ist vom Typ "date". So, mit diesem Code hier lege ich also die entsprechende Datenbanktabelle an und kann dann später auf diese Tabelle zugreifen. Bedeutet also: Wenn wir SQLite in einem Service nutzen möchten, dann müssen wir zunächst das Modul "ngCordova" installieren. In meinem Fall habe ich das über "Bower" getan und habe anschließend eine Abhängigkeit in meiner App registriert und dafür gesorgt, dass das entsprechende Skript in der index.html geladen wird. In meinem Service kann ich jetzt einfach über den Konstruktor eine Abhängigkeit angeben, die dann zur Laufzeit injiziert wird. Etwas schade ist, wie gesagt, dass es hier kein IntelliSense gibt. Ich muss das also vom Typ "any" deklarieren. Dann kann ich als nächstes über die Methode "openDB" die Datenbank öffnen beziehungsweise erstellen, falls es sie noch nicht gibt. Und ich kann über "execute" SQL-Statements ausführen. Und eines dieser SQL-Statements kann zum Beispiel das "CREATE TABLE"- Statement sein. Und hier gibt es die Einschränkung "IF NOT EXISTS". Heißt also: Diese Tabelle hier wird nur angelegt, wenn es sie noch nicht gibt. Ehe wir diesen Quellcode jetzt so tatsächlich nutzen können, gibt es allerdings noch zwei Kleinigkeiten, die zu beachten sind. Zum einen darf ich nicht vergessen, hier oben neben dem name-Parameter auch die Location anzugeben, also im Endeffekt: Wo wird das Ganze gespeichert? Und da können wir im Regelfall "default" wählen. Zum anderen sieht es so aus, dass dieser Code hier im Zweifelsfall läuft, wenn das Plug-In, das SQLite-Plug-In, noch nicht initialisiert ist. Und das liegt daran, dass dieser Service eventuell zu früh initialisiert wird. Das hätte zur Folge, dass wir hier einen Fehler bekommen. Wenn wir überlegen, wann dieser Service initialisiert wird, dann geschieht das in dem Moment, wenn wir den Controller benutzen, den der Service nutzt. Und das ist dieser Controller hier. Und diesen Controller hier, den nutzen wir im Endeffekt dann, wenn wir dorthin navigieren. Und das geschieht in der app.ts, nämlich hier unten. Hier unten geben wir an, dass wir standardmäßig immer direkt zu unserem HomeView gehen. Und ich mache jetzt mal Folgendes. Ich kommentiere das hier aus und werde jetzt stattdessen die Navigation zum HomeScreen hier im ionicPlatform.ready anlegen. Von der Grundidee her schaut es wie folgt aus. Sobald dieser Code hier durchgelaufen ist, sind auf jeden Fall die Plug-Ins initialisiert. Heißt also: Ich kann hier oben in die Methode "run" noch den StateService hereingeben. Der hat dann den Namen "$state". Und SQLite brauchen wir hier oben übrigens nicht mehr. Stattdessen werde ich jetzt hier den ng.ui.IStateService importieren. Und hier unten sage ich nun: "$state.go ("home")". Das bedeutet: Sobald die ganze Initialisierung fertig ist, erst dann werden wir zum Home-Status gehen, und somit in den Home-Controller, und der wird auch erst dann dafür sorgen, dass der SavedItemsService initialisiert wird. Und erst dann läuft der Konstruktor. Und damit haben wir auch kein Problem damit, dass wir irgendwie auf SQLite zugreifen, ehe es initialisiert ist.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Steigen Sie in die App-Programmierung ein und kombinieren Sie die praktischen Tools.

2 Std. 45 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:14.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!