Einmal für alle

Cross-Plattform-Entwicklung mit HTML5 und JavaScript
Kommentare

Dieser Artikel ist der erste Teil einer Serie zum Thema Cross-Plattform-Entwicklung. Hier lernen Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennen. Sie steigen mit den Grundlagen des Intel XDK ein und werden schon bald mit den wichtigsten Frameworks und Vorgehensweisen vertraut sein. Damit steigen Sie rasch auf zum versierten App-Entwickler und -Designer.

Wir haben ein großes Problem. Während meiner Ausbildung zum Fachinformatiker erhielt ich eine ziemlich uninteressante Aufgabe von meinem Ausbilder: Ich sollte mich schlau machen, wie viele unterschiedliche Betriebssysteme es eigentlich gibt – eine nicht besonders spannende Aufgabe. Die Unternehmen verwendeten damals alle Windows- und Linux-Systeme. Im mobilen Bereich war Symbian an der Spitze, gefolgt von Windows Mobile. Ich selbst war mit PHP, HTML und JavaScript aktiv. Dabei war mir jede Umgebung recht, in der mein Apache kostenfrei zur Verfügung stand. Doch nach stundenlanger Recherche stellte sich ein hochinteressantes Ergebnis heraus: Es gibt weltweit über 200 unterschiedliche Betriebssysteme! [1] Das Ergebnis erstaunte mich. Klar war jedoch immer noch, dass die Entwicklung im Unternehmensumfeld zu dieser Zeit ausschließlich in Visual Basic oder Java erfolgte. Gerätenahe Entwicklung fand dann via C/C++ statt. Im Web erlebten PHP und MySQL einen absoluten Hype. Aus diesem Grund war die Aufgabe meines Ausbilders für mich nicht weiter relevant.

Heute, gute zehn Jahre später, spricht man nicht mehr davon, dass das Web Zukunft ist, sondern es hat sich weltweit zu einer der wichtigsten Technologien etabliert. Dennoch gibt es immer noch unterschiedliche Plattformen und eine deutlich größere Zahl an Betriebssystemen. Zusätzlich unterscheiden sich diese auch noch darin, ob und wie sie mobil werden – angefangen vom PC bis hin zum Ultrabook, Tablet oder Smartphone; ob Microsoft, Google, Apple oder Mozilla. Wir befinden uns in einem gigantischen Dschungel an Geräten und Herstellern. Mittlerweile ist es nicht mehr so einfach zu sagen, welche Plattform hier die zukunftssicherste ist. Was unsere weiteren Planungen angeht, haben wir also ein echtes Problem! Denn aus Architektursicht muss eine neue Anwendung mindestens für zehn Jahre dienen können.

Web versus App

Wenn wir den aktuellen Hype betrachten, ist das Web mit HTML5 und JavaScript unangefochten an der Spitze. Webtechnologien sind einfach zu erlernen, und es gibt eine enorm große Community. Das Wichtigste daran ist jedoch: Sie laufen auf jedem Gerät und jeder Plattform. Die Weiterentwicklung zu HTML5 bietet zudem zahlreiche neue Möglichkeiten. Das beginnt bei der Darstellung von 3-D-Inhalten sowie dem Abspielen von Multimedia und reicht bis hin zum Offlinemodus, mit dem Webanwendungen ohne Internetzugang weiterhin zur Verfügung stehen. JavaScript hat ebenfalls an Bedeutung gewonnen. Dank der Vorreiter AJAX und JQuery wurden interaktive Inhalte machbar. Man erkennt inzwischen kaum noch den Unterschied zwischen einer Web- und einer Desktopanwendung.

Dennoch werden viele Geräte und Plattformen anhand ihrer angebotenen Apps bewertet und gekauft. Vielen Tablet- oder Smartphonekäufern ist das zugrunde liegende Betriebssystem gleichgültig, entschieden wird anhand der angebotenen Apps. Doch wieso sind Apps immer noch so wichtig, wenn uns das Web doch bereits so viel bieten kann? Diese Frage lässt sich ganz einfach beantworten: Egal ob es eine Taschenlampen-App ist, die das Blitzlicht dauerhaft aktiviert, oder ein Messenger, der wie eine SMS den Anwender interaktiv über neue Nachrichten informiert – die feste Integration mit dem System und der Hardware ist maßgeblich für den Erfolg. Der Anwender erwartet von einer App, dass sie den zur gewünschten Aufgabe passenden Inhalt bietet und direkt  mit anderen Apps interagieren kann. Das ist im klassischen Web nur schwer möglich. Die Aufmerksamkeit kann höchstens durch Blinken im Browsertitel oder beim Versenden einer E-Mail gewonnen werden. Auf die Hardware kann man nur schwer bis gar nicht zugreifen. Das ist leider die traurige Realität im klassischen Web.

Die Lösung

Wenn es um die App-Entwicklung geht, hat jede Plattform ihre eigene Programmiersprache und Abhängigkeit zum System. So benötigt ein Apple-Entwickler erst einmal deren Produkte. Ohne Mac gibt es keine von Apple unterstützte Lösung zum Entwickeln für iOS. Dann muss eine veraltete Entwicklungssprache namens Objective-C erlernt werden. Bei Android wäre es zum Beispiel Java. Microsoft bietet hierbei deutlich mehr Möglichkeiten. Hier stehen C#, VB.NET, C++ oder HTML zur Verfügung. Allerdings entsteht hier auch eine große Abhängigkeit zur darunterliegenden Windows Runtime.

Für dieses Problem gibt es aber eine Lösung von Drittherstellern. So bietet Novell für .NET-Entwickler seinen Mono-Ableger „Mono for Android“ und „Mono-Touch“ für iOS an [2]. Durch die Visual-Studio-Integration kann mit C# sozusagen für gleich vier Plattformen entwickelt werden: Android, iOS, Windows 8 und Windows Phone. Leider stehen die Produkte aber nicht kostenlos zur Verfügung. Es gibt eine günstige Studentenversion, mit der allerdings nur die Verwendung ohne kommerziellen Hintergrund erlaubt ist. Sonst beginnt der Preis der Produkte bei 400 US-Dollar, und für andere Konfektionierungen ist man schnell bei Kosten von 1 000 US-Dollar und mehr.

Eine weitere Alternative ist PhoneGap [3], ein Open-Source-Framework für die Cross-Plattform-Entwicklung mobiler Anwendungen von Adobe Systems. Es ermöglicht die Entwicklung von Anwendungen für mobile Geräte mit HTML5, JavaScript und CSS3. Unterstützt werden iOS, Android, Blackberry OS, WebOS, Symbian, Bada und Windows Phone. Dabei entstehen hybride Apps, deren Layout im Gegensatz zu nativen Apps mittels Webtechnologien anstatt mit nativen User Interface Frameworks erstellt wird. Es sind aber auch keine webbasierten Apps, da sie über die Stores der Hersteller verteilt werden können und auf Programmierschnittstellen der Betriebssysteme der jeweiligen Endgeräte zugreifen.

Der PhoneGap Build Service ermöglicht das Hochladen von PhoneGap-Applikationen in Form von HTML, CSS und JavaScript in einen so genannten Cloud Compiler, der die Applikationen für alle unterstützten Plattformen generiert.

PhoneGap bringt allerdings auch einige Nachteile mit sich. Einer davon wären die zusätzlichen Kosten für das Erzeugen der App innerhalb der Cloud. Außerdem muss man für die jeweilige Plattform selbst einen Simulator einrichten. Das bedeutet, für das Testen einer Windows Phone App wird Visual Studio benötigt. Bei Android muss Eclipse her usw.

Das Intel XDK

Jetzt kommt die gute Nachricht: Intel erweitert mit dem kostenlosen Intel XDK die PhoneGap-Lösung. Es bietet das Erzeugen der App in der Cloud kostenlos an und stellt zu allen gängigen Plattformen einen Simulator bereit. Dazu kommen ein HTML Editor und ein Designer. Intel XDK ist sozusagen eine komplette Lösung zur Cross-Platrform-Entwicklung in einem Tool.

Intel bietet Hardware für jeden der bereits genannten Hersteller und möchte somit alle Plattformen gleichgestellt unterstützen. Meine Frage direkt an das Produktteam, ob das Intel XDK in Zukunft kostenpflichtig werden soll, wurde mir sofort mit „Nein“ beantwortet. Der Service ist und bleibt kostenlos. Wie ernst es dem Unternehmen ist, beweist die von Intel gegründete HTML5 Community [4].

Der Download und die Installation

Das Intel XDK läuft unter Windows, Mac OS X und Linux [5]. Die Setup-Datei unter Windows hat gerade einmal 74 MB. Bei der Installation handelt es sich um eine Click-One-Anwendung. Daher werden keine systemintensiven Komponenten installiert, wie zum Beispiel das Java oder .NET-Framework. Das Geheimnis liegt darin, dass das Intel XDK selbst in HTML und JavaScript mit NodeJS entwickelt wurde. Durch das kostenfreie Node-WebKit wurde daraus ganz einfach eine Desktopanwendung.

Der erste Start, die Projektverwaltung

Direkt beim ersten Starten wird die Projektverwaltung angezeigt. Manuell erreicht man diese immer durch den Klick ganz links oben neben dem ersten PROJECTS Tab. In dem Tab hat man auch direkt die Möglichkeit, durch eine ComboBox in bestehende Projekte zu wechseln oder ein neues Projekt anzulegen. Innerhalb der Projektverwaltung kann unten links ebenfalls ein neues Projekt erzeugt werden. Anschließend öffnet sich eine Auswahl von Projektvorlagen, wie in Abbildung 1 zu sehen.

Abb. 1: Die Projektverwaltung

Darunter ist Start with a Blank Project zu finden, das eine HTML-Datei mit einfachem Verweis zum Intel App Framework (JavaScript Libary) beinhaltet. Da in dieser Projektvorlage nur der HTML-Editor zur Verfügung steht, eignet sie sich ideal,  wenn ein externer HTML-Designer verwendet werden soll. Unter Work with a Demo liegen 14 fertige Demoanwendungen zur Inspiration. Die nächste Vorlage Import an Existing App ermöglicht das Hinzufügen eines vorhandenen Projekts, das zum Beispiel auf einem anderen Gerät erzeugt wurde. Interessant für HTML5-Anfänger dürfte die vierte Projektvorlage Use App Starter sein; sie enthält ein „Hello-World“-Beispiel. Die letzte Projektvorlage Start with App Designer beginnt, wie der Name schon sagt, beim Designer-Modus. Anschließend wird der Entwickler gefragt, welches JavaScript-API er für die mobile Entwicklung bevorzugt. Die Vorlage ist auch ideal, wenn der HTML-Designer des Intel XDK verwendet werden soll.

Für den ersten Start wählen wir die „Use-App-Starter“-Vorlage aus und geben HelloAllDevices als Projektnamen ein. Per Klick auf den blauen Create-Button lassen wir schließlich unser Projekt erzeugen.

Der „Develop“ Tab

Nach dem Anlegen des Projekts landen wir direkt im Developer-Bereich, der jederzeit über den DEVELOP Tab erreichbar bist. Hier stehen je nach Projektvorlage der HTML-Designer und der HTML-Editor zur Verfügung. Auf der linken Seite sieht man die Projektstruktur und Projektdateien. Mit einem Doppelklick auf die Index.html-Datei öffnet sich der Designer (Abb. 2).

Abb. 2: Der Designer

Nun sieht man die erste Startseite der App auf einem Smartphone abgebildet. Dem zugewiesenen JavaScript-Framework entsprechend steht auch eine Toolbox auf der linken Seite bereit. Die in ihr enthaltenen Steuerelemente können mit Drag-and-Drop in der App platziert werden. Bei Auswahl eines Steuerelements im Designer werden rechts seine Eigenschaften dargestellt, genau wie bei Visual Studio. In der Menüleiste finden wir außerdem ein Smartphonesymbol, mit dem man die Ansicht des Smartphones im Designer drehen kann.

Auf dem Startbildschirm wird bereits ein „Hello-World“-Button angezeigt, den wir nun mit einer Funktion bestücken möchten. Dafür benötigen wir zunächst eine ID für das Steuerelement. Wir klicken im Designer auf den entsprechenden Button und tragen rechts in den Eigenschaften unter ID btnHelloWorld ein. Anschließend speichern wir manuell mit dem Diskettensymbol und wechseln  mit einem Klick auf den Codebutton oben links zum HTML-Editor.

Abb. 3: Der Editor

Bei diesem Editor handelt es sich um eine Integration von Adobes Open-Source-HTML-Editor Brackets [6]. Sehr angenehm ist es, dass der Editor IntelliSense für JavaScript bietet. Zudem besitzt er zahlreiche weitere interessante Features [7].

Jetzt sind nur wenige Zeilen JavaScript-Code nötig, der innerhalb der onDeviceReady-Funktion geschrieben wird, und zwar direkt nach der 17. Zeile. Der nachfolgende Code zeigt, wie man auf den Button zugreift, um eine Meldung auszugeben.

$("#btnHelloWorld").click(function(){
  alert("Hello all devices! I´m a cross-platform developer!");
});

Der Emulate Tab

Die ersten Zeilen Code wurden geschrieben und können nun direkt im Intel XDK getestet werden. Unter dem EMULATE Tab sind zahlreiche Emulatoren zu finden. Wichtig ist zu erwähnen, dass es sich hierbei um eine Integration des webbasierten Simulators für mobile Plattformen namens Apache Ripple handelt [8]. Deshalb werden hierbei keine wirklichen Betriebssysteme in einer virtuellen Umgebung gestartet, 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 dementsprechend agieren – und zwar bis hin zum CSS-Layout.

Abb. 4: Der Emulator

Die unterschiedlichen DEVICES können links oben an erster Stelle gewählt werden, beginnend mit Apples iPad und iPhone, dem Google Nexus, HTC Droid, Samsung Galaxy S, Samsung Galaxy Tab, Surface, Nokia Lumia und mehr (Abb. 4, Punkt 1). Wählt man ein Gerät aus, wird entsprechend seiner Design-Guidelines die App angezeigt. Die Informationen zum Gerät und seinen Guidelines findet man direkt darunter unter INFORMATION (Abb. 4, Punkt 2). Die von uns gewählte Projektvorlage baut auf Androids Layoutstruktur auf, kann aber auch individuell angepasst werden.

Als nächster Unterpunkt folgt ACCELEROMETER, eine Simulation des Beschleunigungssensors. Hier kann mit dem Mauszeiger das abgebildete Device bewegt und die Bewegungswerte können direkt an den Simulator gesendet werden (Abb. 4, Punkt 3). Durch einen Klick auf das kleine Smartphonesymbol daneben wird ein Schütteln des Geräts simuliert.

In der linken unteren Ecke finden wir dann die Standarddienste der gängigen Plattformen, etwa Push Notifications oder einkommende Systemupdates.

Auf der rechten Seite unter Punkt 4 befinden sich an erster Stelle die Geräte- und Netzwerkeinstellungen. Was das Gerät angeht, können wir den Splashscreen und die Statusleiste anzeigen oder ausblenden lassen. Unter den Netzwerkeinstellungen haben wir die Möglichkeit, die Verbindung zu unterbrechen. Punkt 5 zeigt Optionen zur Geolocation. Wählt man eine Stelle auf der Karte aus, wird empfängt der Emulator ein eingehendes GPS-Signal. Auch Unterbrechungen bis hin zum Finden einer festen Navigationsroute können so simuliert werden. Unter Punkt 6 ist schließlich der Cloud-Dienst Pushmobi Service zu finden.

Das JavaScript-Debugging ist über das Käfersymbol im Menü aufzurufen. Dahinter stecken die Google Chrome Developer Tools [9].

Abb. 5: Debuggen mit den Google Chrome Developer Tools

Der Test Tab

Der Emulator ist schön und gut, doch geht nichts über ein direktes Ausführen der App auf dem eigenen Device. Genau diese Möglichkeit verbirgt sich hinter dem TEST Tab. Die direkte Ausführung kann über zwei Wege erfolgen: Entweder über den MOBILE-Button und einen Intel Server oder direkt über das eigene WLAN unter dem Punkt WIFI. Für beides wird auf dem Zielgerät eine App benötigt – dazu einfach im eigenen Store nach „Intel XDK App Preview“ oder „App Lab“ suchen und die Apps installieren. Sie stehen aktuell für den Apple App Store, Google Play Store und Windows Phone Store zur Verfügung. Weitere Plattformen sollen noch dieses Jahr folgen. Ein kostenloser Account bei Intel wird ebenfalls benötigt.

Abb. 6: Auf dem eigenen Device starten

Die erzeugte Beispiel-App wurde zum Test auf einem Nokia Lumia 1020 mit Windows Phone 8 gestartet. Zusätzlich dazu auf einem Samsung Galaxy Tab 3 und einem Android-Smartphone des französischen Mobilfunkanbieters Orange.

Der Build Tab

Nachdem die eigene App fertig entwickelt und getestet wurde, kann Sie auch für unterschiedliche Plattformen in der Cloud kompiliert werden. Zum Erstellen der Apps gibt es auf dieser Seite zwei separate Menüs. Der erste Menüpunkt BUILD A MOBILE APP erzeugt unsere App als eine native App, was ideal für den Offlinebetrieb ist. Der Intel-XDK Build Service unterstützt die am weitesten verbreiteten mobilen Plattformen, einschließlich Android, iOS, Windows 8, Amazon, Winkel und Tizen. In den jeweiligen Stores muss man seine App dann allerdings selbst veröffentlichen, wobei vom Storebetreiber abhängige Kosten entstehen können.

Abb. 7: Der Build für unterschiedliche Plattformen

Der zweite Menüpunkt BUILD A WEB APP erzeugt eine Web-App, die über Webserver bereitgestellt wird. Mit dem Klick auf den BUILD-Button wird die Anwendung über das Intel XDK in die Cloud geladen.

Der Services Tab

Hier sind einige Cloud-Dienste von Drittanbietern aufgelistet, die man optional in Anspruch nehmen kann und die teilweise kostenpflichtig sind.

Abb. 8: Die Cloud-Services

Vor- und Nachteile von Cross-Device-Development

Vorteile:

  • Man muss seine App nur einmal programmieren und kann sie gleich für mehrere Plattformen kompilieren lassen
  • Bei einfachen Anwendungsfällen ist man schneller als in der nativen Umgebung
  • Man muss nur eine Programmiersprache erlernen
  • Es gibt mehrere große Open-Source-Communities

Nachteile:

  • PhoneGap ist nicht immer auf dem Laufenden, was plattformspezifische Neuerungen angeht
  • Die Performance ist von der Rendering Engine des OB abhängig, nicht von der allgemeinen App Runtime
  • Man macht sich stark von Webkit abhängig.

Es gibt also noch einige Hürden bei der Cross-Plattform-Entwicklung, wenn diese auch nicht unbedingt unbezwingbar sind. Jede Plattform hat ihre eigenen Design Guidelines und bietet eine eigene User Experience. Diesen Eigenheiten kann eine App durch Plug-ins gerecht werden.

Es ist möglich, dass eine auf diese Art entwickelte App performancetechnisch deutlich schlechter aufgestellt ist als eine native App. Sie muss schließlich zuerst in eine so genannte WebView geladen werden, die nichts anderes darstellt als eine WebKit Engine. In dieser WebView wird dann der JavaScript Code ausgeführt, umhüllt von einem Container, der das Ganze zu einer App zusammenkleistert. Die Gefahr könnte sein, dass die App zum Beispiel von Apple nicht akzeptiert wird, weil sie nicht schnell genug reagiert.

Für dieses Problem gibt es ebenfalls Plug-in-Lösungen, mit denen PhoneGap auch native Controls ansteuern kann. So bekommt man native Tabbars, Browser Web Views innerhalb der App und Overlays hin.

Fazit

Das Intel XDK ist eine attraktive Allroundlösung für die Cross-Plattform-Entwicklung. Es ist leichtgewichtig, schnell und flexibel einsetzbar. Die meisten genannten Nachteile lassen sich mit einigen Hilfsmitteln und Vorgehensweisen elegant meistern. Einige davon werden wir mit den nächsten Folgen dieser Serie kennen lernen. Allerdings werden einige Vorkenntnisse in HTML5 und JavaScript benötigt – ob das für Sie ein Hindernis darstellt, müssen Sie selbst abwägen. Weiterhin ist es fraglich, ob Sie auch wirklich für jede Plattform eine Lösung benötigen. Und auch die Performance spielt eine wichtige Rolle. Wenn Sie ein hochauflösendes 3-D-Spiel entwickeln möchten, kann es bei älteren Geräten und bestimmten Plattformen zu Problemen kommen. Andernfalls haben Sie jetzt eine Möglichkeit gefunden, mit einer Programmiersprache und einem Tool gleich mehrere Plattformen und Geräte zu erreichen.

In der nächsten Folge werden wir uns mit dem Intel-App-Framework des Intel XDK beschäftigen. Wenn Sie weitere Fragen haben, stehe ich gerne per E-Mail zur Verfügung. Jetzt wünsche ich Ihnen aber erst einmal viel Spaß mit dem Intel XDK.

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

Aufmacherbild: Desktop computer, internet tablet and mobile phone with programming code via Shutterstock / Urheberrecht: Anikei

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -