Intel XDK: Die ersten Schritte mit dem Intel XDK (Hands-on-Lab)

Einführung in die Cross-Plattform Entwicklung mit HTML5 und JavaScript

Das Intel XDK

Dieser Kurs steht am Ende von diesem Artikel auch als PDF-Datei zur Verfügung.

Einführung

Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK vertraut. Es wird Schritt für Schritt die erste eigene Hybrid-App entwickelt und getestet.

Voraussetzungen

Die folgenden Voraussetzungen sind notwendig für die nächsten Schritte:

Das Intel XDK kostenlos Downloaden unter http://xdk.intel.com und installieren.
Es wird Windows, Mac OS X oder Linux benötigt.
Grundkenntnisse in HTML und JavaScript.

Was ist das Intel XDK?

Das Intel XDK ist eine kostenlose Entwicklungsumgebung für die Entwicklung von Cross-Plattform-Apps mit HTML5 und JavaScript. Es beinhaltet einen HTML Code-Editor, App Designer, Emulatoren, JavaScript Debugger und Profiler. Die aus unterschiedlichen Open-Source Projekten zusammengeführt wurden. Zusätzlich steht eine JavaScript Bibliothek namens Intel App Framework zur Verfügung. Das Erstellen der Apps wird durch einen kostenfreien App Builder in der Cloud ermöglicht. Dieser wird ebenfalls von Intel bereitgestellt und basiert auf Apache Cordova.

Der erste Start

Beim ersten Start vom Intel XDK wird die Projektverwaltung angezeigt. Diese beinhaltet fünf unterschiedliche Projektvorlagen:

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 stehen als Vorlage zur Verfügung.
Import an Existing App	Ein Vorhandenes Projekt einbinden
Use App Starter	Für HTML-Anfänger
Start with App Designer	Leeres Projekt mit App Designer Unterstützung

Tabelle 1 – Die Projektvorlagen vom Intel XDK

Die Projektverwaltung erreicht man jederzeit durch einen Klick links oben neben dem 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.

Abbildung 1 – Die Projektverwaltung vom Intel XDK

Übung – Die erste eigene Hybrid-App

Für die Übung wählen wir die „Start with App Designer“-Vorlage aus und geben „HelloAllDevices“ als Projektnamen ein. Wir erzeugen das Projekt per Klick auf den blauen Create-Button.

Abbildung 2 – Ein neues Projekt mit „HelloAllDevices“ erzeugen

Es öffnet sich anschließend der App Designer mit einem Dialog. Dieses fragt welches JavaScript UI-Framework verwendet werden soll. In dieser Übung wird mit dem App Framework gearbeitet und wird mit einem Klick auf den Select-Button bestätigt.

Abbildung 3 – JavaScript UI-Framework auswählen

Der Develop-Tab

An erster Stelle befinden wir uns direkt beim Entwicklungsbereich unter dem Develop-Tab. Hier steht ein HTML-Code Editor und App Designer (HTML-Designer) zur Verfügung. Der HTML-Code Editor ist vom Adobes Open-Source Projekt Brackets. Der App Designer selbst unterstützt unterschiedliche JavaScript UI Frameworks und bietet eine ideales Tooling für Responsive Webdesign. Auf der linken Seite befinden sich die Projektdateien und daneben die Toolbox mit Steuerelemente.

Mit Drag-and-Drop wird jetzt ein Button-Steuerelement auf die Oberfläche platziert. Die passenden Eigenschaften vom Button befinden sich auf der rechten Bildschirmseite. Unter Label wird der Wert „Hello World“ geschrieben. Beim Icon wird ein Herz-Symbol ausgewählt und bei Id erfolgt „btnHelloWorld“. Bei den letzten beiden Eigenschaften muss auch noch die passende CheckBox aktiviert sein.

Abbildung 4 – Button platzieren auf der Oberfläche

Wird der Button betätigt soll nun ein JavaScript-Code ausgeführt werden. Dazu befindet sich unter den Button-Eigenschaften der Interactivity-Bereich. Mit einem Klick auf „not set“, öffnet sich ein Kontextmenü. In diesen wird nun „Custom Script…“ ausgewählt. Nun wird unter Action ein Custom Script angezeigt. Hier einfach wiederholt klicken und es erscheint darunter ein „Edit Script“-Button. Dieser wird nun angeklickt und es wird automatisch in den Code-Editor mit dem dazugehörigen JavaScript-Code gewechselt.

Abbildung 5 – Custom Script dem Button zuweisen

Abbildung 6 – Zum Custom Script wechseln

Wir befinden uns nun beim HTML Code-Editor. Jetzt ist nur eine Zeile JavaScript-Code nötig um eine Meldung auszugeben.

$("#btnHelloWorld").click(function(evt) {
alert("Hello World!");
});
Listing 1 – MessageBox mit Begrüßung in JavaScript

Der Emulate-Tab

An zweiter Stelle befindet sich der Emulate-Tab. Hinter diesen befindet sich die integrierte Open-Source Lösung Apache Ripple. Dieses stellt zahlreiche Emulatoren für Smartphones, Tablets, E-Book-Reader und Ultrabooks bereit. Für ein zusätzliches JavaScript-Debugging, werden die Google Chrome Developer Tools zur Verfügung gestellt.

Die soeben erzeugte App kann man nun innerhalb vom Intel XDK testen. Links oben stehen die zahlreichen Emulatoren zur Auswahl. In der Mitte vom Bildschirm wird die App im gewünschten Gerät ausgeführt. Ein einfacher Klick auf den Button genügt um die gewünschte MessageBox zu sehen.

Abbildung 7 – Die erste eigene Cross-Plattform App im Emulator testen

Im Menü befindet sich ein Käfersymbol. Dahinter verbirgt sich das JavaScript-Debugging Tool. Mit einem Klick öffnet sich ein zusätzliches Fenster. Innerhalb vom JavaScript-Debugger wird im Menü auf Source geklickt. Es erscheint die Datenstruktur von unserem Projekt. Die nötige JavaScript-Datei befindet sich unter JS -> /index_user_scripts.js. Wird diese selektiert, wird der Inhalt rechts eingeblendet. Mit einen Klick auf die Zeilennummer, die auf der linken Seite steht, wird ein Breakpoint festgelegt. Bei einem wiederholten Klick auf den „Hello World“-Button, bleibt der JavaScript-Debugger an der gewünschten Stelle stehen und gibt weitere Informationen zum aktuellen Zustand.

Abbildung 8 – JavaScript-Debugging mit den Google Chrome Developer Tools

Der Test-Tab

Die App kann auch direkt auf einem beliebigen Gerät getestet werden. Es muss lediglich auf dem gewünschten Zielgerät die Intel XDK App Preview-App vom jeweiligen Store installiert sein. Für die Verbindung gibt es zwei unterschiedliche Möglichkeiten. Die erste wäre hinter Mobile, womit die App über die Cloud bereitgestellt wird. Die zweite ist WiFi, das direkt über WLAN die App ausführt.

Abbildung 9 – Die App via Mobile bereitstellen

Abbildung 10 – Mit dem Intel XDK App Preview die App ausführen

Der Build-Tab

Hinter dem Build-Tab wird das Erstellen der App für die unterschiedlichen Plattformen ermöglicht. Wird die jeweilige Plattform ausgewählt, wird das aktuelle Projekt in die Cloud zum Intel XDK Build Service geladen. Das Erzeugen der App wird von Intel kostenfrei angeboten. Das veröffentlichen der App ist vom jeweiligen Plattform-Anbieter abhängig.

Der Intel-XDK Build Service unterstützt die am weitesten verbreiteten mobilen Plattformen, einschließlich Android, iOS, Windows 8, Amazon, Winkel und Tizen. Eine klassische Web-Anwendung (WebApp), Chrome-App und Facebook-App ist ebenfalls möglich.

Abbildung 11 – Der Build-Tab