RxSwift MVVM Intro: Login Validation Tutorial | Xcode 11+ | iOS 13+

[Music] hey everyone in this video I'm going to show you how you can build a simple login app using onyx whiffed and mvvm you can see that the login button is disabled and as soon as we enter a username and password that is over three characters the login button becomes enabled so let's get started building this come to Xcode select file new project single view app we're gonna call this login rx swift make sure you select storyboard down here click Next create and you're presented with your project the first thing we need to do is add rx whiffed and rx cocoa to our project so in order to do this we're going to use something called cocoa pods so down there cocoa pods if you don't already have it and once you've got it we want another gate to the root of our app so for me this is in documents once you're in the root of the app you want to type pod in it after this command you can see that it's created a pod file for you what you want to do is open this pod file up in a text editor let's get rid of this and under where it says pods for looking all right so we're going to say pod rx Swift and pod rx Coco if we save that file come back to your terminal and type pod install those now the verbose flag is just to check give us more of a description when the install is actually happening so we can see what's going on so once you've done that we need to close our project open our root directory here and reopen using this XE workspace file and once you've done that you can see that the pods are included in our products here and we're ready to use them so the first thing we're going to do if you remember what we try to build is recreate this layout now we're going to use the stack view there'll be a label W two text fields and there'll be a button so that's open our storyboard and click on this plus on top right here and we wanted to drag in a vertical stack view here so let's do that just drag it in and we're gonna pin this to the top let's say 500 and we're going to pin it to each side by 15 now we'll adjust these as I'm when it doesn't look great and then we're going to give this stack view some children so let's drag in our label for the app title let's drag in some text fields so you can do this either way you can either drag it on top here or what you can drag it under the view on the left here and we can do the same again or you can just copy that and the final thing we want to add is our button so drove it into the bottom there and you'll notice that the spacing is not quite right so let's deal with that so if you select your stack view and come over here on the right click your attributes inspector and what we're going to do is add some vertical spacing in here so let's make this 10 what do we think maybe 15 and we can Center this label and we can increase the font here on the right let's make that medium let's call it something else my login let's leave the text rollers as they are for now actually we could we can add our placeholder text in here so let's just say username and password let's make that secure text entry only down here and let's give the button a bit of the style so this is going to be a bigger font as well we got 20 medium again different color let's have it white and then change the background to red how about this yeah system red color let's give it a height so come down to your constraints down here and we're going to give it a height or let's say 50 and the final thing we want to do is curve our corners so come to your user-defined Monteria attributes here under the identity inspector and tight layer the corner radius and this is going to be a number and let's give a value of 5 and let's just set the title on this button to login and we'll come and address any outstanding UI points if we have any at the end but for now we want to attach these to our view controller through IB outlets so you want to click and let's get rid of this side and on here click on this plus icon and now you can see we've got two different views and I'm one of them can I look up the view controller here you can bring up that shortcut menu by pressing command shift o and then typing whatever you want to find so now we've got this story wall on the left and our corresponding view controller on the right and we're going to select I'll username text field and control drag so make sure you're holding down your mouse over top of your controller and that's tight username text field here and do the same for the password password text field and the same for the login button so login button and we also want the action on the bottom as well so we can check to see whether we've enabled it will disable it quickly so in your connection here make sure you select action this time I'm gonna say tap login button and just to be more granular we can change this sender to hold your ID button and in here let's just print out tapped login button so that's it for now we can get rid of our storyboard on the left here and we can import our X whiffed and import our X cocoa and what we need is a view model to represent this screen so let's do that you come down underneath your view controller and you type class login new model and what we need to do is create binding between our input and the view model but we also need to create another binding that goes the other way so that will tell our view that this input is valid so I'm going to show you how you can do that so we're going to define two published subjects one of them will be the username text publish subject which will be a string and the other one is going to be the password text publish subject now I'm using a longer names here just to make it clear what everything is but feel free to shorten this variable name if you want and what we want to do is create an observable that will tell us whether our username text and password text together are valid let's do that it's going to be a function called its valid which will return us serve the ball type ball and we need to use one of the aurochs swift methods here it's called combine latest and this will take our user name text published object as an observable and our password text publish subject that's an observable because published objects come both be observers and observables which makes them very useful for this type of thing and we're going to map that and you can see in our completion here that it gives us two strings the username and the password so we're going to map those two strings into a bull here so that's right username and password now we're going to return a pool which will be true if I username count is over three characters and our password count is over three characters and then we need to return the result of this so again we're mapping our two strings whenever they get triggered into our bull and this is what will determine whether our login button is enabled or disabled so if you come back to our viewcontroller now and you come to viewdidload let's tell you this up a bit and what we're going to do is use our Coco so type user name text field talk to power X dot text and this would effectively use some magic to determine when the text is changing on this text field because you can see it's returning us a string an optional string we need to map this to a non-optional and that's buying that too ah and actually that's create or we're getting viewmodel up here so I'll bind it to our login humidor use a text publish username text publish object and also we want to create a disposed bag up here and this is how you manage memory and I write swift so it's important to write disposed by dispose bag and this means that when this view controller the other Cades rx Swift were clean everything up for you so let's repeat this for the password text field so this means that any text that's entered into either our password or username text field it will trigger our combined latest which will then emit a bull by this is valid to tell us whether to enable or disable our login button so let's bind or is valid observable to our login button so login button to our X dot is enabled and make sure we dispose of this properly and we're also going to bind this value to the Alpha property and we need to map our observable which is currently a stream of bull to a stream of CG floats so it has to be the same as this alpha so let's do that let's type dot map and if it's valid we want to say that the opacity will be full so 1 and if it's not we're going to make it more point 1 there's one more thing we need to do and that's to make sure that each of these published subjects have a starting value otherwise the combined letters will not emit so we're going to start with the empty string and we're also going to start with a false value for whether it's valid or not because we know it's going to be empty when this first load and just to finish off we can put in here that our username text field is going to be our first responder and that means that we'll see the keyboard straight away so let's run this and we can start typing so you'll notice that this shouldn't be valid but as soon as we had our fourth character in we get our login button being enabled let's just check the print statement and you can see from our console that it's working [Music]

Channel: James Haville

Views: 8,105

Rating: 4.9629631 out of 5

Keywords: swift, rxswift, mvvm, ios, xcode, tutorial

Id: 2OPdndIenqw

Length: 17min 7sec (1027 seconds)

Published: Wed Mar 18 2020