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.

42044f1ee7508caca62666863ae793da?s=128

HipsterBrown

November 15, 2014
Tweet

Transcript

  1. HAPPY MOVEMBER

  2. Winning on the Wrist Building Pebble Apps with more JavaScript

    than you’d think.
  3. A Bit About Me Product maker for the web &

    beyond Front-end Development at Krate Near extreme Disney Parks fan
  4. Overview • What’s a Pebble? • The Idea • The

    App in 3 Parts • Looking Forward • Wrap-Up
  5. What’s a Pebble?

  6. Pebble • Smartwatch • Cross-platform • e-paper display • not

    the first • $10 million from Kickstarter PebbleBot Icon
  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
  8. –Walt Disney “Times and conditions change so rapidly that we

    must keep our aim constantly focused on the future.”
  9. The Idea

  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
  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
  12. MVP Watchface that shows the hours of operation for the

    nearest Disney park
  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
  14. –Walt Disney “The way to get started is to quit

    talking and begin doing.”
  15. The App in 3 Parts

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

  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
  18. https://github.com/HipsterBrown/Disney-Pal-Node

  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
  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
  21. https://github.com/HipsterBrown/DisneyPal

  22. None
  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.”
  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
  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
  26. Looking Forward

  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.
  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.
  29. –Walt Disney “It's kind of fun to do the impossible.”

  30. Wrap-Up

  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/
  32. New Pebble Docs

  33. –Walt Disney “I would rather entertain and hope that people

    learned something than educate people and hope they were entertained.”
  34. Thank You Nick - @hipsterbrown