Swift: MVP Design Pattern Architecture (2021, iOS, Xcode 12, Swift 5) - iOS for Beginners

what's going on guys welcome back to another swift video in today's video we're going to learn about another architecture pattern in ios and swift and it is mvp otherwise known as model view presenter so here is a quick overview diagram of what the heck this is like the name implies you've got a model you've got a presenter and you've got a view so the idea is that the presenter is the single object that handles the interaction between a view and a model now you're still gonna have a controller controllers almost never go away but i guess uh they're not cool enough to put the c as a part of the acronym so we're gonna take a look at an actual example instead of just a bunch of theory today so if that sounds good make sure you start by absolutely destroying that like button down below helps a lot and uh hit subscribe if you're new to the channel let's talk about some mvp in swift and ios all right let's go ahead and get started by opening up xcode and creating a new project we're going to stick with the app template under ios and let's go ahead and give our project a name of mvp design pattern you want to make sure your language is set to swift at the bottom here make sure your life cycle is uikit and select storyboard for your interface we'll be doing everything programmatically but no swift dui today so go ahead and continue i'm going to save the project onto my desktop and let's jump right into it so first things first let me go and expand my xcode window here and let's talk about the components of the mvp pattern so the acronym stands for model view presenter so what i'm going to actually do is create a folder here and we're going to use that acronym as the folder name let's go ahead and create three subfolders for our model views and presenters we're just going to have one instance of each of them but just for the sake of organization to show you guys how this pattern really scales if you want to extend it for your whole application so we'll go ahead and toss a presenter in here and i'm going to drag the view controller here onto uh into rather the view folder so cool we've got this view controller here what we're going to do is basically a real world example like i mentioned so let's go ahead and create a presenter so i'm going to create a new file in here i'm going to go ahead and call it something pretty simple call a presenter.swift and i went ahead and copied a url to get a api response it's just a list of users we're going to be using that in here momentarily but let's go ahead and create a class so this is going to be a user presenter and we're going to want a delegate in here in a second but let's go ahead and rename some of this other stuff so let's call this uh view controller a users view controller i'll also go ahead and rename the class here let me also go ahead and give this guy a title of users and let's see we also want some models well one model in our case i'm going to go into models and create a new file and we can go ahead and call this user.swift we're going to have a single user object which will be returned rather and created i should say as a result of our api call but we're going to look at how the controller presenter and the model all tied together and communicate with one another so on a user go ahead and add three properties a name a email and then i believe a username just like that and uh before we uh go and give this app a run to make sure that after our changes things are working we need to change in the main storyboard since we renamed our view controller the name in here so go ahead and select the controller open up the right panel hit the fourth tab and change the class name here to match what we updated it to which is users view controller i'm also going to go ahead and hit editor in the toolbar go to embed in and embed this view controller into a navigation controller just so we have a nice top bar here for our title i'll also select that bar and check this box or prefers large title just so things look a little nicer so before we actually start writing out our mvp pattern let me just go ahead and select a simulator i pick the 12 pro max and we'll see what this looks like in action here so there is our simulator we should see a title for users at the top in just a moment and there it is cool so what we actually want to do is we want to give the presenter the responsibility of interacting between the controller and view actions it is a presenter after all we're also going to do the api call in here you could abstract that to some other object we won't today the model is actually done we don't really need anything else in here and in the view controller we're going to want to interact with the presenter based on user input and updating the view and in our case we're going to be showing a table of view of our users so let's go ahead and start building this out so we have this user presenter what we're also going to want is a protocol here and we are going to attempt to spell things correctly and we're going to go ahead and call this a user presenter delegate it's going to be of type any object and basically these are going to be any of the functions that the controller is going to conform to and implement so the presenter uh delegates we're gonna want to set this in here so i'm gonna have a single function it'll be a public function and we're gonna say set view delegate and this is going to be a delegate and its type is going to be the user presenter delegate and a ui view controller and the reason you're not getting the auto completes is because we need to import ui kits so this here will be a ui view controller and we're going to hold a instance of the delegate in here so we'll say there is a weak var delegate of this type here so we can actually do is call this a type alias for delegates we can say type alias presenter delegate is going to be that and here we'll hold a optional reference i will also use our type alias in our actual function here just like that and once we get that in here we can say delegates we can say self.delegate equals delegate so now in this delegate function we want the presenter to be able to tell the view to go ahead and do stuff and interact with it so what we're going to actually do is add a couple functions in here so the first thing we can say is let's see did get users or if you want to make it a little more declarative we can go ahead and say present users and this is going to show a or rather take a collection of user models the other thing we can go ahead and do in here is uh present a alert or we can go ahead and actually do this present alert with a title which will have a string can have a message just like that and let's see we're going to want a couple other things in here but let's just start off with that so first and foremost we're going to want to actually fetch our collection of users at this api endpoint so where do we actually do that so what we're gonna do is we will create a single uh function in here and it's gonna be a function called get users just like that i will go ahead and do a basic api call in here so first we need to actually create the url from this string that i took the liberty of copy and pasting beforehand and we're just going to unwrap it pretty simple we'll go ahead and create a task which will be a url session shared and it's going to be a data task with a url and a completion handler pretty bare-bones api call here nothing too fancy in terms of the design pattern that we're talking about today we are going to want to unwrap the data also want to validate that the error is in fact nil and let's see let's not forget to actually kick off our tasks down here the next thing we want to do is actually decode the response so we're going to say let response is going to be json decoder and we're going to decode a collection that's not what we want we want json decoder instance and we want to decode a collection of users from the data that we have gotten back and if we fail to do it this should be a catch we're just going to print out the error so once we have the response back here what we actually should do is the presenter should use the delegates to notify whoever the delegate is at that point in time that hey we can go ahead and present the users now we want to go ahead and capture weak self here because we don't want to cause a retain cycle and here we can say self dot delegate and in the delegate if you recall we added two functions so let's go ahead and say delegate just like that and we want to go ahead and call the function up here that we added which is present users so i should actually call this users probably more appropriate title i will say present users passing in our users from the line above and that basically ends the responsibility of the presenter to go and fetch the users so let's actually hook up this part before we talk about like tapping onto a user cell and handling that so what i'm going to go ahead and do now is we're going to jump into the controller here and we want to do two things the first thing we want to do is set up a table view and then we want to hook up our presenter so let's go ahead and set up the table view first it's going to be fairly simple nothing too fancy going on today so we're going to say table view is a table view we're going to create it with this anonymous closure pattern i'm not going to actually go ahead and create any custom cells or whatnot we're just going to register the basic base class so we're going to say register a ui table view cell dot for the identifier of cell we can go ahead and add this to the view hierarchy we want to go ahead and assign its delegates and we actually called it table view table view we'll go ahead and assign its delegate to the self as well as as assign its data source to be self as well we want to go ahead and override a view data layout sub views and we want to give our table view a frame to match the entirety of this view so view dot bounds let's go ahead and conform to the delegate and data source for our table view just like that and then these errors will go away and we'll need to bring in three table view functions let's try to keep it organized first one is going to be number of rows we'll just return zero momentarily next one will be cell for row add index path we'll go ahead and say the cell will be table view dq a reusable cell with an identifier of cell for the nth index path we're going to go ahead and just return the cell and the third one we're going to want here is did select row at index path and we're not handling this quite yet but we do want to first and foremost deselect and what we're going to want to do here is ask presenter to handle the tap so here is our basic table view outline we set that up let's go ahead and create an instance of our presenter so we're going to go ahead and say private let's presenter presenter is going to be an instance of our user presenter object just like that and now we can say here presenter the first thing we want to do is set a view delegate so i'm going to say self now that's going to give us an error because we need to conform to the user presenter delegate just like that and now that's going to have two functions that we added so i'm going to say presenter delegate i believe the first one was present users and the second one was present alert just like that that's not what we want we want present a alert let's see if i can find it here present alert and spelling it correctly is pretty important for autocomplete to actually help but there is that and then we can say on the presenter hey go ahead and fetch some users for us so presenter we can say get users now once we get users we will actually come to this function if we successfully get users now what do we want to do in this present user is if our presenter tells us go ahead and present it we're going to want to have a collection of users which by default will be an empty array of users and all we want to do in here is we first want to say self.users is users and then on the main thread so we're going to dispatch to the main thread we'll say dispatch queue dot main dot async we're going to say self.table view reload data so the reason we need to dispatch the main thread is because there is no guarantee that this function will be called on the main thread and before i give this a run number of rows will now be users.count which will be dynamic as the presenter tells us and the cells textlabel.txt will be the nth user's name so let's go ahead and give this a run and let's see if we can actually see a list of users so we should see a table view and we should be using the presenter pattern so cool there is a list of a bunch of different people's names so let's take a quick look at what actually happened here before we continue so we have a pretty bare-bones view controller we've got a table view we've got an empty array of users we've got a presenter we set up the table we set the view delegate of the presenter here which is pretty critical and then we say go ahead and get users once the presenter has got users it'll go ahead and say hey hey delegate present users for me and this function all it is going to do is assign those users and reload the table view and that's basically where we are at now let's take a look at our simulator again if i actually go and tap on one of these nothing is happening except the fact that we're unhighlighting the selection visually but what we want to do is maybe show an alert with some more information about the user so what we want to go ahead and do is we have this table view function of did select row we want to tell the presenter that hey we tapped on a user so we can say did tap user and we can go ahead and pass in the nth user index path dot row now we haven't actually created this function so let's jump back to our presenter and in here we're going to go ahead and create it so we'll say public func did tap user which will take in a user model just like that you can argue that this is maybe a little redundant in naming so we can maybe change it to be did tap user and do that and now we can go ahead and do is with this will say delegates we want to go ahead and present an alert and we'll go ahead and say the title will be the user's name and the message is going to be using properties in the model we'll say user.name has an email of user.email and a username of username dot or user dot username so we're basically delegating back to the delegate of go ahead and present this alert now one other option you have is you could actually do the alert presentation directly in here so let me show you guys both approaches because there's pros and cons to both so now that we have this function being called let's go ahead and change this here since we did rename it but basically now we're going to come down into this function for present alert so what do we want to do in here well we're going to say let's alert is going to be a ui alert controller we're going to say title is going to be title message will be message style will be alert we're going to add a single action to this alert it'll be a ui alert action with a title of dismiss a style of cancel and a handler of nil and then finally we can go ahead and say present the actual alert animated true go ahead and give this a run and what you'll see is when you tap on any of these rows you'll get this alert here and you'll have the email address and the username filled in so one uh questionable thing here is we're calling present in the controller and this is a little subjective but some folks like to say well this is a presentation call so it should be handled by the presenter so the alternative here i'm just going to copy this code and we'll jump into our presenter once again if you guys recall we know that the delegate is not only just of type user presenter delegate but it's also a view controller so what you could do as well instead of calling this stuff here you could actually put all this stuff here and call this on the delegate itself because you know it is a view controller so instead of passing this here let me just comment this out what i can actually do is copy it and then comment it out we can simply assign the title and message directly in here so there is our title there is our message let's get rid of that comma here and let's go ahead and toss an equal in between here and basically what you'll be able to do is create the alert controller directly in here and let's see why this is yelling at me we've got a title and a message it's because we don't want that there let's go ahead and fix that and if you actually give this a run what you'll get is the exact same results but the question here in lies of do you think that the presentation of the alert should be in the presenter class or in the view controller class now i'm not going to give you a clear cut answer to that because frankly there really isn't one it's a little subjective so some people like to put it in the controller some people like to put it in the presenter that's up to you and that's something that i would say you should keep consistent throughout your project so regardless of which bucket you fall into just make sure you're not doing both uh patterns in your project because it gets messy even if you have inconsistency so that is the mvp pattern in a nutshell so you might be familiar with model view controller mvvm i've got a video on viper as well if you're not familiar with that and this is mvp which is also fairly popular so that's all i've got for you guys today if you haven't smashed the like button already don't forget to do so helps out tremendously hit subscribe for ios swift and swift dui videos comment if you use this powder what's your favorite ios architecture let me know what you guys are working on and what videos you guys want to see i always love hearing from you all thanks again for watching i'll catch you in the next one [Music]

Channel: iOS Academy

Views: 9,538

Keywords: swift MVP, mvp swift, model view presenter, swift design pattern, swift architecture, architecture swift, swift 5 architecture, swift VIPER, swift model view viewModel, swift binding, siwftUI presenter, swift architecture pattern, swift design pattern 2021, swift development, swift tutorial, swift design pattern tutorial, model view presenter tutorial, MVP swift pattern, MVC swift, model view controller swift, model view controller, swiftUI tutorial, ios app, swift ios

Id: SFqIP5jYn_4

Length: 20min 26sec (1226 seconds)

Published: Wed Apr 14 2021