Build a Pebble Application to Record a Geo Location in Drupal

Family-of-3-Pebbles.jpg

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.

Let's get started!

1. Get Yourself a Pebble Watch

• https://getpebble.com/

2. Wait Patiently for it to Arrive

You may form a finger pyramid of evil contemplation while waiting...

3. Download and Install Drupal

• Download
• Install

4. Download and Install Required Drupal Modules

• Services
• Geofield
• Pebble

4.1 Add a Geofield to the Article Content Type

In Drupal, go to admin/structure/types/manage/article/fields and add a new field called Position, with a field name of field_lat_long,  a Field type of Geofield, and a widget of Latitude / Longitude.

5. Complete the Getting Started Guide for PebbleKit JS

• https://developer.getpebble.com/2/getting-started/
• http://developer.getpebble.com/2/guides/javascript-guide.html

At the time of writing this, the PebbleKit JS 2.0 Beta 4 SDK was used. I'd also like to point out, that your phone and computer must be connected to the same WiFi connection for Pebble development.

Note, we won't be using the test Pebble app you created in this step, we'll be creating a new one below.

6. Download the PebbleGap Application Development Kit

cd ~/Desktop
wget https://www.github.com/easystreet3/PebbleGap/archive/7.x-1.0-beta4.tar.gz
tar -zxvf 7.x-1.0-beta4.tar.gz
mv PebbleGap-7.x-1.0-beta4 PebbleGap
rm 7.x-1.0-beta4.tar.gz
cd PebbleGap

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):

// Site Path. (Do not use a trailing slash)
Drupal.settings.site_path = "http://www.example.com";

// Services endpoint path.
Drupal.settings.endpoint = "pebble";

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.

9. Build and Install the App onto the Pebble Watch

cd ~/Desktop/PebbleGap
pebble build
pebble install --phone 192.168.1.102 --logs

That will install and open the app on the Pebble watch, but at this point the app doesn't do anything. Let's implement the App next!

10. Implement the App

Add this code to the pebble-js-app.js file and save it (there are placeholders to indicate where your custom code should go):

/**
 * Implements hook_ready().
 */
function pebble_ready() {
  try {
    var message = '';
    if (Drupal.user.uid == 0) {
      message = 'Hello World!';
    }
    else {
      message = 'Hello ' + Drupal.user.name + '!';
    }
    pebble_set_message(message);
  }
  catch (error) {
    console.log('pebble_ready - ' + error);
  }
}
/**
 * Implements hook_user_login().
 */
function pebble_user_login(result) {
  try {
    pebble_set_message('Hi, ' + Drupal.user.name + '!');
  }
  catch (error) { console.log('pebble_user_login - ' + error); }
}

/**
 * Implements hook_button_click_handler().
 */
function pebble_button_click_handler(payload, options) {
  try {
    
    // Ignore clicks from anonymous users.
    if (Drupal.user.uid == 0) { return; }
    
    // Handle the Select button clicks.
    if (options.button == 'select') {

      // Grab the current position.
      window.navigator.geolocation.getCurrentPosition(

        // Location Success
        function (position) {

          // Extract the coordinates.
          var coordinates = position.coords;

          // Build the node.
          var node = {
            type: 'article',
            title: 'Geofield Test',
            field_lat_long:{
              und:[
                {'lat': coordinates.latitude, 'lon': coordinates.longitude}
              ]
            }
          };

          // Save the node.
          node_save(node, {
              success:function(result){
                var message = 'Recorded position at ' + 
                  coordinates.latitude + ', ' + 
                  coordinates.longitude;
                pebble_set_message(message);
              }
          });
        },

        // Location Error
        function (error) {
          console.warn('locationWatcher (' + err.code + '): ' + err.message);
          pebble_set_message('Location unavailable!');
        },

        // Location Options
        { "timeout": 15000, "maximumAge": 60000 }

      );
      
    }
  }
  catch(error) {
    console.log('pebble_button_click_handler - ' + error);
  }
}

11. Re-Build and Re-Install the App on the Watch

pebble build
pebble rm --phone 192.168.1.102 0
pebble install --phone 192.168.1.102 --logs

Now when we run the app, it should look something like this:

pebblegap-hello-world.jpg

12. Use the App to Login to Drupal

On your phone, open the Pebble app, then:

1. Go to My Pebble => Watch Apps
2. Click the Gear icon next to PebbleGap

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

pebble-user-login.png

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

pebblegap-logged-in.jpg

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!

pebblegap-position-recorded.jpg

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!

Resources

• Pebble Module
• PebbleGap
• jDrupal

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!