Threading, Async & Await
The course is part of this learning path
Threading, Async & Await in iOS
Hi. So, we have created our ViewModel and we know that we have an observableObject over here which will update the UI when we observe it. When these changes we know that we have to update the UI and it will be done automatically for us, that's why we have used this @Published var over here. So, we need to find a way to observe this under the main view. That's what we're going to do within this lecture. So, what I'm going to do, I'm going to create something between the struct and body, and I'm going to label this @ObservedObject. So, this is not observable. This is observable object and this is ObservedObject. Maybe not a great label or unlike great phonetically, but this is ObservedObject, okay? So, I'm going to call this cryptoListViewModel and I'm going to make this a cryptoListViewModel, okay? Again, this is observable, this is ObservedObject. So, I now have defined the cryptoListViewModel over here. So, of course, this will give me an error in the preview. So, rather than dealing with this preview, I'm just going to put an init over here, okay? So, once this struct has been initialized, I'm going to say self.cryptoListViewModel = cryptoListViewModel, okay? I'm going to create an instance out of this, and, of course, this will be the only instance that we need in this case. And of course, this should start with the capital C over here. Great. Now, once I have this cryptoListViewModel, then I can just call the functions tinker with the variables and properties and stuff. I can do whatever I want to do. So, what I want to do, I'm going to come over here and I'm going to create a NavigationView as usual. I'm going to start with the NavigationView, and inside of the NavigationView, of course, I want to have a list. So, inside of the list, I'm going to just take the cryptoList from cryptoListViewModel.cryptoList. And this is the beauty of the ViewModel. Now, I have written everything that I need over here. I can get everything with one line inside of the view. Great. Now, what I'm going to do I'm going to say "crypto in" but I believe this will give us an error because we need to identify the IDs. Let's see. Text(crypto.currency) and text, what else you should we display over here? (crypto.price), let's see if that works or do we need to add the ID. Here you go. It gives us an error because we need to specify the ID over here. So, since this is identifiable, I believe this will be very easy, all we're going to do is just say ID = \ .ID. And by the way I'm doing this ID like this is because my variable name is ID. right? So, here you go. This variable name is ID. If it had been something else then I would have put that something else over here rather than the ID. But since I named this ID, then I'm just giving this as an ID. Great. Now I know that this will work once I download the data, of course, and we don't need to deal with the UI very much but let's do a VStack so that we can display the currency name and price one by one vertically. Great. Now, of course, let me just do the formatting at least a little bit over here. For example, we can change the font to title3 or title2. We can change the foreground color to something like blue maybe and we can give it a frame or I'm just going to give it a frame for alignment. Like you can give a maxWidth and an alignment in order to secure the aligning of this, like you can give it an infinity maxWidth and central alignment in order to make sure or leading alignment in order to make sure your alignment works. But I believe we can omit that and see if this works like this, and if this doesn't work, then we can edit and I can just explain it in a better way to you. So, I'm just going to delete it and just give the foreground color to the price as well. So that's it. I'm not going to spend too much time in the UI. I believe we better focus on the data thing. So, I'm going to give it a navigation title over here with the text of "crypto crazy" as usual. And here you go. Now, this is good, but also we need to download the data, right? Because we have written this downloadCrypto function but we haven't called it in anywhere so it won't be downloading the data if we just around this application. So, what I'm going to do, I'm going to find this navigationView and I'm going to code onAppear. So, as you can see this onAppear is just a regular life cycle function and it will be called once this view appears. So, you need to open a coding block over here. So, whatever we write over here will be called when this view appears, exactly like in the storyboard case as well. So, what I'm going to do, I'm going to say, cryptoListViewModel.downloadCryptos, it will ask me for a URL. And right now I believe we need to give the URL at least because we have been avoiding it so much. So, I'm just going to come over here and create the URL from a string and just paste the thing that I have shared with you and put an exclamation mark at the end in order to unwrap it, and here you go. Of course, you can guard lett or if let this URL over here in order to make sure that it works but I'm not going to waste too much time on that. So, let me try this. Okay. And for some reason, the preview doesn't work, let me go to iPhone 13 or 12, it doesn't work. I'm just going to open this in simulator and it will be better for us because we are going to download the data anyway, and let's see if this works or not. So, if this works, then we're going to go ahead and change the code because as I said before, we're actually going to display this currency and the price and everything. But the reason why we are doing this is to practice the concurrency and trending features, the new features of the Swift or the IOS. So, this cryptoListViewModel will be responsible for downloading this and here you go. Now, as you can see, we can see the names and the prices of the cryptocurrencies. I'm going to change this to black because you cannot actually see what's going on over here. And also I'm going to add the frame because as you can see, the currency and price are not aligned so you can delete the width and height and just try the alignment with leading and see if that works. It doesn't work as you can see it turned black. It's much better. But in order to make this work, I'm going to add a max of infinity over here. So, why I'm doing that, because I'm going to make sure that the width of this text is long as possible, it's infinity. And then I'm going to align this to the leading which is the left part over here. And as you can see, they are aligned. That's why I'm using the maxWidth over here. So, if your alignment doesn't work, you can try this trick. And right now as you can see we finished it, okay? We have learned so much this ObservedObject, the publishers and subscribers pattern is very, very important for you, its combined framework things are very important for you and you should expect them to to see, expect them to appear in the interviews and also in job examinations and stuff. So, it's very important but also we need to learn about some other important stuff as well, such as I think and await. So, these are new concepts. So, what we're going to do, we're going to change this web service and we model a little bit in order to understand the new features of concurrency and in order to practice them. So, that's what we're going to do within the next lecture. We're going to stop here and see you in the next lecture.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.