Cross-Plattform-Entwicklung mit dem Intel XDK in HTML5 und JavaScript

Inhaltsverzeichnis

Angesichts des wachsenden Dschungels unterschiedlicher Plattformen wird es immer wichtiger, Code zu schreiben, der sich in allen Welten nutzen lässt. Das Intel XDK versammelt Entwicklerwerkzeuge, um diesem Ziel mit HTML5 und JavaScript näher zu kommen.

Nicht ohne Grund nimmt das Interesse an HTML5 und JavaScript nicht ab. Die Skriptsprache ist noch lange nicht so stark und effektiv wie etablierte Sprachen. Dennoch gewinnt sie in einem Punkt: Sie läuft auf allen gängigen Plattformen ohne zusätzliche Plug-ins. Zudem existieren heute zahlreiche JavaScript-Frameworks, die es erleichtern, komplexe Anwendungen mit der Sprache zu schreiben. Es wird also zunehmend einfacher für den Entwickler.

Brachengrößen wie Facebook und Twitter machen vor, wie sich Webseiten durch Responsive Webdesign so aufbauen lassen, dass sie schnell wie eine Web-App agieren. Durch diese Technik passt sich die Oberfläche einer Anwendung automatisch der Gerätegröße an, sodass sie wie für das Device entwickelt wirkt.

Solch eine Herangehensweise stellt eine elegante Lösung dar, um alle Plattformen abzudecken. Wieso sollte man also überhaupt noch in eine App investieren? Auch hierauf können die Konzerne eine Antwort geben. Eine native App ermöglicht es, die Systemschnittstellen zu nutzen. So lassen sich etwa Benutzer plattformübergreifend über neue Inhalte informieren – selbst wenn die App gerade nicht geöffnet ist. Dazu kommt die Integration der Kamera. Schnell berührt der Nutzer innerhalb der App den Foto-Button, schießt ein Bild und die Anwendung veröffentlicht es automatisch im sozialen Netz.

Ein Beispiel abseits der Netzwerke ist die berühmte Taschenlampen-App, die durch ein dauerhaftes Aktiveren des Blitzlichts im Dunkeln weiterhilft. Kurz gesagt, eine App verbindet Plattform und Hardware, als wenn sie aus einem Guss wären.

Native versus hybride App

Es gibt unterschiedliche Typen von Apps. Native Apps lassen sich direkt mit der Entwicklungssprache und Schnittstelle der jeweiligen Plattform programmieren. Unter Windows 8 und Windows Phone 8 wäre das etwa Visual Studio mit der Windows Runtime. Bei Android ist es Java und Eclipse mit dem Android SDK. Die wesentlichen Vorteile sind die starken Entwicklungssprachen, die typsicher sind und eine gute Performance bieten. Der Zugriff auf plattformspezifische Schnittstellen, etwa die Live Tiles aktueller Windows-Versionen, ist damit um einiges einfacher. Ein wesentlicher Nachteil ist allerdings, dass Entwickler für jede Plattform mit deren Entwicklungssprache und Schnittstellen vertraut sein müssen. Eine gemeinsame Codebasis lässt sich nicht nutzen, womit der Entwicklungsaufwand enorm steigt.

Eine Abhilfe unter .NET bietet das Tool Xamarin, das natives Entwickeln für Android und iOS mit C# ermöglicht. In der aktuellen Version ist es sogar möglich, für das Frontend eine gemeinsame Codebasis zu nutzen. Für plattformspezifischen Funktionen gibt es jedoch noch keine fertige Lösung. Darüber hinaus ist Xamarin nicht kostenfrei.

Der zweite Typ mobiler Anwendungen sind Hybrid-Apps. Sie benötigen nur einen Quelltext und laufen auf allen gängigen Geräten. Als Entwicklungssprachen dienen HTML5, CSS3 und JavaScript. Um das Projekt für alle Systeme nutzbar zu machen, kommt ein über die Cloud bereitgestellter Compiler zum Einsatz.

Er nimmt ein HTML5-Projekt entgegen und fügt es in vorgefertigte native Container der gängigen Plattformen ein. Das Grundgerüst solcher Apps besteht aus einer Webview (Webbrowser-Steuerelement), das dann zur Laufzeit den HTML-Inhalt rendert. Durch eine Schnittstelle der Webview lässt sich mit JavaScript auf die Hardware und plattformspezifische Funktionen zugreifen.

Das System hat ein paar Nachteile. Die hybriden Apps sind in Sachen Performance nicht so gut wie ihr natives Äquivalent. Außerdem ist der Zugriff auf plattformspezifische Funktionen nicht ohne zusätzliche Plug-ins möglich.

PhoneGap und Apache Cordova

Eines der bekanntesten Werkzeuge zum Bau hybrider Anwendungen ist Adobes PhoneGap, einer Distribution von Apache Cordova. Es stellt Entwicklern kostenfrei ein JavaScript-Framework zur Verfügung. Nach dem Herunterladen des entsprechenden SDK lässt sich ein beliebiger HTML-Editor verwenden. Für das Testen der App im Emulator ist das SDK der gewünschten Plattform nötig. Bei Android wäre es das Android SDK und bei Windows Phone zum Beispiel Visual Studio Express 2013 für Windows Phone. Anschließend müssen die Emulatoren durch zusätzliche Konfigurationen mit dem PhoneGap-Projekt verknüpft werden. Für das Erstellen der Apps stellt Adobe einen Cloud-Compiler bereit, der leider nicht kostenfrei ist. Um diese Komponente zu umgehen, wäre das manuelle Einrichten vom Apache Cordova eine Option, allerdings ist auch der Vorgang mit einigen Konfigurationen verbunden.

Intel setzt auf Apache Cordova und stellt mit dem Intel XDK eine passende Entwicklungsumgebung zur Verfügung. Das Kit ist eine Kombination aus unterschiedlichen Open-Source-Projekten, die sich zu einer einheitlichen IDE zusammensetzen. Dazu gibt es einen HTML-Editor, einen App Designer, Emulatoren, Profiler und Webservice-Support. Passend dazu wird auch ein JavaScript-App-Framework und ein kostenfreier Cloud Compiler geboten. Jedes Feature funktioniert unabhängig von den anderen, sodass man nicht daran gebunden ist. So kann ein Entwickler weiterhin seinen bevorzugten HTML-Editor nutzen oder selbst eingerichtete Emulatoren.

Das Intel XDK wurde komplett mit HTML und JavaScript entwickelt (Node.js) und läuft somit unter Windows, Mac OS und Linux-Derivaten.

App Designer

Die erste eigene Hybrid-App

Durch ein kleines Beispiel soll im Folgenden das Intel XDK und die Entwicklung damit veranschaulicht werden. Dessen Inhalt soll eine Kino-App sein, die aktuelle deutsche Kinofilme mit Cover und einer Filmbeschreibung zeigt.

Für das erste Starten des XDK wird ein kostenfreies Entwicklerkonto bei Intel benötigt, das später für das Testen und Ausführen auf eigenen Geräten zum Einsatz kommt. Nach dem Anmelden sieht man die Projektverwaltung, in der unterschiedliche Vorlagen zur Verfügung stehen. Sie sind folgender Tabelle genauer beschrieben.

Projektvorlage	Beschreibung
Start with a Blank Project	ein leeres Projekt mit Verweis auf das Intel App Framework ohne App Designer
Work with a Demo	14 fertige Demoanwendungen als Vorlage und zum Ausprobieren
Start with a Template	fertige Projekt-Templates mit App-Designer-Unterstützung und Verweis auf das Intel App Framework
Import an Existing App	vorhandenes Projekt einbinden
Use App Starter	dient nur zum Ausprobieren für HTML-Anfänger, eine Art Prototyp-Vorlage
Start with App Designer	leeres Projekt mit App-Designer-Unterstützung

Für das Beispiel wird "Start with App Designer" ausgewählt und der Projektname "KinoApp" eingegeben. Mit einem Klick auf den blauen Create-Button rechts unten lässt sich das Projekt im Anschluss erzeugen.

Der App Designer im Develop-Tab

Zu Beginn landet man direkt beim von Intel entwickelten App Designer im Develop-Tab. Er dient dem schnellen Bestücken der Nutzeroberfläche. Das Besondere ist der eingebaute Support für unterschiedliche JavaScript UI Frameworks, die Responsive Webdesign ermöglichen. Darunter zählt das Intel App Framework, Twitter Bootstrap 3, jQuery Mobile und Topcoat. Für die Beispielanwendung kommt das Intel App Framework zum Einsatz.

Der Aufbau ist dem bekannter Anwendungsdesigner sehr ähnlich. Auf der linken Seite ganz oben befinden sich alle Seiten, direkt darunter die Steuerelemente. In der Mitte vom Bildschirm ist die Oberfläche der App zu sehen. Auf der rechten Seite befinden sich die Eigenschaften des ausgewählten Steuerelements oder der aktuellen Seite. Rechts unten sind die allgemeinen Interaktionen zu finden, womit sich Steuerelemente mit JavaScript-Code oder anderen Seiten verbinden lassen.

Zuerst soll ein Header-Element zur Anzeige des Namens der App erstellt werden. Dazu ist auf der linken Seite unter "Controls" im Layout- Bereich das Header-Steuerelement auszuwählen und per Drag-and-drop zur App-Oberfläche hinzuzufügen. In den Eigenschaften kann man im Anschluss "Title" aktivieren und erhält den Wert "Meine KinoApp".

Nun soll die Anwendung die aktuellen Kinofilme mit einer Vorschau in einer Liste anzeigen. Wählt der Nutzer dann einen Film aus, erscheint auf einer neuen Seite der passende Informationstext.

Für die Liste platziert man auf der linken Seite das Listview-Steuerelement auf halber Höhe der App-Oberfläche. In ihm stehen automatisch drei Einträge. Die Listview benötigt mindestens einen Eintrag, weshalb nun zwei manuell zu entfernen sind. Durch einen Klick auf einen Eintrag lässt sich dieser auswählen, ein weiterer Rechtsklick öffnet das Kontextmenü. Wählt man dort "Delete" und bestätigt durch einen Klick, lässt sich der Eintrag entfernen.

REST und Dateneinbindung

Support für REST-Web-Service mit dem Services-Tab

Der erste Schritt auf dem Weg zur Anwendungsoberfläche ist getan, nun sind die Kinodaten abzufragen. Unter dem Services-Tab befinden sich einige bereits integrierte Webdienste, weitere lassen sich ergänzen, sofern sie mit REST im JSON-Datenformat arbeiten. Die Technik, die solche Integrationen ermöglicht, stellt das Open-Source-Projekt I/O Docs. Es generiert automatisch einen JavaScript-Proxy für die Datenkommunikation.

Für die Beispielanwendung soll der Webdienst "Rotten Tomatoes" zum Einsatz kommen. Er ist kostenfrei nutzbar, benötigt allerdings eine kostenlose Registrierung, nach der man den API Key der Rotten-Tomatoes-Webseite anfordern kann. Innerhalb des Intel XDK kann man im Anschluss "Rotten Tomatoes" -> "Movie Lists" -> "in_theatres" auswählen und dort den erhaltenen API Key eintragen.

Unter der Auswahl befinden sich die Parameter des Webdiensts in Textboxen. Bei "country" ändert man für eine auf Deutschland ausgerichtete Anwendung "us" in "de". Mit einem Klick auf den "Try it"-Button wird der Webdienst abgefragt und das JSON-Ergebnis unterhalb angezeigt.

Innerhalb des Ergebnisses steht nach jedem Eintrag eine Checkbox zur Auswahl. Damit lässt sich festlegen, welche Daten für die App relevant sind. Um die eingangs erwähnten Funktionen umsetzen zu können, sind "title", "theater", "synopsis" und "profile" auszuwählen. Anschließend klickt man ganz unten auf den Button "Create Data Binding". Ist dieser nicht gleich zu finden, ist rechts nach unten zu scrollen.

Daten im App Designer binden

Die Daten stehen nun innerhalb der App jederzeit via Data Binding zur Verfügung. Dazu ist wieder zum App Designer im Develop-Tab zu wechseln. Für das Erstellen der Datenbindung ist die aktuelle Seite zu verknüpfen. Links oben unter "Pages" klappt man dazu die aktuelle Seite auf und wählt "page mainpage". Auf der rechten Seite erscheinen dann die allgemeinen Eigenschaften der Seite. Unter "Service Method" lässt sich das eben erzeugte Binding "rottentomatoesin_theatres" auswählen. Im Anschluss erscheint die Abfrage, welches JavaScript-MVC-Framework zum Einsatz kommen soll. Zur Auswahl stehen Googles AngularJS und Backbone, wobei ersteres im Beispiel Verwendung findet. Bei der nächsten Eigenschaft Data Path ist "(base)" einzustellen.

Der Webdienst ist nun mit der aktuellen Seite verbunden. Nun müssen die Daten noch in der Listview erscheinen. Dafür ist keine Zeile Code nötig, sondern lediglich der Listeneintrag auf der App-Oberfläche auszuwählen. Bei den Eigenschaften findet sich die ausgewählte Service Methode. Unter der Eigenschaft "Data Array" ist nun ".movies[]" und bei Label "{{entry.title}}" einzutragen.

Testlauf im Emulator

Die ersten Schritte für die eigene Hybrid-App sind geschafft, und es lässt sich mit zahlreichen Emulatoren testen, wie die App zur Laufzeit funktioniert. Dazu ist zunächst in das Emulate-Tab zu wechseln. Die Emulationstechnik stellt das Open-Source-Projekt Apache Ripple. Es stellt zahlreiche Emulatoren für Smartphones, Tablets, E-Book-Reader und Ultrabooks bereit. Ripple startet keine wirklichen Betriebssysteme in einer virtuellen Umgebung, sondern lediglich die wichtigsten Eigenschaften und Verhaltensweisen der jeweiligen Plattform. Somit lässt sich gut testen, ob die JavaScript-APIs das Betriebssystem richtig erkennen und entsprechend agieren. Für ein zusätzliches JavaScript-Debugging stellt das XDK die Google Chrome Developer Tools zur Verfügung.

Zum Testen der entwickelten Anwendung, kann man links oben zwischen zahlreichen Emulatoren wählen. In der Mitte vom Bildschirm wird die App im Anschluss im gewünschten Gerät ausgeführt.

Zusätzliche Seiten

Eine weitere Seite erstellen

Die App funktioniert nun und erweckt auf den ersten Blick im Emulator einen angenehmen Eindruck. Nun sollen bei der Auswahl eines Films die passenden Informationen auf einer neuen Seite angezeigt werden. m das einzurichten, ist zurück zum App Designer wechseln. Links oben lässt sich unter Pages per Klick auf den "New Page"-Button die besagte Seite generieren. Es erscheint ein Dialog zur neuen Seite. Ihr Name soll "infoPage" lauten und die Option "Page" soll aktiv bleiben.

Nach dem Erzeugen ist wieder eine Definition der Webdienst-Methode nötig. Dazu ist die aktuelle Seite unter "Pages" aufzuklappen und "sub-page infoPagesub" auszuwählen. Bei der Eigenschaft Service Method steht nun neben dem Standard Binding ein weiter Punkt mit "listitem uib_w_3 selection" zur Verfügung. Damit gibt die Anwendung aktuell genau den Datensatz durch, der auf der vorherigen Seite auf der Listview ausgewählt wurde. Bei der Eigenschaft "Data Path" wird wieder "(base)" benötigt.

Jetzt kann man die Oberfläche wieder mit Steuerelementen bestücken. Das erste wäre ein Header- Steuerelement, wie zu Beginn dieses Artikel beschrieben. Im Titel des Data-Binding ist nun allerdings der Wert "{{entry.title}}" als Platzhalter für den Titel des gewählten Films einzugeben.

Um das aktuelle Coverbild zu sehen, platziert man links unter "Controls" das IMG-Steuerelement auf
der Anwendungsoberfläche. Auch hier ist ein Data-Binding nötig. Bei der Eigenschaft "Src" fügt
man "{{entry.posters.profile}}" ein, und bei Caption folgt "{{entry.release_dates.theater}} {{entry.synopsis}}" mit der Position "bottom".

Wie in jeder guten App soll auch die hier erstellte eine Navigationsmöglichkeit enthalten. Auf der "infoPage" fügt man daher einen neuen Button auf der Oberfläche ein. Als Labelbeschreibung tippt man "Zurück" ein. Das Festlegen der Interaktion erfolgt nun rechts unten im Bereich "Interactivity": Das "listitem" wird auf "page infoPage" und der "Zurück"-Button auf "page mainpage" gesetzt.

Testrunde, die zweite

Nachdem die erste Hybrid-App fertig ist, kann man sie einmal im Emulator ausprobieren. Auf dem Startbildschirm sind nun die aktuellen Kinofilme zu sehen. Bei Auswahl einer der Filme, wechselt die Ansicht auf die Infoseite, und die App zeigt weitere Filminformationen mit Coverbild an.

Ein Test im Emulator liefert immer schnell ein Ergebnis, dennoch wird dringend ein Test auf der eigenen Hardware empfohlen. Über das Test-Tab lässt sich die App direkt auf einem beliebigen Gerät überprüfen. Auf Letzterem muss lediglich die App "Intel XDK App Preview" vom jeweiligen Store installiert sein. Für die Verbindung gibt es zwei unterschiedliche Möglichkeiten: Die erste verbirgt sich hinter "Mobile", wobei die App über die Cloud bereitgestellt wird. Die zweite ist WiFi, wodurch sich die App direkt über WLAN ausführen lässt.

Fazit

Das Beispiel hat demonstriert, wie sich mit dem Intel XDK eine Hybrid-App entwickeln lässt. Bei der direkten Nutzung von Webdiensten ohne weitere Logik ist nicht einmal eine Zeile Code zu schreiben. Das ermöglicht ein Rapid Application Development für leichtgewichtige Apps.

Auch der Entwicklung anspruchsvoller Apps steht mit dem Intel XDK nichts im Weg. Mit den im Build-Tab aufgeführten Optionen lässt sich die fertige App über den Intel Cloud Compiler für die gängigen Plattformen kostenlos erzeugen. Das kostenlose Intel XDK soll die Cross-Plattform-Entwicklung erleichtern. Zum Einsatz
sind lediglich Vorkenntnisse in HTML5 und JavaScript nötig.

Gregor Biswanger
ist Gründer von CleverSocial.de und freier Consultant, Trainer, Autor und Speaker. Seine Schwerpunkte liegen im Bereich der Softwarearchitektur, agilen Prozessen, XAML, Cross-Plattform-Apps und Cloud-Lösungen. (jul)