Einführung in die Cross-Plattform Entwicklung Das Intel XDK

Transkript

1 Einführung in die Cross-Plattform Entwicklung Das Intel XDK 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 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 Start with a Blank Project Work with a Demo Import an Existing App Use App Starter Start with App Designer Tabelle 1 Die Projektvorlagen vom Intel XDK Beschreibung Ein leeres Projekt mit Verweis auf das Intel App Framework ohne App Designer. 14 fertige Demoanwendungen stehen als Vorlage zur Verfügung. Ein Vorhandenes Projekt einbinden Für HTML-Anfänger Leeres Projekt mit App Designer Unterstützung 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. 1

2 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 2

3 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. 3

4 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 4

5 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. 5

6 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. 6

7 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. 7

8 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. 8

9 Abbildung 11 Der Build-Tab Der Service-Tab Hier sind einige Cloud-Dienste von Drittanbietern aufgelistet, die man optional in Anspruch nehmen kann und die teilweise kostenpflichtig sind. Abbildung 12 Die Cloud-Services 9