Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Winning on the Wrist

Winning on the Wrist

Originally presented at ManhattanJS:

Building Pebble Apps with more JavaScript than you’d think. Going from idea to the app store when developing for the Pebble.

HipsterBrown

November 15, 2014
Tweet

More Decks by HipsterBrown

Other Decks in Technology

Transcript

  1. HAPPY
    MOVEMBER

    View Slide

  2. Winning on the Wrist
    Building Pebble Apps
    with more JavaScript than you’d think.

    View Slide

  3. A Bit About Me
    Product maker for the web & beyond
    Front-end Development at Krate
    Near extreme Disney Parks fan

    View Slide

  4. Overview
    • What’s a Pebble?
    • The Idea
    • The App in 3 Parts
    • Looking Forward
    • Wrap-Up

    View Slide

  5. What’s a Pebble?

    View Slide

  6. Pebble
    • Smartwatch
    • Cross-platform
    • e-paper display
    • not the first
    • $10 million from Kickstarter
    PebbleBot Icon

    View Slide

  7. 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

    View Slide

  8. –Walt Disney
    “Times and conditions change so rapidly that we
    must keep our aim constantly focused on the
    future.”

    View Slide

  9. The Idea

    View Slide

  10. 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

    View Slide

  11. 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

    View Slide

  12. MVP
    Watchface that shows the hours of operation for
    the nearest Disney park

    View Slide

  13. 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

    View Slide

  14. –Walt Disney
    “The way to get started is to quit talking and
    begin doing.”

    View Slide

  15. The App
    in 3 Parts

    View Slide

  16. Node.js App
    JavaScript ‘Middleware’
    Pebble C Interface

    View Slide

  17. 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

    View Slide

  18. https://github.com/HipsterBrown/Disney-Pal-Node

    View Slide

  19. 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

    View Slide

  20. 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

    View Slide

  21. https://github.com/HipsterBrown/DisneyPal

    View Slide

  22. View Slide

  23. –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.”

    View Slide

  24. 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

    View Slide

  25. 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

    View Slide

  26. Looking Forward

    View Slide

  27. 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.

    View Slide

  28. 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.

    View Slide

  29. –Walt Disney
    “It's kind of fun to do the impossible.”

    View Slide

  30. Wrap-Up

    View Slide

  31. Resources
    • Pebble Developer Website - https://
    developer.getpebble.com/
    • Pebble Watch Development with JavaScript -http://
    www.sitepoint.com/pebble-watch-development-javascript/
    • Pebble SDk 2.0 Tutorials - http://ninedof.wordpress.com/
    pebble-sdk-tutorial/
    • Pebble Shop - $99 - https://getpebble.com/

    View Slide

  32. New Pebble Docs

    View Slide

  33. –Walt Disney
    “I would rather entertain and hope that people
    learned something than educate people and
    hope they were entertained.”

    View Slide

  34. Thank You
    Nick - @hipsterbrown

    View Slide