2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
0 likes428 views
This document summarizes a meetup for Fitbit developers in Singapore that covered an overview of the Fitbit SDK and web API. It discussed the standards-based SDK with JavaScript, SVG, and CSS for creating apps. It also covered the simulator, UI components, permissions, settings storage, resource files for multiple devices, the Gallery App Manager, and Fitbit's RESTful web API. Finally, it outlined next steps for developers including joining communities, creating local apps, and publishing to the Gallery App Manager.
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
- 1. Welcome to the 1st Fitbit developers Singapore meetup #made4fitbit
- 2. Frédéric Harper Senior Developer Evangelist @ Fitbit Fitbit SDK & Web API Overview @fharper Singapore Fitbit Developers - 2018-06-07 @fitbitdev
- 3. #made4fitbit
- 6. ● Standards based SDK with JavaScript, SVG & CSS ● Easily create apps from anywhere with Fitbit Studio ● Simulator available on macOS & Windows Developer Platform
- 7. <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
- 8. Tumbler, Checkbox Tile List, Combo buttons... UI components
- 9. .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; }
- 10. import document from "document"; var demo = document.getElementById("demo"); demo.text = "Demo Text"; JavaScript
- 13. ● Developers request permissions ● Users accept requests on install Permissions
- 14. ● Uses React JSX ● Make clock faces and apps configurable ● Prebuilt components for easy setup ● Persist data in settingsStorage ● Simple OAuth Settings
- 15. //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
- 16. //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
- 17. ● Our “App Store” ● Public & private apps ● Review process for public apps Gallery App Manager (GAM)
- 18. build a clock face demo
- 21. Fitbit Web API
- 22. ● Activity ● Body & Weight ● Devices ● Food Logging ● Friends REST APIs ● Heart Rate ● Sleep ● Subscriptions ● User
- 24. Next steps
- 25. 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
- 27. dev.fitbit.com
- 28. Have fun!