Nun muss jedoch auch definiert werden mit welchen Technologien die eigene hybride App umgesetzt werden soll. Hierfür stehen dem Entwickler zunächst mehrere Frameworks und Technologien zur Verfügung, je nachdem wie der Entwickler die Umsetzung vorsieht. Eines der ersten Frameworks für die Entwicklung hybrider Apps war Phonegap. Mithilfe dieses Projektes sollte es Entwicklern ermöglicht werden, einfache Webseiten aus HTML, CSS und JavaScript innerhalb eines nativen Rahmens zu verpacken und somit eine native App, welche anschließend über die entsprechenden Plattform-App-Stores vertrieben werden kann, zu erstellen. Das Projekt Phonegap wurde zunächst von der Firma Nitob entwickelt und 2011 von Adobe aufgekauft. PhoneGap baut auf Apache Cordova auf, welches von Adobe/Nitobi der Apache Software Foundation gespendet wurde. Cordova ist somit quasi der freizugängliche Bruder von Phonegap.

PhoneGap – Wikipedia

Bei unserer App wollen wir Cordova dazu nutzen unsere spätere App mit einem nativen Rahmen zu versehen, so dass die App auch auf unterschiedlichen Smartphones installiert werden kann. Cordova selbst bietet dabei bereits die Möglichkeit einige unterschiedliche Plattformen abzudecken. In unserem Fall wollen wir eine App für iOS und Android erstellen. Dies funktioniert über entsprechende Plattform Packages, welches dem Rahmen ein nativen Verhalten beibringen. Dieser Rahmen arbeitet dann als Brücke zwischen unsereren Inhalten und Funktionen (WebApp) und den nativen Funktionen des Gerätes. Innerhalb unserer App wollen wir mit Angular js und Ionic arbeiten. Angular ist ein Framework welches ermöglich ein MVC innerhalb einer Webseite zu realisieren. „AngularJS – oft einfach als Angular bezeichnet – ist ein clientseitiges JavaScript–Webframework zur Erstellung von Single-page-Webanwendungen nach einem Model-View-ViewModel-Muster. Die Softwareentwicklung und das Komponententesten können damit vereinfacht werden. Es wird als Open-Source–Framework vom US-amerikanischen Unternehmen Google Inc. entwickelt.“ Angular.js – Wikipedia Angular bietet die Möglichkeit mit entsprechenden Direktiven und einem Scope zu arbeiten. Dies bietet vor allem die Chance eine App klar strukturiert und Performanceorientiert aufzubauen. Dabei werden die einzelnen Bestandteile einer App strikt getrennt. Es gibt eine Startdabei (meist index.html) und die entsprechenden Template HTML Dateien. Diese enthalten allerdings keinen Inhalt sondern bieten lediglich ein Gerüst in welches Daten geladen werden können. Für das Laden der Inhalte wird ein entsprechendes Scope verwendet. Dieses kann für jede Seite einzeln oder in Form einer Datensammlung angelegt werden.

wcschool Beispiele zu Angular.js

Ionic dagegen ist ein Framework welches bereits ein breites Angebot an Styling Eigenschaften für Apps mitbringt. Ähnlich wie beispielsweise Twitter Bootstrap oder foundation. ionic selbst arbeitet dabei mit einer speziellen Syntax über welche direkt die Verbindung zwischen Inhalt, Styling und Funktionen / Angular.js geschlossen wird. Es unterscheidet dabei sogar zwischen einer jeweils angepassten Darstellung für unterschiedliche Plattformen wie Android und iOS. Ein Beispiel hierfür ist das beliebte Tabfolder, welches bei iOS am unteren Bildschirmrand und bei Android am oberen Bildschirmrand dargestellt wird. Durch entsprechende Klassen werden die bereits mitgelieferten Styling Möglichkeiten angesprochen.

Viele weitere Beispiele gibt es in der Ionic Dokumentation.

Codepen Beispiele Ionic

Youtube Beispiel für den Aufbau einer App mit Angular und Ionic. Wie man dies ähnlich wie in diesem Video beschrieben zusammenstellt und somit eine eigene App entwickelt wollen wir uns in den nächsten Teilen dieser Reihe gemeinsam anschauen und zusammen eine kleine App erstellen. hierfür empfiehlt es sich die entsprechendes Tools bereits auf dem eigenen PC zu installieren. NPM: http://blog.npmjs.org/post/85484771375/how-to-install-npm Cordova: https://cordova.apache.org/docs/en/4.0.0/guide/cli/ Angular: https://www.npmjs.com/package/angular Ionic: http://ionicframework.com/docs/guide/installation.html

Beispiel:

https://www.youtube.com/embed/tGDmUFBiUV0