Das Web findet nicht mehr nur im Browser statt

Eine Pebble Watch App mit JavaScript entwickeln
Kommentare

Das Pebble-Watch-API wurde kürzlich in der zweiten Version releast und beinhaltet nun auch ein JavaScript Framework. Das PebbleKit JavaScript Framework erlaubt es Entwicklern, JavaScript einzusetzen um dynamisch Daten und Events aus dem Web in eine Pebble Watch App einzulesen und umgekehrt. Das bedeuet, dass die Pebble Watch nun mit einer Vielzahl an Web APIs integriert werden kann.

Patrick Catanzariti hat ein Tutorial zusammengestellt, in dem er zeigt, wie man JavaScript unter Benutzung des Pebblekit JavaScript Frameworks einer Pebble App hinzufügen kann. In seinem Beispiel wird ein Watchface erstellt, das jederzeit die Adressen zu den nächstgelegenen Filialen einer Kaffeekette anzeigt. Um die Geo-Daten zu ziehen, wird das Foursquare API genutzt. Die Beispielanwendung lässt sich einfach auch auf andere Örtlichkeiten anwenden, wenn man sich nicht gerade für Kaffee interessiert.

Da die Pebble Watch App in C läuft, beinhaltet das Tutorial auch ein wenig C-Programmierung. Wem das nicht geheuer ist, der kann den C-Beispiel-Code als Basis verwenden, aber JavaScript einsetzen, um neue Funktionalität hinzuzufügen.

Voraussetzungen für das Tutorial sind: Ein Android- oder iPhone mit der Pebble App, eine Pebble Watch, Foursquare API Credentials und Wi-Fi.

Erste Schritte: Pebble SDK und Co.

Das Pebble SDK muss lokal installiert werden, beachtet hierbei die OS-abhängigen Intstruktionen zum Download und Installieren des SDK; die ihr in der Pebble-Dokumentation findet. Dann kann’s auch schon losgehen. Zunächst wird ein Folder für Pebble Apps angelegt, dann ein neues Projekt. Unter Verwendung des Commands, in diesem Fall pebble new-project –javascript find_me_starbucks, wird ein Directory unter dem Projektnamen angelegt, in dem ihr fortan arbeitet. Hierin werdet ihr dann bereits einige Files finden, die Pebble für euch angelegt hat, wie etwa appinfo.json, das vergleichbar ist mit package-json, das Node-Entwickler bereits kennen dürften. Danach wird der Build Command gesetzt, der gewährleisten soll, dass eure Beispiel-App auf der Pebble Watch ankommt. Wenn es sich um eure erste Pebble App handelt, muss ein Setup gemacht werden, damit Pebble eure Test-App akzeptiert.

Es werde C

Es folgt die appinfo.json-File, die uns einen Überblick verschafft, an welchen Stellen gearbeitet werden muss. Im Blogpost von Catanzariti findet ihr aufgelistet, welche Bedeutung die einzelnen Felder haben. Anschließend geht es an den C-Code: Das pebble new-project-Command erstellt eine C-File in eurem src-Folder. Diese öffnet ihr und kopiert den Beispiel-C-Code aus dem Tutorial hinein. Wer sich intensiver mit der Bedeutung des Code-Snippets beschäftigen will, findet im Tutorial dazu auch ein paar Anmerkungen am Ende.

Details in JavaScript

Den Großteil der Daten und der Usability eurer App generiert ihr über JavaScript. Das Pebble location API erledigt das Geolocating. Hinzu kommen noch Ajax Requests und das Foursquare API, von dem ihr die Daten der Kaffeehäuser bezieht. Nachdem die App zum Laufen gebracht wurde, geht es ans Debugging und dann seit ihr im Grunde auch schon fertig. Alle Instruktionen und Code-Snippets findet ihr im Blogartikel „Pebble Watch Development with JavaScript“.

Fazit

Wer bereits mit Node.js, jQuery und JSON Erfahrung hat, dem dürfte hier nichts Unbekanntes begegnen. Das Tutorial richtet sich an relativ erfahrene JavaScript-Entwickler, der C-Code sollte niemanden abschrecken, da er ggf. einfach nur via Copy & Paste eingefügt werden kann und man sich nicht weiter damit befassen muss, wenn man nicht will.

Aufmacherbild: Smart watch concept with icons in modern flat design. Eps10 vector illustration von Shutterstock / Urheberrecht: JMicic

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -