Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview

75 views

Published on

Fitbit SDK & Web API Overview

Published in: Technology
  • Be the first to comment

  • Be the first to like this

2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview

  1. 1. Welcome to the 1st Fitbit developers Singapore meetup #made4fitbit
  2. 2. Frédéric Harper Senior Developer Evangelist @ Fitbit Fitbit SDK & Web API Overview @fharper Singapore Fitbit Developers - 2018-06-07 @fitbitdev
  3. 3. #made4fitbit
  4. 4. Fitbit OS SDK
  5. 5. ● Standards based SDK with JavaScript, SVG & CSS ● Easily create apps from anywhere with Fitbit Studio ● Simulator available on macOS & Windows Developer Platform
  6. 6. <svg> <rect x="0" y="0" width="116" height="100%" fill="blue" /> <rect x="116" y="0" width="116" height="100%" fill="white" /> <rect x="232" y="0" width="116" height="100%" fill="red" /> </svg> SVG
  7. 7. Tumbler, Checkbox Tile List, Combo buttons... UI components
  8. 8. .screen { width: 100%; height: 100%; viewport-fill: lightblue; } .container { width: 60%; height: 60%; x: 20%; y: 20%; } CSS .inner { width: 100%; height: 100%; x: 0; y: 0; fill: red; }
  9. 9. import document from "document"; var demo = document.getElementById("demo"); demo.text = "Demo Text"; JavaScript
  10. 10. Platform Architecture
  11. 11. Platform Architecture
  12. 12. ● Developers request permissions ● Users accept requests on install Permissions
  13. 13. ● Uses React JSX ● Make clock faces and apps configurable ● Prebuilt components for easy setup ● Persist data in settingsStorage ● Simple OAuth Settings
  14. 14. //Resources like CSS, images or GUI files /resources/filename~SCREEN-RESOLUTION.ext //Specific /resources/styles~300x300.css /resources/styles~348x250.css //Fallback /resources/styles.css Multiple Devices Resource Files
  15. 15. //Device API import { me as device } from "device"; //Companion API import { device } from "peer"; //Backward compatibility if (!device.screen) device.screen = { width: 348, height: 250 }; Multiple Devices
  16. 16. ● Our “App Store” ● Public & private apps ● Review process for public apps Gallery App Manager (GAM)
  17. 17. build a clock face demo
  18. 18. Clock face Development Station
  19. 19. Fitbit Web API
  20. 20. ● Activity ● Body & Weight ● Devices ● Food Logging ● Friends REST APIs ● Heart Rate ● Sleep ● Subscriptions ● User
  21. 21. { "Activities":[ { "activityId":51007, "activityParentId":90019, "Calories":230, "Description":"7mph", "Distance":2.04, "Duration":1097053, "hasStartTime":true, "isFavorite":true, ... JSON
  22. 22. Next steps
  23. 23. 1. Join the Discord community, follow us on Twitter... 2. Create a free Fitbit account 3. Use a Fitbit OS device, or use the simulator 4. Create local apps and clock faces 5. Publish your masterpiece in GAM 6. Share your hard work on Twitter using #made4fitbit be part of the community
  24. 24. be a local ambassador
  25. 25. dev.fitbit.com
  26. 26. Have fun!
  27. 27. Frédéric Harper fharper@fitbit.com dev.fitbit.com outofcomfortzone.net

×