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, within this lecture we're going to finalize our application and do the last things that we need to do, for example, updating this case .success and case .failures. So far we know what to do over here all we get to do just to run view.update and of course in this case we're going to update with cryptos. And if this is a failure, then we're going to update it with an error. So, I'm going to say view.update with error and of course we need to provide a string. We can just come over here and say try again or something like that whatever you may want to display to the user or whatever you may want to display to yourself. Great, now in the interactor we already created this download cryptos and we already have written it. However, once we open the application, we don't have any kind of trigger mechanism, right? So, we need to say that after we are done with everything, like after we are done with interactor, then we should let the interactor do its job. So, in order to do that, we can think of some alternative ways but I believe the best way to handle the situation is to let the interactor know or let the presenter know that interacter has been set. So, in order to do that, I'm just going to open the didSet over here. And once it's set, it means that we can call whatever function that we want to call. So, in this case I'm just going to call interacter.downloadCryptos. Great, so it's a very basic way to do that. Once the value of the interactor, once the interactor knows what's going on, once it's set. Okay, once we have that instance, then we can call whatever we want. And I'm going to replace this error, okay because we're not using it and I believe we can just delete the let as well, and if I do a command B now, and if I do a command B, now here you go. Now we don't have any errors over here. Great, now I'm going to go back to router. We don't have anything left over here, we have something to take care of in the view. Right, we have to take care of the update function and also we have to take care of the cell for row at index part function as well. So, let's start with the cell for row. So, what I'm going to do, I'm going to create a cell over here, of course this will drive from the table view and say dequeue reusable cell identify will be cell and index path will be the index path. Great, now what I want to do, I want to return the cell eventually, but before returning it I'm going to use something called content. Okay, rather than text label. So, in order to do that I'm going to create the content and this is very easy to create. All you get to do is just say cell.defaultContentConfiguration. In this configuration, we can assign some primary texts and secondary texts. So, for the primary text obviously, I'm just going to give the name of the currency that I will be displaying and for the secondary text, I will be providing the price of the currency. It's easy to do that. All you get to do is just say content dot and you can see the secondary text or the primary text. Primary text being the text actually. You can say cryptos and obviously we have to get index path that row over here, in order to get the respective crypto. And I'm going to select the currency property and for the secondary text, I'm going to do the same thing, but this time rather than the currency, I'm just going to say .price. Here we go. Now for the last part, I'm just going to say cell.contentConfiguration is the content that I have created. Great, so I assigned this to a our cell and now I can just say cell.backgroundColor and make it yellow as well so that it has some kind of consistent background color across the application. Great, now we are done with our table view. Now we're going to take care of this update functions. We already did the first one, but for the second part I'm just going to come over here and just open this DispatchQueue.main.async, and here we go. Now, I'm going to say self.cryptos equals to an empty list. Okay, because we don't have cryptos in this case, we have a failure. Now since we have a failure, I'm going to make sure that table view is actually hidden. And I'm going to make sure that message label dot text is the error string that I have passed to here. And also we're going to have to make sure that message label is not hidden. So, isHidden equals false. Great, now I believe we took care of everything, right? So, I'm just going to open this and see if this works or not. So, it says downloading, but I believe this hasn't been, here we go. Great, now we can see every one of the cryptos, like every crypto over here as well as the price. Obviously we can change the UI like, we can make the fonts a little bit bigger because it's too little right now, but you get the idea. Maybe what we can do, we can actually break the application a little bit and see if the error messages are working properly as well. So, I'm going to change this price to prices, okay? Just to shake things up a little bit. And obviously we can go to view and change it from here as well not to get an error. Okay, since I have these prices, it won't be able to parse the download thing. And here you go. Now it says try again later. So, if we break the thing, it will display the error message to ourselves. Right, now we know everything is working. Obviously you can ask yourself that, how can I implement the thing in a way that if I click on one of the cryptos, I can open a pop-up view or another controller to display some kind of details over there. So, in the viper structure, in the viper architecture, it's actually advised to create different modules for different screens. For example, we have the view, we have the interactor, we have the viper over here, right? So, if I had something like an application with a five tab or four tabs, like a tab view controller, okay? I would have created four different modules over here and by modules, I mean that creating some groups or packages to have different viper classes, viper protocols, viper files inside of them. So, maybe we would have a viper file set for each view controller. Okay, but right now, I can just make it happen inside of this view controller because it's very easy to implement. Okay, so maybe it's wrong for the viper structure, but I'm going to do it anyway and show it to you how easy it is to implement this. I'm going to create another detailed view controller over here, which will be a UI view controller. Again, this might be considered as a wrong implementation of the viper structure, but again, it's very easy to do. And also we have a very simple application over here. I don't want to go overboard. So I'm trying to create the viewDidLoad and viewDidLayoutsSubviews since this is a view controller, we can do that. And over here I'm not even going to bother with the protocols. So, maybe we can just create a currency which will be a string. Okay, and also a price and this will be a string as well. So, we can create two labels to display them. One for each like private let currency. I'm even going to copy and paste this. I'm just going to make this very quick. Okay, I'm going to copy the message label and paste in the detail view controller. And I'm going to do it one more time and I'm going to change the name of this to currency label. Okay, great. Now, I'm going to change this to price labels, that's it. Now, I have two labels. Great, now of course you can change the text and the font and the color and the things, all you may want to change, but I'm just going to leave them as it is. I'm just going to call this currency label, in order to be consistent. And I'm going to call this price label, but nothing else. I don't want to just go into the colors and stuff. So, I'm going to call the viewDidLoad over here. Obviously after viewDidLoad, I'm just going to add the background color over here, and it make it to be yellow. And also add the sub views as well like, the currency label and also the price label. Okay, and here you go. Now, in the viewDidLayoutSubviews, I can come and call the viewDidLayoutSubviews one more time and give the frames. Now, for the frames, I'm just going to make them central, in the center of the application again. So, I'm just going to say currency label dot frame equals to CGRect. And for the X, I'm going to go with view.frame.width, of course divided by two and I'm going to subtract 100 from it because I'm going to make the width 200 and height 50 again one more time. And for the Y, I'm just going to say view.frame.height divided by two minus 25. So, this will place it in the center of the application. I'm going to copy and paste this and change it with the price label. Okay, of course we're going to have to adjust this a little bit like, maybe adjust the Y, so they don't overlap. So, I'm just going to add 50 over here rather than subtracting 25. Great, now we have two labels. Now what I'm going to do I'm going to change the value of the currency label to currency and also, change the price labels value to price. Great, now I believe they are hidden. So, I'm just gonna unhide them or make them visible. Like isHidden false. And also let's do the price label as well is hidden false. Maybe we can just make them visible to begin with. Okay, so far so good. Now, we have all these things inside of the detail view controller and that's it. Now, all I get to do is just let the application or let the currency view controller know that if they're always selected and we know that this can be done by overwriting this DidSelect reload. I can create the next view controller inside of this function. Okay, we have done this before. All we got to do just reach this next view controller and change the parameters like currency equals to cryptos index path.row.currency. Okay, and nextViewController.price equals to cryptos[Indexpath.row.price]. Great, that's it. And also of course, we have to present this view controller. And it will ask us to say next view controller animated. Why not completion now, here you go. Now, that's it. That's how we actually display the details in another view controller, in another ViewController for example. Again, we haven't actually been loyal to the viper structure, but it's so easy and it's so simple. I didn't want to make things complicated a lot more than it should be. Right, if click on one of those things. Here you go, it opens. What I would suggest to you guys is to study this viper architecture because we have learned a lot. We have studied the viper architecture, we have studied the protocol oriented programming in a way and we have seen how to create views programmatically with deleting the storyboard. Now, it's time to go further and search for the viper with multiple modules. Okay, It's no different than this. All you got to do is just create another viper structure, another set of viper classes or protocols for another view controller or another view. So, it would be much more structural, but the idea is here. Okay, if you understood this, then you are good to go to create applications using the viper structure. That is exactly how you do it. Now, we're going to stop here and continue within the next lecture together.
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.