Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 40

Hybride App-Entwicklung mit AppGyver: Apps für iOS und Android erstellen

Aktuelle Webtechnologien versetzen Entwickler in die Lage, Anwendungen mit einer einheitlichen Codebasis für mehrere mobile Betriebssysteme gleichzeitig zu produzieren. Für die Erstellung von Apps für iOS und Android verspricht die Plattform AppGyver ein Rundum-Sorglos-Paket, das auf HTML, CSS, JavaScript und Cordova basiert. Wir haben uns angesehen, ob damit der schnelle und effiziente Einstieg in die App-Entwicklung gelingen kann.

Derzeit gibt es drei unterschiedliche Arten von mobilen Applikationen. Mobile Web-Anwendungen (Web-Apps) werden mit Webtechnologien realisiert, sind meist responsiv und funktionieren nur im Browser, können also nicht in entsprechende Stores hochgeladen und darüber vertrieben werden.

Hybride und native Apps gleichen sich in ihrem physischen Format, werden aber mit völlig unterschiedlichen Technologien entwickelt. Für hybride Applikationen sind Webtechnologien (HTML5, CSS, JavaScript) im Einsatz, native Apps werden hingegen mit den plattformspezifischen Programmiersprachen realisiert, also Objective-C für iOS, Java für Android und .NET für Windows Phone. Beide Varianten lassen sich über die jeweiligen Stores vertreiben und ermöglichen den Zugriff auf Gerätekomponenten wie Kamera, Mikrofon, GPS etc. Der Vorteil von hybriden Apps gegenüber nativen Anwendungen liegt in der Möglichkeit, mit nur einer Codebasis für mehrere Betriebssysteme gleichzeitig zu entwickeln. Das spart Zeit und Geld, und die Einarbeitung in unterschiedliche Programmiersprachen entfällt. Allerdings fällt die Performance der hybriden hinter der von nativen Applikationen etwas zurück.

App-Entwicklung von A bis Z

Die Köpfe hinter der Plattform AppGyver mit Sitz in Helsinki wollen Entwickler in die Lage versetzen, schnell und zielgerichtet hybride Apps mit hoher Leistungsfähigkeit zu realisieren. Angesprochen werden vor allem Webentwickler, die ihr Portfolio mit der Erstellung von Apps erweitern wollen. AppGyver hält dafür ein Set an Werkzeugen sowie einen Cloudservice bereit. Letzterer übernimmt unter anderem das Erstellen der fertigen App, den so genannten Build. Diesen stellen die Finnen ebenso wie die im Folgenden vorgestellten Services Steroids, Supersonic und Composer kostenfrei zur Verfügung. Für die Nutzung von zusätzlichen Diensten und Add-Ons der Plattform fallen Gebühren an. Voraussetzung für die Verwendung ist die Registrierung als Nutzer.

AppGyver sticht aus der verfügbaren Masse an Frameworks und Services heraus, indem es nicht nur Lösungen für einzelne Probleme anbietet, sondern den kompletten Prozess der App-Entwicklung abbildet. Von Prototyping, Project-Scaffolding, Programmlogik und UI über die Anbindung an Datenquellen als Backend bis hin zum fertigen Build werden nahezu alle Prozessschritte bedient. Die Offenheit gegenüber anderen Frameworks ist bemerkenswert. Es ist beispielsweise möglich, ein Framework wie jQuery, AngularJS, Sencha Touch oder das AppGyver-eigene Supersonic in die App zu integrieren. Die Programmierung lässt sich wahlweise mit JavaScript oder CoffeeScript umsetzen.

Anders als andere Frameworks bietet AppGyver nicht nur Werkzeuge für ein einzelnes Problem, sondern hält für jeden Schritt der Entwicklung die passende Lösung bereit.
Anders als andere Frameworks bietet AppGyver nicht nur Werkzeuge für ein einzelnes Problem, sondern hält für jeden Schritt der Entwicklung die passende Lösung bereit.

Mit Steroiden entwickeln, testen, veröffentlichen

Kern des AppGyver-Toolsets ist das unter MIT-Lizenz veröffentlichte Steroids Command Line Interface, kurz Steroids CLI. Es ist für OS X ab Version 10.9, für Windows ab Version 8 sowie für Linux verfügbar. Eine sehr hilfreiche Anleitung führt Schritt für Schritt durch die Installation der Benutzeroberfläche. Die Nutzung setzt eine lokale Installation von git voraus. Zudem ist die Einrichtung von node.js inklusive des Paket-Managers notwendig, da Steroids darauf aufsetzt. Steroids CLI lässt sich im Anschluss mit dem Node Package Manager (npm) installieren.

Die Eingabe der folgenden Befehle ins Terminal startet die Ausführung von komplexen Abläufen.

Steroids CLI via Terminal bedienen

# Installation von Steroids
$ npm install steroids -g

# Starten des Development Servers
$ steroids connect

# Projekt-Compiling
$ steroids-make

# Deployment der App zur AppGyver-Cloud
$ steroids deploy --allowConfigCreation

Listing 1

Das Herz von Steroids ist der lokale Development-Server, welcher für verschiedene Aufgaben zuständig ist. Unter anderem übernimmt er das Scaffolding neuer Projekte, überwacht Dateiänderungen und führt nach Bearbeitung ein erneutes Laden der App durch. Zudem stößt er das Kompilieren des Projektes an, welches der JavaScript-Task-Runner Grunt im Hintergrund erledigt.

Der Start des Servers erfolgt über das Terminal. Anschließend öffnet sich im Standardbrowser der „Steroids Connect Screen“. Dieser gewährt direkten Zugriff auf die Bereiche „Connect“, „Logs“, „Documentation“, „Cloud“ und „Data“.

Der 'Steroids Connect Screen' ist das zentrale Tool für App-Management und Debugging. Der QR-Code lädt eine App herunter, mit der das Testen auf den Endgeräten möglich wird.
Der 'Steroids Connect Screen' ist das zentrale Tool für App-Management und Debugging. Der QR-Code lädt eine App herunter, mit der das Testen auf den Endgeräten möglich wird.

Die Preview-Seite wird initial geladen und stellt diverse, äußerst hilfreiche Möglichkeiten zur Verfügung, die App in Emulatoren und direkt auf Endgeräten zu testen. Da diese Funktionalität bereits nahtlos in den Arbeitsablauf integriert ist, wird ein plattformübergreifendes Testen stark vereinfacht. So lassen sich beispielsweise Fehlverhalten oder Probleme in der Benutzerfreundlichkeit in frühen Entwicklungsstadien ausmachen und beheben.

Tests per Emulator oder auf dem Endgerät

Sofern Emulatoren für iOS (Xcode) und Android (Android SDK, Genymotion) auf dem lokalen Entwicklungssystem installiert sind, werden diese von „Connect“ erkannt und können jeweils über ein Dropdown ausgewählt werden. Die Emulation von iOS ist nur auf Rechnern mit OS X verfügbar. Aber auch Entwickler, die unter Windows oder Linux arbeiten, können ihre mobilen Anwendungen auf Android und iOS testen. Diese Aufgabe übernimmt die AppGyver-Scanner-App, die im App Store oder bei Google Play zur Verfügung steht. Scannt man mit dieser den QR-Code der „Connect“-Seite, während man sich im selben WLAN befindet, verbindet sich das Mobilgerät mit dem lokalen Entwicklungsserver und lädt die App herunter, sodass ein direkter Test auf dem Endgerät möglich ist. Alle Änderungen am Code werden während der Entwicklung per LiveReload sofort auf allen verbundenen Geräten und Emulatoren sichtbar. Das ganze funktioniert erstaunlich schnell und reibungslos.

Der Menüpunkt „Logs“ öffnet eine übersichtliche und aussagekräftige Konsole für das Code-Debugging. „Documentation“ verweist auf eine umfangreiche Dokumentation inklusive API sowie das Entwicklerforum. Hinter „Cloud“ verbirgt sich die Option, eine App zur AppGyver Cloud zu deployen, um dort den „Build Service“ zu konfigurieren und auszuführen oder die App online mit anderen Entwicklern zu teilen. „Data“ bietet zudem die Möglichkeit, komfortabel ein Backend für die App anzulegen. Im „Data Browser“ kann man bequem ein Datenmodell in der AppGyver-Sandbox anlegen und nach Belieben anzeigen, editieren und löschen. Daraus lässt sich per Klick ein Gerüst für elementare Datenbankfunktionen (CRUD) generieren, welches dann im Projekt eingebunden werden kann. Es ist allerdings ebenso möglich, ein bevorzugtes „Backend as a Service“ (built.io, Parse, Kimono) oder ein eigenes REST-Backend anzubinden. Das Open-Source-CMS Drupal 8 beispielsweise stellt hierfür interessante Möglichkeiten bereit.

Um eine lauffähige App zu generieren, bietet AppGyver einen „Build Service“. Dieser läuft auf der eigenen Cloud-Plattform und erstellt mittels eines speziellen Cordova-Wrappers eigenständige Apps, ad-hoc-Distributionen für Beta-Testing sowie angepasste Scanner-Apps. Bei letzteren handelt es sich um benutzerdefinierte Apps, welche die Standard-Scanner-App durch benutzerdefinierte Cordova-Plugins erweitert. Der Wrapper ist flexibel und so auch mit PhoneGap, Ionic und Famo.us einsetzbar. Bemerkenswert ist die Möglichkeit, durch Integration von Crosswalk als WebView die Plattform-Fragmentierung von Android ab 4.x zu umgehen und somit bessere Performance und Debugging über die Chrome-DevTools zu ermöglichen. Weitere Informationen zum Wrapper befinden sich in den Docs.

Supersonic – Mehr als ein UI-Framework

Supersonic ist mehr als ein UI-Framework, welches speziell auf die Entwicklung hybrider Mobile Apps ausgerichtet ist. Neben einer Bibliothek von fertigen UI-Elementen bietet es die nahtlose Verbindung von HTML5-Technologien mit nativen Plattform-Komponenten. Es sorgt so jeweils für ein plattformspezifisches Look-and-Feel, welches von nativen Apps nicht zu unterscheiden ist.

Das unter der freien MIT-Lizenz veröffentlichte Framework Supersonic enthält die sogenannte Native Bridge, eine JavaScript-API, die für die asynchrone Kommunikation zwischen den HTML5-WebViews und dem nativen Code sorgt. Dies geschieht über Proxy-Objekte, genannt Promises, die das Callback-Handling für Funktionen erleichtern. Verschachtelte Callbacks werden schnell unübersichtlich und fehleranfällig. Mit Promises lassen sie sich leicht nachvollziehbar nacheinander ausführen.

Supersonic ist mit jedem beliebigen JavaScript-Framework kombinierbar, etwa auch mit AngularJS. Einige der nativen Komponenten werden in Supersonic mit Web Components umgesetzt. Web Components sind ein Set an APIs (Custom Elements, HTML Templates, Shadow DOM, HTML Imports), die das Erstellen eigener Komponenten ermöglichen. Deren Browserkompatibilität stellen Polyfills aus Googles Polymer-Framework sicher.

Die UI-Bibliothek ist ein Fork des Ionic-Frameworks und umfasst neben einer Vielzahl an Komponenten, die in HTML5 umgesetzt sind, aktuell drei native Elemente: Drawers (zum Beispiel für Off-Canvas-Navigation), Navigation Bar und Tab Bar. Alle lassen sich via CSS stylen. Ein Feature, das nicht in der Doku aufgeführt ist: Die Stylesheet-Datei kann auch in SASS/SCSS geschrieben und durch Grunt generiert werden. Da der Grunt-Task bereits angelegt ist, genügt es dafür, die Dateiendung von .css auf .scss zu ändern. Grunt kompiliert bei jeder Änderung den Code automatisch neu. Voraussetzung für die SASS-Nutzung ist das passende Ruby-Gem.

Styling mit CSS oder SASS/SCSS

# Standard: Pfad zur CSS der App
/app/common/stylesheets/application.css

# Anpassung für SASS/SCSS: Pfad zur SCSS der App
/app/common/stylesheets/application.scss

Listing 2

Die Supersonic Guides in der Dokumentation sorgen hier für den nötigen Überblick und informieren zudem über die Navigationsmöglichkeiten innerhalb einer App und die App-Architektur. Die Beispielanwendung Kitchensink eignet sich gut, um das Framework auf einem Endgerät zu erkunden.

Composer ermöglicht schnelles Prototyping im Browser. Neben der Erstellung von Seiten, dem prototypischen Anordnen und Stylen von UI-Elementen ist es sogar möglich, Anwendungslogik zu hinterlegen sowie auf Daten zuzugreifen.
Composer ermöglicht schnelles Prototyping im Browser. Neben der Erstellung von Seiten, dem prototypischen Anordnen und Stylen von UI-Elementen ist es sogar möglich, Anwendungslogik zu hinterlegen sowie auf Daten zuzugreifen.

App-Bootstrapping auf einen Blick – Logik inklusive

Mit Composer stellt AppGyver einen Drag-and-drop-Editor für das Bootstrapping von Apps im Browser zur Verfügung. Der Page-Editor-Modus erlaubt das Anlegen von Seiten für die App, die als Views fungieren. Möglich sind die Typen „Modal Window“ oder „Normal Page“. Für die Benutzeroberfläche stehen eine Reihe von Komponenten zur Auswahl, die sich nach dem Hinzufügen zur Ansicht per Klick mit eigenem Namen und Titel versehen sowie mittels Presets rudimentär stylen lassen. Die Struktur einer Seite wird als Liste abgebildet, in der auch einzelne Elemente ausgeblendet oder wieder entfernt werden können. Zudem ist es hier wie bei Steroids möglich, ein beliebiges Backend mit REST API als Datenquelle einzubinden oder direkt eine Datenbank samt Daten anzulegen. Dies muss allerdings zuvor im Backend-Modus erfolgen.

Ein besonderes Highlight von Composer ist der integrierte Logik-Editor. Dieser ermöglicht es, für jedes UI-Element Interaktionen zu definieren und sogar aus der Datenbank dynamisch bezogene Werte zu verarbeiten. So lässt sich bereits hier ein Teil der Programmlogik abbilden. In die Media Library kann der Entwickler Bilder hochladen, die dann im Prototyp verwendet werden können. Auf den ersten Blick scheint dieses Feature sehr begrenzt, aber für das Prototyping einer App ist die Medienverwaltung durchaus ausreichend.

Composer-Projekte lassen sich mit der AppGyver-Community teilen. Ein Prototyp kann so als Grundlage für eine Weiterentwicklung mit Steroids und Supersonic dienen. Eine erhebliche Einschränkung muss man allerdings in Kauf nehmen: Live-Testing des Prototyps per Scanner-App ist zum Entstehungszeitpunkt dieses Artikels nur für iOS möglich. Diese Tatsache reduziert die ansonsten überzeugende Gebrauchstauglichkeit des Werkzeugs stark. Laut AppGyver-Blog soll die Testmöglichkeit für Android aber nachfolgen.

Der Composer ist ein mächtiges Werkzeug zur Erstellung von App-Prototypen, dem man aufgrund seiner erstaunlich intuitiven Nutzbarkeit die zugrunde liegende Komplexität nicht anmerkt. Eine erste Musteranwendung lässt sich in kurzer Zeit realisieren.

Fazit: Umfassende Plattform für hybride App-Entwicklung

AppGyver stellt ein umfangreiches Set an Werkzeugen für die auf Webtechnologien basierende Entwicklung hybrider Apps zur Verfügung. Das Command-Line-Interface Steroid und das Framework Supersonic wirken durchdacht und ermöglichen eine rasche Einarbeitung. Das Prototyping per Drag-and-drop mit Composer beschleunigt den Entwicklungsprozess im Anfangsstadium eines Projektes. Dies sind Aspekte, die AppGyver von seinen Mitbewerbern am Markt positiv abheben. Kann man zusätzlich mit der aktuellen Beschränkung auf die Zielplattformen iOS und Android leben, ist ein näherer Blick auf die Plattform durchaus vielversprechend.

Steffen Paasch
Steffen Paasch

ist Frontend-Developer bei der Leipziger E-Commerce-Agentur Netresearch GmbH & Co.KG. Vorher studierte er Medientechnik und arbeitete mehrere Jahre als selbstständiger Webdesigner und -entwickler.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Jannik Weichert

In der Tat ein interessantes Framework, das webbasierte Hybrid-Apps vielleicht endlich wettbewerbsfähig macht.

Der Bestandsaufnahme hybrider Frameworks fehlt allerdings eine entscheidende Gruppe: die Crosscompiling Frameworks, wie etwa Xamarin. Hier wird in C# entwickelt und anschließend für die jeweilige Plattform compiliert. Mit Xamarin Forms werden Komponenten in das jeweilige Design der Plattform gebracht, z.B. Popups.

Hybrid sollte daher nochmal unterteilt werden in webbasierte und crosscompilierte Apps.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden