Weight loss with Serveless architecture and the JAMstack

today we are talking about weight loss weight loss seems to be a pretty unlikely subject for a YouTube channel about web development but actually it doesn't have to be here's why most people use public accountability to help them in their weight loss journey imagine posting the weight on Twitter and then the next day you actually gained a little bit or you didn't post any weight your friends can either motivate you or make fun of you and to me that really helps so how does this relate to web development I've actually built a little PWA application in few GS that works with the jam stack but also that works with surfer dysfunctions so when I step on my Wi-Fi enabled scale in the morning automatically my website is updated so it shows the the extra weight point in the graph and then it tweets out into the world the difference between the last weigh-in so in this video I want to talk a little bit about my history with weight loss and after that I'll show you exactly how I built this application before we go into the technology I want to share with you a little bit of my weight loss journey just because it's a bit more personal I want to share this with people um so when I grew up I wasn't so fat I was actually just a bit bigger than most and I was a bit more bulky and stuff but not too bad my mom was a great cook and was able to keep me in check but to be honest my body wants to be fat it's it's happy place so then when I discovered the guitar and playing music live on stage my life changed I drank all the drinks I partied hard I played a lot of music I ate bad food I just let go and then come 2012 I was so fat that I was feeling sick all the time out of breath I'm not good high blood pressure the whole thing and then I had this amazing friend Chris Finch I'll link him down in the description that helped me out back in the day though I lost a ton of weight he showed me how to my body how to work with weights how to run everything and then it came time to move to Paris so I moved from Amsterdam to Paris and it was pretty happy with my weight and then one day the marathon affairs crossed our apartment and I saw it and was like this is it I'm going to run no matter that my body is bigger than most people I'm just gonna try to run this is my new challenge so I did that and I ran the marathon and I ran a bunch of half marathons and I trained my ass off picture day and then after that with a bit of personal issues family issues that I won't go into now I got more stressed I got a really good job but really busy and I just let go again and I didn't get as fat as I was not even close but I'm slowly getting a bit more fluffy so I realized I just have to do something about this because when I lost all that weight back in the day I actually said to myself I will never ever be heavier than 100 kilos anymore but now that I was 106 kilos that was not good it had to stop though that's where I built this fatty application that I spoke about in the intro of this video so without further ado let's get into how I built that application and what it entails to do that sort of thing all right let's have a look at that app that I've built it's called fatty because you know what I'm fat that's why we call it fatty that's all there is to it so as you can see on the screen it's a mobile application that also works on desktops and anywhere else because it's a progressive web app and it's a very simple app that shows a graph of my weight of where I am at that moment so if you want to see the app in real life go to fatty Timberlake's panel you'll find it there and so let's talk about how this actually works right so it is a few des PWA that actually updates itself with use of web hooks web hooks are one of the more important part here so I'm using few GS as your functions github API Netley file services and it's a PWA so in a simple form this is what's happening so I have a with things skill which is a Wi-Fi enabled skill so when I stand on it it will actually send the information that it just found to the Withings application server from there based on that information I update my Fatih application with the latest weight value so it can show you a lovely graph and then I tweet about that change in ways either stayed the same where it went up or down whatever but this is in simple terms what it is so let's dive deep to actually figure out how I did this now first of all that weighting scale is Wi-Fi connected actually when I stand on it and that information is sent out on receiving an information the way things API sends a web hook yeah it's basically calling a URL that you specify based on a certain event touch from computer to computer it just calls a URL and in this case I say go to my surfer 'less function on Asscher functions though call that function and we have a query parameter of my weight so what this thing is basically you can see the arrow saying sir furless once I step on that scale that's waiting the API sends a web hook to my surf Alice Asher function which is a very simple function that doesn't know about anything else on the web it just when it gets fired it hits it wakes up it does something and it goes to sleep again if I don't use it I don't pay for it great stuff but this is the equivalent of an Amazon lambda function now what this thing does it actually has a connection to the github API so basically it reads my repository for the fattie app it grabs the JSON file that has all the weight data historically that I have and it just adds the value that that web hook just gave it and does a git commit and a git push to my github repository now we move into the gem stack part of this talk what that means is all the information about my weight is actually in github it's actually not on some server anywhere so the cool part of this is now net leaf I can create my application and make a static app and publish it and all the information is only needed at the build step but it doesn't have to call anything or no api's or anything because it's all in the github repository so this is a really cool part of the gem stack setup that my data is is only dynamic once it builds it it can be a third party API or it can be local data creates a static application and publishes that to its CDN so in this case when the github repository gets a new change there's a web hook again nat leaf i says hey there's a change let me just rebuild this application so it just npm run a build and then in the distal der of my build there's my new application and it actually will redistribute that over the CDN and then the last part is my progress graph so once that application builds I actually created dynamically create an SVG file that shows my current weight in a nice graph just looks good and this I surf this through cloud Ameri as a PNG is I cannot use a share image on Facebook that's an SVG so I use the cloud an airy surface every day I step on the scale it's updated with the new PNG file so when I share this online on Twitter or whatever it's always the correct image that's shared of my current weight ok next step because we still haven't tweeted right we have only updated the the fatty app now though next actually once nullify has successfully deployed the application there's another web hook and that web book actually then sends information to the tweet progress function in Azure this is also a pretty simple function that doesn't need to know about anything it just needs to know Oh something called me let me now go to the github repository of the fatty application grab all the JSON data about that weight information historical weight information and then construct based on that information construct a funny tweet to send out because it has all information not just the latest weight it in actually say in the last four days Tim lost three kilograms or globally he lost five kilograms will he make it to his goal all that fun stuff so once he can grab that it uses a Twitter API to publish right and that tweet looks like this I call it fatty BOTS and it says yes dem lost a hundred grams since his last weigh-in two days ago and in total he lost blah blah blah so you can do a bunch of fun stuff now with this and of course because this is just a simple a sure function you can also have multiple Escher functions that then maybe publish to Facebook or LinkedIn or whatever you want you can do a whole bunch of stuff now because you can see all the items are connected with these web hooks alright so that's it for the technology so there you have it it wasn't actually dead hard to put together this application it is actually much harder to lose the weight the one part that I really struggled with actually was the Asher functions especially how their interface is set up and how everything works and stuff but once you get it it's actually really doable and so I kind of transitioned from being a front-end developer more into being a web development or more of a global few and if you see all those chunks in space as they are it's much easier to connect them all together and suddenly there's this vast array of cool applications you can now build and things like natla phi truly help you for now having stuff hosted for free adding the functions I'm having all these extra fun stuff is just super cool so thank you for watching and I hope to see you all in the next video bye [Music]