Please note that this post was written when I first got my hands on the SDK and some things may have changed since then.

So, you just got your hands on the pebble SDK and are looking to write yourself a watch face? This post will introduce the creation of a watch face from the prototyping stage to packaging it up and running it on your device. The watch face I will be using for this tutorial is the “Times Square” watch face - the first one I wrote the day I got my hands. It is based off of the Pimp - Pimpin Ain’t Easy which I used as my main watch for about 5 or 6 years until I lost it this year. :( The watchface took about 2 hours to create from installing the SDK to getting it on my wrist.

Repository

The repository is available at Times Square on Github

Background

When writing an application in Backbone, it is highly likely that you utilize fetch() to retrieve data from your web server and save() to store data on it. This is exactly what we did for Uptilt our entry for the Rails Rumble 2012 (the making of you can read about on the Uptilt Blog).

One of the key issues with Uptilt being a two player game is that it needs two people to play the game. The solution to this is to use a demo (or practice) mode. In the case of Uptilt, this involved implementing the game rules for card comparison client-side. We also didn’t want any interaction with the server when the practice game is in progress as the game is not recorded in the database.

Note: the contents of this post are heavily influenced by Sous Chef.

Over the past couple of weeks I have been working with a mobile developer to help integrate with one of my applications. We plan on using OAuth (Which I have blogged about here) to authenticate the mobile application with the server. The problem with this is that the rails application is still in development, and the mobile developer doesn’t have the code running. I don’t want them to worry about dependencies, setting up the database or setting up git access via ssh keys, I just want him to be able to run the server.

This is where Vagrant comes in. Vagrant allows you to create Virtual Machines (using VirtualBox) programatically. This means that I can create a VM of my application, hand it to anothe developer and let them get on with it. Vagrant can utilize Chef to build the machine. Chef is an integration framework that makes it easy to deploy servers, which it does using cookbooks and recipes. A recipe is for installing a particular piece of software and a cookbook is a collection of recipes. There are plenty of cookbooks available online, I opted to use a set of cookbooks developed by Travis CI that are available on GitHub

Getting Started

The first thing to do is install Vagrant. I chose to use the gem by doing:

gem install vagrant

However there are binaries available on their downloads page.

Over the past few months at Powershift, we have been experimenting with the development of Single-Page Applications. We looked at a few javascript frameworks designed for the task and ultimately decided on Backbone.js One of the things we really like about Backbone is that it has a data-driven approach. That is, that you can listen on an item for a specific trigger, and call an action when that trigger is called. The most common case for this in our applications is binding a view to the “change” event of a model so that when new data comes in, it is rendered on the page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//The View
Application.Views.PostView = Backbone.View.extend({
  initialize: function() {
    this.model.on("change", this.render, this);
  },

  render: function() {
    $(this.el).html(ich.post_template(this.model)); //Render the element
  }
});

//The Model
Application.Models.Post = Backbone.Model.extend({
  url: function() {
    return "/posts/"+this.id;
  });
});

//initialize them
var post = new Application.Models.Post({id: 1});
var postView = new Applications.Views.PostView({model: post});
post.fetch();
post.save({title: "New Title"});

Backbone.js is a JavaScript framework that gives your code a much needed structure. This post will advise you on how to extend the framework by adding in validators. I will assume you have atleast a basic knowledge of Backbone.

Source

The source code for this post is available on gitub.

The Goal

While Backbone does give your project structure, it does not give you the full feature set that you require to build a web application. Many methods are deliberately stubbed out and you are encouraged to fill in the blanks to give you the desired functionality. One such method is the validate method on a Backbone Model.

The validate method is called every time set or save is called on a model. The aim here is to override the validate method to use an object defined on the model and use this for validation. We will also add an errors hash to the model which can be displayed to the user.

This is part 2 of creating an OAuth based API with rails. Part 1 is available here.

Source

The source for both the provider and the consumer are available here

Screencasts

I have created screencasts to go along with this tutorial. This is my first attempt at screencasting, so please drop me a message if you find them useful or if there is anything you think can be improved. Your feedback is appreciated.

Download mp4 format ogv format avi format

Change the following in views/oauth/oauth2_authorize.html.erb

1

<p>Would you like to authorize <%= link_to @token.client_application.name,@token.client_application.url %> (<%= link_to @token.client_application.url,@token.client_application.url %>) to access your account?</p>

To

1

<p>Would you like to authorize <%= link_to @client_application.name,@client_application.url %> (<%= link_to @client_application.url,@client_application.url %>) to access your account?</p>

This is part 1 of creating an OAuth based API with rails. Part 2 is available here.

Recently I had the need to create an Oauth2 authenticated API. The following is an app in its most simple form to get you started with creating and testing an Oauth2 powered API, using oauth-plugin, devise and rspec.

Source

The source for both the provider and the consumer are available here

Screencasts

I have created screencasts to go along with this tutorial. This is my first attempt at screencasting, so please drop me a message if you find them useful or if there is anything you think can be improved. Your feedback is appreciated.

Download mp4 format ogv format avi format

Creating The Provider

Start by opening up your terminal. For demonstration purposes I recommend creating a folder called oauth to put both the provider and consumer.