hello everybody all very welcome to another tumble tutorial this time we're gonna add a leaderboard to our app so for this one we're going to use the cloud stitch component and my assumption is that you've already set up a clan stitch account when you open up your cloud stitch homepage you're gonna create a new widget I'm gonna call mine leaderboard and this is gonna just take a couple of seconds to generate the project which we can then go and edit in Microsoft Excel or Google sheets in this case what we want to do here is make sure we've made a note of our API endpoint so that's how we're gonna upload and download data to and from Google sheets when we're ready then we can edit this data so I've just added in couple of names here Alice and Bob and um under the player heading and we've made up a couple of numbers as well for the score rather than try and do everything on one sheet it's gonna make our lives a little bit easier if we actually include a second sheet here as well so on g2 I've got the same titles I've got player and if that's score and what we're gonna do is use a function called sort and this sort function takes three pieces of information.
First of all we need to know the range that we're sorting so that's all of the information on sheet 1 we're going to start at a 2 rather than a 1 because we don't want to include the titles for the columns then the second piece of information we want is to because we want everything to be sorted according to the second column that's the scores if you wanted people sorted alphabetically then I guess we just used one and finally what we'll do is we will set is ascending to false so this means it goes in descending so from the largest to the smallest testing is that now by putting in another name let's put in charity let's give a hundred points here jump back into sheet 2.
We can see automatically update it so we want to synchronize our data it's important to hit that Queen button and then we're gonna go and we're gonna open up Tonka boom and create a new project this account I'm gonna call this app leaderboard to hold see a leaderboard application and we're gonna start off just to test this edge again same idea as usual let's build a proof of concept let's pop in a label and a button to visualize our results and in experiment we'll find the spreadsheet component now since we have sheet 1 and XI 2 I'm going to add in two of these components the endpoints will be the same well spread g2 is going to link to sheet 2 spreadsheet 1 is going to link to sheep 1 at the end then when we put in the API endpoint don't forget to add it here that question mark dead is equal to true that allows us to use like real time uploading in general there as close to real time because we can when we're happy then with that let's open up our blocks and let's start by getting some of this information from sheet to remember she too is our sorted so the first thing first move.
I made here was to go get all my dad and I should spreadsheet one and then you want to figure out what I get when you get the information back that's the after getting data avenge here so we're gonna show all of that response content in our label that's the text property now give me a second here and I finally realized that this should be spreadsheet two rather than one or more or less ready to test this out then just to see what the results look like so to make it easier video I've got a little emulator here willing in the background or a screencast rather I'm running in the background when we take on button one we can see that this returns essentially just some JSON data so we've got all the information we want there and with the players and the scores you know written about this recently and so we're gonna go into the connectivity section we're gonna add in a web component and this is actually gonna allow us to convert that JSON data into a regular tongue Keable list so using this JSON text a code block from the web component now when we click our button we're gonna be able to see a regular old a plain old list now it's played around with this for a little bit and I eventually came to the conclusion then that I was gonna put all of this information into into its own lists so we're gonna use three lists first one then is going to be just for all of the information I think the list of the results I think an empty list there so when we get back our data the decoder you can convert it into a list and then what we can do which yeah we could just cycle through if we wanted that list and we could ride a wooden item at a time to the to the labels the first thing we'll do first movie like is clear out the label in case there's anything already in it and then what we'll do is we'll.
Add in one item at a time separated by a new line once we're happy with that then we're gonna add in the extra two lists that we're gonna have a list for all of the players and we're gonna have a list for all of their scores first one every crate is a list of players and then we can use the column names from our spreadsheet those blocks staying so there's list of one and list two once we're happy with that then what we'll do is we'll set the list of players to be and players and then we'll set the list of scores to be scores so all you do is just use a piece of text just conventional string of text type in that column title from your spreadsheet - player and the second column was titled score and we could probably just loop through these again so we can look through the list of players and you can duplicate all this loop through our list of scores and if we take a look here this isn't quite what we want in fact we only get the very last score here I think yeah so it just shows us a 10 obviously what we need to do is we need to join it on to the previous text so if we go in here back to our text blocks we're just missing a tiny little bit of information we need to include the existing text from label one and we also need to include yeah and in both the blocks.
let's say so see if we can find label and text somewhere there it is click on this we'll add in string to the top of this join block push the old text and one new item at a time then the old text and add in one new item then I'm sure that hopefully then this should display everything in one label and that looks good to me so it's all in the right order it's not alphabetical it's sorted by scores and once once we're kind of confident then that we know how to get that information from cloud stitch how to display it in our app then we can start tidying up the user interface so I think the best way to go here is to have one label for the player names and then a label just horizontally beside us so that's why we're using the horizontal arrangement and that's going to display all of their scores so everything as we know is already sorted from Google sheets that's gonna make everything much much easier on us now in in the app essentially Google sheets is doing all the all the really hard work for us you can take a little.
Time here play around with that font sizes and the spaces and the alignment and stuff I tried it over on the right hand side first and it didn't do what I wanted to do first of all and it also didn't look you know I wasn't happy with how it looked so if we go back into our blocks here we just have to change that to label to exchange you only want to label two as well and not forgetting there to clear that label 1 and label to each time so still have one small change to make it how much include all the scores that should be label 2 as well okay let's give that a quick test that looks much better in terms of information anyway at least we've got the right people in the right order with the right values matching up side by side finally that's a label thing to do then we go back and choose the colors for the fonts that you want and align them whatever way you want that's completely up to you then in the design side of things but now what we've done is we've kind of figured out how to work with the cloud stitch component and how to get information that's already sorted into our app so that's a huge huge time-saver for us it means that we can add this kind of thing into a game we can add it into anything.
At all that you sort of leaderboard and in the next video then what we're gonna do is look at how to actually push so using that especially one component how to push data to our spreadsheet so there we go everything nicely center-aligned there little bit cloaks maybe as well so I'm gonna go back pop in a just a horizontal arrangement in here could be anything could be a label let's say and I'm just gonna set the width here to 5 pixels 5 or 10 pixel so there's a tiny bit of padding just a little bit of breathing space between the data now if we look at this there we go that's all the information we want and I hope you liked the video and change around the audio setup so hopefully it sounds a little better don't forget to Like and subscribe and I will see everybody in the next Post.
0 Comments