August 19, 2015

Bring your app to your watch: Hello Pebble

At the time of writing this, more and more "wearable devices" make it to the market. Apple started its Apple Watch with mediocre success, but others performed much better: the pebble time smartwach was the most funded kickstarter project so far. Among the kickstarter funders were a few collegues at willhaben (including me), and when the watch finally arrived a few weeks ago, I was excited to try out the CloudPebble IDE for creating watchfaces and apps.

Right from the start pebble provides rich documentation for developers. Apps can be created in two flavours:
  • using the native SDK (C language)
  • using the javascript SDK
What's the difference? Apart from the language, the major difference is how (and where) the app runs: while the native app is runs directly on the watch, the javascript app always needs a bluetooth connected phone where the app resides.  The javascript app only exchanges messages with your pebble, which in turn draws the userinterface, handles user interaction and so on. With the native SDK, you have to do all this by hand.

Simple smartwach app

At willhaben we do regular hackathons (called "crazy fridays"), where developers get one day to try out whatever is on their mind. So I took the oportunity to implement a small pebble app consuming our own API. The app should display willhaben adverts close to the wearer's position directly on the watch.

The following tasks have to be implemented:
  • find out location via GPS (on the phone)
  • request nearby adverts from our REST-API
  • display information on screen
 First, we put together a small welcome screen where the user can trigger a location lookup when pressing the select button:

var main = new UI.Card({
  banner: 'images/logo_willhaben.png',
  body: 'Start search >'

main.on('click', 'select', function(e) {
  var _posCard = displayWindow("locating...");

    function() { 

          displayWindow("failed getting gps position"); 
     } ,

// helper function to display messages
var displayWindow = function(text, title,subtitle) {
  var _theCard = new UI.Card({
    title: title,
    subtitle: subtitle,
    body: text,
    banner: 'images/logo_willhaben.png',
    scrollable: true
  return _theCard;

The pebble.js SDK provides a library which allows creating simple UI elements like Card which is used in our code snippet to display the willhaben logo and some text. When the user presses the middle ("select") button, we display another Card showing "locating..." while we query the geolocation API to determine our position using the phones GPS sensor. Upon getting the location, we hide the card and call locationSuccess with the found position.

var locationSuccess = function(pos) {
  var coords_url = getSearchUrl(pos.coords.latitude, pos.coords.longitude);
  var _searchAdsCard = displayWindow("Searching adverts...");

  ajax({ url: coords_url, type:"json", headers: { 'Accept': 'application/json', 'cache':false } },
    function(data,status) {
      searchItemResult = data;         
         displayWindow("fail: "+status);

 The locationSuccess function is where it gets interesting:  we generate the REST-API URL (getSearchUrl) with the provided latitude and longitude, and this URL is used to fetch the adverts. When we get the results, we display them to the user (createMenuFromSearch). This rather lenghty function which converts the server's response and composes more UI elements is left out.


The result of a few hours of hacking is quite nice: the app displays some basic information about adverts nearby which, with a bit of tweaking, fit onto the tiny screen. We had to take some shortcuts (for example there is no proper authentication so it won't work on the live system) but with a few hours more this could be a really nice app.

Also, there are many things left to explore, for example Pebble provides SDKs for android and ios to use an existing app as companion app which provides data for the app on the smartwach, but this is left for another post.

1 comment: