Einführung in die Cross-Plattform Entwicklung Zugriff auf Sensoren mit dem Intel XDK

Transkript

1 Einführung in die Cross-Plattform Entwicklung Zugriff auf Sensoren mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Zugriff auf Sensoren vertraut. Es wird Schritt für Schritt eine 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. Die Sensoren Ein besonderer Vorteil von einer App gegenüber einer Webseite ist der verbesserte Zugriff auf die Hardware. Die Kombination Software und Hardware bietet dem Benutzer ein besonderes Anwendungserlebnis und der Nutzen wird ebenfalls gesteigert. Ein bekanntes Beispiel wäre hierbei die Taschenlampen-App, die das Blitzlicht dauerhaft aktiviert und somit in der Nacht ein gutes Hilfsmittel geworden ist. Des Weiteren behelfen ebenfalls die Wasserwaagen- oder Kompass-App. Die Software verschmilzt mit der Plattform und wird für den Anwender zum Schweizer-Taschenmesser. Sensoren sind also ein wesentlicher Bestandteil, weshalb Smartphones und Tablets so erfolgreich geworden sind. Ein weiterer Erfolgs Faktor ist der Multi- Touch-Sensor, der gerade bei mobilen Spielen einen großen Mehrwert bietet. Es gibt beim Intel XDK zwei unterschiedliche Möglichkeiten auf die Sensoren zuzugreifen. Die erste wäre direkt mit der Apache Cordova API. Diese kann man allerdings dann nur per remote Debugging testen. Für das Testen innerhalb der Emulatoren, dient die zweite Möglichkeit mittels Intel XDK JavaScript Bridge API. Diese ist daher nur ein Vermittler zur darunterliegenden Cordova API, die eine Schnittstelle zu den Emulatoren bietet. Die Beschränkung liegt derzeit noch auf den Accelerometer-, Vibration- und Geolocation-Sensor. Die beiden APIs werden innerhalb vom Intel XDK angeboten. Es reicht in diesem Fall nur eine einfache JavaScript-Referenz zu intelxdk.js oder cordova.js. Beide bieten einen einheitlichen Zugriff. Für die Abfrage zum aktuellen Zustand eines Sensors beginnt diese immer mit einer JavaScript get-funktion. Soll der Sensor dauerhaft zu einem bestimmten Zeitabstand abgefragt werden, beginnt diese mit der watch-funktion. Weitere Informationen zur Apache Cordova API: Weitere Informationen zur Intel XDK JavaScript Bridge API: 1

2 Übung Die eigene Hybrid-App mit Zugriff auf Sensoren Für die Übung wählen wir die Start with App Designer -Vorlage aus und geben SensorAppBeispiel als Projektnamen ein. Wir erzeugen das Projekt per Klick auf den blauen Create-Button. Abbildung 1 Ein neues Projekt mit SensorAppBeispiel 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 2 JavaScript UI-Framework auswählen 2

3 Intel XDK JavaScript Bridge API und der Beschleunigungssensor Der Beschleunigungssensor (Accelerometer) dient zur Messung von Geschwindigkeit. Dieser kann außerdem noch Vibrationen, Bewegungen und Kräfte messen. Die Emulatoren vom Intel XDK unterstützen diesen Sensor und daher kann dieser mittels Intel XDK JavaScript Bridge API angesprochen werden. Das ermöglicht dann einen angenehmeren Entwicklungsprozess. Bei dem bereits erzeugten Projekt platzieren wir nun ein Textarea-Steuerelement auf die Oberfläche. Die Eigenschaften passen wir wie folgt an, das Label erhält den Wert Accelerometerdaten und die Label Position wird auf top left gesetzt. Die Id erhält den Namen accelerometerbox. Abbildung 3 Textarea-Steuerelement platzieren und Eigenschaften setzen Wir wechseln nun zum HTML Code-Editor via Code-Button im Menü. In der Regel sollte passend zur Oberfläche die Index.html-Datei geöffnet sein. Die wichtige Referenz zu Intel.xdk.js ist bereits über der ondeviceready-funktion gesetzt und innerhalb dieser erfolgt nun der nötige JavaScript-Code. Der Zugriff erfolgt immer über intel.xdk.sensorname. Für dieses Beispiel wäre es dann intel.xdk.accelerometer. Der Sensor soll dauerhaft nach einem festgelegten Zeitabstand abgefragt werden. Dazu dient dann die watchacceleration-funktion. Der komplette JavaScript-Code wird unter Listing 1 gezeigt. Die Rückgabewerte beinhalten das Koordinatensystem von X, Y und Z. Die X-Achse verläuft von rechts nach links, die Y-Achse von vorne nach hinten und die Z-Achse von oben nach unten. Die Werte können im Plus- und Minusbereich liegen. 3

4 <script type="text/javascript"> /* This code is used to run as soon as Intel activates */ var ondeviceready=function(){ //hide splash screen intel.xdk.device.hidesplashscreen(); function onaccelerationchanged(acceleration){ $("#accelerometerbox").html('x: ' + acceleration.x + '\n' + // Update alle 3 Sekunden 'Y: ' + acceleration.y + '\n' + 'Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp); var options = { frequency: 3000, adjustforrotation: true intel.xdk.accelerometer.watchacceleration(onaccelerationchanged, options); </script> document.addeventlistener("intel.xdk.device.ready",ondeviceready,false); Listing 1 Zugriff auf den Accelerometer-Sensor via Intel XDK JavaScript Bridge API Innerhalb vom Emulator kann die fertige Hybrid-App getestet werden. Dazu einfach zum Emulate- Tab wechseln und auf der linken Seite unter ACCELEROMETER das abgebildete 3D-Smartphone durch gedrückter Maustaste bewegen. Die Koordinatendaten können auch manuell gesetzt werden. Abbildung 4 Beschleunigungssensor im Emulator testen Eine ausführliche Dokumentation unter: 4

5 Apache Cordova API und der Kompass Der Kompass besteht aus mikroelektromechanischen Komponenten. Diese messen die aktuelle Richtung, in die das Gerät positioniert ist. Der Emulator unterstützt aktuell noch keine Testmöglichkeit und der Zugriff muss direkt über die Apache Cordova API erfolgen. In diesem Beispiel wird ein weiteres Textarea-Steuerelement auf die Oberfläche platziert. Dann werden die nötigen Eigenschaften gesetzt. Das Label erhält den Wert Kompassdaten, die Label Position auf top left und die Id erhält den Namen compassbox. Abbildung 5 Eine weitere Textarea platzieren und die Eigenschaften festlegen Wir wechseln nun zum HTML Code-Editor via Code-Button im Menü. In der Regel sollte passend zur Oberfläche die Index.html-Datei geöffnet sein. Der Zugriff erfolgt diesmal direkt über die Apache Cordova API. Dazu wird nach der intel.xdk.js-referenz eine weitere zu cordova.js benötigt. Das Intel XDK stellt diese automatisch im Hintergrund zur Verfügung. So muss keine JavaScript-Datei zum Projekt manuell hinzugefügt werden. Der Zugriff erfolgt immer über navigator.sensorname. Für dieses Beispiel wäre es dann navigator.compass. Der Sensor soll dauerhaft nach einem festgelegten Zeitabstand abgefragt werden. Dazu dient die watchheading-funktion. Der komplette JavaScript-Code wird unter Listing 2 gezeigt. 5

6 <script src="cordova.js"></script>... function oncompasschanged(heading){ $("#compassbox").html(heading.magneticheading); function onerror(error){ alert(error.code); var compassoptions = { frequency: 3000 navigator.compass.watchheading(oncompasschanged, onerror, options); Listing 2 Zugriff auf den Compass-Sensor via Apache Cordova API Die fertige Hybrid-App kann nun mittels Test-Tab direkt auf dem Gerät getestet werden. Wichtig dabei ist, dass vorher die Intel XDK App Preview vom Store des jeweiligen Plattform-Anbieters installiert wurde. Zusätzlich wird ein kostenloser Entwickler Account bei Intel benötigt. Die letzten Abbildungen zeigen den Start der Intel XDK App Preview und der soeben erzeugten App im Test. Die Kompassdaten werden erfolgreich in der zweiten Textarea angezeigt. 6

7 Abbildung 6 Die Intel XDK App Preview starten und die hochgeladene Hybrid-App auswählen Abbildung 7 Ein Standard Splashscreen wird kurz angezeigt und dann erscheint die Hybrid-App zum Testen 7