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 take a look at the VIPER architectural pattern and also protocol-oriented programming and we're going to start our project. So, why are we doing this?
We have already seen MVVM architectural pattern in regard to see it later on with different examples as well. But also there is something called VIPER architectural pattern which happens to be in use particularly in iOS and Swift development. So, this can actually come in your way when you go to some interviews, when you trying to get an internship or a job. So, you better know about this and you better have a portfolio like an application that is working on VIPER , and it's a good idea to just learn about this, build your application and put it on GitHub and let me open the Brave and let me open my browser to show you what I'm talking about. So, VIPER is another architectural pattern and it stands for view, interactor presenter, entity and router as well. So, you know the acronym, what the acronym stands for. Of course we're going to deep dive into this in order to understand it in a much better way. And while we are doing, this we're also going to take a look at protocol oriented programming and learn about that as well. So, let me talk about VIPER a little bit, of course we're going to deep dive into this, but I believe it's a good starting point, so that you can understand what's going on. So, over here we have the view and we have the interactive presenter entity and router. So, let's start with the view. What does view do? So, view is actually the component that shows user the user interface. It's that simple. We are talking about the view controller or the view itself when we talk about the view component. So, as you can see, if you stand on its own over here coupled with the view controller. So, the view and the view controller can be different classes, but obviously it can be in the same class as well or in the same file as well. So, they're responsible for presenting the view to the user. But over here we have the router as well. So, the router is actually responsible for orchestrating the communication between each of these items. But it's not the navigation between the screens, it's actually in order to determine the entry point and also the orchestration between this internal VIPER structure and then we have the other services like the other components like interactor and presenter.
So, presenter as you can see, connects with everyone in order to just get data and show it to the user when it's needed. And over here we have the interactor. So, interactor is the business logic. If we need to download some data, we download it in the interactor, if we need to get some data from the core data service, then we do it again in the interactor and those services talk with the entity. The entity is our model, is our structure, is our class, whatever you may want to think, is our model. So, maybe you have understood a little bit. Maybe you didn't. It doesn't matter, because we're going to deep dive into all of those things later on. I just wanted to show you this good diagram or this good image, and maybe we can just move to the protocol-oriented programming. So, we have seen the protocols in the advanced Swift section.
We know that there are interfaces in object-oriented programming and we know the advantages versus classes and versus inheritance as well. So, there is a very good article about this and he's using the vehicle or some landVehicle, waterVehicle, airVehicle structure in order to understand, in order for you to understand the protocols in a much better way. And we have done the same example in the course with using the animals as you might remember. But we haven't gone that far. We haven't built an application using it. as you can see, he explains the concepts with charting like colorful bubbles and stuff. So, it's good. I believe you can pause the video and just go ahead and take a look at this writing. Take a look at this tutorial as well. However, in my opinion, we have already seen this thing, like theoretical explanations of the protocols in the course. So, rather than that we're just going to execute them like use them in our application. So, these are subjects that you may face in the interviews, in the real industry business.
So, it's better for you to understand all of those in a real application. So, that's exactly what we're going to do within this section. So, of course after this, after completing this application which will be based on the crypto crazy application that we have done before. So, it's going to be very easy for you to understand. That's why I believe now we are done over here. I'm not going to close this down. We can go back to this chart because it's very good. Now, I'm going to create a new project from here. So, it's going to be an iOS project, we're going to go with the storyboard, but this time I'm not even going with the storyboard. So, let me show you what I mean. I'm just going to call this CryptoViper because we're going to do the crypto crazy thingy. I'm not going to change the organization identifier, but make sure you choose the storyboard. I don't want core data, I don't want test and I'm just going to place it on my desktop. So, what I'm doing here, I'm going to delete this storyboard as we have talked in the layout section, we need to understand how to write code just to create views. I know the SwiftUI is built for that, but again, this technique is used in the industry as well. So, we're going to just go ahead and delete the main storyboard and do what we need to do in the code using Swift. So, wait for your project to be indexed and stuff. And over here I'm not going to change anything, but what will I do? I will just make sure our project is ready to proceed into VIPER structure. So, VIPER is based on modules. So, if you have like different screens, like if you have a tab index, for example, if you have Tabbed application like five tabs, you may have five different modules over here, like you may create groups for that different modules. It happens that our application is very simple, so that we will only have one screen. So, I'm just going to create one module or I'm not even going to bother you with the modules, I'm just going to create five different files that will stand for the VIPER and just have it in my way. Like you can create a new group over here and call it something the entry screen or something like that. I don't know. But I'm not even going to do that, I'm just going to delete this, I will just create the files here one by one, I will keep it simple. Once you understand this, that you can do whatever you want using the VIPER structure. We're going to create just simple, plain Swift files. So, 'right' click on the 'main' packet over here and say 'New File...' So, go to the 'Swift File', and choose 'Next' before typing it up. Let me come over here, choose the Swift file and click on 'Next' I'm going to call this view. So, the view is here you go view is here and I'm going to go ahead and create a new file. This will be again a Swift file. I'm going to call this Interactor. So, we are VI, now it's time for the P- presenter. I'm going to create a new swift file again. I'm going to call this Presenter. Great. Now, we are down to E which is the entity. I'm going to create another file, and I'm going to call this Entity. And finally we need a router. So, I'm going to just create a new file and call this Router. Great. Now, I have the VIPER over here. Now, again we don't need the main, so I'm just going to click on the 'Main Storyboard' over here and I will delete it. We don't even need this, I'm just going to delete this by right clicking, and say 'Move to Trash'. And also we don't need this ViewController as well, I'm going to delete this as well because we're going to do what we need to do inside of our Vew component. And of course, after that in order not to get an error because the application thinks right now if we open the application, it will think it's going to go into the main storyboard, so we need to change that information as well. So, in order to do that, you can go to info P list and also the general settings of your project. And also we're going to need to do something in the scene delegate as well, but we do it later.
So, over here in the info P list, please find the application scene manifest. So, if you find, you can see that you have the scene configuration and also the application over here. So, when you click on it, you will eventually get where you see the items. If you scroll down a little bit, you will see the storyboard name. So, you're looking for the storyboard name. Once you see it, you will see the value of it is actually the main. So, what you need to do is just delete this, delete the whole thing from here, click on it and click on the 'Backspace' or 'Delete' button on your keyboard. Just delete this line. Because if you don't do it, whether you change the sceneDelegate or not, you're going to get an error. Great. Now we got rid of this. I believe next thing we should do is to go into the settings of this project by clicking over here and find the main interface. So, when you find the main interface, make sure you delete it and hit 'Enter.' Of course it's up to you if you want this in iPad or not, I'm just going to remove the iPad and make it into iPhone and here you go, make sure you delete the main interface as well. Otherwise you're going to get an error later on. So, we managed to take care of that. Now, it is time to go into the view. Again, we're going to come back to this appDelegate or rather sceneDelegate in order to make things right later on. But right now, I believe we are good to go with the view pattern like VIPER pattern. So, we're going to start writing them one by one. Of course we're going to just take a look at each one of those at the time, but also interact with each other. But we need to lay the ground rules, and then later on execute them. So far so good. I believe we can stop here and continue within the next one. Make sure you delete these things, and meet me 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.