Welcome back everybody Johnny B who was the slowest dot com.
And in this lesson we are going to pick up right off where we left in the last lesson.
I know lesson was really long and pretty heavy.
So we're going to see if we can make this one little bit shorter and lighter.
All right.
So in the last one we created this register user function and we've seen how it works in Postman.
So now let's actually make it work here in our app.
All right.
So we're going to do is we're going to be working in our create account Visi that's we have to file.
And right now we don't have we don't have much in here.
All right so we're going to have to hook up all of our UI elements that are in the main storyboard.
So I just option click on the main story board to bring up our assistant editor and let's see if we
can create a little bit more room and then closed the left and right panels.
And yes we went here with the create a count controller here and we're just going to create some outlets
for for for our text fields and buttons and stuff.
OK.
So we'll start here with the user name.
I'm going to control drag and drop over here and say user name text DX T.
And we got an outlet.
I'm going to quick create my outlet's header of there we go.
Next up we have the emails from that control drag and drop it right here and say email text and then
we have the password textfield I want to say pass.
Text Then let's go ahead and do these other ones that we have right now.
We're going to grab the image here.
But make sure you have the actual image not the button that goes over it.
So make sure you've got the profile of the full image right here.
And I'm going to control drag.
And here we're going to see a user image.
I am g and connect that.
Now we're going to grab the actually we're not going to do the choose to turn generic background color
buttons yet but we will need an action for this.
Create a count button here.
So I'm going to control drag.
And this time make sure that it is an action.
And we were going to say create a count press.
OK so that's an actual touch up inside and connect.
And you know what let's go ahead and add these other buttons here.
Bawler at it that way we won't have to do it later.
So with the choose Avatar button selected I'm control and dragging and I'm going to say Pick have a
top are pressed and that's going to be an action and connect.
And then below that one I'm going to grab the general background color and I'm going to say control
drag and make this an action and say pick back just because they pick B.G. color pressed I'm going to
say connect or connect there.
All right so we have all the stuff that we need.
But the most doublechecked username email password that one's already hooked up got the image.
And these two and all three of these buttons are right so I think frigate's I'm going to go ahead and
close our assistant editor and re-open our left and her right panes.
And so now we are able to work in with what happens when we push push that create account pressed button
and see what's going to happen.
Well first off we are going to grab what is in the username text email text and password text and will
not the not the username quite yet just email the password because remember in postman although we need
to register a user as an email and a password.
So let's go ahead and create some variables for those who are inside guard.
Let email equal email text that text and we're going to do a check here so we're going to say Kamo which
denotes where we're saying Gardley e-mail equal what's inside of the e-mail that text if or where the
e-mail text that text does not equal an empty string.
And if all of that checks out then we'll take that into the variable e-mail.
If not then we're just going to say.
Else return.
Can number do the same thing with password reset guard and let pass equal to pass text dot text where
the last text that text does not equal an empty string.
Else we're going to return.
OK so if you haven't looked at gardes statements yet what it is essentially is another way of unwrapping
optional values.
OK.
So the values of the text fields if you click on text here you'll see that the it's an optional string.
So that's why we have to unwrap them.
And then once we have our email on password all we're going to do is call our our register function
inside of the service and we say all the service is not in it Officer service instance dot registry
user.
And we are going to pass here the e-mail and then we're going to pass in the Pass the password that
we have that we unwrapped right here.
And then on the completion if you click here and then press enter we get the completion handler and
we're going to rename it here to be success.
And then here we can say if success then we're going to see print
registered user OK so simple as that as we're going to save that.
So let's talk about real people we've done we've gone ahead and unwrapped and created variables for
our email and password.
And those are taken from the e-mail text and password.
Text You.
I text fields right here in our app.
Right.
And then we pass those into the service thight instance that register user function that we created
and the last lesson when we click on the use register user button.
And if it's successful we're just going to print out this print statement right here.
So let's go ahead and give that a try.
I'm going to toggle off the software keyboard and here we're going to try registering it using we say
test and register dot com and the password is 1 2 3 4 5 6 and I'm going to click here.
And if it works we should see a print statement down here and in a few seconds.
And remember there it is.
So the server had gone to sleep again remember that if you don't want your server to ever go to sleep
you're going to have to upgrade your account to the I think the next one is called hobby and that's
only seven bucks a month.
So not a lot.
And so if you want to have it always awake and always ready to respond immediately then you can do that.
All right.
So we registered to user in fact let's go ahead and check out our labs.
If we come over here to lab dot com or if you did the one the one button deploy with Heroku that will
be here under resources you'll see the light bulb here and you can click on it and it'll take you to
the same type of thing.
So if we come over here and click on our on our server on our Mugwort database come down here to accounts
then we should see it's right here test at the register dot com.
So guys this is super cool.
We just coded a web request gave it the information that we wanted it to send to the server to our API.
The API took that information created a count object and then sent that over to our Mongo D-B online
database and saved it here.
So some super cool stuff.
So that's step 1 in the creating a user account process remember so we have really we just register
to user the next two steps is to log in the user and then add the user.
But in this video like I said we're going to keep it light and instead of jumping into some more heavy
API code we're going to do a little bit of UI enhancements.
All right.
So what we're going to do if we check out are if we check out our designs these buttons they have some
rounded edges.
OK.
Now we could do it the old fashioned way of coming over here to our loggin the CSA and having gay and
the outlet for the button and then doing and layer that corner radius is equal to five.
But you know you shouldn't really have a lot of that type of code in your view controller.
If you can let's you want to extract that out into subclasses so that's over do just like we created
a greeting view subclass.
We're going to create a rounded button subclass of you I buy in.
All right.
So let's go ahead and get started I'm going to click on view and see a new file and we're going to do
cocoa touch class.
Good.
Next we're going to look for you I button.
Here we go.
I'm going to say rounded on.
OK we're going to say next.
And create.
All right.
And we're going to delete this hand just like a greeting view we want to be able to see the changes
right there and storyboards So we're going to make this an ivy the Zeina.
There we go.
And we want to be able to change also the corner radius in storyboard.
So we're going to create an IP inspectable something to say I be inspectable That's a variable called
coronor radius that's going to be a C.G. float because that's what corner radius requires.
And we'll set a default value of 3.0 and we're going to say did set.
So when we change in storyboard what's going to happen we are going to set the corner radius of the
button to the new one that we just set.
So self-declared a corner radius equal to the corner radius.
So the do the run and Button UI buttons layer not corner radius value will be set to this value right
here.
OK.
So pretty straightforward then we're going to say override or if we just do awake from NIB.
So when it is created when it awakes from its KNIBBS state we're going to say self dot set up the you.
And that's just a function that we haven't created yet.
So one of them right here can see phunk set up view.
And here also we're just going to say self-taught fayer corner radius is equal to corner radius and
then the last thing that we need to do is we're going to call a function called prepare for interface
builder which you can see here is called 180 signable object is created in Interface Builder.
OK.
And then we're going to also need to call super dot prepare for Interface Builder.
And if we click on it here we can read a little bit about what it does this is called when a desirable
object is created and an Interface Builder one Interface Builder instantiates a class with the desirable
attribute it calls this method to let the resulting object know that it was created at design time.
You can implement this method in your design classes and use it to configure their design time appearance.
So here we are also going to put a self-taught set of view so that when it's so that when we change
in storyboard then we know to set it up right here right.
So pretty straightforward going to clean up a couple of things here and get rid of unwanted spaces.
And I think that looks good.
So I want to save it and we're going to jump back into storyboard and let's go ahead and set those two
buttons that we have to this class here in log and I'm just selecting in coming over here to its attribute
or the identity inspector.
And we're going to change its class to a rounded button and you can see that it already has a rounded
appearance now and then we're into the same thing for the Create count button when I say rounded button
and that looks looks pretty good I think we want to a little bit more rounded though.
So let's go ahead and come to our attributes and inspector and you can see here this is the Iby inspectable
variable that we created in our rounded button class.
So we're going to I'm going to bump this up to five and then the same thing with the create a count
button and bump that up to five and see how that looks.
And yeah I think that looks really good.
And you know what that is all we are going to cover in this lesson.
Short and sweet.
We fixed up our credit account.
We we added the outlets for us for all of our stuff Iby actions for our buttons that we're going to
use in the future as well as the create a count button right now we went ahead and we called our office
service type instance dot register user function passing into the email and password so that it could.
And then.
So let's go ahead and follow it over.
So if you command click and click on a method you can say jump to definition and I'll take you over
there.
And so just a refresher of what we did and the last lesson we are passing into this function the email
and password we have our completion handler and so we're just sending over to our online API.
This web request with the information and the API handles creating the user or registering the user
I should say.
So that's some pretty cool stuff.
Hope you guys are enjoying it so far.
And before we sign off here I'm going to go ahead and just commit our changes.
So we say get status say Get add that get to commit cash.
And this was less than 10.
And that I'm going to do get push origin lesson dash.
All right looking great guys and I will see you in the next one.