1
00:00:07,740 --> 00:00:09,300
Hey welcome back everyone.

2
00:00:09,310 --> 00:00:14,760
JENNY be here with slow dot common in this lesson we are going to create our profile of you.

3
00:00:14,760 --> 00:00:15,240
All right.

4
00:00:15,370 --> 00:00:24,010
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,030 --> 00:00:31,440
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,440 --> 00:00:36,660
we get our name and so now we want it to be able when we are already logged in and we click on this

7
00:00:36,660 --> 00:00:41,610
button instead of taking us to the log and it's going to take us to this view right here.

8
00:00:41,610 --> 00:00:43,010
So we've got a nice little model here.

9
00:00:43,010 --> 00:00:48,860
It's shows our avatar image our name and our e-mail and then gives us the option to log out.

10
00:00:48,960 --> 00:00:52,450
All right so let's go ahead and get working on coding that up.

11
00:00:52,530 --> 00:00:55,530
So we're going to do is here ender controller.

12
00:00:55,530 --> 00:01:01,930
We're going to right click and say new file We're going to create our controller File for us and say

13
00:01:01,950 --> 00:01:10,560
a touch class and we're going to call this profile Visi but different than usual this time we're actually

14
00:01:10,560 --> 00:01:12,450
going to create a zip file for it.

15
00:01:12,510 --> 00:01:16,350
So we're going to learn about working with kids in this lesson.

16
00:01:16,350 --> 00:01:20,970
I was going to say next and create.

17
00:01:20,970 --> 00:01:26,730
All right so then we got our profile the c file and we have our.

18
00:01:27,090 --> 00:01:34,980
So don't be scared by you know working with zips it's pretty much just exactly the same as working in

19
00:01:35,250 --> 00:01:42,990
storyboard on only just working on an individual view instead of being able to see all of them together.

20
00:01:42,990 --> 00:01:43,670
OK.

21
00:01:43,950 --> 00:01:46,320
So let's grab our Z right here.

22
00:01:46,320 --> 00:01:52,200
I'm going to create a new group to hold our lives and call this the Z abs.

23
00:01:52,200 --> 00:01:56,960
Just a heads up some people call them needs or Zeb's doesn't really matter.

24
00:01:57,010 --> 00:02:05,100
I'm going to go drag this profile that is Zerbe here into the folder and let's go ahead and take a look

25
00:02:05,100 --> 00:02:08,970
at our profile model once more.

26
00:02:09,030 --> 00:02:18,410
We got to button this view a dark slightly transparent background so that looks good.

27
00:02:18,500 --> 00:02:20,060
OK let's do this.

28
00:02:20,070 --> 00:02:23,830
First off I'm going to do that background use I'm going to say.

29
00:02:23,900 --> 00:02:29,520
By the you actually know because that will be a pain every time we try to put something in.

30
00:02:29,520 --> 00:02:32,940
It'll try to put it inside of the view and we don't want it inside of you.

31
00:02:33,270 --> 00:02:37,770
So we're into the fore forefront of it which is the white one.

32
00:02:37,770 --> 00:02:38,330
OK.

33
00:02:38,610 --> 00:02:46,180
So just to be able to see the bounds of this I'm going to change the.

34
00:02:46,290 --> 00:02:47,700
So this was happening to me earlier.

35
00:02:47,710 --> 00:02:49,840
It looks like we're having some beta bugs.

36
00:02:49,860 --> 00:02:54,320
You can see that saying that there's nothing selected when clearly there is something selected.

37
00:02:54,330 --> 00:02:59,820
So if you just leave the file and then come back hopefully that works out OK.

38
00:02:59,840 --> 00:03:00,590
Yeah.

39
00:03:01,050 --> 00:03:07,450
So now we're able to I'm going to say Hey just a slightly different background color on this front view.

40
00:03:07,470 --> 00:03:09,830
Just to kind of see its bounds.

41
00:03:10,200 --> 00:03:13,470
And then let's go ahead and start throwing everything in there that we know we're going to need.

42
00:03:13,470 --> 00:03:17,550
We're going to need a button here in the top or right.

43
00:03:18,190 --> 00:03:24,370
And let's go ahead and add that it's the image for that that is close button.

44
00:03:24,820 --> 00:03:25,200
OK.

45
00:03:25,230 --> 00:03:29,090
And then going to press command equal up get rid of the label for it.

46
00:03:29,430 --> 00:03:31,100
There we go.

47
00:03:31,100 --> 00:03:37,350
And then command equal and then I'm going to put this up in the top right corner and I'm going to constrain

48
00:03:37,350 --> 00:03:37,950
it.

49
00:03:38,280 --> 00:03:39,220
Well not yet.

50
00:03:39,630 --> 00:03:42,870
Let's go ahead and put some of the other things that we need.

51
00:03:42,860 --> 00:03:50,350
We're going to need a label soon to throw in a table here we we're going to need an image.

52
00:03:50,380 --> 00:03:54,280
So I want to put an image in here.

53
00:03:56,320 --> 00:03:58,380
And just so we can kind of see it.

54
00:03:58,390 --> 00:04:09,600
I'm going to put in a placeholder up say the profile default and set the size to 100 by 100.

55
00:04:09,760 --> 00:04:15,190
Now we're going to need a couple more labels below here.

56
00:04:15,730 --> 00:04:22,660
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

57
00:04:22,840 --> 00:04:26,300
down here to be able to log out.

58
00:04:26,320 --> 00:04:32,470
All right so let's go ahead and we're going to grab these three labels and change their properties.

59
00:04:32,470 --> 00:04:40,460
So here we're going to set the color to our purple that we use hairiness at our font to custom and Helvetica

60
00:04:40,490 --> 00:04:43,900
new for our top one here.

61
00:04:44,110 --> 00:04:47,020
This is going to say your profile.

62
00:04:47,770 --> 00:04:52,840
And we're going to bump that up and make you style of bold.

63
00:04:53,010 --> 00:04:53,670
OK.

64
00:04:54,400 --> 00:04:56,230
And see how that looks.

65
00:04:56,230 --> 00:04:58,840
You know what I think we go even bigger.

66
00:04:59,080 --> 00:05:00,090
So let's see here.

67
00:05:00,100 --> 00:05:02,430
What is that 6:23.

68
00:05:02,450 --> 00:05:04,600
Let's see how that looks.

69
00:05:04,600 --> 00:05:05,630
That looks pretty good.

70
00:05:05,830 --> 00:05:12,750
So we're going to put you right there and center you then we're going to put you right there right here.

71
00:05:12,750 --> 00:05:22,810
It's just great to placeholder for that name Johnny B press command equal to resize it put you in the

72
00:05:22,810 --> 00:05:24,130
middle here.

73
00:05:24,300 --> 00:05:28,550
Say Johnny at the dot com.

74
00:05:28,660 --> 00:05:31,480
And again this is just placeholders.

75
00:05:32,020 --> 00:05:39,110
And we're going to actually slide both of those and these are also going to be to try mediums.

76
00:05:39,140 --> 00:05:40,070
That looks.

77
00:05:40,570 --> 00:05:42,270
I think that looks pretty good.

78
00:05:43,080 --> 00:05:48,710
And comment equal hand can't equal that done here for this guy for this button.

79
00:05:48,710 --> 00:05:58,840
We were going to set this text to log out change its font to custom Helvetica new and its style is bold

80
00:05:58,960 --> 00:06:07,540
as well and let's size up to say 20 I think that will look good command equal and change the text color

81
00:06:07,540 --> 00:06:10,190
to that purple that we're using.

82
00:06:12,270 --> 00:06:12,520
All right.

83
00:06:12,520 --> 00:06:15,500
That looks pretty good.

84
00:06:15,610 --> 00:06:17,360
So now let's go ahead and put in that.

85
00:06:17,470 --> 00:06:22,060
You I have you that is in the background and that you view if you drag it.

86
00:06:22,110 --> 00:06:29,320
And we're just going to put it right here above and I'm going to control drag from this little Let's

87
00:06:29,320 --> 00:06:30,120
rename it right now.

88
00:06:30,170 --> 00:06:35,720
When I two renamed B.G. view for background view I'm going to control and direct to the view and see

89
00:06:35,750 --> 00:06:44,800
leading space to container trailing space to container top space to container and bottom space to container.

90
00:06:44,800 --> 00:06:49,840
Now I'm going to come over here to the size inspector and change all of those to zero.

91
00:06:54,280 --> 00:07:03,860
Area and then selecting the background view we can set the background color to black and then drop the

92
00:07:03,860 --> 00:07:07,650
alphabet to zero point for every game.

93
00:07:07,760 --> 00:07:07,960
All right.

94
00:07:07,960 --> 00:07:10,150
And then another we're able to kind of.

95
00:07:10,150 --> 00:07:17,610
Now that we have a darker background let's change this View's background color back to just white hopes

96
00:07:17,630 --> 00:07:20,420
that's clear to white here.

97
00:07:20,800 --> 00:07:21,530
OK.

98
00:07:21,890 --> 00:07:23,540
All right so this is looking good.

99
00:07:23,540 --> 00:07:30,200
Let's go ahead and constrain some things so the container you for our modal.

100
00:07:30,300 --> 00:07:36,730
We're gonna go 20 from the left 20 from the right the height.

101
00:07:36,740 --> 00:07:38,360
I think it looks pretty good.

102
00:07:38,390 --> 00:07:47,240
So we'll just set it at 320 and add those constraints and then we are going to center it horizontally

103
00:07:48,350 --> 00:07:50,900
or center it vertically in the container.

104
00:07:50,900 --> 00:07:52,260
There we go.

105
00:07:52,280 --> 00:07:54,560
All right so that looks good.

106
00:07:54,650 --> 00:07:57,080
We need to add constraints for the rest.

107
00:07:57,080 --> 00:08:03,160
So this guy here is going to be eight from the top from the right.

108
00:08:03,230 --> 00:08:10,070
Our profile is you know what I think we'll go ahead and just throw these four elements into a stack.

109
00:08:10,090 --> 00:08:16,550
Use I want to grab the profile the image and these two labels and embed in the stack for you right here.

110
00:08:17,330 --> 00:08:20,720
And then we're going to need to constrain the size of this image.

111
00:08:20,710 --> 00:08:23,360
We're all still hog up the whole container.

112
00:08:23,420 --> 00:08:30,380
So I'm going to constrain to 100 and 100 had to constraints.

113
00:08:30,410 --> 00:08:31,090
There we go.

114
00:08:31,090 --> 00:08:37,040
And then with the stack you selected I'm just going to center it horizontally and vertically.

115
00:08:37,550 --> 00:08:39,050
And that looks good.

116
00:08:39,050 --> 00:08:43,660
Let's give it some spacing so that these aren't so crammed together.

117
00:08:43,670 --> 00:08:48,430
I was trying maybe 12 14.

118
00:08:48,890 --> 00:08:51,050
That looks pretty good.

119
00:08:51,110 --> 00:08:52,360
Let's go ahead and move it up a little bit.

120
00:08:52,370 --> 00:08:54,600
I'm going to take it.

121
00:08:55,160 --> 00:09:01,060
Check out the size inspector here and a line center to Y and C minus maybe like 40.

122
00:09:01,070 --> 00:09:06,630
Up too much minus 20 area I think that looks pretty good.

123
00:09:06,660 --> 00:09:08,990
So we got our profile.

124
00:09:09,110 --> 00:09:12,650
I think we need to make this a little bit taller this view right here.

125
00:09:12,740 --> 00:09:14,840
So the height equals let's try.

126
00:09:14,840 --> 00:09:17,580
Three hundred and sixty.

127
00:09:18,430 --> 00:09:24,740
I think that that looks now it's better that way things aren't so so scrunched together.

128
00:09:24,740 --> 00:09:26,370
All right so it's constrain the sky here.

129
00:09:26,390 --> 00:09:33,440
Let's go from the bottom hand center horizontally.

130
00:09:33,430 --> 00:09:34,030
All right.

131
00:09:34,040 --> 00:09:39,110
And I think that constrains everything everything is lookin real good.

132
00:09:39,110 --> 00:09:39,350
All right.

133
00:09:39,350 --> 00:09:41,570
So I'm going to save this.

134
00:09:42,830 --> 00:09:46,610
And then we're going to open up our assistant.

135
00:09:46,640 --> 00:09:50,900
With the profile we see right here.

136
00:09:51,350 --> 00:09:56,210
And this makes some of the outlets for Ferrara elements here.

137
00:09:56,210 --> 00:09:56,650
All right.

138
00:09:56,770 --> 00:09:58,650
I'm going to just delete these.

139
00:09:58,700 --> 00:10:01,170
The stuff that we don't need.

140
00:10:01,750 --> 00:10:05,250
All right so we've got to button her clothes motile button here.

141
00:10:05,290 --> 00:10:09,440
I going to say close close close.

142
00:10:09,500 --> 00:10:11,750
Motile pressed.

143
00:10:11,870 --> 00:10:16,910
That's an action and touch so it is good and connect.

144
00:10:17,110 --> 00:10:19,110
Then we got our log out button.

145
00:10:19,190 --> 00:10:23,280
I'm going to say log out preste.

146
00:10:23,660 --> 00:10:28,140
And this is an action that's touch up inside.

147
00:10:28,970 --> 00:10:41,580
And then we're going to need some outlets for power images and our labels here soon to say profile image

148
00:10:44,360 --> 00:10:56,370
here I'm going to say a user name and here this is the user Lupe's user e-mail.

149
00:10:56,900 --> 00:10:57,880
Right.

150
00:10:58,460 --> 00:11:02,540
And then we also need one for the background view because what we're going to do is we're going to add

151
00:11:02,570 --> 00:11:09,600
a gesture recognizer to that background view so that when someone clicks on it it will also dismiss.

152
00:11:09,620 --> 00:11:09,920
OK.

153
00:11:09,980 --> 00:11:12,270
So when I say Vicci you.

154
00:11:12,770 --> 00:11:16,350
All right and connect already.

155
00:11:16,400 --> 00:11:21,530
So let's go ahead and make it to where we can actually see this view.

156
00:11:21,530 --> 00:11:26,230
So for that we're going to need to jump into our channel AVC.

157
00:11:26,570 --> 00:11:32,970
So right now anytime we click on the logon button it's going to take us to the log in page.

158
00:11:33,080 --> 00:11:37,890
But if we are already logged in we instead want to take us to that profile view controller.

159
00:11:37,970 --> 00:11:46,400
So we were going to do a check we're going to say if off service for instance that is logged in when

160
00:11:46,400 --> 00:12:01,490
we click on it we are going to instead show profile page else then we will show the logon controller.

161
00:12:01,870 --> 00:12:02,350
OK.

162
00:12:02,500 --> 00:12:04,650
But now we're working with a zip right.

163
00:12:04,650 --> 00:12:08,800
We don't just have some Segway and a storyboard that we can perform.

164
00:12:08,800 --> 00:12:09,300
Right.

165
00:12:09,520 --> 00:12:12,760
So it's actually actually really easy to do.

166
00:12:12,760 --> 00:12:19,880
All we're going to do is we're going to say let profile people profile we see you're going to instantiate

167
00:12:19,880 --> 00:12:29,740
it and then we're going to say profile dot modal presentation style and this is the presentation style

168
00:12:29,740 --> 00:12:31,810
for model the presented view controllers.

169
00:12:31,810 --> 00:12:35,950
So what we're going to do is we're going to instantiate the profile and then we're going to present

170
00:12:35,950 --> 00:12:37,830
it as a model.

171
00:12:38,140 --> 00:12:41,710
And that is just dot custom.

172
00:12:41,730 --> 00:12:42,310
Ken.

173
00:12:42,520 --> 00:12:50,740
And then all we have to do is say present and yet present your controller and the controller to present

174
00:12:50,770 --> 00:12:53,970
is the one that we just instantiated profile animated.

175
00:12:53,990 --> 00:12:57,400
True and completion is new.

176
00:12:57,400 --> 00:13:00,070
All right so easy peasy three lines of code.

177
00:13:00,190 --> 00:13:01,850
We instantiate it.

178
00:13:01,930 --> 00:13:06,920
We set the price of the modal presentation style and then we present it.

179
00:13:07,170 --> 00:13:07,480
All right.

180
00:13:07,480 --> 00:13:11,750
So get rid of this comment and we're going to run this and see how it goes.

181
00:13:12,270 --> 00:13:18,000
All right and just a reminder to see the profile view we have to be in a logged in state.

182
00:13:18,070 --> 00:13:21,820
And so since we don't have the oh here we go.

183
00:13:21,940 --> 00:13:26,140
So apparently we are already considered to be logged in.

184
00:13:26,140 --> 00:13:33,430
Because when we created the account last time we grandis we saved to our user defaults that is logged

185
00:13:33,430 --> 00:13:35,820
in the state is equal to true.

186
00:13:36,340 --> 00:13:38,420
So yeah here we go.

187
00:13:38,650 --> 00:13:39,560
Pretty cool.

188
00:13:39,790 --> 00:13:44,320
But one thing that we're noticing right off the bat is that we forgot one thing and that's here in the

189
00:13:44,320 --> 00:13:53,470
profile we see which is we want the view the overall view to have a background color of clear.

190
00:13:53,720 --> 00:13:59,470
I just want to say that and I mean everything else looks good.

191
00:13:59,530 --> 00:14:01,750
I'm not going to run it again just to see that background.

192
00:14:01,780 --> 00:14:07,570
Let's actually jump into making this all set up with the correct information.

193
00:14:07,570 --> 00:14:08,230
All right.

194
00:14:08,680 --> 00:14:13,260
So let's go ahead and jump in to profile See hand.

195
00:14:13,330 --> 00:14:18,230
I want you to try and fill out the rest of this profile.

196
00:14:18,230 --> 00:14:19,150
VC right.

197
00:14:19,180 --> 00:14:19,720
So what do we need.

198
00:14:19,720 --> 00:14:31,720
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

199
00:14:31,720 --> 00:14:33,560
the modem by clicking on here.

200
00:14:33,650 --> 00:14:34,950
And that's all I want you to do.

201
00:14:34,960 --> 00:14:35,920
That's all I want you to do.

202
00:14:35,920 --> 00:14:40,840
Pretty simple stuff that we that we have all done that we've done in previous few controllers.

203
00:14:40,860 --> 00:14:41,170
Right.

204
00:14:41,230 --> 00:14:42,710
So give it a try.

205
00:14:43,660 --> 00:14:45,910
And then we'll finish up the rest of it.

206
00:14:45,910 --> 00:14:46,830
All right.

207
00:14:47,440 --> 00:14:47,910
OK.

208
00:14:48,100 --> 00:14:48,700
Welcome back.

209
00:14:48,700 --> 00:14:50,260
Hope you tried that out.

210
00:14:50,260 --> 00:14:57,190
So what we're going to do is we're going to create a function called set up view.

211
00:14:58,030 --> 00:14:59,260
And what are we going to do.

212
00:14:59,260 --> 00:15:06,050
We are going to set the user name the e-mail and the profile image.

213
00:15:06,050 --> 00:15:12,490
Those are the first things we're going to bring to a user name is equal to our user name dot text I

214
00:15:12,490 --> 00:15:17,830
should say it's equal to user data service that instance that

215
00:15:20,630 --> 00:15:32,450
name all right and then user e-mail that text is equal to user data service instance that e-mail and

216
00:15:32,450 --> 00:15:45,530
the profile image is equal to profile image that image is equal to you UI image named.

217
00:15:46,070 --> 00:15:56,880
And again user data service that instance that Avatar not color but name and the background color is

218
00:15:56,880 --> 00:16:02,640
profile image that background color is equal to.

219
00:16:02,920 --> 00:16:08,710
And then we use our function that we created in the last video use or data service that instance does

220
00:16:08,910 --> 00:16:16,450
turn color and the color that are the components that we are going to pass into this are put in the

221
00:16:16,810 --> 00:16:25,420
user data service that instance dot Avatar color string.

222
00:16:25,510 --> 00:16:26,260
All right.

223
00:16:26,590 --> 00:16:34,630
So now when we load up this profile the user name email profile image the image itself as well as the

224
00:16:34,630 --> 00:16:37,450
background color will be correct.

225
00:16:37,450 --> 00:16:41,910
All right so here let's go ahead and finish up the close modal preste.

226
00:16:42,130 --> 00:16:46,270
That's a simple dismiss function dismiss animated.

227
00:16:46,270 --> 00:16:53,560
True that just dismisses the view and the conclusion is no and then viewed it load we are going to not

228
00:16:53,560 --> 00:17:01,750
forget to call the set up function this time going to press hold control and I had to adjust the indentation

229
00:17:01,750 --> 00:17:06,490
in case you haven't seen that before so if you have something that gets a donkey can just press control.

230
00:17:06,550 --> 00:17:09,250
And that'll fix it to his correct indentation.

231
00:17:09,550 --> 00:17:12,970
OK so now we have this log out press button.

232
00:17:12,970 --> 00:17:16,650
So what do we want to have happen when we log out.

233
00:17:16,800 --> 00:17:17,460
OK.

234
00:17:17,650 --> 00:17:24,560
So when we log in what do we do we set a whole bunch of variables and booleans and stuff.

235
00:17:24,730 --> 00:17:28,210
We set the Avatar color name email and name.

236
00:17:28,210 --> 00:17:32,910
We also set some variables here in the office service.

237
00:17:33,070 --> 00:17:35,530
We set the is logged in boolean to true.

238
00:17:35,530 --> 00:17:39,210
We set a token and we store the user e-mail.

239
00:17:39,240 --> 00:17:42,840
All right so when we log out we want to clear all of that.

240
00:17:42,940 --> 00:17:43,550
Right.

241
00:17:43,930 --> 00:17:50,390
So here in the user data service what we're going to do is we're going to create a log out user function

242
00:17:50,470 --> 00:17:54,340
case and say funk log out user.

243
00:17:55,210 --> 00:18:03,640
And here we are going to set all of these variables back to empty strings we're going to see ID is equal

244
00:18:03,640 --> 00:18:10,400
to empty string have a tar name is equal to an empty string.

245
00:18:10,640 --> 00:18:22,060
Avatar color is equal to an empty string you know is equal to an empty empty string and name is equal

246
00:18:22,060 --> 00:18:24,690
to an empty string.

247
00:18:24,700 --> 00:18:28,690
We also want to set the service variables.

248
00:18:28,690 --> 00:18:42,550
So when I say service that instance that is logged in is equal to false service instance dot user e-mail

249
00:18:42,570 --> 00:18:53,660
is back to an empty string and of service dot instance dot off tokin is back to an empty string.

250
00:18:54,080 --> 00:18:56,830
Ok so now we have our log out user functions.

251
00:18:56,830 --> 00:19:06,010
Let's jump back into profile of the C and we're going to say user data service that instance that log

252
00:19:06,010 --> 00:19:07,950
out user.

253
00:19:08,080 --> 00:19:18,160
Now when we log out remember we created that notification to notify other classes when user data changes.

254
00:19:18,160 --> 00:19:21,310
And this is a prime example of when the use of data has changed.

255
00:19:21,310 --> 00:19:24,020
We have wiped clean everything.

256
00:19:24,130 --> 00:19:32,380
So practically in speaking in the future what that means is when we log out we're going to when we get

257
00:19:32,380 --> 00:19:38,800
all of this done we're going to clear the channels we're going to clear the chats and and just a clean

258
00:19:38,800 --> 00:19:39,740
slate for the app.

259
00:19:39,760 --> 00:19:40,420
All right.

260
00:19:40,420 --> 00:19:43,100
So that's why we need to have this notification post.

261
00:19:43,180 --> 00:19:53,500
So we're going to say notification center that default that post and we want this guy right here.

262
00:19:53,620 --> 00:20:00,870
The name is know to underscore and use a day to day change and the object is new.

263
00:20:01,350 --> 00:20:01,760
OK.

264
00:20:01,810 --> 00:20:10,800
And then we are going to dismiss the view see this and this sentiment is true and completion is new.

265
00:20:10,920 --> 00:20:14,300
I just want to save that and.

266
00:20:16,090 --> 00:20:16,600
Yes.

267
00:20:16,630 --> 00:20:26,200
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

268
00:20:26,200 --> 00:20:28,860
button and it should populate all of our data.

269
00:20:29,020 --> 00:20:31,610
And then when we click log out you should wipe it all out.

270
00:20:31,670 --> 00:20:34,920
Right so let's go and run this.

271
00:20:34,930 --> 00:20:36,970
So here we go log in.

272
00:20:36,960 --> 00:20:39,770
All right so we need to do the log out thing first.

273
00:20:39,850 --> 00:20:47,440
So now we can log in and don't have an account just going to see Jack attack.

274
00:20:47,880 --> 00:20:49,830
It doesn't really matter.

275
00:20:50,010 --> 00:20:55,760
Just an avatar tweet set the background color and create an account.

276
00:20:58,400 --> 00:20:59,200
And here we go.

277
00:20:59,250 --> 00:21:00,660
I want to click on this.

278
00:21:00,770 --> 00:21:01,790
And here we go.

279
00:21:01,790 --> 00:21:04,630
Your profile Jack attack.

280
00:21:04,640 --> 00:21:06,670
That is our e-mail.

281
00:21:06,860 --> 00:21:10,930
We forgot to set this to be a circle image but we'll fix that in a second.

282
00:21:11,690 --> 00:21:12,560
Let's see if this works.

283
00:21:12,560 --> 00:21:12,810
Yep.

284
00:21:12,860 --> 00:21:14,090
So that works.

285
00:21:14,270 --> 00:21:20,120
And if we log out then what we should expect to see is that this this dismisses and then because we

286
00:21:20,120 --> 00:21:28,370
have already set up our Her our observer on the channel Visi which is listening for changes to our user

287
00:21:28,370 --> 00:21:33,640
data when we log out this is going to switch back to our default image.

288
00:21:33,650 --> 00:21:35,510
And this should switch back to a log in.

289
00:21:36,050 --> 00:21:37,300
And there we go.

290
00:21:37,310 --> 00:21:38,400
All right.

291
00:21:38,750 --> 00:21:39,520
Pretty smooth.

292
00:21:39,710 --> 00:21:46,910
All right so let's go ahead and fix those couple of little things that we saw here in the profile of

293
00:21:46,910 --> 00:21:48,110
the sea.

294
00:21:48,440 --> 00:21:54,170
This should be of class circle image.

295
00:21:55,250 --> 00:22:00,350
And then I think the last thing was I told you that we were going to have a gesture recognizer to this

296
00:22:00,350 --> 00:22:02,760
background view so that you could click on it.

297
00:22:02,780 --> 00:22:05,110
You could tap on it and it would dismiss as well.

298
00:22:05,150 --> 00:22:13,460
So let's do that I'm going to jump into our profile here and we are going to add and create that tap

299
00:22:13,760 --> 00:22:24,890
gesture recognizers and say let close touch equal to you I'd tap gesture recognizer and let's see here

300
00:22:25,430 --> 00:22:32,990
let's go ahead and create our target to do a quick action I should say so we're going to create a function

301
00:22:33,290 --> 00:22:37,970
just like we did in the create account VC where we tapped to dismiss the keyboard.

302
00:22:38,060 --> 00:22:39,720
We're going to create a function similar to that.

303
00:22:39,740 --> 00:22:45,300
We're going to say objective see funk close tap.

304
00:22:45,740 --> 00:22:57,370
And that's going to be Rick and user of type II tap gesture recognizer and we're going to say this this

305
00:22:58,500 --> 00:23:02,620
kind of made it is true completion is new.

306
00:23:02,870 --> 00:23:08,630
Ok so back up here again target is self action is hash tag selector.

307
00:23:08,710 --> 00:23:19,940
That's not a hash tag hashtags selector and we are in the profile the C dot clothes type.

308
00:23:20,090 --> 00:23:20,740
All right.

309
00:23:21,110 --> 00:23:24,290
So let's do this one more time.

310
00:23:24,290 --> 00:23:28,070
Going to run it and let's do this.

311
00:23:28,370 --> 00:23:31,580
Log in don't have an account.

312
00:23:32,120 --> 00:23:34,060
Jenny.

313
00:23:34,720 --> 00:23:36,050
Email doesn't matter.

314
00:23:36,050 --> 00:23:36,980
It doesn't really matter.

315
00:23:36,980 --> 00:23:40,620
She's an amateur bird again.

316
00:23:40,890 --> 00:23:44,070
And at the count.

317
00:23:44,540 --> 00:23:46,400
All right there we are.

318
00:23:46,520 --> 00:23:47,020
All right.

319
00:23:47,030 --> 00:23:50,580
We've got a circular image that didn't work.

320
00:23:50,590 --> 00:23:55,080
Oh you know we forgot to add that just recognize it we created it but we didn't add it.

321
00:23:55,160 --> 00:23:57,790
So we want to add to it to the background.

322
00:23:57,810 --> 00:24:07,120
You believe you don't add gesture recognizer just recognize that we want to add is of course close touch.

323
00:24:07,250 --> 00:24:08,880
Take that and run it.

324
00:24:09,390 --> 00:24:09,680
All right.

325
00:24:09,740 --> 00:24:10,910
Coming in here.

326
00:24:10,910 --> 00:24:12,540
Log on up.

327
00:24:12,680 --> 00:24:15,980
Yep we have to log in again.

328
00:24:15,980 --> 00:24:21,710
Log out I should say and Johnny e-mail doesn't matter.

329
00:24:21,720 --> 00:24:23,660
Password doesn't really matter.

330
00:24:24,240 --> 00:24:28,970
And we're going to be a chameleon this time and create account

331
00:24:32,640 --> 00:24:36,460
and when it click and there we go.

332
00:24:36,550 --> 00:24:37,780
All right.

333
00:24:38,120 --> 00:24:43,360
So looks like everything is working perfectly.

334
00:24:43,750 --> 00:24:47,770
We click on log out.

335
00:24:47,770 --> 00:24:51,730
It logs us out and then we're able to love back in.

336
00:24:51,730 --> 00:24:54,760
All right so in this lesson we created the profile view.

337
00:24:54,760 --> 00:25:00,100
But one thing that is bothering me is that every time we want to log in we have to go through the create

338
00:25:00,100 --> 00:25:02,860
user account cycle.

339
00:25:02,920 --> 00:25:03,590
Let's go ahead.

340
00:25:03,660 --> 00:25:09,100
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

341
00:25:09,100 --> 00:25:12,740
already logged in then it'll automatically set things up for you.

342
00:25:12,740 --> 00:25:13,210
All right.

343
00:25:13,450 --> 00:25:15,160
So that's going to be a fun one.

344
00:25:15,160 --> 00:25:16,890
Hope you're looking forward to that.

345
00:25:16,900 --> 00:25:23,380
And just to save our progress I'm going to add and commit and then I will see you in the next one.