Everyone and welcome back to class and Johnny B here was the stop stop come and this is where we left
off in the previous target topic.
All right so if you haven't gone and taken that one that is the firestorm intro and we we build this
app out.
We go over all of the basics we go over setting up the project importing the assets learning about how
to how the fire store database is constructed with documents and collections how to add documents how
to retrieve them sort order all of that good stuff for them.
So if you haven't taken that one you need to go and take that one first because we are building on top
of that app.
All right.
So this is the app that we built in that course and we are going to be expanding it significantly.
Okay.
So this is what it looked like when we finished up.
We are able to sort by various categories three categories funny serious and crazy and then we are also
able to order it by popular votes.
We are able to add posts and yeah that's about it.
So do we want to do in this course.
Well in this course we are going to learn all about authentication and security rules as well as some
additional fire store functionality Okay.
And so inside of your assets for this course I'm just going to open up mine here from the desktop.
You'll see that we have a folder for assets and we just got a few or just one new image that we are
going to be using as well as the mockups for the expansion that we're going to do on this app.
If you want to start fresh from exactly where I am right now we also have the starter project if you
want to follow along just starting with what I have.
Okay.
All right so this question and these images just real quick going to open up our assets folder here
and going to grab these three right here and drag them in.
All right.
That looks good.
And then going to open up the mockup here and have it open over here actually.
And so these are the changes that we are going to be working on.
Like I said we're going to be working with authentication and security rules to authenticate.
We need to be able to log in.
All right and we're going to cover in this course the using the e-mail and password method.
Firebase has a whole bunch of supported logging methods like Twitter or Facebook Google get hub and
anonymous and maybe in a future course will go over like all of those.
And this course we're just going to go over the email and password as that is a very very common way
to log into apps.
All right so we are going to build out these two screens in this in this lesson.
The log in and the create user screens but just to go over a little bit else what we're going to be
do and we are going to be adding a the comment feature.
So each thought each post will now also have a image for the comments and display how many comments
there are.
And so we'll also have a commons view controller over here where you can add comments and view the other
comments for that particular post.
All right so let's get to it.
All right.
So we're just going to jump right in.
We're going to be in the main storyboard most of this lesson here.
All right.
So here's our previous two controllers and we're going to need a couple new controllers.
So I'm just going to drag those in right here and we're not going to use any segues or anything what
we're going to do is in our main Visi we're going to do a check whether the user is logged in and if
they are not logged in then we are going to instantiate this new view controller and then show it.
OK.
So this is going to be our log in VC Mickos this bottom pane here.
And so pretty simple we just need a couple of text fields and a couple of buttons.
So I'm going to search here for textfield and drag you in right here drag a second line and add a button
and this is going to be our log in button and drag in a second button.
And this is going to be a create user button and then we'll add a label to be able to say something
like don't have an account and then we'll put that right above our user.
All right.
That's good.
So let's go ahead and look a little bit nicer.
We're going to like both of these text fields and we're going to change the font color to a dark gray
color and change the font to custom and the family is going to be have an ear next.
And we're going to drop the size down to 14.
We're going to see.
OK.
And let's see here change the border style to none and then change the background to it see here background.
We're going to pick a light gray color and then if you click on it right here again when he dropped
the opacity down to about 20 percent.
Good.
And then for the top one our placeholder text is email.
And for the second one our placeholder text is password and for the second one if you scroll down here
you can check this secure text entry box.
And this will make it with have the dots for the passwords so that you can see the password.
All right.
That looks good for this logon button here.
Let's go and change the text color to white and the background color to our orange color that we've
been using.
And then we're going to change the S I use to the width to 1 15 and the height to 40.
Go and exclude and then for the don't have an account.
Let's go ahead and change the font to custom change the family to have an ear next and drop the font
size down to see maybe 12.
That looks good and change the color too dark great color.
That was selected when say command equal to make it fit the size.
And then for our create user buttons same thing as we had for a log in we're just going to change the
text color to white change the font to custom family is Avenir next style is actually medium so we need
to change.
Change the first loggin button that looks good then change the background color to our orange color.
Right.
So when we change this real quick to oh I forgot to change the font for that one so fun for the top
one is Avenir next.
And style is medium done.
That's good for this one.
Change the size too with is 150 and the height is 40.
There we go.
All right.
Very nice.
So now I was going to add some constraints.
So here at the top we went to say 20 from the left 20 from the top and from the right.
Constrain that and let's make it a little bit.
So give us some height as well actually.
So we're going to give it a height of 30.
There we go.
Then move this password down a little bit and we'll say 20 from the left from the right and maybe 16
from the textfield above it and height equal to 30 There we go.
And then the log in button right below it.
I'm going to say 16 from the textfield above it with the height.
And we are going to center horizontally in container that we go.
And then for this guy right here we're going to put you about.
Man I think that looks good.
We'll go 35 from the bottom of the log and button will add that constraint and then Center it horizontally
in the container.
And then for the create user button I'm going to go eight from the label above it and horizontally in
container.
And then I need to set the width and height that was 150 for the width and 40 for the height.
All right there we go.
Very nice.
So we have our log in.
VCU I set up.
Let's go ahead and add a controller file for this to be linked up with a new file.
When we go to Cocco touch class and this is going to be a subclass of UI you controller and we're ready
to call this log in VC.
When I say next and create a perfect save that I get rid of all this stuff down here and then we're
going to see this and I'm going to open up the main story board in our assistant editors and hold option
and click on Main storyboard and that we haven't been to select our view controller go to our identity
inspector and change the class to log in VC.
So now we can add our Iby outlets and actions.
All right so right here I'm going to make a little header for outlets and when it control and drag our
e-mail and I'm going to say you know text message connect with a password I'm going to control and drag
and say password text and connect them for the log in button I'm going to control and drag and say the
log in button and connect and create user create user and connect.
Then we're going to need a couple of actions for the log in button and they create users are going to
control and drag and say change changes to an action first and that name is going to be logged in and
tap it and say connect
then one more action for the create user function the control and drag and say create user tapped.
I'm going to change this to an action and say connect.
All right.
Looking good.
Going to close our assistant editor and just real quick going around the corners of our two buttons
Here's one to say log in and layer that corner radius is equal to 10.
And the create user and layer dark corner radius is equal to 10.
All right.
Good.
Next up we're going to add our next controller.
So opening back up main board.
Now we would like to add our create user view controller that's software to control and drag in here
or just drag it in here.
And yeah let's see what we need here.
So we just finished up our log in Visi in our create user Visi we have three textfield and two buttons
again create user and a cancel button.
And good.
OK let's do it.
OK so since I already have a similar layout built out in our log in VC we're going to select these three
elements here and copy them and then click back in to our new view and I'm going to paste them and put
them right there.
Is good.
And let's go and see what kind of constraints come over with some of them do come with constraints so
we have a couple of constraints.
Has any outlets no outlets for any of this one has an outlet so I'm going to remove it.
Never go.
All right.
Now that can give some constraints.
So we had that Tony from the left and 16 from the top I believe and with you from the right can have
those constraints and everything else should actually fall into place except for this one.
What do we need to add.
We have top with and height.
So I think we need a center case to center horizontally in container.
All right there we go.
And then we're going to need to remove actually these constraints for the top and move this guy down.
And then for the e-mail I'm going to copy and paste and just drag that right down here so that we can
change this to be our user name.
Textfield.
OK.
So with it selected I'm going to go into our properties attributes or attributes and Inspector I'm going
to change the placeholder to say username and then I'm just going to say public just add a note to the
user that this is the user name that is going to be public for other users to see.
OK.
And then I'm going to add some constraints here and say 20 from the left 16 from the top and 20 from
the right.
I didn't get that third constraint 20 20 from the right area.
And lastly for our log in button or that's not our logon button anymore as can be or create user Bruhn
because hey 16 ask 20 20 from the top or you change the text here to say create user that would go.
And then lastly we need a cancell bunds from just going to control command C and command V-2 paste error
to copy and paste.
We're going to change this to say cancel when to change the background color to our dark gray.
And if you forgot that to is this is a different downgrade we want 3 6 3 6 3 6.
There we go.
That's our sort of dark grey theme for this app.
And then I'm going to constrain this I'm willing to say it from the top width and height 150 and 40
had those constraints and then Center horizontally in container.
Looks like we have some duplicate constraints here and that's what these are.
So you can usually tell when you have multiple blue lines here.
So we go and open up our size inspector and sure enough I have a couple of duplicates.
We have two with this one.
Delete the second one into heights.
So I'm going to delete the second one and that's good.
All right.
Let's see what was this area talking about here need.
There no constraints on the sky.
Looks like we need our side constraints.
So that's it.
20 and 20.
That would get them.
And then these ones are just about localization warnings.
We can ignore those and to save that.
And then there's going to create a new controller does filed for this view.
That's when I right click on the controller and see new file and this going to be a Koca touch class.
I'm going to say next controller is this is create user visi.
I'm going to say next.
And create a righty new you control a file get rid of this stuff done here right now using.
And then I'm going to do the same thing.
Open up our storyboard and our assistant editor holding option and clicking on Main storyboard.
Then right click on View Controller up here to our identity inspector change the class to create user
visi.
Now we can add our outlets and actions you know with outlets here and I'm going to control and drag
and say email text control and drag for the password and say password.
Text
and use her name text then four are two buttons going to control and drag and say create button and
connect.
And lastly cancel button and connect.
Now we're getting in a couple of actions for these two women to control and direct again for our create
user button change to an action and say create tapped and say connect get some space up here and there
we go.
All right.
Draw and direct from or cancel button again and change it to an action and say cancel tapped
and say connect right it's very good.
So we have all of our outlets and the actions set up for both of our brand new viewers.
So let's go and just check this out one more time make sure we didn't miss anything.
Looks good looks good.
Create user cancell.
Let's compare to our designs.
Oh I didn't round the corners on our second view yet.
Let's do that.
Here in our create user Visi real quick to say create and leared corner radius is equal to 10 and cancel.
And layer dot corner radius is equal to 10.
All right.
We'll save that.
All right so this is looking good.
We got our two views set up and all of our actions and outlets hooked up.
So the next lesson we are going to actually start talking about firebase authentication what it is how
to use it.
And we're going to get these views hooked up so we can actually see them and play with them.
And I guess is going to be pretty cool and I'll see you in the next one.