Ionic ist mehr als ein paar HMTL-Komponenten.
Richtige Apps nutzen Kamera, NFC und Sensoren für eine großartiges Nutzungserlebnis.
Wie Du das auch mit Ionic einfach umsetzen kannst, zeige ich Dir in diesem Tutorial.
Bereit für die wöchentliche Dosis Code?
Inhalt - Weg zur "Browserkamera"
1. Kapitel
Herausforderung & Ziel: Entwicklung einer Browserkamera

Ionic ist mehr als ein Framework für mobile Webseiten.
Bisher haben wir nur Funktionen kennengelernt, die Fähigkeiten einer normaler Webseite entspricht.
Sobald die Ionic App auf die Kamera oder nativen Speicher zugreifen will, braucht das Framework den Zugriff auf das Gerät: Ionic Native
Unser Ziel: Hardware ansteuern
Die Browserkamera muss über Ionic Native auf die Kamerahardware und den Speicherzellen des Smartphones zu greifen. Als weiteres nützliches Ionic Native Beispiel erhält die App noch einen In-App-Browser.

Die Prozedur ist immer die Gleiche, aber die Anbindung der Module an den TypeScript Code unterscheidet sich.
Technische Grundlagen - Dein Vorwissen
- Ionic Grundlagen sicher
- Ionic Native ist ein fortgeschrittens Thema: Sehe Dich im Blog nach Grundlagen Ionic Tutorails um
Lerninhalte
Dieses Tutorial zeigt exemplarisch, wie Du Ionic Native zu einem Projekt hinzugefügt. Dabei gehe ich Schritt für Schritt die wiederkehrenden Aufgaben ein, die für die eine Standard Implementation der Plug-Ins notwendig ist.
2. Kapitel
Konzept: Alles über Ionic Native

Dieser Abschnitt soll Dir einen kompakten Überblick über Ionic Native geben.
Für was sind Ionic Native Module geeigent?
Wieso unterscheiden sie sich das Element von den restlichen Ionic Komponenten?
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.
3. Kapitel
Grundlagen: Installation eine Ionic Natives

In wenigen Schritten hast Du das gesuchte Plugins hinzugefügt.
Auf der Webseite von Ionic Native findest Du die Befehle zu einer Vielzahl von Modulen.
- Öffne die Kommandozeile in Deinem Projekt
- Überprüfe, ob Du eine Internetverbindung hast (Ist mir gefühlt 100 Mal passiert)
- 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
- Nun gebe in die Kommandozeile ein: ionic cordova plugin add cordova-plugin-inappbrowser
- Sobald die Installation fertig ist, installiere das Ionic Native Plugin mit npm install --save @ionic-native/in-app-browser
- Diemodule.ts braucht als „Inhaltsverzeichnis unserer App“ eine Verweis, dass ein neues Modul in Deinem Projekt aktiv ist
- Der Import am Anfang der Datei mit import { InAppBrowser } from '@ionic-native/in-app-browser'; ist notwendig
- Für das neue Plugin InAppBrowser dem provider Array hinzu
- 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';
- Der Konstruktor braucht auch Kenntnis von dem neuen Modul (neuer Parameter: private browser:InAppBrowser)
- Füge den Code hinzu für den Browser in der gleichen TypeScript Datei hinzu (mehr unter Kaptiel Coding)
- Start den LiveReload mit ionic serve
- 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.
4. Kapitel
Coden: TypeScript Code für 3 Module

Für die Nutzung der Ionic Native fehlt noch die Anbindung an den Code.
Diese unterscheiden sich je nach Modul und bieten eine Vielzahl von Funktionen, Einstellungen und Attribute, die adaptierbar sind
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.
5. Kapitel
Erweiterungen: Upload im In-App-Browser

Der nächste denkbare Schritt ist der Upload des fotografierten Bildes im Browser.
Für diese Funktion brauchen wir etwas HTML und PHP
Wenn das Bild im nativen Speicher abgelegt ist, dann können wir das Projekt nach unseren Vorstellungen erweitern. Für eine sichere Registrierung oder Flohmarkt App brauchen die Nutzer eine Möglichkeit Bilder hochzuladen.

Das geht am besten mit einem HTML Formular, welches einen Dateiupdload einbindet. Dann muss noch eine .php Datei das Bild entgegennehmen und die Daten auf einen Server speichern.
Eine MySQL Datenbank z. B. phpmyadmin kann der Request des Uplaods mit einem Verweis erweitern.
6. Kapitel
Fazit:Native in Hybrid

In diesem Tutorial hast Du gelernt, wie Du Ionic Native in Deine Projekt integrierst.
Nutze das Tutorial (speziell Kapitel Konzept), um Ionic Native hinzuzufügen.
Bitte, teile dieses Tutorial, dass andere auch davon profitieren können.