The application itself will be fairly simple. It will wait for you to click the "Select" button on the Pebble watch. Once the button is clicked, the app will grab your current latitude and longitude coordinates. It will then use the Services module to create an Article node and save the coordinates onto a Geofield on your Drupal site.

6. Download the PebbleGap Application Development Kit

7. Add jDrupal to PebbleGap

Download jDrupal, and copy the contents of jdrupal-7.x-1.0-rc1.js (or jdrupal-7.x-1.0-rc1.min.js) and paste it at the bottom of this file:

~/Desktop/PebbleGap/src/js/pebble-js-app.js

We have to do this, because unfortunately (at the time of writing this) all of our Pebble JavaScript code must be placed into one file. I'm sure future versions of PebbleKit JS will allow us to organize our code across multiple files, but for now we're stuck with just one file. Le sigh.

8. Specify the Drupal Site URL Path

Open this file:

~/Desktop/PebbleGap/src/js/pebble-js-app.js

Add these settings near the top of the file (there are placeholders for you to fill in):

Save the file. Notice the Services endpoint path is "pebble". When we install the Pebble module for Drupal, it automatically creates a Service endpoint with this path. You may optionally use your own custom endpoint if need be.

12. Use the App to Login to Drupal

That will load a Web View on your phone of the login screen provided by the Pebble module:

Enter your credentials and then click the Login button. That will close the web view and display a message on the watch like so:

Click the Select button on the watch to close the message. Now the watch should say "Press a button", but don't press anything just yet.

13. Try the Geo Position Feature we Implemented

Now click the Select button on the watch to record our latitude and longitude coordinates, and have them saved into a new article node!

14. Conclusion

I had a great time learning how to do this, and building the projects to make this happen. I hope this inspires you to get yourself a Pebble watch and start building apps for it to communicate with your Drupal websites!

0. Background Story and Motivation

A few weeks ago, a Discasaurus user contacted us and asked if we could make a Pebble app for the site. I had no idea what he was talking about, so I googled. Right away I was fascinated by Pebble, its open sourceness, and the fact they have a JavaScript SDK. Joe, form the Discasaurus team, then chimed in and told me he has a Pebble watch and has been developing for a while already. I figured I needed to get caught up, but before I could even buy one, Joe bought me one for Christmas with his developer discount, amazing, thanks again Joe! And so I waited for it to arrive...

Finally it arrived, and right away I wanted to build an app for Pebble that will work with a Drupal website. I searched around for a bit to see what kind of tools were available, and nothing much came forward. I have been developing DrupalGap for about 2 years now, and I knew much of its code could be used in this adventure. The problem was the Services API in DrupalGap was too bundled into DrupalGap, so I needed to extract it out so it could be used elsewhere. This is where I came up with the idea for jDrupal, a JavaScript Library for Drupal.

Now that jDrupal is implemented, it can be used across JavaScript applications to handle the Services call. Eventually I will add this as a plugin for DrupalGap. So now I was ready to build a Pebble app, but where to start? I just started hacking up some code, within the first hour or so, I wanted to build an application development kit for Pebble and Drupal websites. That's when I decided to start PebbleGap and the Pebble module for Drupal. After a few days of hacking away some code and getting some stable releases put together, I wanted to write a tutorial about how to use these new tools. Enjoy!

I'd also like to thank Travis Tidwell for his drupal.api.js library. Over a year ago, it helped spark an idea for me on how to better organize the DrupalGap JS Services API, and ultimately jDrupal. More importantly, recently I revisited his library and learned how he used a makefile, a bin and src directories, to compress his source code into a single file (and compressed file), and how to deploy jQuery unit testing across the library. Amazing stuff, thank you so much.

Good luck out there, and happy coding!

Comments

Hi there! I haven't had much luck trying to get this to work with CloudPebble. Any chance I could take a look at the JS source code you came up with in the end of these instructions? I suspect the library has changed since you wrote this. Thanks!