Die Defintion einer hybriden App

Veröffentlicht von Bastian - 14. April 2016

Bisher haben wir uns in dieser Reihe mit den Grundlagen der Webentwicklung und auch mit den Grundlagen der einzelnen Betriebssystem und Programmiersprachen befasst. Nun wollen wir den Sprung zur eigentlichen Entwicklung einer App schaffen. Dennoch muss zunächst einmal geklärt werden was wir eigentlich entwickeln wollen. Wir haben uns bereits entschlossen eine hybride App zu erstellen.

hybride_apps-1

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 JavaScriptWebframework 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-SourceFramework 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

Das könnte Dich auch interessieren

Speedforce – Pt. II: Performance Analyse

Was bisher geschah: In der letzten Folge haben wir einen Überblick bekommen, was hinter dem Begriff "Performance" eigentlich steckt. Nun wollen wir uns angucke...

Mitarbeiterzufriedenheit – die wichtige Erfolgsdeterminante für Unternehmen

Wie wichtig ist die Zufriedenheit der Mitarbeiter in einem Unternehmen? Wie kann man etwas wie Zufriedenheit messen? Und vor allem, wie kann ich die Zufriedenhe...

Entspannter in den Urlaub mit den digitalen Urlaubszettel

Urlaub ist schön und entspannt– der Urlaubsantrag leider nicht.