Teil 4 der Artikelserie

Zugriff auf Sensoren: Cross-Plattform-Entwicklung mit HTML5 und JavaScript
Kommentare

Dieser Artikel ist der vierte und letzte Teil einer Serie zum Thema Cross-Plattform-Entwicklung, in der Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennenlernen. In diesem Teil erkunden und erlernen Sie den Zugriff auf Sensoren im Zusammenspiel mit dem Intel XDK JavaScript Bridge API und Apache Cordova.

Der erste Teil der Serie stellte eine Einführung zum Thema Cross-Plattform-Entwicklung dar. Passend dazu wurde das kostenfreie und selbst komplett in HTML und JavaScript geschriebene Entwicklungstool Intel XDK vorgestellt.

Hier geht’s zu Teil 1 >>>

Der zweite Teil der Serie stellte das Intel-App-Framework vor. Dabei handelt es sich um ein umfangreiches UI-JavaScript-Framework, das eine große Ähnlichkeit zu JQuery Mobile, Zepto.js oder Twitter Bootstrap hat. Mit dem App-Framework Query Selector wurde gezeigt, wie mittels JavaScript auf HTML-Elemente zugegriffen wird.

Hier geht’s zu Teil 2 >>>

Im dritten Teil der Serie wurde das Thema Responsive Webdesign vorgestellt. Dieser gestalterische und technische Ansatz hat zum Ziel, Webanwendungen zu erstellen, die auf die Eigenschaften des jeweils benutzten Endgeräts reagieren – z. B. auf die Devicegröße und das jeweilige Eingabemedium. Mit dem App-Designer des Intel XDK kann man schnell ein Layout erzeugen, ohne auch nur eine Zeile Code schreiben zu müssen.

Hier geht’s zu Teil 3 >>>

Das sind die Neuheiten

Bei unserem Serienstart war das Intel XDK gerade mal 74 MB groß und in Version 0115 verfügbar, im letzten Teil waren wir bei Version 0240 mit 122 MB. Aktuell ist die Version 0277 mit einigen Feinheiten und Bugfixes. Weitere Informationen finden Sie hier.

Die Entwicklung der Sensoren

Wenn man sich zwischen der Web- und der App-Entwicklung entscheiden muss, spielen Sensoren eine wichtige Rolle, denn nur Apps bieten einen optimalen Zugriff auf die darunterliegende Hardware. Beispiele zur sinnvollen Kombination aus Soft- und Hardware sind die Taschenlampen-App, die das Blitzlicht dauerhaft aktiviert, die Wasserwaagen- oder die Kompass-App. Wofür früher unterschiedliche Objekte benötigt wurden, wird heute ein Smartphone oder Tablet zu einem Schweizer Taschenmesser. Damit sind Sensoren ein wesentlicher Grund, weshalb Smartphones und Tablets so erfolgreich geworden sind. Nicht zu vergessen ist auch der Sensor Multi-Touch, der besonders bei mobilen Spielen eine große Rolle spielt.

Es ist spannend zu beobachten, wie sich Sensoren immer mehr in der Computerwelt etablieren. Smartphones sind schließlich bekannt dafür, dass sie zahlreiche Sensoren beinhalten. Doch diese Welle schwappt direkt über zu den Tablets und erreicht auch Ultrabooks und sogar Fernsehgeräte. An diesem Punkt kommt das Thema Cross-Device ins Spiel: An welchem Gerät ich mich auch gerade befinde, es wird eine App hierfür geben, die ihre Umwelt wahrnehmen kann und mir einen dementsprechenden Nutzen bietet. Diesen Weg hat Microsoft mit Windows 8, Windows Phone 8 und der Xbox One bereits eingeschlagen. Schon bald wird man davon sprechen, dass Microsoft der Konkurrenz in diesem Bereich einen Schritt voraus war.

Wie war es früher?

Das Thema Sensoren hat sich zwar so richtig erst in der mobilen Welt durchgesetzt, doch sind diese alles andere als eine neue Erfindung. Ein standardmäßiger Computer konnte schon immer mit zusätzlicher Sensorhardware erweitert werden. Gerade im Businessumfeld war das immer wieder ein wichtiger Gesichtspunkt. Was die Schnittstellen angeht, gab es für Entwickler jedoch keine einfache Lösung, denn jeder Hardwarehersteller stellte damals seine eigenen Treiber und Lösungen zur Verfügung. So wurde oft nicht die gewünschte Programmiersprache unterstützt und die Dokumentationen waren sehr komplex. Die Sensorenentwicklung war sehr mühsam und machte nicht immer Spaß.

Heute dagegen sieht die Welt ganz anders aus. Die großen Plattformen verfügen über einheitliche Schnittstellen zum Zugriff auf Sensoren. Das Unschöne daran ist nur, dass jede Plattform ihre eigenen Schnittstellen hat, für die jeweils in der entsprechenden Programmiersprache entwickelt werden muss. Angenehme Lösungen für dieses Problem bieten Cross-Plattform-Frameworks wie Apache Cordova oder das Intel XDK. Die beiden ermöglichen über ein JavaScript-API den einheitlichen Zugriff auf die Sensoren.

Die APIs

Im Intel XDK gibt es unterschiedliche Möglichkeiten zum Zugriff auf die Sensoren. Die erste führt über das Intel XDK JavaScript Bridge API, das im Grunde genommen nichts anderes macht, als die Funktionsaufrufe an das darunterliegende Apache-Cordova-API durchzureichen und auszuführen. Diese Vermittlerrolle gewährleistet den Emulatorsupport, denn im Emulatortab des Intel XDK gibt es mehrere Funktionen zum Emulieren und Testen der Sensoren. In der aktuellen Version sind dies der Accelerometer, die Vibration und die Geolocation. Für alle weiteren Sensoren sollte man direkt das Cordova-API verwenden, das man dann allerdings nur noch per Remote Debugging testen kann. Für nicht im Standardumfang des Cordova-API enthaltene Sensoren gibt es im Internet zahlreiche freie Plug-ins.

Beide APIs werden vom Intel XDK direkt angeboten, sodass die JavaScript-Bibliotheken nicht im Dateiverzeichnis liegen müssen. In diesem Fall genügt eine einfache JavaScript-Referenzierung zu intelxdk.js oder cordova.js. Der Zugriff auf eines der beiden APIs oder auf die Kombination aus beiden wird standardmäßig angeboten. Möchte man den aktuellen Zustand eines Sensors ermitteln, erfolgt der JavaScript-Funktionsname immer mit sensorname.get, eine durchgehende Abfrage beginnt mit sensorname.watch. Dazu kann optional das Intervall festgelegt werden.

Der Kompass

Der digitale Kompass besteht aus drei mikroelektromechanischen Komponenten. Diese sind jeweils im rechten Winkel zueinander ausgerichtet und dienen zur Messung magnetischer Felder, um anschließend eine Richtung auszugeben.

Ein Beispiel verdeutlicht, wie einfach der Zugriff auf den Kompass erfolgt. Dazu starten wir das Intel XDK und erzeugen ein neues Projekt mit der Projektvorlage „Start with App Designer“. Das Projekt bekommt den Namen KompassApp. Wenn Sie beim Erzeugen der App gefragt werden, welches UI-Framework verwendet werden soll, wählen Sie das App-Framework. Weiter geht es mit einem Klick auf den Select-Button rechts oben.

Nach der Erstellung des Projekts finden Sie sich im App-Designer mit einer leeren Oberfläche wieder. Über die Auswahl auf der linken Seite wird hier per Drag and Drop ein textarea-Steuerelement platziert (Abb. 1). Jetzt passen wir ein paar Eigenschaften an und das Label erhält den Wert der Kompassdaten. Die Label-Position wird auf „top left“ gesetzt und der CheckBox-Haken bei Placeholder wird entfernt. Die Id erhält den Namen resultBox.

Abb. 1: „textarea“-Steuerelement hinzufügen

Anschließend wird der nötige JavaScript-Code implementiert. Dazu wechseln wir mit dem Code-Button links oben zum HTML-Editor und laden die index.html-Datei. Für den Zugriff auf den Kompass wird das Cordova-API benötigt. Eine ausführliche Dokumentation dazu finden Sie hier. Der nächste Schritt ist eine JavaScript-Referenz von Cordova. Diese wird direkt unter der intelxdk.js-Referenz gesetzt:


Der Zugriff auf Cordova erfolgt über die Instanz navigator. Darunter findet man die jeweiligen Sensoren als Function, in unserem Fall ist das compass. Unsere App soll den Sensor durchgehend nach neuen Daten abfragen, wofür die watchHeading-Funktion aufgerufen wird. Als Parameter geben Sie eine Funktion mit, die ausgeführt werden soll, sobald die Daten eingetroffen sind. Ein weiterer Parameter verlangt eine Funktion zur Definition der Vorgehensweise, wenn einmal etwas schief gehen sollte. Der letzte Parameter erhält eine Funktion mit optionalen Einstellungen (Listing 1).



Da die Emulatoren des Intel XDK noch kein Tooling für den Kompass bieten, wurde direkt mit Cordova darauf zugegriffen. Die App kann nun über den Test-Tab direkt auf dem eigenen Gerät getestet werden (Abb. 2). Dazu gibt es zwei Möglichkeiten: entweder über den Mobile-Button und einen Intel-Server oder direkt über das eigene WLAN unter dem Punkt „WiFi“. In beiden Fällen wird auf dem Zielgerät eine App benötigt. Suchen Sie einfach im eigenen Store nach „Intel XDK App Preview“ oder „App Lab“ und installieren Sie die entsprechende App. Die Apps stehen aktuell für iOS, Android, Windows 8 und Windows Phone zur Verfügung. Ein kostenloser Account bei Intel wird ebenfalls benötigt.

Abb. 2: Kompass-App auf dem Nokia Lumia 920

[ header = Seite 2: Der Beschleunigungssensor (Accelerometer) ]

Der Beschleunigungssensor (Accelerometer)

Der Accelerometer wird nicht nur zur Geschwindigkeitsmessung verwendet. Dieser Sensor kommt in den unterschiedlichsten Szenarien zum Einsatz, unter anderem zur Erkennung von Vibrationen und Bewegungen oder zum Messen von Kräften. Im Gegensatz zum Kompass besteht der Accelerometer nur aus einer mikroelektromechanischen Komponente.

Die Intel-XDK-Emulatoren stellen ein Tooling für diesen Sensor bereit. Somit wird uns über das Intel XDK JavaScript Bridge API eine Schnittstelle geboten. Der Zugriff ist genauso einfach wie der des Kompasses. Zur Demonstration wird das bereits erstellte Projekt im Intel XDK erweitert. Dafür wird ein weiteres textarea-Steuerelement direkt unter dem bestehenden platziert (Abb. 3). Danach passen wir einige Eigenschaften an, sodass das Label den Wert der Accelerometer-Daten erhält. Die Label-Position wird auf „top left“ gesetzt und der CheckBox-Haken bei Placeholder entfernt. Die Id erhält den Namen accelerometerResultBox

.

Abb. 3: Zweite „textarea“ hinzufügen

Jetzt benötigen wir nur noch den passenden JavaScript-Code. Dazu wechseln wir links oben mittels Code-Button zum HTML-Editor. In der index.html-Datei wird der Code einfach innerhalb der onDeviceReady-Funktion geschrieben. Zur Erinnerung: Bei Cordova musste vorerst erst eine JavaScript-Referenz gesetzt werden. Das Intel XDK hingegen ist in den Standardprojektvorlagen referenziert. Während die Cordova-Funktionen über navigator zur Verfügung standen, wird der Zugriff im Intel XDK direkt mit intel.xdk.sensorname ermöglicht. In unserem Fall wäre das intel.xdk.accelerometer.

In diesem Beispiel soll der Sensor erneut nach gewissen Zeitabständen abgefragt werden. Die Funktion dafür lautet watchAcceleration und erwartet nahezu die gleichen Parameterbedingungen wie beim Kompassbeispiel (Listing 2). Die Funktion wird aufgerufen, sobald der Sensor die Daten liefert. Dann gibt es noch eine weitere mit optionalen Einstellungen. Dafür haben die erhaltenen Daten andere Werte. Sie liegen in einem Koordinatensystem mit X-, Y- und Z-Achse. Die X-Achse verläuft standardmäßig von rechts nach links, die Y-Achse von vorne nach hinten und die Z-Achse von oben nach unten. Das bedeutet: Je nachdem, in welche Richtung man das Gerät bewegt, befindet sich der jeweilige Wert im Plus- oder im Minusbereich.


                
X
- Gib Deinen Standort ein -
- or -