1

00:00:07,130 --> 00:00:12,770

Hey Hey welcome back everyone Johnny be here with this slow stock common in this lesson we are going



2

00:00:12,770 --> 00:00:14,840

to create our profile of you.



3

00:00:14,840 --> 00:00:15,320

All right.



4

00:00:15,420 --> 00:00:24,080

So if we can check out our mockups we are to the point where we can now create this guy right here because



5

00:00:24,080 --> 00:00:31,490

once we log in we create our user I should say we're we come back here we get our avatar image here



6

00:00:31,490 --> 00:00:32,470

we get our name.



7

00:00:32,630 --> 00:00:37,700

And so now we want to be able when we are already logged in and we click on this button instead of taking



8

00:00:37,700 --> 00:00:41,510

us to the log in is going to take us to this view right here.



9

00:00:41,630 --> 00:00:43,060

So we've got a nice little model here.



10

00:00:43,060 --> 00:00:48,910

It's shows our avatar image our name and our email and then gives us the option to log out.



11

00:00:49,010 --> 00:00:52,470

All right so let's go ahead and get working on coding that up.



12

00:00:52,580 --> 00:00:59,270

So we're going to do is here in controller we're going to right click and say new file We're going to



13

00:00:59,270 --> 00:01:07,290

create our controller File for us and say Cocoa touch class and we're going to call this profile VCT



14

00:01:07,820 --> 00:01:12,500

but different than usual this time we're actually going to create a zip file for it.



15

00:01:12,560 --> 00:01:16,500

So we're going to learn about working with kids in this lesson.



16

00:01:16,500 --> 00:01:21,000

I was going to say next and create.



17

00:01:21,020 --> 00:01:30,090

All right so then we got our profile the c file and we have our asid so don't be scared by you know



18

00:01:30,140 --> 00:01:31,500

working with zips.



19

00:01:31,520 --> 00:01:39,680

It's pretty much just exactly the same as working in storyboard on only just working on an individual



20

00:01:40,090 --> 00:01:43,040

view instead of being able to see all of them together.



21

00:01:43,040 --> 00:01:43,720

OK.



22

00:01:44,000 --> 00:01:46,370

So let's grab our break here.



23

00:01:46,370 --> 00:01:52,150

I'm going to create a new group to hold our lives and call this the Z abs.



24

00:01:52,240 --> 00:01:55,270

Just a heads up some people call them nids or Zim's.



25

00:01:55,310 --> 00:01:57,060

Doesn't really matter.



26

00:01:57,080 --> 00:02:03,310

I'm going to drag this profile that is Zerbe here into the folder.



27

00:02:03,590 --> 00:02:11,970

And let's go ahead and take a look at our profile motile once more we got to button this view.



28

00:02:12,320 --> 00:02:16,710

A dark slightly transparent background.



29

00:02:17,440 --> 00:02:18,420

So that looks good.



30

00:02:18,470 --> 00:02:18,870

OK.



31

00:02:18,920 --> 00:02:20,100

Let's do this.



32

00:02:20,120 --> 00:02:23,840

First off I'm going to do that background use I'm going to say.



33

00:02:23,900 --> 00:02:29,610

Why do you actually know because that will be a pain every time we try to put something in.



34

00:02:29,620 --> 00:02:33,010

It'll try to put it inside of the view and we don't want it inside of you.



35

00:02:33,320 --> 00:02:37,820

So we're into the fore forefront of it which is the white one.



36

00:02:37,820 --> 00:02:38,390

OK.



37

00:02:38,660 --> 00:02:46,230

So just to be able to see the bounds of this I'm going to change the.



38

00:02:46,340 --> 00:02:47,760

So this was happening to me earlier.



39

00:02:47,760 --> 00:02:49,890

It looks like we're having some beta bugs.



40

00:02:49,910 --> 00:02:54,360

You can see that saying that there's nothing selected when clearly there is something selected.



41

00:02:54,380 --> 00:02:59,890

So if you just leave the file and then come back hopefully that works out OK.



42

00:02:59,900 --> 00:03:00,650

Yeah.



43

00:03:01,100 --> 00:03:07,490

So now we're able to I'm going to say Hey just a slightly different background color on this front.



44

00:03:07,520 --> 00:03:09,870

Just be able to kind of see its bounds.



45

00:03:10,250 --> 00:03:13,540

And then let's go ahead and start throwing everything in there that we know we're going to need.



46

00:03:13,540 --> 00:03:21,780

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



47

00:03:21,980 --> 00:03:24,480

that is close button.



48

00:03:24,870 --> 00:03:25,270

OK.



49

00:03:25,280 --> 00:03:29,000

And then I get a press command equal to the label for it.



50

00:03:29,040 --> 00:03:31,160

But there we go.



51

00:03:31,160 --> 00:03:37,400

And then command equal and then I'm going to put this up in the top right corner and I'm going to constrain



52

00:03:37,400 --> 00:03:37,990

it.



53

00:03:38,330 --> 00:03:39,620

Well not yet.



54

00:03:39,680 --> 00:03:44,560

Let's go ahead and put some of the other things that we need we need a label.



55

00:03:44,690 --> 00:03:47,740

When I throw in a table here.



56

00:03:47,930 --> 00:03:50,550

We we're going to need an image view.



57

00:03:50,630 --> 00:03:54,340

So I want to put an image in here.



58

00:03:56,400 --> 00:03:58,430

And just so you can kind of see it.



59

00:03:58,440 --> 00:04:09,750

I'm going to put in a placeholder up say the profile default and set the size to 100 by 100.



60

00:04:09,810 --> 00:04:15,150

Now we're going to need a couple more labels below here.



61

00:04:15,770 --> 00:04:22,740

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



62

00:04:22,920 --> 00:04:25,950

down here to be able to log out.



63

00:04:26,370 --> 00:04:32,520

All right so let's go ahead and we're going to grab these three labels and change their properties.



64

00:04:32,520 --> 00:04:40,550

So here we're going to set the color to our purple that we use hairiness at our font to custom and Vatican



65

00:04:40,560 --> 00:04:44,120

noom for our top one here.



66

00:04:44,160 --> 00:04:47,370

This is going to say your profile.



67

00:04:47,820 --> 00:04:52,890

And we're going to bump that up and make you style of bold.



68

00:04:53,060 --> 00:04:53,850

OK.



69

00:04:54,450 --> 00:04:56,280

And see how that looks.



70

00:04:56,280 --> 00:04:58,800

You know what I think we go even bigger.



71

00:04:59,130 --> 00:05:00,160

So let's see here.



72

00:05:00,170 --> 00:05:02,490

What is that size 23.



73

00:05:02,530 --> 00:05:04,650

Let's see how that looks.



74

00:05:04,650 --> 00:05:05,680

That looks pretty good.



75

00:05:05,870 --> 00:05:12,790

So we're going to put you right there and center you then we're going to put you right there right here.



76

00:05:12,790 --> 00:05:22,860

It's just right to placeholder for that name Johnny B press command equal to resize it put you in the



77

00:05:22,860 --> 00:05:24,230

middle here.



78

00:05:24,340 --> 00:05:28,220

See Johnny at Def dot com.



79

00:05:28,710 --> 00:05:31,370

And again this is just placeholders.



80

00:05:32,070 --> 00:05:39,070

And we're going to actually slide both of those and these are also going to be to try mediums.



81

00:05:39,090 --> 00:05:39,460

Yeah.



82

00:05:39,480 --> 00:05:42,380

Alex I think that looks pretty good.



83

00:05:43,130 --> 00:05:50,820

And comment equal and equal and then done here for this guy for this button we are going to set it's



84

00:05:50,850 --> 00:05:59,630

text to log out change its font to custom Helvetica new and it's style is bold as well.



85

00:05:59,640 --> 00:06:08,460

And let's size up to say 20 I think that'll look good command equal and change the text color to that



86

00:06:08,460 --> 00:06:10,210

purple that we're using.



87

00:06:12,310 --> 00:06:12,580

All right.



88

00:06:12,580 --> 00:06:15,270

That looks pretty good.



89

00:06:15,650 --> 00:06:17,420

So now let's go ahead and put in that.



90

00:06:17,540 --> 00:06:22,050

You I have you that is in the background that you view if you drag it.



91

00:06:22,130 --> 00:06:28,940

And we're just going to put it right here above and I'm going to control drag from this.



92

00:06:29,030 --> 00:06:30,140

Let's rename it right now.



93

00:06:30,140 --> 00:06:35,750

So once you renamed B G view from background view I'm going to control and direct to the view and see



94

00:06:35,810 --> 00:06:44,790

leadings pasted container trailing space to container top space to container and bottom space to container.



95

00:06:44,810 --> 00:06:49,850

Now I'm going to come over here to the size inspector and change all of those to zero or



96

00:06:54,360 --> 00:07:03,910

area and then selecting the background view we can set the background color to black and then drop the



97

00:07:03,910 --> 00:07:06,430

Alpha to zero point four.



98

00:07:06,440 --> 00:07:07,650

There you go.



99

00:07:07,810 --> 00:07:08,010

All right.



100

00:07:08,010 --> 00:07:13,300

And then another we're able to kind of now that we have a darker background let's change this View's



101

00:07:13,450 --> 00:07:20,570

background color back to just white hopes that's clear to white here.



102

00:07:20,890 --> 00:07:21,570

OK.



103

00:07:21,940 --> 00:07:23,590

All right so this is looking good.



104

00:07:23,590 --> 00:07:32,890

Let's go ahead and constrain some things so the container for our model we're gonna go 20 from the left



105

00:07:34,110 --> 00:07:38,400

20 from the right the height I think it looks pretty good.



106

00:07:38,440 --> 00:07:47,290

So we'll just set it at 320 and add those constraints and then we are going to center it horizontally



107

00:07:48,400 --> 00:07:50,950

or centered vertically in the container.



108

00:07:50,950 --> 00:07:52,310

There we go.



109

00:07:52,330 --> 00:07:54,610

All right so that looks good.



110

00:07:54,700 --> 00:07:57,130

We need to add constraints for the rest.



111

00:07:57,130 --> 00:08:03,180

So this guy here is going to be eight from the top 8 from the right.



112

00:08:03,280 --> 00:08:10,060

Our profile is you know what I think we'll go ahead and just throw these four elements into a stack



113

00:08:10,060 --> 00:08:10,340

of use.



114

00:08:10,350 --> 00:08:16,890

I want to grab the profile the image and these two labels and embed in the stack for you right here.



115

00:08:17,380 --> 00:08:20,770

And then we're going to need to constrain the size of this image.



116

00:08:20,770 --> 00:08:23,470

We're all still hog up the whole container.



117

00:08:23,470 --> 00:08:30,460

So I'm going to constrain to 100 and 100 had to constraints.



118

00:08:30,460 --> 00:08:31,180

There we go.



119

00:08:31,230 --> 00:08:37,090

Then with the stack he's selected I'm just going to center it horizontally and vertically.



120

00:08:37,600 --> 00:08:39,100

And that looks good.



121

00:08:39,100 --> 00:08:43,710

Let's give it some spacing so that these aren't so crammed together.



122

00:08:43,720 --> 00:08:48,500

I was trying maybe 12 14.



123

00:08:48,940 --> 00:08:51,100

That looks pretty good.



124

00:08:51,160 --> 00:08:52,410

Let's go ahead and move it up a little bit.



125

00:08:52,420 --> 00:08:54,710

We're going to take it.



126

00:08:55,220 --> 00:09:01,080

Check out the size inspector here and a line center to Y and C minus maybe like 40.



127

00:09:01,110 --> 00:09:06,680

Up too much minus 20 area I think that looks pretty good.



128

00:09:06,700 --> 00:09:09,160

So we got our profile.



129

00:09:09,160 --> 00:09:12,790

I think we need to make this a little bit taller this view right here.



130

00:09:12,790 --> 00:09:14,240

So the height equals.



131

00:09:14,330 --> 00:09:14,890

Let's try.



132

00:09:14,890 --> 00:09:20,770

Three hundred and sixty I think that that looks.



133

00:09:20,760 --> 00:09:24,770

Now it's better that way things aren't so so scrunched together.



134

00:09:24,780 --> 00:09:26,460

All right so it's constrained this guy here.



135

00:09:26,460 --> 00:09:33,470

Let's go from the bottom hand center horizontally.



136

00:09:33,800 --> 00:09:34,090

Right.



137

00:09:34,090 --> 00:09:39,150

And I think that constrains everything everything is lookin real good.



138

00:09:39,150 --> 00:09:39,410

All right.



139

00:09:39,410 --> 00:09:49,140

So I'm going to save this and then we're going to open up our assistant editor with the profile of the



140

00:09:49,140 --> 00:09:51,000

see right here.



141

00:09:51,390 --> 00:09:55,960

And this makes some of the outlets for Ferrara elements here.



142

00:09:56,250 --> 00:09:56,700

All right.



143

00:09:56,780 --> 00:09:58,660

I'm going to just delete these.



144

00:09:58,710 --> 00:10:01,870

The stuff that we don't need.



145

00:10:01,870 --> 00:10:05,220

All right so we've got to button her clothes motile button here.



146

00:10:05,320 --> 00:10:11,800

So going to say clothes clothes close motile pressed.



147

00:10:11,940 --> 00:10:17,000

That's an action and touch and so it is good and connect.



148

00:10:17,190 --> 00:10:19,040

And we've got our log out button.



149

00:10:19,230 --> 00:10:29,580

I'm going to say plug out preste and this is an action that's touched up inside and then we're going



150

00:10:29,580 --> 00:10:36,670

to need some outlets for power images and our labels here.



151

00:10:36,800 --> 00:10:55,050

So when I say profile image and here I'm going to say a user name and here this is the user Hoopes user



152

00:10:55,170 --> 00:10:56,530

e-mail.



153

00:10:56,830 --> 00:10:57,910

Right.



154

00:10:58,500 --> 00:11:02,610

And then we also need one for the background view because what we're going to do is we're going to add



155

00:11:02,610 --> 00:11:09,640

a gesture recognizer to that background view so that when someone clicks on it it will also dismiss.



156

00:11:09,660 --> 00:11:10,000

OK.



157

00:11:10,050 --> 00:11:15,320

So when I say Vicci you all right and connect.



158

00:11:15,380 --> 00:11:16,400

All righty.



159

00:11:16,440 --> 00:11:21,600

So let's go ahead and make it to where we can actually see this view.



160

00:11:21,600 --> 00:11:26,610

So for that we're going to need you to jump into our channel ABC.



161

00:11:26,630 --> 00:11:33,150

So right now any time we click on the logon button it's going to take us to the log in page.



162

00:11:33,150 --> 00:11:37,810

But if we are already logged in we instead want to take us to that profile controller.



163

00:11:38,040 --> 00:11:46,740

So we're going to do a check we're going to say if off service instance dot is logged in when we click



164

00:11:46,740 --> 00:12:01,110

on it we are going to instead show profile page else then we will show the loggin controller.



165

00:12:01,930 --> 00:12:02,390

OK.



166

00:12:02,570 --> 00:12:04,700

But now we're working with a zip right.



167

00:12:04,700 --> 00:12:08,870

We don't just have some Segway and a storyboard that we can perform.



168

00:12:08,870 --> 00:12:09,340

Right.



169

00:12:09,590 --> 00:12:12,790

So it's actually actually really easy to do.



170

00:12:12,790 --> 00:12:20,110

All we're going to do is we're going to say let profile people profile we see you're going to instantiate



171

00:12:20,110 --> 00:12:29,780

it and then we're going to say profile dot modal presentation style and this is the presentation style



172

00:12:29,780 --> 00:12:31,820

from modal the presented view controllers.



173

00:12:31,850 --> 00:12:36,020

So what we're going to do is we're going to instantiate the profile and then we're going to present



174

00:12:36,020 --> 00:12:37,980

it as a model.



175

00:12:38,210 --> 00:12:42,390

And that is just not custom and Ken.



176

00:12:42,560 --> 00:12:50,840

And then all we have to do is say present and yet present a view controller the view controller to present



177

00:12:50,840 --> 00:12:54,000

is the one that we just instantiated profile animated.



178

00:12:54,020 --> 00:12:57,430

True and completion is new.



179

00:12:57,470 --> 00:13:00,110

All right so easy peasy three lines of code.



180

00:13:00,230 --> 00:13:01,900

We instantiate it.



181

00:13:01,970 --> 00:13:07,120

We set the price of the modal presentation style and then we present it.



182

00:13:07,170 --> 00:13:07,480

All right.



183

00:13:07,520 --> 00:13:11,620

So get rid of this comment and we're going to run this and see how it goes.



184

00:13:12,010 --> 00:13:12,480

All right.



185

00:13:12,560 --> 00:13:18,070

And just a reminder to see the profile view we have to be in a luggin state.



186

00:13:18,140 --> 00:13:21,860

And so since we don't have the oh here we go.



187

00:13:21,980 --> 00:13:26,200

So apparently we are already considered to be logged in.



188

00:13:26,200 --> 00:13:33,500

Because when we created the account last time we grandis we saved to our user defaults that is logged



189

00:13:33,500 --> 00:13:35,880

in state is equal to true.



190

00:13:36,410 --> 00:13:38,480

So yeah here we go.



191

00:13:38,720 --> 00:13:39,530

Pretty cool.



192

00:13:39,860 --> 00:13:44,360

But one thing that we're noticing right off the bat is that we forgot one thing and that's here in the



193

00:13:44,360 --> 00:13:53,690

profile of see which is we want the view the overall view to have a background color of clear.



194

00:13:53,730 --> 00:13:53,970

Right.



195

00:13:53,980 --> 00:14:01,160

Want to say that and I mean everything else looks good I'm not going to run it again just to see that



196

00:14:01,160 --> 00:14:01,840

background.



197

00:14:01,850 --> 00:14:07,610

Let's actually jump into making this all set up with the correct information.



198

00:14:07,610 --> 00:14:08,170

All right.



199

00:14:08,720 --> 00:14:18,320

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.



200

00:14:18,330 --> 00:14:19,120

VC right.



201

00:14:19,220 --> 00:14:19,760

So what do we need.



202

00:14:19,760 --> 00:14:31,790

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



203

00:14:31,790 --> 00:14:33,650

the motor by clicking on here.



204

00:14:33,720 --> 00:14:34,940

And that's all I want you to do.



205

00:14:35,000 --> 00:14:35,960

That's all I want you to do.



206

00:14:35,960 --> 00:14:40,890

Pretty simple stuff that we that we have all done that we've done in previous few controllers.



207

00:14:40,910 --> 00:14:41,240

Right.



208

00:14:41,300 --> 00:14:45,950

So give it a try and then we'll finish out the rest of it.



209

00:14:45,950 --> 00:14:46,870

All right.



210

00:14:47,470 --> 00:14:48,080

OK.



211

00:14:48,170 --> 00:14:48,740

Welcome back.



212

00:14:48,740 --> 00:14:50,150

Hope you tried that out.



213

00:14:50,330 --> 00:14:57,370

So what we're going to do is we're going to create a function called set up view.



214

00:14:58,100 --> 00:14:59,320

And what are we going to do.



215

00:14:59,320 --> 00:15:05,980

We are going to set the user name the e-mail and the profile image.



216

00:15:06,130 --> 00:15:07,180

Those are the first things we're going to do.



217

00:15:07,290 --> 00:15:17,330

So user name is equal to or use a name dot text I should say is equal to user data service that instance



218

00:15:17,370 --> 00:15:17,900

dot



219

00:15:20,680 --> 00:15:31,550

name all right and then user e-mail that text is equal to user data service to instance that e-mail



220

00:15:32,270 --> 00:15:45,600

and the profile image is equal to profile image that image is equal to you by Image named.



221

00:15:46,130 --> 00:15:50,240

And again user data service dog for instance.



222

00:15:50,780 --> 00:16:02,700

Avatar not color but name and the background color is profile image background color is equal to.



223

00:16:02,970 --> 00:16:08,800

And then we use our function that we created in the last video use or data service that instance does



224

00:16:08,980 --> 00:16:16,500

turn color and the color that are the components that we are going to pass into this are with in the



225

00:16:16,860 --> 00:16:25,460

user data service that instance dot Avatar color string.



226

00:16:25,560 --> 00:16:26,300

All right.



227

00:16:26,640 --> 00:16:34,680

So now when we load up this profile the user name email profile image the image itself as well as the



228

00:16:34,680 --> 00:16:37,500

background color will be correct.



229

00:16:37,500 --> 00:16:42,100

All right so here let's go ahead and finish up the close modal pressed.



230

00:16:42,180 --> 00:16:46,250

That's a simple dismiss misfunction dismiss animated.



231

00:16:46,320 --> 00:16:50,890

True that just dismisses the view and the conclusion is no.



232

00:16:51,060 --> 00:16:57,960

And then did load we are going to not forget to call the set up the function this time I'm going to



233

00:16:57,960 --> 00:17:03,810

press hold control and I to adjust the indentation in case you haven't seen that before so if you have



234

00:17:03,810 --> 00:17:06,540

something that gets all wonky can just press control.



235

00:17:06,600 --> 00:17:09,320

And that'll fix it to it's correct indentation.



236

00:17:09,630 --> 00:17:13,000

OK so now we have this log out press button.



237

00:17:13,020 --> 00:17:16,710

So what do we want to have happen when we log out.



238

00:17:16,860 --> 00:17:17,420

OK.



239

00:17:17,700 --> 00:17:24,620

So when we log in what do we do we set a whole bunch of variables and booleans and stuff.



240

00:17:24,780 --> 00:17:28,230

We set the Avatar color name email and name.



241

00:17:28,260 --> 00:17:33,020

We also set some variables here in the office service.



242

00:17:33,120 --> 00:17:35,580

We set the is logged in boolean to true.



243

00:17:35,580 --> 00:17:39,230

We set off tokin and we store the user e-mail.



244

00:17:39,260 --> 00:17:42,890

All right so when we log out we want to clear all of that.



245

00:17:42,990 --> 00:17:43,600

Right.



246

00:17:43,980 --> 00:17:50,460

So here in the user data service what we're gonna do is we're going to create a log out user function



247

00:17:50,550 --> 00:17:54,450

case and say func log out user.



248

00:17:55,260 --> 00:18:02,160

And here we are going to set all of these variables back to empty strings.



249

00:18:02,160 --> 00:18:10,170

We're going to see ID is equal to empty string have a tar name is equal to an empty string.



250

00:18:10,320 --> 00:18:22,110

Avatar color is equal to an empty string you know is equal to an empty empty string and name is equal



251

00:18:22,110 --> 00:18:24,740

to an empty string.



252

00:18:24,750 --> 00:18:28,710

We also want to set the service variables.



253

00:18:28,730 --> 00:18:42,650

So when I say service that instance that is logged in is equal to false service instance dot user e-mail



254

00:18:42,660 --> 00:18:53,710

is back to an empty string and a service dot instance dot off token is back to an empty string.



255

00:18:54,130 --> 00:18:56,880

Ok so now we have our log out user functions.



256

00:18:56,880 --> 00:19:06,060

Let's jump back into profile of AVC and we're going to say user data service that instance that log



257

00:19:06,060 --> 00:19:08,000

out user.



258

00:19:08,130 --> 00:19:18,210

Now when we log out remember we created that notification to notify other classes when user data changes.



259

00:19:18,210 --> 00:19:21,350

And this is a prime example of when the use of data has changed.



260

00:19:21,360 --> 00:19:24,060

We have wiped clean everything.



261

00:19:24,180 --> 00:19:32,460

So practically in speaking in the future what that means is when we log out we're going to when we get



262

00:19:32,460 --> 00:19:38,850

all of this done we're going to clear the channels we're going to clear the chats and and just a clean



263

00:19:38,850 --> 00:19:39,730

slate for the app.



264

00:19:39,810 --> 00:19:40,270

All right.



265

00:19:40,500 --> 00:19:43,120

So that's why we need to have this notification post.



266

00:19:43,230 --> 00:19:53,670

So we're going to say notification center that default dot post and we want this guy right here.



267

00:19:53,670 --> 00:20:00,960

The name is known to underscore and use a day to day change and the object is new.



268

00:20:01,410 --> 00:20:01,790

OK.



269

00:20:01,860 --> 00:20:10,980

And then we are going to dismiss the view see this and this sentiment is true and completion is new.



270

00:20:11,000 --> 00:20:15,020

I just want to save that and.



271

00:20:15,970 --> 00:20:16,620

Yes.



272

00:20:16,680 --> 00:20:26,250

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



273

00:20:26,250 --> 00:20:28,920

button and issued populate all of our data.



274

00:20:29,070 --> 00:20:31,680

And then when we put log out we should wipe it all out.



275

00:20:31,740 --> 00:20:34,950

Right so it's going to run this.



276

00:20:34,980 --> 00:20:37,040

So here we go log in.



277

00:20:37,050 --> 00:20:39,830

All right so we need to do the log out thing first.



278

00:20:39,900 --> 00:20:48,280

So now we can log in and don't have an account going to see Jack attack.



279

00:20:48,300 --> 00:20:49,940

It doesn't really matter.



280

00:20:50,040 --> 00:20:55,820

Just an avatar tweet set the background color and create an account.



281

00:20:58,440 --> 00:20:59,260

And here we go.



282

00:20:59,260 --> 00:21:00,680

I'm going to click on this.



283

00:21:00,810 --> 00:21:04,570

And here we go your profile Jack attack.



284

00:21:04,680 --> 00:21:06,700

That is their e-mail.



285

00:21:06,900 --> 00:21:10,970

We forgot to set this to be a circle image but we'll fix that in a second.



286

00:21:11,730 --> 00:21:12,620

Let's see if this works.



287

00:21:12,630 --> 00:21:12,870

Yep.



288

00:21:12,900 --> 00:21:14,050

So that works.



289

00:21:14,310 --> 00:21:19,090

And if we log out then what we should expect to see is that this dismisses.



290

00:21:19,260 --> 00:21:27,090

And then because we have already set up our Her our observer on the channel Visi which is listening



291

00:21:27,090 --> 00:21:33,680

for changes to our user data when we log out this is going to switch back to our default image.



292

00:21:33,690 --> 00:21:37,350

And this should switch back to the log in and there we go.



293

00:21:37,350 --> 00:21:38,420

All right.



294

00:21:38,790 --> 00:21:39,560

Pretty smooth.



295

00:21:39,750 --> 00:21:48,360

All right so let's go and fix those couple of little things that we saw here in the profile of the sea.



296

00:21:48,480 --> 00:21:54,330

This should be a class circle image.



297

00:21:55,320 --> 00:22:00,420

And then I think the last thing was I told you that we were going to have a gesture recognizer to this



298

00:22:00,420 --> 00:22:02,810

background view so that you could click on it.



299

00:22:02,820 --> 00:22:05,220

You could tap on it and it would dismiss as well.



300

00:22:05,220 --> 00:22:09,210

So do that I'm going to jump into our profile of VC here.



301

00:22:10,440 --> 00:22:18,760

And we were going to add and create that tap gesture recognizers and say let close touch equal to you



302

00:22:18,770 --> 00:22:25,470

I'd tap gesture recognizer and let's see here.



303

00:22:25,470 --> 00:22:33,030

Let's go ahead and create our target to do a quick action I should say so we're going to create a function



304

00:22:33,330 --> 00:22:37,920

just like we did in the create a count VC where we tapped to dismiss the keyboard.



305

00:22:38,100 --> 00:22:39,790

We're going to create a function similar to that.



306

00:22:39,810 --> 00:22:45,700

We're going to say objective see phunk close tap.



307

00:22:45,780 --> 00:22:57,420

And that's going to be an user of type II tap gesture recognizer and we're going to say this.



308

00:22:57,420 --> 00:23:00,820

This animated is true.



309

00:23:00,810 --> 00:23:02,610

Completion is new.



310

00:23:02,910 --> 00:23:05,790

Ok so back up here again target is self.



311

00:23:05,790 --> 00:23:08,560

Action is hash tag selector.



312

00:23:08,590 --> 00:23:16,880

Whoops that's not a hash tag hash tag selector and we are in the profile the C dot.



313

00:23:17,280 --> 00:23:20,790

Close tap all right.



314

00:23:21,160 --> 00:23:32,180

So let's do this one more time I'm going to run it and do this log in don't have an account.



315

00:23:32,450 --> 00:23:36,090

Jenny e-mail doesn't matter.



316

00:23:36,090 --> 00:23:37,020

It doesn't really matter.



317

00:23:37,030 --> 00:23:40,730

She's an amateur bird again.



318

00:23:40,960 --> 00:23:44,300

And at the account.



319

00:23:44,590 --> 00:23:46,040

All right there we are.



320

00:23:46,570 --> 00:23:47,000

All right.



321

00:23:47,070 --> 00:23:50,640

We've got a circular image that didn't work.



322

00:23:50,650 --> 00:23:55,130

Oh you know we forgot to add that just recognize it we created it but we didn't add it.



323

00:23:55,210 --> 00:23:57,840

So we want to add to it to the background.



324

00:23:57,840 --> 00:24:05,020

Do you believe you don't add gesture recognizer and just recognizes that we want to add is of course



325

00:24:05,020 --> 00:24:07,180

close touch.



326

00:24:07,310 --> 00:24:08,950

Take that and run it.



327

00:24:09,460 --> 00:24:09,850

All right.



328

00:24:09,850 --> 00:24:12,770

Coming in here log on up.



329

00:24:13,050 --> 00:24:16,030

We have to log in again.



330

00:24:16,030 --> 00:24:17,220

Log out I should say.



331

00:24:17,620 --> 00:24:21,760

And Jhonny e-mail doesn't matter.



332

00:24:21,760 --> 00:24:23,640

Password doesn't really matter.



333

00:24:24,290 --> 00:24:29,410

And we're going to be a chameleon this time and create account.



334

00:24:32,680 --> 00:24:36,590

And when it click and there we go.



335

00:24:36,590 --> 00:24:37,800

All right.



336

00:24:38,130 --> 00:24:43,060

So looks like everything is working perfectly.



337

00:24:43,800 --> 00:24:47,820

We click on log out.



338

00:24:47,820 --> 00:24:51,810

It logs us out and then we're able to love back in.



339

00:24:51,810 --> 00:24:54,730

All right so in this lesson we created the profile view.



340

00:24:54,810 --> 00:25:00,150

But one thing that is bothering me is that every time we want to log in we have to go through the create



341

00:25:00,150 --> 00:25:02,900

user account cycle.



342

00:25:02,970 --> 00:25:03,640

Let's go ahead.



343

00:25:03,710 --> 00:25:09,150

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



344

00:25:09,150 --> 00:25:12,800

already logged in then it'll automatically set things up for you.



345

00:25:12,790 --> 00:25:13,250

All right.



346

00:25:13,500 --> 00:25:15,210

So that's going to be a fun one.



347

00:25:15,210 --> 00:25:16,940

Hope you're looking forward to that.



348

00:25:16,950 --> 00:25:23,950

And just to save our progress I'm going to add and commit and then I will see you in the next one.