Hybrid-Apps stellen eine Kombination zwischen Nativen Apps und Web-Apps dar. Dabei bedienen Sie verschiedene Cross-Plattform wie iOS/Android/Windows & RIM gleichzeitig und müssen nicht für jede einzelne Plattform entwickelt werden. Außerdem können Hybrid-Apps, je nach Entwicklungsgrad, auf die Hardware des Smartphones bzw. Tablets zugreifen. Kamerafunktionen und beispielsweise der Kalender können in die eigene App integriert werden. Um eine Hybrid-App zu implementieren, nutzen wir das Ionic Framework.
Die hybride App ist eine Kombination aus einer nativen App und einer Web-App. Doch wie verheiratet man diese komplett verschiedenen Technologien? Zunächst wird eine ganz normale Web-App mit den gewohnten Web-Technologien erstellt. Dieser erste Schritt verrät eigentlich schon die Vorteile, die die hybride App aus der Web-App in sich aufnimmt: einen kurzen Entwicklungszeitraum sowie Plattform- und Geräteunabhängigkeit.
Nun folgt der interessante Schritt: das Aufrüsten der Web-App zur hybriden App. Hier greifen Frameworks wie PhoneGap. Die Frameworks legen eine Art nativen Wrapper (quasi einen Rahmen) um die Web-App und simulieren somit einen Webbrowser ohne Navigationsleiste. Dadurch wird einerseits der Upload in die verschiedenen App Stores ermöglicht und andererseits der Zugriff auf die Hardware der mobilen Endgeräte. Der Zugriff auf die Hardware erfolgt über JavaScript.
Zusammenfassend ermöglichen hybride Apps es also, auf die Hardware des mobilen Endgeräts zuzugreifen und die App über einen App Store zu vertreiben, während die Anwendung ausschließlich auf HTML5, CSS3 und JavaScript usw. basiert. Sie werden über einen Container zu einer hybriden mobilen Architektur verbunden. Solch einen Container stellt PhoneGap. Eine erstellte App ruft den plattformspezifischen Browser des Smartphones auf. PhoneGap unterdrückt den Rahmen und alle Bedienelemente, wie beispielsweise Menüs des Browsers. Somit hat der User eigentlich nur einen Browser, worin die mobilen Web-App läuft. Wichtig ist, dass die App-Source auf dem Gerät liegen und nicht, wie häufig angenommen, von einem Webserver geladen werden. Damit der Zugriff auf die Hardware des Smartphones (z.B.: Kamera) funktioniert, lädt PhoneGap eine Bibliothek, worüber eine Kommunikation zwischen JavaScript und dem betriebssystemspezifischen Sprache stattfinden kann. Der Browser sendet dabei die Funktionsaufrufe ab und überführt das Ganze in eine native Form und umgekehrt. In dieser Kombination können Hybrid-Apps alle Hardware Features nutzen, wie beispielsweise Kamera oder Kalender. Dadurch können Hybrid-Apps zu 100% mit der Funktionalität einer nativen App mithalten.
Ionic ist ein Open-Source-Framework zur Erstellung von Hybrid-Apps auf der Basis von HTML5, CSS, Sass und JavaScript. Dabei basiert es auf AngularJS und Apache Cordova. Es stellt eine Programmbibliothek aus verschiedenen Komponenten zur Verfügung, mit denen interaktive Apps programmiert werden können. Der Fokus des Frameworks liegt auf der Seite des Front-Ends, also der Benutzerschnittstelle.
Hinter dem Namen Ionic verbirgt sich nicht etwa noch ein weiteres Singel-Page-Application-Framework oder eine einfache Erweiterung von AngularJS. Das Team rund um Ionic hat mit ihrem Framework mehr einen Aufsatz für AngularJS geschaffen, um damit hybride mobile Apps zu bauen.
Der Vorteil ist die einfache Nutzung von Webtechnologien, wie HTML5, CSS3 und JavaScript anstatt Objective-C, Swift oder Java zu erlernen. Dadurch schafft man eine gemeinsame Code-Basis für alle Plattformen.
Den Zugriff auf native Schnittstellen oder Dienste und Komponenten des mobilen Gerätes erhält der Entwickler mit Apache Cordova. Beide Anbieter stellen ein CLI bereit, über das alle wichtigen Schritte ausgeführt werden können.
Cordova ist OpenSource und die Basis für PhoneGap. Adobe behält sich jedoch vor eigene Änderungen an PhoneGap vorzunehmen. Dadurch konnte der Dienst PhoneGap Build entstehen mit dem Anwendungen direkt in der Cloud gebaut werden. Besonders für iOS-Apps ist der Dienst eine große Hilfe, da diese auf einem Mac kompiliert werden müssen.
Ionic soll zukünftig ein Rundum-Paket liefern. Dazu zählen bereits eigene Services, wie Push-Nachrichten oder Analytics, aber auch eine eigene App-Verwaltung, um jederzeit die eigenen Apps ausprobieren und vorzuführen können.
Damit dies überhaupt möglich ist, stellt auch Ionic ein eigenes CLI, die Ionic CLI - bereit, welches wiederum auf Cordova basiert.
Die Ionic CLI enthält dabei alle wichtigen Funktionen der Cordova CLI und erweitert diese um weitere Befehle.
Es gibt im Prinzip zwei Möglichkeiten eine Ionic-App zu entwickeln.
config.xml. Im Vergleich zum CLI Projekt sind hier nur die Inhalte des www-Ordners und die config.xml relevant. Zusätzliche Ordner und Dateien eines CLI-Projekts sind hier überflüssig. Im Gegensatz dazu müssen die Bibliotheken AngularJS und Ionic manuell eingebunden werden
Copyright © 2017 Advantec Systems