Creating the Components


Viper & Protocol
VIPER Pattern
PREVIEW12m 24s
9m 29s

The course is part of this learning path

Creating the Components
1h 22m

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.


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 start creating our components, VIPER components. So, we are in the View. Of course, as we have talked about, it is only responsible for displaying the user interface to user. So, this is where we will actually create our view controller and just go ahead with it. But before we create those, let me take some notes. So, this will be talking to, let me open the image for you. So, this will be talking to Presenter as you can see. So, View and view controller are going to be in the same file for us. And as you can see, Presenter will talk to Router and the Interactor. And this all actually summarizes all the connections. Like this Entity talks with the Interactor, Presenter talks with Router and stuff. So, let me take some notes over here. View will be talking to the Presenter, right? So, inside of the View, of course, we're going to have a class and also we're going to have a protocol as well because we will be actually working with the protocols all the time. So, if this is going to be talking to Presenter, it means that we're going to have like a reference to Presenter over here. And you will see the usage of the protocols. And if you haven't watched the Advanced Swift section, I really suggest you go back and watch it because we have discussed the advantages of the protocols. So, they have some advantages over the class inheritance, also they have advantages in the testing as well. It will help us to build a much more structural, analytical way of ordering our code and so much more. And obviously, over here, we're going to have the ViewController as well. So, we're going to create the class for the ViewController and for the protocol over here. So, for the Interactor, Interactor will be again a class and a protocol. But over here, we will talk to the Presenter. Of course, the Presenter will take care of getting the data from the Interactor and just letting the View know that a new data came, make sure you show it to the user. Okay? So, Presenter will get the data and a Presenter will talk to Router. Presenter will talk to every component almost, so that we can show it to the user. So, what we're going to do, we're going to use the nomics API one more time. So, let me open the Nomics. So, if you have watched the Cryptocurrency section, you know this API. But as we talked about before, they can change this API. They can ask for a fee. So, I have put this API sample data in my repository, in my GitHub. So, let me find it and you can take note of the URL as well. So, let me see. I believe I have to search for JSON over here. Here you go. So, this is the JSON dataset that I'm looking for. So, let me just go ahead and make it Raw. And here you go. So, this is the data that we will be working on. So, if you haven't watched the Cryptocurrency section, I really suggest you go back and watch it as well. But if you don't, don't worry about it; I will show you the data. So, let me copy it and go to the JSON Beautifier, any JSON Beautifier over here. And, yeah, Great. So, I'm going to open this and just paste it over here and beautify this. And here you go. That's the data we will be working on. As you can see, we're going to get a currency and a price parameters over here. So, currency will state the name of the cryptocurrency and price will be this, will state the price of the cryptocurrency in terms of dollars. Okay. We're going to get thousands, of thousands of cryptocurrency data over here. Of course, since we are requesting this from my GitHub, it won't be updated. But, again, it doesn't matter. So, we're just doing this as an example. So, this is the URL that we will be sending our request to. You can pause the video and just take notes, and also I will just share it in the resources of this lecture. So, we're going to do this in the Interactor and for the Presenter, again, we're going to have a class and have like a protocol again. So, we will be using the same thing over and over again and it will be talking to both the Interactor and, of course, your Router. And also, the View as well. Great. Now, Presenter will talk each one of those components. And also, for the Entity, Entity will be just our struct.  Okay. Entity will be our model. It's that easy. It's so easy that we can just write it, right? We know how to write it. Because we have seen the data before, it will just take a couple of lines like I'm going to say struct Crypto and I'm going to be, make it Decodable. So, of course, you can make it codable if you want, but codable means decodable and encodable.  We're not going to encode this, we're just going to decode this. We're just going to get the data and parse it. So, I'm going to make it Decodable. Since I have made this decodable, I can write the parameters, I can write the variables. So, what were the variables? It was the currency and the price. So, I'm going to say currency is a String and price is a String as well.  Great. That's our struct. That's about it. It's very simple. It's just like a regular model.  Okay. But it's named Entity. So far so good. I believe this is okay for the Entity and we're not even going to come back to here later on, but we can just go ahead and fill in the Router. So, Router is one of the most important parts because it orchestrates whole thing. So, what we need to do over here is to create the class and also the protocol for the Router. And also, just fill in all the different components to orchestrate them together. So, we are going to be having the View Interactor and Presenter instances over here. So, how do we do that? We're going to create the protocol first and then we're going to create the class later on. So, let me take notes as we did before. And also, this will have the entry point. The other responsibility for the Router is having the entry point to our application. So, this is where we will define what happens when we first launch the application. We're going to say go to this view in the Router. So, we have deleted the main storyboard, we have deleted everything so far. Our application doesn't know which view to show to the user when we launch it. Right? So, we're going to take care of that in the Router. So far so good. I believe we can just start with the Router. So, I'm going to create the protocol first. We're going to be saying AnyRouter over here, AnyRouter. So, following this syntax is a good idea like AnyRouter because I don't want to name this Router because we will have the names like View, Presenter, Router; they're very generic. And also, if you create this like AnyRouter then you can implement this in different classes. So, it's a good idea to name this something other than the Router like AnyRouter. Of course, you're free to name this anything you want. You can name this CryptoRouter or MyRouter, but the general idea or general syntax over here is to choose any name. Great. So, over here, we're going to have the common variables and also the common functions. And after that, we're going to be implementing those inside of our classes. So, we didn't create the class yet. Of course, we're going to have a class for the Router as well. So, let me just create this. I'm going to call this CryptoRouter. So, this will be an AnyRouter. And here you go. This is our class. Right now, when we create the first protocol and class, maybe it won't make sense to you. But bear with me and watch it till the end. It will make sense once we complete this application because we're going to follow this pattern all the way down. Okay. So, over here, since I made this AnyRouter, I must conform to this protocol if it has any kind of requirements. But I haven't filled in anything inside of the protocol, so that's what we're going to do. Okay. So, we are going to be following this example for the Presenter and the Interactor and the View as well. So, what we will have inside of this protocol? First of all, we're going to have a function. I'm going to call this static function because we will need to reach it throughout the other classes, like in the SceneDelegate, in order to specify the entry point to our application. And I'm going to call this startExecution. Okay. It won't have any body, we won't write anything inside of this function. If I write something, it will give me an error because this is a protocol. This does not have to have any body. It shouldn't have any body. So, I'm going to delete this and I'm going to say this will return AnyRouter. So, this will return itself. And once I do that, as you can see, I get an error inside of the class because our Router does not conform to protocol AnyRouter. So, since I implemented this, I have to override the static function or write that function inside of this class. So, make sure you copy and paste it or just 'Hit' the Fix Stops, At Stops. Okay. And it will add the function for you. So, this will expect us to return an AnyRouter and guess what? This CryptoRouter is also an AnyRouter. Right? So, if I create an instance of the class itself, I can return it. So, we are doing this in order to separate the protocol and the class in order to have a separate protocol and we can use it anywhere we want. We can create some tests using the structure, we can follow the structure in every component like this. Let router be a CryptoRouter and return that router. Okay. So, this will actually enable us to use this pattern inside of the SceneDelegate later on. But the main idea over here, maybe you didn't understand why we did that, you will. Again, trust me. The main idea over here is that Router orchestrates the whole thing. So, we will need to create the View Interactor and Presenter instances inside of this and make sure everything communicates with each other. That's the job of the AnyRouter, aside from the entry point statement. We're going to do that and later on, you will understand what is going on here exactly. But we need to start this way, so that you can follow along with me. Okay? So, later on, we're going to be stating the entry point as well but we haven't done anything inside of our View. So, right now we need to fill in the Presenter Interactor and the View, so that we can come back and just do what we need to do over here like let view = CryptoView. But we cannot do that right now. That's exactly what we're going to do within the next lecture together.


About the Author
Learning Paths

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.

Covered Topics