 So today, my topic of the talk will be on figuring out the Fitbit SDK. So, before I start my talk, let me introduce myself, I'm Brandon. You can find me on GitHub, Brandon Yeo. I'm a Rubyist. I know this is talk.js, but then I'm a Rubyist. Mainly... Something is happening here today. Not to get fight started, I'm more of a Vim user than an Emacs user. Ya, I hear somebody like... Emacs, why not Emacs? Okay, I jam a lot, although you can't tell. And I love the PlayStation. I just got a PS4, I play Ex Machina in between times man. I want to do my side project, but I want to actually level up in Ex Machina. So, haven't gotten down to actually complete a lot of my side projects because I've been doing a lot of PlayStation gaming. So, today I'll be talking about what I've been doing with the Fitbit SDK. So, the Fitbit SDK is actually the thing that powers the Fitbit OS. It's on the Ionic and the Versa. To actually use, to create an app using the Fitbit SDK, you just use JavaScript, SVG and CSS. It supports ES6, which is fantastic because I can write my promises. I want to actually rewrite my app into TypeScript, to be honest, but I'll tell you why I can't do that later. It's actually powered by the JerryScript engine. So, the JerryScript engine allows for JavaScript apps to be run on embedded devices, like very small microprocessors. And the one rule of the Fitbit apps on the Fitbit OS is that apps has to be 10 megabytes in size. So, if you want to throw fancy image, actually you can't do fancy image because it's just small of a screen. So, there's not much you can do with it. So, the app that I was actually trying to make using the Fitbit SDK is I can't think of a very nice name. Parking.sg is being used already. So, if I would use Parking.sg, it's like, oh, my app is Parking.sg. Oh, you mean the app that you used to pay your parking with? No. Carpal.sg. I can't think of a better name than that. So, if anybody has a better name, let me know. So, it's based on the BART demo app from Fitbit. So, the BART is the MRT for San Francisco, but with the BART app, you can tell when is the next train arrival time. So, I adapted my app to tell where how many parking lots are there based on the parking lots I selected. So, the data is actually from data.sg.sg. And currently, I've only designed my app to be working on the Fitbit Ionic because it's the only device I have. My girlfriend has the Versa, but I'll just concentrate at one device at a time because it's quite a challenging platform. So, the app structure for a Fitbit app, a typical Fitbit app is you have the app folder which has the application and presentation logic. Then you have the companion folder where all the downloading of data from the internet and stuff gets done. I haven't used the common directory yet because I haven't abstracted much logic to create like ES6 modules yet. So, I have left out the common directory for my app. Index GUI, widgets GUI are all SVG files which enables you to design your app, the outlook and stuff. Settings is something which I've just added to my own app so that I can actually customize what parking, what car parks to have. And package.json is the project config like should it be targeted to the Ionic or the Versa languages what other translations are there it's all in the project config. So, let me demo my app. So, all the pains I have when I work with the Fitbit Studio so the only way I can actually deliver my app is through the Fitbit Studio. And herein is the problem. When the internet connection is off right I lose my I can't even code So, in the app directory you can see I have the index.js which loads the parking GUI and the car park GUI is it actually I think of it as like a view model because I use knockout.js so it associates like the car park list the car park text to the UI itself. So, so far I've only loaded like 3 car parks because I realized that if I were to load more I don't know how to scroll for now I'll just keep it at 3. And one of the main problems that I actually experience when developing with the Fitbit SDK is so there's this one interesting thing that I did let me see if I can find the loop over here so usually if I put like if there's a syntax error like this there'll be a problem in the in the console that tells you this is not allowed but I can still build this and I can still run it I'm not going to build and run this now because if I build and run this now I'm not sure if the internet connection goes off but all my changes will be gone so anyway so what happens is when I was actually programming the app I realized that when I ran the app it kept telling me call stack exceeded I'm like where is the problem it's like I'm also a coffee script user so I'm so spoiled by coffee script I don't bother reading all the curly brackets so I'm like where's the problem where is it I can't tell but I had to look through all the files including companion UI and stuff like that to actually find the problem so it's very limited in this way the Fitbit SDK so just bring you through the stuff that I've done so far so I've hard coded the URL I know I shouldn't do that but for now it works and I would really want to do TypeScript with this because currently the logstock app is using pure javascript if I use TypeScript I could probably avoid some of the problems that I face while like the call stack error and all that I don't know but so I run this I know I can run it on my watch as well if I run it on my watch, nobody can see it so hopefully it runs it's still building oh I just build it I just run it again so the nice thing about the Fitbit SDK is that when it comes to settings it's using JSX so coming from Ruby, knockout.js perspective I find that this is something that is a start maybe it's a step towards like react I think and it's still loading, doesn't run never mind maybe I can just prove on while this is still building alright so death challenges as I emphasized earlier so there's no CLI so whenever I build an app I cannot go to the terminal and type Fitbit SDK and then project name then BAM there's no version control but of course being a Git user I'm not going to save version 1, version 2, version 3 version 3.1 so this is one of the problems I face while developing so I have a tendency to because I use low dash a lot in my work so I tend to have the tendency to I need to do a map so I do underscore dot map and then I realize that I can't install a library so I have to go to MDN and then find how to do maps and all that no test framework support that comes to the Fitbit SDK as it is right now remember earlier on I mentioned that I want to run it on TypeScript I don't dare to refactor anything because I'm too there's no way for me to actually do any unit testing so yeah but these are the solutions I've actually come up with so unintubative IDE, the first three problems no CLI, no version control what I do is that I export the whole project which the Fitbit studio allows me to do I can export the whole project I export the whole project I edit and lint it in Vim and then I do a git commit and then I commit it to GitHub to make sure that they know I have a version control no libraries so that means I can't do it's odd, it's even, it's number yeah I have to do it the plain old javascript way so MDN is love for the Fitbit SDK no test framework support yeah so to solve that I have to do like manual testing so this means building the app running it on my Fitbit if it doesn't work then try again and again so it's kind of painful on the Fitbit front and on the app front I've also faced a few challenges as well so the first of which is small screen and on the data side data.gov.sg they use the SVG21 format for all their car parts and Fitbit uses a lat and long format so take for example the York Hill Car Park somewhere in Ultron Park this is the coordinate that I need to match on the Fitbit side but this is the data I get from data.gov.sg so yeah it's pretty iffy over there so what I need to do is for the small screen is adhere to the user interface guide so stick to the best practices look at the sample apps try not to squeeze everything into one small screen and try to optimize the use of that small screen by following the guide so that's something I learned while developing the app for for the lat, long and XY conversion what I plan to do for my app is to actually pre-convert all the coordinates of 1861 car parks and then pre-store it into the app itself I mean, I don't think the 1861 car parks would take up all 10 megabytes but I'll just keep my fingers crossed and hope it will work well so as I mentioned, there are some things I have yet to do for my app like loading all the 1861 car parks using the location API I only managed to use the companion API to retrieve data because how the Fitbit works is that it doesn't actually have a direct internet connection to your Wi-Fi it has to go through your phone to retrieve the data to actually load the data so the next step will be to also use the location API to actually find the 3 nearest car park that's the next step for my app and in addition to that if you saw the screenshot of the app earlier, you see I only have the code of the car park like HLM, what does that mean that's actually Hong Lim Park but you won't know so I think the next thing I should do for my app is to select the car park and see okay, this is Hong Lim Park what's the rate so on and so forth I've published my app to the Fitbit app gallery I tried it once but I don't have an icon so if somebody can design an icon for me, that would be fantastic ya because if not, I'm just going to use the default icon that you see on the parking signs and being a test driven developer I really want write test so I've got to find a way to actually mock maybe all the Fitbit modules so that I can actually at least get some tests up and refactor my code so that it looks readable and something I can maintain so that's it for me, thank you any questions? oh, the build I don't think it's happening so ya what? oh ya, I add the plus plus but it's not working, I don't know ya ya we have time for a couple of questions ya, you can ask me anything about the Fitbit SDK and yes but this sounds quite K2 and it wasn't writing just a mobile website I mean ya, writing a mobile website would be easier but I'm driving, I can't use my phone while I drive so the traffic police isn't here but then a way to get around the mobile phone regulations is to check the parking lots on my watch so ya if I reduce it to 2 carpups that's another UI problem altogether ya so I only have one I only have one stand for my for my phone at the moment and it's mostly on Google Maps so ya but maybe if Google Maps introduce the feature then it won't have to be on my watch but I did this project mainly to challenge myself to find out how I can actually build javascript embedded stuff on a watch limitations ya and any other questions? when you install an app you can actually select there are some apps they will usually ask you for location permissions and all that so ya any other question? any Fitbit users ya ya ya ya 2 ya 2 ok ok terima kasih