Kamera, Browser + Native Storage – Ionic Native

Inhalt - Weg zur "Browserkamera"

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 Standardinstallation von Ionic enthalten.

Da es viele Ionic Native Module seit Startschuss der Frameworks gibt, ist die Gesamtinstallation aller Pakete von Ionic Native nicht sinnvoll. Das kostet Speicherplatz.

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

1. Öffne die Kommandozeile in Deinem Projekt
2. Überprüfe, ob Du eine Internetverbindung hast (Ist mir gefühlt 100 Mal passiert)
3. Falls Du gerade 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. Diemodule.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 es auch auf eine Emulator zum Laufen bekommen oder es auch einen 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 braucht am Anfang des Codes den Import für das Modul. Der Konstruktor muss auch 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 de App

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

.getPicture ist die zentrale Funktion, die den das Bild der Kamera anfragt und die Bilderdaten in eine base64 Bild abspeichert. Bei diesem Ionic Native handelt es sich um eine Cordova Erweiterung.

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

Nativer Speicher – Besser, Schneller und dauerhaft

Der native Speiche kann mit .setItem den nativen Speicher Deines Smartphones füllen. Der Gegensatz dazu ist die .getItem Funktion, die die Daten vom Speicher lesen kann.