Download and display live market data from API | SwiftUI Crypto App #13

[Music] welcome back everyone i'm nick this is swiffle thinking and in the last video we set up our statistics view that we can now put statistic data onto the screen it's going to look really cool but we don't yet have that data and in this video we're going to create yet another api call that is going to go to the internet download some global market data for the entire cryptocurrency ecosystem we're going to take that decode it into a new model that we're going to create and then we're going to take that new data and put it in to our statistic view so we've got a lot to do in this video but a lot of what we're going to do is pretty much the same structure that we did when we were downloading uh the coin data in the coin data service and we were getting the coin models we're doing the same thing except this time with the global market data and we're back so in the last video guys we set up this home stats view here so we have four stats that we're going to put onto the screen and when we click the button we can see our fourth stat here we have a cool animation but of course we don't actually have the data yet and the reason we haven't added the data is is because we actually need to make a separate api call to get this data we can't actually get it from that same api call where we're getting our coins so we're going to start by taking a look at that api call and creating a model based off it so that we can convert the data returned into something that we can use in our app so i actually have the coin gecko website up here and again if this ever goes down i will post a replacement api but i've been using this for years and it has never gone down so i think it's pretty reliable even says reliable on their website and if we look down at the different apis that we get here again this is coingecko.com backslash en backslash api and then i went down to the explore api section the first api that we got for the coins was the backslash markets and we clicked on this we set up some of our custom data and how we wanted the api to come through and click to execute this time we're going to use a different url here so we're going to scroll down and i've gone through some of these i would definitely recommend it after we're done with this course to go look through some of these because there might be more data that you want to get into your app and there's a lot of really cool useful data that coingeco has and that's part of the reason why i chose to use this api for this course because this is just so beginner friendly but we're going to use this global api down here so it's backslash global and if i click on it there's actually no parameters that we need to set and we can just click try it out i can click execute and in this web portal that is so convenient we can see that the url we need is right here and then we can see the actual response that we're going to get back and the response is a lot of data so let's start by creating a model for this response so i'm going to go into our code i'm going to go to our model section let's right click create a new file it's going to be a swift file let's call this market data model click create and again i'm just using the word model here because i want to be explicit but normally this would just be called market data and before we type anything let's go back to that coin gecko website and i'm just going to copy and paste this url so we have it in our code i'll also include it in the caption below this video so you guys can have easy access to it so in here i'm just going to write a multi-line comment and we're just going to say the url colon i'll just paste in the url and then i'm going to add the json response colon let's go back into coingecko and i'm just going to copy and paste all right and now i'm going to copy this json response and i'm just going to go into our back into our file and paste it here we're actually going to we're not actually going to use this but i just want a reference to it in case some other developer comes into our app and like wants to look at this let's create a comment here let's just put uh json json data then let's fold up this code here just so that we have that in our app and while we have this response copied i'm going to jump into the app.quicktype.io and i should actually mention here that i will also post this model in the resources folder so if you don't want to go through all this you can just copy it from the resources folder but i'm going to paste our json data into this website here on the left side and this website is going to convert it into a super convenient swift struct alright so after we have this posted it's going to give us exactly the structure that we need to have in our app so these are the models that we need to decode this from json data into our app so i'm going to copy both of these and there's two here there's the welcome as well as the data class i'm going to go back into our code and i'm going to paste them let's get rid of these comments and let's actually just rename these so this struck down here i'm going to call market data model and so the initial struct is going to actually instead of be a type data class it's going to be of type market data model now let's rename this first struct here to maybe global data and the reason there's two structs here is because if we look at that json data it actually comes first as data and then within that data is all the additional information so we have first we have to decode to this data and then we have to decode all the extra info and that's why we have to first get global data and then from there we can get market data model which has all of this now this has some useful information but we're actually not going to use all this so i'm going to delete the stuff that we actually don't need and you can of course leave some of this in your app if you want to use like the active cryptocurrency the upcoming icos but we're not going to use it so let's delete these two lines here we're going to use the total market cap the total volume and the market cap percentage and we want to make sure that we get them so let's not let this be optional let's delete the question mark here we're going to also need the market cap percentage change so let's not make this optional either then we don't need the updated at so so our model is actually real relatively short it's just four items here and we're going to want to make both of these conform to codeable so we'll make this first one conform to codable and the and then and then we're gonna get an error message because um this market data is not conform to codable so we'll also update it here conform to codable and now finally we just need to make sure that these coding keys are exactly as they are in the json response so if i open this up the json response is data it's all lower case it's one word just says data let's fold this back up and that's exactly what this is it's lower case it's one word so this is all good but if i look into the total market cap and i open up our json data let's go to the total market cap here it's it's got these underscores in it it's not camel case so we need to create explicit coding keys for this so i'm going to copy this i'm going to fold the code back up and let's create coding keys in here so we'll create an enum call it coding keys it will conform to string and coding key open the brackets then we're going to create a case for each of these so we'll say case total market cap and we'll set it equal to the string of total market cap we'll say case and then we'll do total volume we'll do case market cap percentage and then case mark cap percentage 24 h usd let's also check the strings of these in our json response so total volume let's go let's find the total volume right here got an underscore in it so that will be equal to the total volume market cap percentage let's go back here market cap percentage and finally market cap percentage 24 hour usd we'll set this equal to here all right so our model is all set up and the last thing i want to do is actually get the usd values from some of these so if we look above here in our market in the returned response we have total market cap and then it gives us the market cap in a bunch of different currencies so we have it what the market cap is in terms of bitcoins we have what the map market cap is in terms of usd in terms of aud australian dollars and we have a whole bunch of currencies here gbp and basically we just want to display the usd in our app right now so so we're going to reference the total market cap that we get back and then we're going to find the first item in this array that has a key of a usd so hopefully this is what we would get in this response here so scrolling down i'm going to create some variables inside this struct let's create var we'll call it market cap it will be of type string and we'll open the brackets so we'll say if let item equals the total market cap and the total market cap is a dictionary with keys of strings and values of doubles so i'm going to say the dictionary.first where and then in here i'm going to click enter in this and this is for the key and the value and we want to return the first item where the key is equal to usd so we'll say if let and then we'll open the brackets so if this is true we get this item we're then going to get the value from that item and here we'll return the item dot value and we're going to do some formatting on this in a second so right now let's just convert it into a string with a backslash open close parenthesis and we'll pass in the item.value here if we can't get this item let's then just return a blank string all right and there's actually a quicker way to write this because we are learning to be expert developers here so instead we can do if let item equals total market cap we'll say dot first where and then instead of clicking enter here we're going to open the brackets and we're going to access the key by calling money sign 0 dot key and we're going to look for where the key is equal to usd and then we will open the brackets and if it is true we'll then return the item the item.value which we'll put in here and i'm going to delete this you can leave it here and use this instead if this makes more sense to you but this is the shorter more convenient way to actually write the same lines of code so i'm going to delete this so we have a market cap let's also do the volume so here we'll say var volume of type string open the brackets and we'll say if let item equals the total volume dot first where i'm going to do basically the same thing open the brackets money sign 0 dot key is equal to usd open the brackets here i'm going to return the exact same thing and if not we will return a blank string and the third thing we want to get here is um what we're going to call var we're going to call it btc bitcoin dominance it'll be of type string and we'll open the brackets and the bitcoin dominance is the market cap percentage that bitcoin has of the total market cap and if i scroll up here the market cap percentage is coming in here and we can see that bitcoin has 42 percent of the market cap right now so this time instead of looking for usd we're looking for bitcoin btc rather so going back down we're going to say if let item equals market cap percentage dot first where open the brackets money sign zero dot key is is equal to btc then we'll open the brackets and here we're going to return the item dot value dot as percent string because that 40 something percent is actually a percent and if we can't get it let's just return a blank string all right we're gonna have to do a little bit of formatting on this in a second on these values but let's just but before we do that let's move forward and just download some of this data into our app so we have our server class set up now i'm going to fold up the json data so this data is going to be used on the home view so the home view right now all the data for the home view is actually inside the home view model i'm going to go into the home view model here and when we went to get the coin data we created a coin data service and we did all of our download logic inside the coin data service so what we're going to do now is basically create another data service but this time it's going to be for the market data service so in my services i'm going to right click the folder create a new file this is going to be a swift file and we're going to call this market data service click create and i'm going to basically copy the same structure as the coin data service so i'm going to open that up in our coin data service and i'm going to copy the code from our coin data service and i'm going to paste it into our market data service let's change the name to market data service the value that we want to get here is not an array of coins but instead we want market data which will be of type uh market data model it's not an array it's just a type we're going to make it optional in case we don't have it yet and we'll set it equal to nil and this will be our market data subscription and instead of calling get coins we're going to call get data let's change the name of the function and now we need the url that we want to get the data from so we copied and pasted that a couple minutes ago into our model file so the json data i have it here again i will post this in the caption below so that you guys have it let's fold this back up let's go into our market data service and change out this url for our url sorry let's make it a string make sure it always says s for https apple actually requires it now so that it we're ensuring that we're on a secure url and then finally let's update our download function and this is why we made all of these networking managers and stuff before because our download function is so easy to duplicate and use multiple times throughout our app now so we're going to set the market data subscription equal to networkmanager.download url but this url is actually the data return from this url is actually not going to be an array of coin model it is going to be and it's not even going to be a market data model it's first going to be this global data so we have to convert it to global data and then from there we can get the market data model that's inside so we're going to decode to global data and then in our receive completion we'll handle the completion this will be returned global data and here we're going to set self dot market data equal to the returned global data dot data the data inside the global data is the market data model that we're looking for and then finally we're going to cancel our market data subscription and you can see now how this was so fast to create a new api into our app this literally took a couple minutes and if i wasn't explaining it and talking to you guys this would probably take like less than a minute to configure so this is why we are creating these networking managers and all these extra classes i hope you guys are getting the point here i do also want to point out that setting up multiple different services is just is just something that i felt would be a good architecture for this app there are definitely people out there that would argue that i could have put all of these data services into one because they're all going to the coin gecko api and i definitely thought about that but it just seemed like a little cleaner for like a beginner level video to separate out each of these apis that's why we have three different data services here let's now create this data service in our view model so i'm going to go back to our home view model and right now we have just a data service and since we're going to add another data service i want to change the name of this so i'm going to right click this and i'm going to refactor it let's rename it when we click this this is a really cool xcode feature it's going to find all the places in our app where we are referencing this data service and then i'm just going to type what we want it to be called so let's call this so let's actually call this coin data service click enter and below it let's create another we'll call private let market data service and we'll set it equal to market data service open close parentheses all right and then just like we did in the all coins where we are subscribing to the dataservice.altcoins we're going to create another subscriber here and this one work and this time we are going to subscribe to the market data service dot market data that's the value that's that variable that's going to be set after we download the data all right so when we get that market data it's going to publish here and then we can call sync and it's going to return us a market data model now in the last video we set up our statistics view and that's where we're going to put this data and our statistics view is connected to this statistics array so we actually need to map this market data model instead of just giving a market data model we want to convert it into an array of statistic model this way we can put the array directly into this variable here instead of calling sync let's first call that map and we're going to click enter on the transform this will be the market data model and we're going to make it return an array of statistic model and now we need to convert this market data model into an array of statistic model so let's start by just saying uh var stats of type array of statistic model we'll set it equal to a blank array at the very beginning the first thing i want to do is check that we actually have data coming through here because this is optional so i'll say guard let data equals a market data model again we can see that it is an optional right here and we'll say else so if there is no data coming back we will just return stats and this is just going to return a blank and empty array and get out of the function but if we do get this data let's convert it into some good stats so the first one is going to be the market cap so i have the final version up here on the right side and the first thing we're going to do is the market cap here so we'll say let market cap equals a statistic model open the parenthesis this one has title value and percentage the title here is going to be market cap the value will be the data dot market cap and percentage change is going to be the data dot percentage market cap percentage change 24 hour h usd let's then call stats.append the market cap let's say let volume equals statistic model equals statistic model this one does not have a percentage as we can see there's no percentage here so this will have a title of 24 h of volume the value will be the data dot volume we'll call stats dot append the volume and actually let's just append these at the end so instead let's call stats.append the contents of and we'll create an array here and then we're going to append our market cap our volume this way we just append them all at once so i'm going to delete this and delete this so we have our market cap our volume let bitcoin dominance eagles statistic model title will be btc dominance and the value will be the data dot bitcoin dominance let's add that into our stats here btc dominance and then finally the fourth thing is going to be our portfolio value so we will have let portfolio equals statistic model this will have title value and percentage the title will be portfolio value the value right now we don't have it so it's just going to be a money sign 0.00 the percentage change let's just put it as a zero we're going to update this later on in our code so let's take this portfolio and put it in to our list here and then finally let's just return the stats so we're converting our market data model into an array of statistic model and then we want to put that returned result back up in our statistics published variable up here so we're going to just call dot sync receive value we'll click enter here this will be returned stats to make it weak weak var or weak self and we'll say self dot statistics set it equal to the return stats and because we're doing this now we actually don't need this template data at the top here so i'm going to delete this fake data and just make it a blank array to start and finally this subscriber we need to dot store it in our cancelables all right i'm going to click run on the simulator because the version i have up here is the final version it's not our current version but let's run our current version now and and if we see this data we have actually downloaded from the internet it decoded it into a market data model and then put it into our statistics view but we can see that the data is pulling through and i kind of went quickly here because the structure is what we've done a couple times in this app already we have the market cap coming through we need to format this number of course we have a volume we can see the bitcoin dominance is 42 percent and we have our portfolio value which is obviously zero for right now this video is getting very long so i'm going to just wrap it up now um let's first make clean up this code so this map function i'm going to make it its own function just like we did up here for the filter coins so down at the bottom i'm going to create a private funk we'll say map global market data open close parentheses and open the brackets and we're going to pass in the output from our subscriber so the output from the publisher rather is the market data model that is optional so we'll pass in data of type mark market data model and it'll it'll be optional and we will return an array of statistic model i'm going to come up here and i'm going to copy all of our code from the statistic model down to the return stats let's paste it in our map global market data function and sorry the parameter here is actually the market data model and let's just put this into our into our combine code up there so let's instead call dot map and we'll call map global market data and i actually don't need to include this parameter so i'll just delete it let's get rid of our original map code here and now we have our nice short and uh really convenient uh subscriber here so i'm going to make a comment that this updates the market data click run one more time just to make sure it is still building we got our market data here and then the last thing i want to do in this video is actually just update the formatting for these numbers so they come out into like trillions and billions and not just like this because this is obviously not human readable so these values right now if i jump into the market data file so i'm going to jump i'm going to jump into the market data model these are actually going to be doubles when we get them so we're going to create an extension from double to convert it into a readable number so we already have a double extension in our app i'm going to go into the double file and down at the bottom this will actually create one more function and this is going to actually be the only function that i just paste into the code here and i'll let you guys copy it if you want also include this in the resources folder if you would like to just copy it yourself basically i found this function online i didn't write this myself i just edited it and customized it a little tiny bit but essentially as we can see in the documentation here it converts numbers into like a readable format so it converts a number uh one two three four five six into 123.45 k and it puts those values like the k the m the billion the trillion at the end of these numbers so it's super convenient this is something that i just went on google i typed in how to convert to numbers someone had this answer on stack overflow and it works like a charm so um i'm just going to leave this here for a second you guys can pause the video copy it into your code if you want otherwise you can just copy it from the resources file and now we're going to use this formatted with abbreviations to just convert our numbers quickly so going back into the market data model down here where we have our item.value i'm going to instead call item.value.formatted with abbreviations the market cap is actually going to be in usd so i'm going to actually add the dollar sign in front of it so we're going to use a dollar sign string and then say plus the formatted with abbreviations and it will just concatenate the two do the same thing down here this will be the money sign plus item dot value dot formatted with abbreviations we'll run the simulator one more time and hopefully our data is now formatted a little more friendly and it actually looks pretty good now we can see the market cap is 2.58 trillion the volume is 342 billion we're up about one percent market cap today bitcoin dominance is 42 and our portfolio is still at zero dollars of course because we have not set that up yet in our app so another really tough video today we created a market data model which actually took a little bit of time because we needed to get these custom coding keys in and then after we had this data model we created a market data service and in this market data service we are getting the data we're going to that url we're downloading it we're converting it we're decoding it to global data and then from the global data we're going to get the data that's inside which is actually market data we're appending the market data to this published variable inside our market data service so because this is published we can then subscribe to it from other places in our app so in our home review model we created a subscriber that subscribed to the data service dot market data so every time that got published on the last screen this is then going to update with that new data we are then mapping or transforming that data from market data into an array of statistics and the statistics is going into this statistics published variable and this statistics of course is connected to our home stats view which we set up in the last video where we are referencing the vm.statistics all right guys the app is coming together i hope you're staying with me i know some of this is pretty tough and pretty boring and i know so far we've pretty much only worked on this one screen but we have done a lot and we have written a really good code so i hope you guys are learning a lot here thank you guys for watching as always i'm nick this is swiffle thinking and i'll see you in the next video you

Channel: Swiftful Thinking

Views: 1,502

Keywords: SwiftUI crypto, SwiftUi download API, SwiftUI download combine, SwiftUI download with Combine, SwiftUI download from API, SwiftUI download with Codable, SwiftUI Codable, SwiftUI MVVM, SwiftUI MVVM with Codable, SwiftUI MVVM with Combine, MVVM, Codable, Combine, SwiftUI models, Swiftui make a Model, SwiftUI viewModel

Id: bLwUAe00jp8

Length: 31min 20sec (1880 seconds)

Published: Sun Jun 06 2021