Santa Tracker Developer Diary #8: Tracker

Key Takeaways

hey everyone it's Sam here on the last episode of the Santa Tracker developer diary for this year I want to talk about the tracker itself now this is what you see if you go to Santa tracker on the 24th or 25th as Santa is flying around the world delivering presents to all the good boys and girls now the tracker is made up of a couple of things it's made up of the map itself it's made up of the way we get data from the server to show where Santa is and we also want to reuse the map throughout the site which is pretty cool let's have a look so this is the tracker itself we can see Santa fly around the world here we can see where he currently is he's in San Francisco and you can see that he's not at any presents because this is actually a trial run we can see a few other things too like the weather and we also play some games down here so unlike the village which is very interactive we keep this simple and show the games in a card layout there's also a few secret games that aren't normally visible but are just made available for the tracker itself like this trivia game here we also have a few videos to watch down the bottom and a social feed so we fetch Santa's route in one of two ways based on whether you're on the android client or on the web obviously this is a series about web but on android we use the firebase remote config api which is actually really nice as it allows us to send down a JSON blob to clients and actually update that fairly rapidly that's really important because if Santa changes his route on the fly we can get a new version almost immediately we do something very similar on the web we've got an API server which is internal which kind of emulates the same thing than our case we pull that every minute or so and so this sync method here on the Santa service object actually does that work for us so this is called every minute or so and it requests our info object and so that returns things like the current status any upgrades that are acquired by the client let's say your site's out-of-date and then it also includes things like the route so we then use the route method here which builds on that data we already fetched and we fetch the data this route URL here as you can see we're actually storing at a local storage as well their routes quite large when it's not gzipped it's about 500k when it's gzipped it's much smaller but we still want to saw that in local storage rather than fetching it every time a user navigates back to the site and that JSON we store in firebase storage Santa uploads it there when a new is submitted so how do we then use that route so inside our new tracker scene as opposed to our old tracker as we've got some great naming right here we actually call the Santa sync method when sync happens and so that method if we can find it does a couple of things it basically takes the data that we have and does a few more updates there's a bit of a chain here as we can see so as a result of Santa's sync we update Santa's state which basically means placing Center on the map so that's really nice right you can say this is actually a really simple call here we say this Maps ant all that long equal started opposition which is the Santa's current position but actually what's really cool is while you always obviously see the map here with everything around all the you know little cards and stuff like that we can actually use this as a reasonable component which i think is really interesting let's look at this tracker demo page all this does is take a reusable tracker map element and places on the page here so of course that's not very interesting we don't know where Santa is we haven't hooked it up to the API but I think this is really cool because as someone who works in the web I can take this component and reuse it in a bunch of places on my side and in Santa tracker we do that we use the map obviously in the tracker itself but we also use a cut-down version of the map in our cast experience because chromecast is quite an underpowered device we don't want to do too much on that so we only want to show the map in Santa we don't want to show other information about the social feed or other videos or things like that so the way we can use this is so i've created a thing called map which is the object team and I can say map dot Santa lat/long equals let's pick a location I also seem to set map Santa heading equals let's say 120 so great this turns out to be the middle of the ocean but we can see that Santa is flying in a certain direction I can even turn them around this is quite cute and we love the idea that we can reuse this custom element anywhere in our site and this is something we get through polymer so while this is obviously a very simple example this tracker map here is very powerful and it allows us to wrap up a bunch of the behavior and a bunch of the stuff we want to do with Santa tracker every year like show the markers of where Sanders being and show his route line so every year Santa visits about 500 different cities around the world give or take however he is a bit magical and turns out he wants to deliver the presents to everybody no matter where you are what we actually do is take your geoip now GRP is pretty coarse it's only about city level detail but we use that to make sure center visit to your house no matter what so if you're up late in the 24th this year make sure you check out Santa tracker because said it might just be above your place thanks for watching this year have a happy holidays and I hope Santa's good to you see you next year you can subscribe to the google chrome developer channel down here we'll check out some other great videos along here [Music]