Kamera, Browser + Native Storage – Ionic Native

Ionic Native Steffen Lippke Ionic TutorialIonic 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"

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: Entwicklung einer Browserkamera

Herausforderung und Ziel
Herausforderung und Ziel

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.

Kamera und Native Storage an simplen Beispielen
Kamera und Native Storage an simplen Beispielen

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

Konzept und Lösungsansatz
Konzept und Lösungsansatz

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?

 

 

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

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

Theorie einfach erklärt
Grundlagen einfach erklärt

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.

 

  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.

4. Kapitel

Coden: TypeScript Code für 3 Module

Coding und Umsetzung
Coding zur Umsetzung

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 öffnet neuen Tab
InAppBrowser öffnet neuen Tab

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.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

.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.

Entwicklung von Ionic Native im Browser
Entwicklung von Ionic Native im Browser

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

Erweiterungen und Weiterführendes
Erweiterungen + mehr

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.

In App Browser von Ionic mit Optionen erweiterbar
In App Browser von Ionic mit Optionen erweiterbar

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

Ziel und Fazit
Ziel und Fazit

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.

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Sichere Dir den kompletten
Fundamental Ionic Course

Die kostenlosen Tutorials sind ein Ausschnitt
aus dem Fudamental Ionic Course by Steffen Lippke.

Schon 4832 erfolgreiche Absolventen

  • Code Downloads + umfangreiche Lösungen + Dateien für Grundlagen zum Coden
  • Visuelle Beschreibungen mit HD+ Screenshots und Hilfen
  • Steffen's Clean Code - Erweiterung - Verbesserungs - Tipps
 

100 h Kurslänge | 100 % Geld-Zurück-Garantie | Live-Support

 
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Loading...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.