× {{alert.msg}} Never ask again
Online JavaScript Course Master JavaScript in 4 Weeks
View Class

How to Build Your First Pebble App in 1 Hour

– {{showDate(postTime)}}

Intro to Wearable Development: Building Your First Pebble App in 1 Hour

This article will teach you the key concepts for building apps for Pebble, and you will also learn how to build a simple weather Pebble App through JavaScript. It is based on the Codementor Office Hours hosted by Thomas Sarlandie, a developer evangelist working at Pebble.

Pebble is a smartwatch that is compatible with both iOS and Android devices. As of February 2014, the Pebble app store had over 1,000 applications developed using Pebble’s free software development kit (SDK).


Introduction

When you start pebble for the first time, you’ll see what we call a watchface.

A watchface allows you to see what time it is. If you use the up and down buttons as in the demo video above, you can scroll through different watchfaces. If you press the select button, you can get into the pebble menu, where you’ll have some preinstalled apps such as music, notifications, alarms, settings for activity trackers, and apps you can launch quickly.

Inside Pebble, there’s a processor that runs at about 80MHz and it’s an ARM Cortex-M3. It’s not a full computer, but in terms of power it’s comparable to the original mac classic, so it’s very capable in terms of animations on screen. Pebble also has a 4 megabytes flash that stores the apps built by developers, and you can see from the photo that the battery actually takes up most of the space—Pebble can last up to 7 days from a single charge.

The rest of the board has a magnetometer for the compass, an ambient light sensor that detects when the backlight should be turned on, and an accelerometer that measures your steps. In addition, you should know that applications that run on pebble don’t need to be connected to a phone—they will work all the time, even if the user is going on a swim or a run, as Pebble is waterproof.

There are two versions of Pebble: the Pebble Classic sold on Kickstarter two years ago, and a newer model called Pebble Steel, which was announced last year in January and shipped in 2014. Pebble Steel has a different casing, but the hardware is very similar, so as a developer there will be no difference between an app written for Pebble classic and Pebble steel.

Pebble as a Platform

The first thing you can do with Pebble is write applications that run on Pebble with the native C SDK. The C SDK is for building games and highly interactive applications.

One way to extend your C app is to use JavaScript. When you add JavaScript to your C app, you will write codes that run on the phone. What happens is your app is going to talk to your phone, and on your phone your JavaScript code can use the phone’s GPS to tell your app where your user is or show a configuration window. For example, let’s say you have an app where you need the user to login and type a username and password. Instead of having the user do this on the watch, which would be really complicated, you can let the user do that on his or her phone instead.

Another type of app you can write is one that is connected to a mobile application on iOS or Android. For instance, if you have an iOS app such as RunKeeper, and would like for your user to be able to control your app from the wrist by using Pebble as a remote control, you would choose a slightly different SDK called PebbleKit, and it will allow your Pebble to exchange information with a mobile app. A great example of this use-case is a sailing app that runs on a tablet but also gives a display to be available on Pebble. Users can see what their current cape is, as well as the distance and time to their next waypoint among other things. So if it’s really wet outside they can leave their iPad inside the boat and just take the pebble with them.

If you don’t like C, or if you aren’t a C developer and you just want to write apps that talk to the internet, Pebble has a JavaScript framework called Pebble.JS, which allows developers to write apps completely in JavaScript. If you’re new to Pebble app development, this is the easiest way to get started. It’s still in beta but it’s a pretty solid beta.

How to Build a Pebble App

To build pebble apps, you’d need a pebble software development kit, and there are two types you can use, one of which you download to your computer just like the Android SDK or the iOS SDK. The other is Cloud Pebble.

With Cloud Pebble, you can build pebble apps without installing anything in your computer. Everything happens in your browser, so it works on Linux, Windows, Mac, and even your iPad. You can build apps in just a few minutes with Cloud Pebble, so I definitely recommend using it. I will also be showing you how to build two apps with Cloud Pebble—one being the classic HelloWorld app which will be created in C, and the other being a weather displaying app created with JavaScript through Pebble JS.


This is what cloudpebble.net looks like. You can see it will list all the projects the user has worked on before.

You can add new projects by clicking “create”, and you can choose the kind of project you want to develop in.

Simply.js is an earlier version of Pebble.JS, and although it’s still supported, Pebble.JS is better because it’s much more powerful.

Creating a HelloWorld App with C SDK

If you want to create a C project, you will see a selection of examples app you can choose from, so let’s see how you can run a simple HelloWorld app on Pebble by selecting the HelloWorld example.

This will start a project with a single source file called helloworld.c, and it contains the code of a full Pebble application. Let’s change the text on the screen to “Hi, Codementor”, and it should look something like this:

Afterwards, click the green arrow on the upper right corner to load the project on Pebble, in which Cloud Pebble will connect to a development server that allows you to link your Cloud Pebble account to your phone and Pebble.

However, to get this to work, you need to go to the Pebble app in your phone and check the settings to make sure the developer service is enabled.

Once you press the green button, Cloud Pebble will compile the project and connect to your phone so it can be deployed to your Pebble.

Creating a Weather App with JavaScript

In this short tutorial, you will learn how to use the JavaScript SDK to create a simple app that connects to the internet, grabs weather information, and displays the data on your Pebble. Again, we will be building this app through Cloud Pebble.

Once you create the project by selecting PebbleJS as the project tyle, you’ll notice you’d have a .js file that loads two libraries—one is the UI library and the other an AJAX library that will be needed to make the HTTP requests. Let’s create what we’d call a new card, which is just a screen on the Pebble. In it we will set a body and also have a function called main.show, which will show the main card you’ve just created. It will connect again to your phone and push the app to Pebble so you’ll see the app show up on it.

var UI = require('ui');
var ajax = require('ajax');
var main = new UI.Card({
  title: 'WX Station',
  body: 'Loading ...'
});
main.show();

To get the weather information, you’ll need a source of weather information from some sort of open API. Finding the API you’re going to use is often the first part of your project. Many developers ask whether they can do some specific type of app, and if you have an API for it, the answer would be yes. As long as you have an API, you can do almost anything with your Pebble.

For weather information, there’s a very nice service at openweathermap.org, which provides free API you can use. After reading through the documentations, you’ll see the site provides a JSON API and you’ll find out that the only thing you need to do is call an URL like http://api.openweathermap.org/data/2.1/find/city?lat=38.89&lon=-77.07=&cnt=1, in which you’ll pass latitude and longitude for GPS information (in this example, the values for Washington D.C.), and you’d get a block of JSON in return. The JSON that is returned by the API is usually compressed, so it’s strongly recommended to go to some place like JSONLint so you can copy and paste the code and it up.

As you can see in the example, the temperature in DC was 279.41 at the time, which seems very high. However, if you’ve read the documentation you will realize it is in degrees Kelvin, so you’ll have to subtract 273.15 to convert it to Celsius.

Now you can go back to Pebble Cloud and call the URL from api.openweathermap.

var UI = require('ui');
var ajax = require('ajax');

var main = new UI.Card({
	title: 'Code Mentor',
	body: 'Loading...' 
});

main.show();

var url = "http://api.openweathermap.org/data/2.1/find/city?lat=37.42&lon=-122.1381&cnt=1"; //here we will load the service. The parameters are the location of the Pebble office.

You can make sure you have the right URL with your terminal’s $curl tool

Where you can copy and paste the results into JSONLint to format the information for easier reading. We’ll only take the first result in this example. So, our AJAX request should look like:

ajax({
	url: url,
	type: 'json', //we'll say this is a json web service so it will automatically parse the output
},
		function(data) {
			var temp = ((data.list[0].main.temp - 273.15) * 1.8 + 32).toFixed(1);//this will convert the temperature to Fahrenheit
			main.body("Temperature: " + temp + " F");
		}
		function (err) {
			console.log("AJAX Error: " + err); //It is strongly recommend to pass a second parameter in case there is an error
		});

And after deploying the app, we should see this on our Pebble:

If you click on view logs on Cloud Pebble, you can see that everything was returned from the web service and it also correctly converted the temperature.

You can use Pebble Cloud to build much more complicated apps (as long as you have the web service). You can use this to show information from Google Analytics on your watch, control your lights, and if you have a NEST you can even use it to talk to your NEST as well.

In addition, you can also get a dynamic location for your weather app by using the HTML find function instead of hard coding it.

navigator.geolocation.getCurrentPosition(
  function(pos) {
    var url = "http://api.openweathermap.org/data/2.1/find/city?cnt=1" +
      "&lat=" + pos.coords.latitude +
      "&lon=" + pos.coords.longitude;
    ajax(
      { url: url, type: 'json' },
      function(weather) {
var temp = (weather.list[0].main.temp - 273.15); temp = (temp * 1.8 + 32).toFixed(1); main.body('Temperature: ' + temp + " F");
},
      function (err) { console.log("Error: " + err); }
    );
},
function (err) { console.log("Gps error: " + JSON.stringify(err)); }, { timeout: 10000 } //remember to add an error function for the GPS.
); 

Get a Pebble with $20 discount

At any rate, the first steps to building your own pebble App is to get inspiration from the app store. Or, if you don’t have a Pebble yet, you can go to https://getpebble.com/checkout to see what is available, and you can use the coupon at https://getpebble.com/promotions/codementor to buy Pebble with a $20 discount, and it will be valid for the first 200 developers to claim it. Finally, the key resource for pebble development is at Pebble’s website itself, where you’ll find guides on how to design your pebble apps along with other recommendations. If you have questions, the Pebble forum is extremely active with a strong community. The Pebble SDK has been around for almost two years and is now very mature. There are a lot of Pebble developers on the forum, making it a great place to ask questions. There are also a lot of examples on the Pebble Github account, and Stackoverflow’s Pebble section is also getting bigger.


Other Posts Based on this Office Hour:

Thomas Sarlandie is a mobile developer who has written some of the most popular french iOS apps such as LeMonde.fr and SNCF apps, and he has also written a book on iOS development before. Thomas currently works as a developer evangelist for Pebble.

Thomas SarlandieNeed Thomas’s help? Book a 1-on-1 session!


or join us as an expert mentor!

 



Author
Thomas Sarlandie
Thomas Sarlandie
@sarfata and github.com/sarfata - Connecting hardware to software! Developer Evangelist @Pebble
Hire the Author

Questions about this tutorial?  Get Live 1:1 help from JavaScript experts!
Johnny B. (Ionică Bizău)
Johnny B. (Ionică Bizău)
5.0
Full Stack, *nix user, Pianist, College Dropout, Vegetarian, Jesus follower
Hi! My name is Ionică Bizău. If you're having problems pronouncing it, you can simply call me Johnny (that's how "Ionică" is translated in...
Hire this Expert
Yuriy Linnyk
Yuriy Linnyk
5.0
15+ years, Full-stack Javascript Developer. I enjoy explaining basics patiently, or move to advanced topics in my expertise anytime.
[ Beginner discounts — read more... ] Web development is my life, since 2002. For over decade I'm excited to work on the full stack of web sites...
Hire this Expert

Or Become a Codementor!

Online javascript training course live
Online JavaScript Course
Master JavaScript in 4 Weeks
comments powered by Disqus
Online JavaScript Course
Master JavaScript in 4 Weeks