Winning on the Wrist
Building Pebble Apps
with more JavaScript than you’d think.
Slide 3
Slide 3 text
A Bit About Me
Product maker for the web & beyond
Front-end Development at Krate
Near extreme Disney Parks fan
Slide 4
Slide 4 text
Overview
• What’s a Pebble?
• The Idea
• The App in 3 Parts
• Looking Forward
• Wrap-Up
Slide 5
Slide 5 text
What’s a Pebble?
Slide 6
Slide 6 text
Pebble
• Smartwatch
• Cross-platform
• e-paper display
• not the first
• $10 million from Kickstarter
PebbleBot Icon
Slide 7
Slide 7 text
Technical Details
• Connects to phone through Bluetooth LE
• 144 x 169px Screen Size
• OS & Apps written in C
• Average battery life is 3 - 7 days
• 3D accelerometer, light sensor, compass
• 50 meter water resistance
Slide 8
Slide 8 text
–Walt Disney
“Times and conditions change so rapidly that we
must keep our aim constantly focused on the
future.”
Slide 9
Slide 9 text
The Idea
Slide 10
Slide 10 text
Disney Pal
The perfect companion for any
Disney Park vacation
Up-to-date park hours, wait times,
show reminders, and tips.
Get the most out of your trip with
all the info at your wrist.
WIP Logo
Slide 11
Slide 11 text
Disney Pal
The perfect companion for any
Disney Park vacation
Up-to-date park hours, wait times,
show reminders, and tips.
Get the most out of your trip with
all the info at your wrist.
Sample Screen
Slide 12
Slide 12 text
MVP
Watchface that shows the hours of operation for
the nearest Disney park
Slide 13
Slide 13 text
Watchface v. Watch App
• Responds to user interaction and
button presses
• Uses the system status bar at the top of
the display showing the time
• launched through the Pebble system menu
• Designed to run for long periods of time
• Displays full screen without the system
status bar
• Updates only once per minute or second
• Can’t interact with the user, except
through gestures and the accelerometer
Slide 14
Slide 14 text
–Walt Disney
“The way to get started is to quit talking and
begin doing.”
Slide 15
Slide 15 text
The App
in 3 Parts
Slide 16
Slide 16 text
Node.js App
JavaScript ‘Middleware’
Pebble C Interface
Slide 17
Slide 17 text
Node App
• Scrapes park hours from Disney sites serves them
through JSON API
• Built with hapi, cheerio, request, & aws-sdk
• Inspired by this article: http://scotch.io/tutorials/
javascript/scraping-the-web-with-node-js
Slide 18
Slide 18 text
https://github.com/HipsterBrown/Disney-Pal-Node
Slide 19
Slide 19 text
JavaScript Middleware
• Made available by Pebble SDK 2.0
• Runs in sandboxed JS runtime on phone’s Pebble app
• All about that Trace, no REPL
• Bundled with the .pbw binary
• Communication layer between the web & the watch
Slide 20
Slide 20 text
C Interface
• “Front-end” of the watch face
• Constructed of Windows with UI Layers
• Handles clicks, animations, and vibration interaction
• Changes based around Timer struct
• Not JavaScript
Slide 21
Slide 21 text
https://github.com/HipsterBrown/DisneyPal
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
–Walt Disney
“I always like to look on the optimistic side of life,
but I am realistic enough to know that life is a
complex matter.”
Slide 24
Slide 24 text
C Tips from a JS Dev
• Keep It Simple Stupid
• Always comment your code
• Stay modular
• Google the sh*t out of everything
• What goes on screen, must eventually come off it
Slide 25
Slide 25 text
Pebble.js
• Beta, experimental JavaScript lib for writing Pebble interfaces
• Announced at JSConf 2014
• Runs for every user interaction
• Use more power and respond slower to user interaction than a
similar native app
Slide 26
Slide 26 text
Looking Forward
Slide 27
Slide 27 text
Future Features
• Save parking spot location
• Fastpass & Entertainment reminders
• Wait times for current park attractions
• Suggested attractions & tips based on interests and time
• Directions to attractions
• Web app front-end for accounts & planning.
Slide 28
Slide 28 text
To Do
• Publish Disney Pal to Pebble App Store
• Iterate & Refine
• Share what I learn
• Work w/ Disney to make official app, instead of
being sued.
Slide 29
Slide 29 text
–Walt Disney
“It's kind of fun to do the impossible.”