Hey Hey welcome back everyone Johnny be here with this slow stock common in this lesson we are going
to create our profile of you.
All right.
So if we can check out our mockups we are to the point where we can now create this guy right here because
once we log in we create our user I should say we're we come back here we get our avatar image here
we get our name.
And so now we want to be able when we are already logged in and we click on this button instead of taking
us to the log in is going to take us to this view right here.
So we've got a nice little model here.
It's shows our avatar image our name and our email and then gives us the option to log out.
All right so let's go ahead and get working on coding that up.
So we're going to do is here in controller we're going to right click and say new file We're going to
create our controller File for us and say Cocoa touch class and we're going to call this profile VCT
but different than usual this time we're actually going to create a zip file for it.
So we're going to learn about working with kids in this lesson.
I was going to say next and create.
All right so then we got our profile the c file and we have our asid so don't be scared by you know
working with zips.
It's pretty much just exactly the same as working in storyboard on only just working on an individual
view instead of being able to see all of them together.
OK.
So let's grab our break here.
I'm going to create a new group to hold our lives and call this the Z abs.
Just a heads up some people call them nids or Zim's.
Doesn't really matter.
I'm going to drag this profile that is Zerbe here into the folder.
And let's go ahead and take a look at our profile motile once more we got to button this view.
A dark slightly transparent background.
So that looks good.
OK.
Let's do this.
First off I'm going to do that background use I'm going to say.
Why do you actually know because that will be a pain every time we try to put something in.
It'll try to put it inside of the view and we don't want it inside of you.
So we're into the fore forefront of it which is the white one.
OK.
So just to be able to see the bounds of this I'm going to change the.
So this was happening to me earlier.
It looks like we're having some beta bugs.
You can see that saying that there's nothing selected when clearly there is something selected.
So if you just leave the file and then come back hopefully that works out OK.
Yeah.
So now we're able to I'm going to say Hey just a slightly different background color on this front.
Just be able to kind of see its bounds.
And then let's go ahead and start throwing everything in there that we know we're going to need.
We're going to need a button here in the top or right and it's quite an ad that's the image for that
that is close button.
OK.
And then I get a press command equal to the label for it.
But there we go.
And then command equal and then I'm going to put this up in the top right corner and I'm going to constrain
it.
Well not yet.
Let's go ahead and put some of the other things that we need we need a label.
When I throw in a table here.
We we're going to need an image view.
So I want to put an image in here.
And just so you can kind of see it.
I'm going to put in a placeholder up say the profile default and set the size to 100 by 100.
Now we're going to need a couple more labels below here.
So it's going to be our name label is going to be our e-mail label and then we're going to need a button
down here to be able to log out.
All right so let's go ahead and we're going to grab these three labels and change their properties.
So here we're going to set the color to our purple that we use hairiness at our font to custom and Vatican
noom for our top one here.
This is going to say your profile.
And we're going to bump that up and make you style of bold.
OK.
And see how that looks.
You know what I think we go even bigger.
So let's see here.
What is that size 23.
Let's see how that looks.
That looks pretty good.
So we're going to put you right there and center you then we're going to put you right there right here.
It's just right to placeholder for that name Johnny B press command equal to resize it put you in the
middle here.
See Johnny at Def dot com.
And again this is just placeholders.
And we're going to actually slide both of those and these are also going to be to try mediums.
Yeah.
Alex I think that looks pretty good.
And comment equal and equal and then done here for this guy for this button we are going to set it's
text to log out change its font to custom Helvetica new and it's style is bold as well.
And let's size up to say 20 I think that'll look good command equal and change the text color to that
purple that we're using.
All right.
That looks pretty good.
So now let's go ahead and put in that.
You I have you that is in the background that you view if you drag it.
And we're just going to put it right here above and I'm going to control drag from this.
Let's rename it right now.
So once you renamed B G view from background view I'm going to control and direct to the view and see
leadings pasted container trailing space to container top space to container and bottom space to container.
Now I'm going to come over here to the size inspector and change all of those to zero or
area and then selecting the background view we can set the background color to black and then drop the
Alpha to zero point four.
There you go.
All right.
And then another we're able to kind of now that we have a darker background let's change this View's
background color back to just white hopes that's clear to white here.
OK.
All right so this is looking good.
Let's go ahead and constrain some things so the container for our model we're gonna go 20 from the left
20 from the right the height I think it looks pretty good.
So we'll just set it at 320 and add those constraints and then we are going to center it horizontally
or centered vertically in the container.
There we go.
All right so that looks good.
We need to add constraints for the rest.
So this guy here is going to be eight from the top 8 from the right.
Our profile is you know what I think we'll go ahead and just throw these four elements into a stack
of use.
I want to grab the profile the image and these two labels and embed in the stack for you right here.
And then we're going to need to constrain the size of this image.
We're all still hog up the whole container.
So I'm going to constrain to 100 and 100 had to constraints.
There we go.
Then with the stack he's selected I'm just going to center it horizontally and vertically.
And that looks good.
Let's give it some spacing so that these aren't so crammed together.
I was trying maybe 12 14.
That looks pretty good.
Let's go ahead and move it up a little bit.
We're going to take it.
Check out the size inspector here and a line center to Y and C minus maybe like 40.
Up too much minus 20 area I think that looks pretty good.
So we got our profile.
I think we need to make this a little bit taller this view right here.
So the height equals.
Let's try.
Three hundred and sixty I think that that looks.
Now it's better that way things aren't so so scrunched together.
All right so it's constrained this guy here.
Let's go from the bottom hand center horizontally.
Right.
And I think that constrains everything everything is lookin real good.
All right.
So I'm going to save this and then we're going to open up our assistant editor with the profile of the
see right here.
And this makes some of the outlets for Ferrara elements here.
All right.
I'm going to just delete these.
The stuff that we don't need.
All right so we've got to button her clothes motile button here.
So going to say clothes clothes close motile pressed.
That's an action and touch and so it is good and connect.
And we've got our log out button.
I'm going to say plug out preste and this is an action that's touched up inside and then we're going
to need some outlets for power images and our labels here.
So when I say profile image and here I'm going to say a user name and here this is the user Hoopes user
e-mail.
Right.
And then we also need one for the background view because what we're going to do is we're going to add
a gesture recognizer to that background view so that when someone clicks on it it will also dismiss.
OK.
So when I say Vicci you all right and connect.
All righty.
So let's go ahead and make it to where we can actually see this view.
So for that we're going to need you to jump into our channel ABC.
So right now any time we click on the logon button it's going to take us to the log in page.
But if we are already logged in we instead want to take us to that profile controller.
So we're going to do a check we're going to say if off service instance dot is logged in when we click
on it we are going to instead show profile page else then we will show the loggin controller.
OK.
But now we're working with a zip right.
We don't just have some Segway and a storyboard that we can perform.
Right.
So it's actually actually really easy to do.
All we're going to do is we're going to say let profile people profile we see you're going to instantiate
it and then we're going to say profile dot modal presentation style and this is the presentation style
from modal the presented view controllers.
So what we're going to do is we're going to instantiate the profile and then we're going to present
it as a model.
And that is just not custom and Ken.
And then all we have to do is say present and yet present a view controller the view controller to present
is the one that we just instantiated profile animated.
True and completion is new.
All right so easy peasy three lines of code.
We instantiate it.
We set the price of the modal presentation style and then we present it.
All right.
So get rid of this comment and we're going to run this and see how it goes.
All right.
And just a reminder to see the profile view we have to be in a luggin state.
And so since we don't have the oh here we go.
So apparently we are already considered to be logged in.
Because when we created the account last time we grandis we saved to our user defaults that is logged
in state is equal to true.
So yeah here we go.
Pretty cool.
But one thing that we're noticing right off the bat is that we forgot one thing and that's here in the
profile of see which is we want the view the overall view to have a background color of clear.
Right.
Want to say that and I mean everything else looks good I'm not going to run it again just to see that
background.
Let's actually jump into making this all set up with the correct information.
All right.
So let's go ahead and jump in to profile ABC and I want you to try and fill out the rest of this profile.
VC right.
So what do we need.
We need to be able to show the user's image the user's name and email and then have it be able to close
the motor by clicking on here.
And that's all I want you to do.
That's all I want you to do.
Pretty simple stuff that we that we have all done that we've done in previous few controllers.
Right.
So give it a try and then we'll finish out the rest of it.
All right.
OK.
Welcome back.
Hope you tried that out.
So what we're going to do is we're going to create a function called set up view.
And what are we going to do.
We are going to set the user name the e-mail and the profile image.
Those are the first things we're going to do.
So user name is equal to or use a name dot text I should say is equal to user data service that instance
dot
name all right and then user e-mail that text is equal to user data service to instance that e-mail
and the profile image is equal to profile image that image is equal to you by Image named.
And again user data service dog for instance.
Avatar not color but name and the background color is profile image background color is equal to.
And then we use our function that we created in the last video use or data service that instance does
turn color and the color that are the components that we are going to pass into this are with in the
user data service that instance dot Avatar color string.
All right.
So now when we load up this profile the user name email profile image the image itself as well as the
background color will be correct.
All right so here let's go ahead and finish up the close modal pressed.
That's a simple dismiss misfunction dismiss animated.
True that just dismisses the view and the conclusion is no.
And then did load we are going to not forget to call the set up the function this time I'm going to
press hold control and I to adjust the indentation in case you haven't seen that before so if you have
something that gets all wonky can just press control.
And that'll fix it to it's correct indentation.
OK so now we have this log out press button.
So what do we want to have happen when we log out.
OK.
So when we log in what do we do we set a whole bunch of variables and booleans and stuff.
We set the Avatar color name email and name.
We also set some variables here in the office service.
We set the is logged in boolean to true.
We set off tokin and we store the user e-mail.
All right so when we log out we want to clear all of that.
Right.
So here in the user data service what we're gonna do is we're going to create a log out user function
case and say func log out user.
And here we are going to set all of these variables back to empty strings.
We're going to see ID is equal to empty string have a tar name is equal to an empty string.
Avatar color is equal to an empty string you know is equal to an empty empty string and name is equal
to an empty string.
We also want to set the service variables.
So when I say service that instance that is logged in is equal to false service instance dot user e-mail
is back to an empty string and a service dot instance dot off token is back to an empty string.
Ok so now we have our log out user functions.
Let's jump back into profile of AVC and we're going to say user data service that instance that log
out user.
Now when we log out remember we created that notification to notify other classes when user data changes.
And this is a prime example of when the use of data has changed.
We have wiped clean everything.
So practically in speaking in the future what that means is when we log out we're going to when we get
all of this done we're going to clear the channels we're going to clear the chats and and just a clean
slate for the app.
All right.
So that's why we need to have this notification post.
So we're going to say notification center that default dot post and we want this guy right here.
The name is known to underscore and use a day to day change and the object is new.
OK.
And then we are going to dismiss the view see this and this sentiment is true and completion is new.
I just want to save that and.
Yes.
Now when we load up the app and we create a user and log in we're going to be able to click on the profile
button and issued populate all of our data.
And then when we put log out we should wipe it all out.
Right so it's going to run this.
So here we go log in.
All right so we need to do the log out thing first.
So now we can log in and don't have an account going to see Jack attack.
It doesn't really matter.
Just an avatar tweet set the background color and create an account.
And here we go.
I'm going to click on this.
And here we go your profile Jack attack.
That is their e-mail.
We forgot to set this to be a circle image but we'll fix that in a second.
Let's see if this works.
Yep.
So that works.
And if we log out then what we should expect to see is that this dismisses.
And then because we have already set up our Her our observer on the channel Visi which is listening
for changes to our user data when we log out this is going to switch back to our default image.
And this should switch back to the log in and there we go.
All right.
Pretty smooth.
All right so let's go and fix those couple of little things that we saw here in the profile of the sea.
This should be a class circle image.
And then I think the last thing was I told you that we were going to have a gesture recognizer to this
background view so that you could click on it.
You could tap on it and it would dismiss as well.
So do that I'm going to jump into our profile of VC here.
And we were going to add and create that tap gesture recognizers and say let close touch equal to you
I'd tap gesture recognizer and let's see here.
Let's go ahead and create our target to do a quick action I should say so we're going to create a function
just like we did in the create a count VC where we tapped to dismiss the keyboard.
We're going to create a function similar to that.
We're going to say objective see phunk close tap.
And that's going to be an user of type II tap gesture recognizer and we're going to say this.
This animated is true.
Completion is new.
Ok so back up here again target is self.
Action is hash tag selector.
Whoops that's not a hash tag hash tag selector and we are in the profile the C dot.
Close tap all right.
So let's do this one more time I'm going to run it and do this log in don't have an account.
Jenny e-mail doesn't matter.
It doesn't really matter.
She's an amateur bird again.
And at the account.
All right there we are.
All right.
We've got a circular image that didn't work.
Oh you know we forgot to add that just recognize it we created it but we didn't add it.
So we want to add to it to the background.
Do you believe you don't add gesture recognizer and just recognizes that we want to add is of course
close touch.
Take that and run it.
All right.
Coming in here log on up.
We have to log in again.
Log out I should say.
And Jhonny e-mail doesn't matter.
Password doesn't really matter.
And we're going to be a chameleon this time and create account.
And when it click and there we go.
All right.
So looks like everything is working perfectly.
We click on log out.
It logs us out and then we're able to love back in.
All right so in this lesson we created the profile view.
But one thing that is bothering me is that every time we want to log in we have to go through the create
user account cycle.
Let's go ahead.
In this next lesson we're going to make it so that we can log in right from here as well as if you're
already logged in then it'll automatically set things up for you.
All right.
So that's going to be a fun one.
Hope you're looking forward to that.
And just to save our progress I'm going to add and commit and then I will see you in the next one.