This tutorial describes how to build a Pebble "smart watch" application for a Drupal website using the PebbleKit Javascript Framework.
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!
You may form a finger pyramid of evil contemplation while waiting...
In Drupal, go to admin/structure/types/manage/article/fields and add a new field called Position, with a field name offield_lat_long, a Field type of Geofield, and a widget of Latitude / Longitude.
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.
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
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.
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.
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!
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);
}
}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:
On your phone, open the Pebble app, then:
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.
Now click the Select button on the watch to record our latitude and longitude coordinates, and have them saved into a new article node!
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
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!
Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies
Gmail is one of the popular email service which has lots of new feature and addons. If you are the Gmail user like us then here a Gmail Tip which allows you to add multiple attachments on Email quickly.
Giới thiệu Ngày 16/10 chuyên gia nghiên cứu thuật toán, Matt Cutts đã thông báo về việc Google thêm một công cụ mới vào Google Webmaster Tools: Google’s Disavow Tool tạm dịch là “công cụ từ chối backlink”. Ai nên sử dụng tool này?
Vỏ bảo vệ Typo Keyboards Case (ảnh) dù chưa chính thức bán ra nhưng đã vấp phải vụ kiện từ BlackBerry - hãng nổi tiếng với smartphone có bàn phím Qwerty vật lý
