La montre connectée Pebble Time qui est la petite soeur de la Pebble première du nom peut être commandée depuis quelques semaines. Une des particularités de cette montre est qu’elle possède un SDK javascript, il est certes moins complet que la version C qui permet d’écrire des programmes beaucoup plus puissants. De plus tout a été pensé pour faciliter la vie des développeurs, nous allons voir comment en quelques heures nous avons réalisé et publié sur le store Pebble une application fonctionnelle.

Le seul pré-requis est d’avoir des bases en JS, pour le reste pas besoin d’IDE pour coder, n’y de montre pour tester, tout a été mis à disposition sur le Cloud.

Rendez-vous à cette adresse il vous faudra créer un compte et créer un nouveau projet. Dans la pop-in de création, il faut renseigner le nom du projet et choisir pebble.js (beta) pour le type de projet. Ensuite cela va ouvrir dans le navigateur l’éditeur de texte en ligne avec un exemple de code que l’on peut voir en cliquant sur app.js pour afficher le code source contenu dans ce fichier.

Sans plus attendre nous allons appuyer sur le bouton qui permet de compiler le code et de lancer la machine virtuelle pour avoir un aperçu du rendu de l’application (le bouton vert avec une flèche blanche). Une fois compiler l’aperçu s’affiche en haut a gauche et nous pouvons jouer avec les boutons, à gauche il y a le bouton retour,  à droite le bouton haut (Up), milieu (Select) et bas (Down).

Concrètement que permet le SDK javascript de la pebble ?

La documentation en ligne est très bien faite et super simple a utiliser, voici les composants mit a disposition :

• Clock (pour travailler avec l’horloge de la montre)
• Settings (pour faire de la configuration)
• Ui (contient les interfaces misent à disposition)
• Accel (permet d’utiliser l’accéléromètre de la montre)
• Window (pour créer des blocs de contenu)
• Card (qui est une version simplifiée de window)
• Menu (pour utiliser le menu latéral de base)
• Element (ce sont les éléments de base, il y en a 4 : Circle, Image, Rect et Text)
• Vibe (pour déclencher des vibrations)
• Light (pour régler le rétro-éclairage de la montre)
• Timeline (pour que l’application puisse être lancé depuis la Timeline)
• Wakeup (permet de programmer des réveils)
• Ajax (pour faire des appel HTTP)

Les exemples dans la documentation sont très parlant, cela ressemble à du jQuery il n’est pas nécessaire de rentrer dans les détails pour cette introduction au développement d’application Pebble.

Résultat

Pour notre exemple nous avons fait un compteur de point qui permet de sélectionner un nombre de joueurs, un nombre de départ que nous pouvons augmenter / diminuer pour chaque joueur, nous avons aussi utilisé l’élément Menu pour afficher le menu latérale qui permet de remettre les scores au nombre de départ ou de recommencer un compteur. les sources sont disponible sur github et le code que nous avons écrit se trouve dans ce fichier.
On notera qu’il y a peu de code, en effet il nous aura fallut environ 3h pour coder, déployer l’application sur une vrai montre de test (toujours depuis le cloud pebble dans l’onglet compilation) et la mettre sur le store pebble.

Voici a quoi ressemble notre belle application pebble Time !