Download coin details by creating a data model, view model, and API request | SwiftUI Crypto App #19

[Music] welcome back everyone i'm nick this is swiffle thinking in the last video we set up our navigation to our detail view so now we can go to that detail view but there's some extra detailed information that we actually want on all these coins that we do not yet have in our application so what we're going to do in this video is create yet another api call that we're gonna call when we initialize this detail view and just like we did for the coin data service the market data service we're gonna again create a model we're gonna create a service and that service is gonna manage all of the logic for downloading from the internet so you guys should now be getting used to the structure of our app and all the layers that we have the only thing to really notice here is that we are making this api call when we go to the detail view and that's because when we're on the home view we don't want to be making all these extra api calls to download this extra information unless we are going to the detail view because if we're not going to the detail view we don't need this data we don't need this extra api call and that's just yet another way we're making our app as efficient as possible all right welcome back everyone i am back in our xcode project of course and i have a current app built in my simulator on the right here and in the last video we added some awesome navigation that was super efficient to our app so that we can click on any of these rows and go to a detail view and we already have a lot of information for each of our coins because if we look in our coin model there's a lot of data that we're actually getting in our initial api request right this is uh a lot of good stuff but one of the things that i noticed is not here is a description of this coin um there is no description saying like what unit swap or whatever coin we're clicked on is so i went and looked at the coin gecko api and i'm gonna i have it up here so again this is the coingecko.com backslash english api and then i clicked on the explore part of the api i will again link this website in the caption below and if we go down to the actual apis there is another api that we can look at and it's the coins id and it has this little brackets here because when we call this coin's id we actually have to input what coin we want to fetch in this request so unlike the last request where we called the markets and it just was a generic get whatever the markets were here in this request we have to actually call a specific id and if we look down here we can try it out and i will put in the the id for bitcoin which is just bitcoin and then we can customize this api request a little bit but before we do that let's just execute and see what the default gives us and i was shocked the first time i did this first off we can see the url that we need to request here which is pretty simple just has the the coin id at the end but there is and you can see how based on like the size of this uh scrolling indicator how long this response is it is huge um and so basically there is a ton of data that we can get for each of these coins and it's amazing that we can get this much data um from a free api honestly this is more than we would ever need of course but at the top here this big block of text is the main thing that i was looking for and it is a description of what this coin is and that would definitely be a great user experience to be able to put a description into our app along with some of the statistics that we already have so in our app when we go to this screen and this screen is the detail view the detail view is going to have its own view model and we're going to initialize the view model when we initialize this screen and in the initializer we're going to make an api call to download this extra information for that coin and we're doing it in that initializer so that we only download this extra information when we go to this screen because we don't want to download all this extra information if we don't need it if the user is not clicking on that screen we don't need to download this so scrolling back up here i'm going to customize this a little bit and we just want the very basic stuff so for the localization this is basically like do we need do we want all of the different languages um so like bitcoin in all these different languages in japanese but for my app i'm just going to say false because i only need the english version and it's the same thing for basically all of these i only need the basic information so these are all defaulted to true i'm just going to turn them off to false you can definitely play around with this on your own time and get some extra cool information that you might want to put into the app and then the sparkline we're already getting the sparkline when we're calling the first request in our markets request so since we're getting it there we don't need it again here so we'll also make this false and when we execute this the response now is a little bit more condensed a little bit more doable just ends right here so this is what we are going to use in our app and to decode this we're going to need to make a model so let's go back into our app and our models of course go in the models folder so i'm going to right click it create a new file it's going to be a swift file and i'm going to call this coin detail model click create i'm going to put it right below our coin model and let's copy and let's first copy the url that we need to call i like to just put this data into that model file so i'm going to make a multi-line comment i'm going to put url colon and paste in the url up here let's put a comment json data and below this let's put the response and let's go back in and just copy this response i'm going to hold the shift button click down to here copy that and just paste it here now we're not going to actually need this right now so let's fold it up command shift left arrow fold up that data and i'm going to take this response and again go into that website called uh app.quicktype.io that we've been using and you guys should be used to this process by now i'm gonna delete the last thing that we decoded here let's delete all this and let's put in our new json data and immediately it's going to give us the swift version of that data so i'm going to keep plane types only checked and i'm going to make all the properties optional because uh if there's a chance that we ever don't get one of these it's not crucial to running our app so it's okay to me if it is optional and again i'm going to put this file in the resources folder so if you don't want to deal with all of this you can just copy it out of the resources folder of course but for now i'm going to click this copy code on the right side here and i'm going to go back into our file and then paste it all and let's make this full screen quickly and although we can get all this i actually don't need a lot of this data so i'm going to clean this up a little bit uh the id symbol name that can't hurt let's keep that we don't need this platform platform id and because we don't need these platforms we also don't need the platforms type so down here there's like a platforms type i'm going to delete that and then i'm going to delete platform id and platforms the block time might be cool to get the hashing algorithm could be cool as well as the categories public notice this is already null let's just get rid of it additional notice additional notices let's get rid of that as well let's see what else here link sounds good description sounds like we need that image we already have the image and then country of origin we don't need genesis date we already have the market cap rank we don't need the coin gecko score public interest score we don't need status updates or the last updated so let's just delete all of that and let's see we deleted the image so we don't need this image down here let's see let's see for the links um let's do the home page the blockchain site we don't really need chat url announcement url um maybe the subreddit url let's keep that one and maybe let's actually delete the repos url as well uh you can obviously customize this if you want to change this on your app the public intro stats we deleted so we can get rid of that and then the let's just get rid of these extra marks all right i'm going to delete this welcome message that was generated as well as foundation cleaning up our code here and we're going to call this struct the coin detail model all right i'm going to take a little quick look at our json data that we're getting here uh and just make sure we have the right codable names so id symbol name are all one word and lowercase and that's what we have here block time in minutes uh let's see what that looks like block time in minutes we have this underscore so we actually need to customize the coding keys so let's go back down here and let's create our enum we'll call it coding keys and it will be of type string and coding key open the brackets uh we'll do case id symbol name those are all perfect we'll do case block time in minutes let me just uh let's paste what we have from above and we'll do block time in minutes equals that let's look at the hashing algorithm so back up here hashing algorithm we got to customize that one as well case let's set it equal to the hashing algorithm you guys should hopefully be used to this by now i would assume so this is like the third or fourth model we've made in this video in this course um the categories i'm guessing it's one word in lowercase so we're probably fine there categories perfect cryptocurrency here that's not very relevant so maybe we don't need the categories yeah let's actually delete the categories we don't need that welcome description so let's look at the description quick and it is um i guess they called it welcome description i think that was just something to do with the uh the website that we used to decode the json data but it's actually called description when it's coming through so let's change that to description so welcome description is actually just description and then links are probably just links links and then we got a home page as well as subreddit url so we need to update the subreddit url so we will then change the so links is right but subreddit url is wrong so here we need to create coding keys for the links struct as well so we'll do enum coding keys string coding key open brackets case home page and case and we'll put the subreddit url equal to that all right last thing we got to do of course is conform these to codable codable and codable all right and the coin detail model does not conform decodable so we must have missed something so we have hashing algorithm oh and we don't we got to put the description the description is just as it is and so is the links so let's just put it here description links cool so now let's create our view model download some data and try to convert it see if it works so our detail view right now is pretty plain just has a coin um let's in our view model let's right click and create a new file it's going to be a swift file and let's call this detail view model click create class we'll call it detail view model we'll open the brackets and now just like our home view model so if i go to the home view model um the home view model has a reference to the coin data service so that's what we're going to need to set up first we're going to set up the coin data service except it's going to be the coin detail data service so and then if you remember correctly in the coin data service we do the api call so let's right click our services create a new file a swift file we'll call it coin detail data service click create i want you guys to notice that we're using like the same structure and format of how we name everything and we're doing that on purpose because that keeps everything organized and neat in your app in our coin data service we're just going to basically copy that and paste in our coin detail because i just want to use the same structure of course so let's call this one coin detail data service let's create a function let's call this get coin details let's call that function and now we need our url so i copy and paste that into our model at the top here i have the url i'm going to copy this and we'll just fold this back up jump back in and i'm going to paste the let's url paste the string of the url inside this and we have our new url here it's kind of annoying that it's so long it doesn't just fit on one line can i fit it on one line yeah cool um so the only thing we need to point out in this url is that uh we need to put the coin id right here because if i scroll back to the website as you see here we had to put in the id when we were calling that and that's why it says bitcoin right now but this is the coin id so so when we are so when we're calling this we need to actually input the coin id so in this coin detail service let's just pass in a coin uh so in our init we'll say coin of type coin model and let's just make that a variable at the top here we'll say let coin of typecoin model and when we admit it we'll first call self.coin equals coin so we'll set this up and now we can reference this coin in our function so in here i'm going to instead of calling bitcoin we're going to call uh backslash open close parentheses and we'll just pass in the coin dot id so whatever coin we pass into this data service is going to be set here and then we can get that coins id so this api will be different for each coin and that's why we're going to get different data of course so this we're going to call uh let's call this coin detail subscription and we have our handy dandy networking manager to download from the url it returns us some data and we know we need to convert this data not into an array of coin model but actually we're going to convert it into a coin detail model just one single coin detail model so in here we're going to pass in a coin detail model dot self uh we're gonna handle the completion with our networking manager and then this will be returned coin details and let's set this publish variable to be actually be coin details and it will be of type let's make it coin detail model we'll make it optional and we'll set it equal to nil to start then we'll set self dot coin details equals the returned coin details after we get it we'll cancel our subscription so self dot coin detail subscription dot cancel so now we can reference this coin detail data service from our new view model and then inside that coin detail davis service we can then um subscribe to this publisher so once this gets updated we can then update our view model so jumping into coin detail view model let's create a let's create a private let we'll say coin detail service we'll set it equal to coin detail data service all right so actually what i just realized is we need to pass in a coin when we create this data service so the problem is the detail view model does not have uh this coin so in our init of this detail view model we need to pass in a coin so here we'll say coin of type coin model and then instead of initializing this directly we need to initialize this variable from our knit so here we'll say self dot coin detail data service equals and we will set it equal to a coin detailed data service and we'll pass in the coin from our init here and this of course will just be type coin detail data service all right so we set this up when we initialize our detail view model and just like we did in the home view model let's create a private func called add subscribers open close parenthesis open the brackets let's call that in our knit self that add subscribers and then in here we're going to add a very simple subscribe we're going to do the coin detail data service dot coin details so that's that published variable we had just made and for now let's just sync and we'll call this uh returned coin details and in here let's uh just print out uh received coin detail data and then let's just print out returned coin details finally we need to store this subscriber somewhere so let's create a private var cancelables and it will be equal to a set of any cancelable which we need to import combine any cancelable open close parenthesis and we can store this in our cancelables all right so we're not going to actually do anything with this coin details yet because we haven't built out the ui but if we do successfully download this we should get some of the data to actually print out and then we'll know that we at least set this up correctly the last thing to do is initialize this detail view model from our view so in the detail view we want to initialize a detail view model so what we actually want to be is an at state object var vm of type let's call it we call it detail view model and we want to set it equal to a new detail view model so this is how we normally initialize our view models we've done this so many times in my courses but the problem this one time is that we need to initialize it with a coin and when we initialize it directly in the view here we don't have access to the coin we can't add this coin here because this is being created at the same time as this and because of that we can't access this just we can't actually access this just yet so instead we need to initialize this state object from within our init so we'll still pass in a coin but then here we're going to initialize the vm so to access the state object part of the vm we have to use the underscores so we'll say underscore vm and we'll set it equal to a state object with a wrapped value and the value of course is going to be a detailed view model so here we'll put in a detail view model add in the coin and the coin is coming directly from our init that we're passing in here so we actually don't even need to set up a coin and we can get rid of this as well and then up here this instead of initializing it here directly we initialized it in our init so we can get rid of that and we're getting an error here and i think that's because if you look at the detail view model it needs to conform to observable object observable object this way we can observe it of course let's command shift k to clean and rebuild the error goes away sorry about that guys in this text let's just have it say hello for a second we're going to set this up in a future video all right so let's uh now run our application we have the same uh function passing in from our app except this time it's going to initialize a detail view model and then that should download the data which hopefully will print out to our console all right so we should also get this this print out when we go to the screen so let's click on bitcoin uh it looks like it's working so we initialize detail view with bitcoin and the init the subscriber got set up and when it was set up the value was nil because that was our starting value and then it called our url and received the coin detail data and then obviously here we can see the data that we downloaded from the internet and this looks really good we're going to do a little bit of formatting here because i see this is coming in as like some kind of html code inside here and i think we can just format that out later but in this video we have created a new model a new api call a new view model and we are now downloading this data i'm ready to actually now use this data and build out this detail view with some of this cool data so that's it for this video hope you guys are excited uh as always i'm nick and this is swiffle thinking and i'll see in the next video [Music]

Channel: Swiftful Thinking

Views: 1,087

Keywords: SwiftUI coin detail, SwiftUI details, SwiftUI download details, SwiftUI API, SwiftUI MVVM, SwiftUI MVVM with API, SwiftUI MVVM with Combine, MVVM combine, MVVM API, SwiftUI API with combine, SwiftUI MVVM with Codable

Id: wdsAS-aqw1M

Length: 24min 11sec (1451 seconds)

Published: Sat Jun 12 2021