The course is part of this learning path
In this course, we're going to take a look at the VIPER architectural pattern and also protocol-oriented programming, and we're going to start a project which utilizes these methods.
Learning Objectives
- Understand the fundamentals of the VIPER architectural pattern and protocol-oriented programming
- Learn how to create VIPER components
- Learn how to use interactors, view functions, and routers
- Use VIPER components and protocol-oriented programming to build an app
Intended Audience
This course is intended for anyone who wants to learn how to develop apps on iOS.
Prerequisites
To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.
Hi. Now, that we are done with the Interactor, in this lecture we're going to go ahead and finish the view functions or at least the start of view functions. So, that we can come here to the Presenter and take care of everything. So far, we have created our protocol and we created our class but we haven't done anything. So, what do we have to do over here? Think of the previous examples, we have to create the presenter, right? So, all we got to do just say var presenter : AnyPresenter and it will be a get set like this. Great. Now, of course, we're going to need a function over here which will, which we will call update. So, this will be the function that I'm talking about. Remember, we have to call view.update in the case of success. Of course, we can create update error update with error function as well, but also what we can do we can create the same function at least with the same name with different parameters. We don't have to do that but we can do this. We can just say update with Cryptos. And also we can create the same function by saying func update (with error) rather than Cryptos, okay, like this. So, in the case of a failure we can just call update with error and in the case of a success we can call update with Cryptos. Of course, you can create a different function name as well but I just wanted to show you guys this, okay? So, in this case we're going to pass the Cryptos and in this case we're going to pass a string indicating the error message. Great. So, I'm just going to add this to the CryptoViewController over here and this will conform to the protocol. Now, what we need to do over here, of course, we're going to have to take care of this update functions, but also we don't even have a UI, right? So, we don't have anything to show this data on. Now, once we get this data it will be easy to display them in a tableView or something like that but we don't even have a tableView because we have deleted the Storyboard. Now, it's time to, actually, learn about how to create a tableView with writing code with programmatically structured. So, what I'm going to do, I'm going to say private let and let's call this tableView to keep things simple and this is going to be a UITableView. Now, what we can do over here, remember we used to come over here and make it like this; tableView = tableView and just say tableView. and stuff and assign the values. However, we are not even in a function yet. So, what I'm going to do to make this simple, I'm going to delete this and make it like that and open the {} braces and then initialize it later on. So, I'm saying that this is going to be a tableView and if I just initialize this over here, this will be okay. Now, what I can do inside of these {} braces, I can create a tableView properties and it will be automatically assigned to this tableView. Like I'm just going to say this is going to be a UITableView. And this table will have a UITableViewCell. So, we're going to have to register it. We're going to say UITableViewCell reference over here UITableViewCell.self not UITableView, UITableViewCell.self and for reuse identify, we can just say self. Great. Now, this will be registered and then we can just come over here and say isHidden = true and say return table. Why I'm making this hidden? Because I don't want to make this visible. I don't want to show it to the user unless we have the data from Internet. That's why I made this hidden. Once I get the data I can just make this visible later on. But for some reason we're getting an error over here. Okay, it says that, let declarations cannot be computed properties. However, we are not changing anything over here, we're just assigning the tableView properties. Let me do Command B maybe it has something to do with the fact that we don't have anything like UITableViewDelegate, dataSource, anything like under viewDidLoad. We don't even have a viewDidLoad yet. So, we're going to have to take care of those. So, let me just try this. I'm going to say this is going to be a UITableViewDelegate. And also, a UITableViewDataSource. Since you already know this stuff, I'm just making this a little bit quicker and I'm going to come over here and of course, add the viewDidLoad. So, for some reason viewDidLoad doesn't work, so I believe we're going to have to write it again and of course, we can just write it like this, but we're going to have to add the overwrite function as well, okay? And it doesn't, actually, call the super.viewDidLoad. So, let me just cut this, maybe it's giving us all these errors because we don't have the viewDidLoad, so I'm going to try this one more time. I'm going to call the viewDidLoad and hit 'Enter'. Let's see we don't have anything else over here, right? So, let's see viewDidLoad and hit 'Enter' or double click, here we go. That's what I wanted to see. And also, I want to call this viewDidLayoutSubviews as well. So, we're going to have subviews over here like label or tableViews or labels. Once we have them we can just call this function to indicate that I want to do something with them. We're going to see how to fill in those later on but for right now I have viewDidLoad and of course, we can assign the delegates and datasources as well later on and in order to make these errors go away. Okay, I'm just going to say super.viewDidLoad and also over here I'm going to say tableView and obviously, we don't have the tableView, now I'm going to paste what I have cut a couple of minutes ago. Now, I'm going to say tableView.delegate = self and also tableView.dataSource = self as well. Great. Now, let's do Command B, here you go. We are getting the error one more time. So, maybe we're going to have to give the number of rows and section and cellForRowAt index path, so I'm just going to write them over here. I believe by now you know how to deal with them. So, I'm going to delete this and hit 'Command B' one more time and here we go. We're still getting that error for some reason. Let me check it one more time to see if we did something wrong. Private let tableView : UITableView, I just seen it. I've just seen it. We forgot to add only one equal sign over here and I believe I have edited but I deleted it for some reason and I forgot to edit later on, that's why we were getting these errors but it doesn't matter. We were just going to implement this number of rows in section and cellForRowAt index path anyway. So, I'm going to return some values over here just for now; not to get any errors. So far, so good, now we have the tableView. I'm going to hit 'Command B' and make all these errors go. Great. Now, we have the tableView, we can do whatever we want with it. Of course, remember we have to add this tableView as a subview, right? That's why I have called the viewDidLayoutSubviews. So, we have to say view.addSubView and add the tableView inside of the viewDidLoad. Obviously, this is done but also we need a label like for displaying error messages or displaying some message to the user, so I'm just going to create a label using the same pattern. I'm going to call this message label and this time don't forget to add the equal sign because again, we can get some errors if we don't do it. And I'm going to call this label and it will be a UILabel and then this UILabel will be label.isHidden = false. We're going to display the label first. If everything works out we can just hide the label and display the tableView. Now, I'm going to say label.text, something like downloading maybe, so it will just display this message before everything is downloaded. And I'm going to say label.font and change the size a little bit. I'm going to say UIFont.systemFont of size and I'm going to go with 20. Obviously, you can just choose whatever you want, you can change the color, you can change anything you want. Great. Now, I'm going to say label.textColor and I'm going to make it black. And finally, I'm just going to say label.textAlignment and I'm going to make it center. Great. Now, I have created this label and I can do whatever I want with it once I added this to the subview but I believe we forgot to return the label. Here you go. Now, that's what I'm talking about. Now, I can just come over here and say view.addSubview and add the message label. Great. Now, so far so good. We have created our UIElements at least, now of course, we have to decide what to do with them. We're going to use them in the update functions obviously, okay? We're going to display the Cryptos in the table, we're going to display the error message in the message label, that's for sure, but we need to take care of this super.viewDidLayoutSubviews. So, inside of this function we need to specify the frame that our tableView and message label is going to get. So, we don't know where to show them, in which size to show them yet. We haven't done it yet. We have seen this in the layout section. Remember, we can specify the X coordinate, Y coordinate, and stuff. In order to do that, I'm just going to say tableView.frame = view.bounds. It means that stretch as much as you can. And for the message label, I'm going to give a custom frame obviously, not stretch it for the whole size. I'm just going to say CGRect and for the X and Y, I'm going to place them in the middle of the screen. So, it should be view.frame.width /2, so it's going to be in the middle of the horizontal level and also for the vertical one as well. So, view.frame.height this time /2. So, this will just cut the width and height in two and just put it in the middle. And for the width and height, I just I chose this arbitrary numbers like 250. Obviously, you can change that in any way that you want but I'm going to subtract the half of it from the X and subtract the half of Y, subtract the half of height from the Y. Because I just want to make it in the center. So, we have seen this in the layout section. If you haven't watched it, I suggest you go back and watch it. Great. Now, that I have this, I can update, I can use this function in order to update the tableViews. Obviously, I need to display the tableView, I need to display a list inside of a tableView. So, I'm just going to call this cryptos. And this is going to be an array of Cryptos and it's going to be empty to begin with, like this. So, we're just going to fill this with the Cryptos that we got. We got this from the presenter. We're going to get this from the presenter but we have to use the DispatchQueue.main.async in order to do that because it will be coming from the background thread and we're going to make this in the main thread and we're going to make this asynchronously so we're going to have to say self.cryptos = cryptos. And say self.messageLabel.isHidden = true because it's downloaded now. Now, I can just call the self the tableView and say, a new data came in; so reload yourself. And obviously, I can just say selftableView.isHidden = false right now. Great. Now we have written so much code, I believe we're going to have to change this number of rows in section and cellForRowAt index path, so it's very easy to change the number of rows in section; all we got to do is just say cryptos.count over here, but it's a little bit hard to actually not hard but harder when we compared with the number of rows in section to change the UITableViewCell. So, I believe this lecture is getting a little bit long, so we're going to stop here and within the next lecture we're going to see if everything is working or not, then we're going to implement our view and finish the application altogether.
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.