Ionic Native Camera + Storage im 6 Schritte Tutorial [deutsch]

Inhalt - Weg zu Ionic Modulen

Ionic Native ist die Verpackung mit TypeScript, die es ermöglicht auf native (Geräte interne) Funktionen wie Sensoren, Kamera, NFC, Mikrofon und vergleichbares Zugriff zu erhalten.

Wie die meisten Bestandteile von Angular sind die Ionic Native Module in einzelne Dateien separiert. Diese sind nicht in der Standard-npm-Packets von Ionic enthalten.

Da Ionic viele Ionic Module seit Startschuss mit Cordova anbietet, ist die Gesamtinstallation aller Pakete von Ionic Native nicht sinnvoll. Das kostet Speicherplatz.

Aus diesem Grund installiert der Entwickler die Module, die für sein / ihr Projekt relevant sind. Nach der Installation muss die app.modules.ts die Plugins in das Projekt importieren.

1. Öffne die Kommandozeile in Deinem Projekt
2. Überprüfe, ob Du eine Internetverbindung ohne Firewall-Blocking hast (Ist mir gefühlt 1000x passiert)
3. Falls Du am Entwickeln einer Ionic App bist und der LiveReload zum Debuggen aktiv ist, breche diesen Prozess kurzzeitig mit CTRL + C und „Y“ ab
4. Nun gebe in die Kommandozeile ein: ionic cordova plugin add cordova-plugin-inappbrowser
5. Sobald die Installation fertig ist, installiere das Ionic Native Plugin mit npm install --save @ionic-native/in-app-browser
6. Die module.ts braucht als „Inhaltsverzeichnis unserer App“ eine Verweis, dass ein neues Modul in Deinem Projekt aktiv ist
   1. Der Import am Anfang der Datei mit import { InAppBrowser } from '@ionic-native/in-app-browser'; ist notwendig
   2. Für das neue Plugin InAppBrowser dem provider Array hinzu
7. Außerdem müssen wir das gleiche Modul nochmal in der TypeScript Datei importieren, in der das Modul zum Einsatz kommt: import { InAppBrowser } from '@ionic-native/in-app-browser';
8. Der Konstruktor braucht auch Kenntnis von dem neuen Modul (neuer Parameter: private browser:InAppBrowser)
9. Füge den Code hinzu für den Browser in der gleichen TypeScript Datei hinzu (mehr unter Kaptiel Coding)
10. Start den LiveReload mit ionic serve
11. Teste, ob das Modul funktioniert. Eventuell musst Du die App auf eine Emulator oder einem echten Smartphone ausprobieren. Die etwas mühseliges Testen ist aber auch bei nativen Apps notwendig.

Der Terminalbefehl initialisiert das Projekt:

Ionic start browserkamera tabs

Folgende weiter nodes Befehle installieren  die Module in den Pojektordner:

... und die Module einfügen...

InAppBrowser – Kleiner Chrome in Deiner App

In den ersten Tab kommt der InAppBrowser.

Die home.ts benötigt am Anfang der Datei den Import für das Modul. Der Konstruktor muss den Verweis als Parameter beinhalten.

Der .create Aufruf des InAppBrowsers enthält die URL für die Homepage ab. Dieser Befehl kann zusätzlich noch eine target (Wo öffnet sich die Webseite?) und options (HTTPs Optionen) als Parameter aufnehmen.

Kamera – Import von Bildern in der App

Die Konstante cameraoptions hält die Einstellungen fest, mit der das Smartphone Kamera das Bild aufnehmen soll.

.getPicture ist die zentrale Funktion, die das Bild von der Kamera anfragt und diese in einem base64-Bild abspeichert.

Weitere Informationen findest Du neben den Ionic Docs auch in den Cordova Dokumentation.

Nativer Speicher – Besser, Schneller und dauerhaft

Der native Speicher kann der Code mit .setItem den nativen Speicher Deines Smartphones um eine Variable erweitern. Die .getItem-Funktion liest vom Speicher.