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

2
00:00:09,360 --> 00:00:11,670
Johnny be here with sloths dot com.

3
00:00:11,790 --> 00:00:17,280
And in this lesson we are going to continue on our way with our SMAC app and we are going to finally

4
00:00:17,610 --> 00:00:18,370
do that.

5
00:00:18,390 --> 00:00:19,290
Cool.

6
00:00:19,440 --> 00:00:23,720
Generate background color on the avatar image right here.

7
00:00:23,790 --> 00:00:31,290
So let's get to it first thing right here in our variable's we are going to add a new one called B.G.

8
00:00:31,920 --> 00:00:32,980
color.

9
00:00:33,360 --> 00:00:37,870
And so this is going to be an optional UI color.

10
00:00:37,980 --> 00:00:43,020
And so this is just going to be to kind of help us keep track of whether or not we have set a background

11
00:00:43,020 --> 00:00:48,640
color and also hold the the randomly generated color that we're going to create.

12
00:00:48,720 --> 00:00:51,620
So I think we don't it doesn't look like we have.

13
00:00:51,780 --> 00:00:55,860
Yes we do pick background color press start so we already got our action here.

14
00:00:55,890 --> 00:00:57,420
So what do we need to do.

15
00:00:57,420 --> 00:01:04,720
What we are going to do is we are going to create a randomly generated you eye color.

16
00:01:04,720 --> 00:01:11,040
And so what do we call that background color so if I say the background color is equal to you high color

17
00:01:11,370 --> 00:01:18,240
and then we use an initialiser you can see that we have a number of color initialises here.

18
00:01:18,320 --> 00:01:20,350
We're working with this one right here.

19
00:01:20,380 --> 00:01:22,720
The Red Green Blue.

20
00:01:22,920 --> 00:01:23,530
Alpha.

21
00:01:23,700 --> 00:01:24,260
OK.

22
00:01:24,270 --> 00:01:25,440
And so what these.

23
00:01:25,630 --> 00:01:29,340
Well we're going to do is we're going to randomly generate an R G and B value.

24
00:01:29,520 --> 00:01:31,450
And then we're just going to create it.

25
00:01:31,520 --> 00:01:31,760
All right.

26
00:01:31,770 --> 00:01:33,460
So pretty straightforward.

27
00:01:33,460 --> 00:01:41,040
So what we're going to do is we're going to say let our for the red and we're going to create a randomly

28
00:01:41,040 --> 00:01:47,670
generated numbers we're going to see arke for random And let's see here we want this one right here.

29
00:01:47,760 --> 00:01:50,700
And so we're going to put in a upper bound.

30
00:01:50,850 --> 00:01:59,160
And so the these colors are these values for argy bargy and b its value is a number between 1 and 255

31
00:01:59,280 --> 00:02:03,740
and then divided by 255 normalized to that number.

32
00:02:03,870 --> 00:02:17,690
OK so we're going to say 255 and then we need to divide that by 255 but these also need to be a C.G.

33
00:02:17,830 --> 00:02:18,500
float.

34
00:02:18,560 --> 00:02:29,340
OK so I'm going to write C G for low and then I'm just going to wrap that in here.

35
00:02:29,360 --> 00:02:31,190
This C.G. float right here.

36
00:02:31,190 --> 00:02:32,960
All right so we're creating a CGU float.

37
00:02:32,960 --> 00:02:40,910
Randomly generated number between 0 and 255 of the upper bound into five and then we're going to divide

38
00:02:40,910 --> 00:02:42,830
that by 255.

39
00:02:42,830 --> 00:02:43,160
All right.

40
00:02:43,370 --> 00:02:49,480
So and we're just going to do that with R G and B R G and B.

41
00:02:49,570 --> 00:02:51,300
Change this to G.

42
00:02:51,380 --> 00:02:52,040
Change.

43
00:02:53,400 --> 00:02:54,810
Change has to be her.

44
00:02:54,810 --> 00:02:55,740
Sorry B.

45
00:02:56,840 --> 00:03:01,560
And then Alpha is just going to be one we don't really need a variable for that.

46
00:03:01,910 --> 00:03:04,730
So we're going to create that background color from those values.

47
00:03:04,730 --> 00:03:10,340
Now for the background color is equal to UI color.

48
00:03:12,310 --> 00:03:16,650
That's going to be this guy right here.

49
00:03:16,680 --> 00:03:25,100
So the read is are the green is G and the blue is B and the alpha is just one.

50
00:03:25,200 --> 00:03:28,940
I mean and we want it to be not transparent at all.

51
00:03:28,950 --> 00:03:29,530
All right.

52
00:03:29,580 --> 00:03:42,990
So then we can say self that user image that back ground color is equal to the color.

53
00:03:44,030 --> 00:03:46,070
And that should that should actually do it.

54
00:03:46,120 --> 00:03:46,900
Let's go and try that.

55
00:03:46,940 --> 00:03:48,530
I'll run it.

56
00:03:48,600 --> 00:03:48,800
All right.

57
00:03:48,810 --> 00:03:53,050
Opening it up when to log in and create a count.

58
00:03:53,370 --> 00:03:59,310
And I'm going to choose an avatar and say this elephant here and then we're going to say generate background

59
00:03:59,400 --> 00:03:59,960
color.

60
00:04:00,030 --> 00:04:03,590
Hey there we go.

61
00:04:03,990 --> 00:04:06,250
Pretty cool huh.

62
00:04:06,910 --> 00:04:11,760
We got a square here so that doesn't look quite like what we wanted.

63
00:04:11,760 --> 00:04:20,100
Also did you notice that if we select one of these light ones hold on let me just close this and jump

64
00:04:20,100 --> 00:04:21,790
back in.

65
00:04:22,140 --> 00:04:25,390
So if we selected a late one it's kind of hard to tell.

66
00:04:25,410 --> 00:04:31,310
So I'm thinking up here in the view dude up here we're just going to do a check on that.

67
00:04:31,350 --> 00:04:41,610
So we're going to say if the avatar name contains so you can say it contains And so what we're going

68
00:04:41,610 --> 00:04:46,680
to do is we're going to do a search for a string and we're just going to see if it contains the word

69
00:04:46,800 --> 00:04:51,690
light in which case it is one of the light ones.

70
00:04:52,230 --> 00:04:59,730
And then we're also going to do a check to see if background color is equal to nil.

71
00:05:00,420 --> 00:05:09,950
And if so then we're going to set the user image background color equal to a light gray colors and say

72
00:05:10,140 --> 00:05:12,660
color dot light gray.

73
00:05:12,840 --> 00:05:20,790
OK so what we're doing is we're saying if we go here for the first time and we haven't selected a background

74
00:05:20,790 --> 00:05:27,840
color yet and we have chosen a light one we're going to set a light gray background color so that the

75
00:05:28,650 --> 00:05:31,600
white or the light Avatar kind of pops out OK.

76
00:05:31,740 --> 00:05:36,430
So go go and do that and save that and run it one more time by opening up.

77
00:05:36,520 --> 00:05:38,270
You let's go in.

78
00:05:38,280 --> 00:05:41,620
And so I'm going to use a light colored Avatar.

79
00:05:42,330 --> 00:05:43,440
And there we go.

80
00:05:43,440 --> 00:05:47,850
So now we are setting the light that background color to a light.

81
00:05:47,910 --> 00:05:53,560
If we have not yet chosen a background color so now we have created and chosen the background color.

82
00:05:53,700 --> 00:05:57,500
So if I choose another light one it should still stay pink.

83
00:05:57,570 --> 00:05:57,740
Yeah.

84
00:05:57,750 --> 00:05:58,380
There you go.

85
00:05:58,380 --> 00:05:58,980
All right.

86
00:05:59,170 --> 00:06:01,850
So let's let's fix this square.

87
00:06:02,040 --> 00:06:05,760
Let's make that rounded and we could do that here in our view controller.

88
00:06:05,760 --> 00:06:10,400
But remember it's better practice to subclass that into a view.

89
00:06:10,410 --> 00:06:18,810
So we're going to do is very similar to our around a button subclass we are just going to create a circle

90
00:06:18,840 --> 00:06:20,060
image subclass.

91
00:06:20,090 --> 00:06:27,510
So when I click right here on view and see a new file and it's a touch class we are going to subclass

92
00:06:27,540 --> 00:06:35,180
of you I image the you and we're going to call this circle image.

93
00:06:35,610 --> 00:06:36,000
OK.

94
00:06:36,050 --> 00:06:39,300
And I say next thing and create

95
00:06:42,500 --> 00:06:43,230
this.

96
00:06:43,260 --> 00:06:48,040
And just like we did with the rounded rectangle around that button I should say we're going to say at

97
00:06:48,080 --> 00:06:54,050
Iby these Anable so that we can see the results inside of storyboarded and then we don't need any.

98
00:06:54,490 --> 00:07:00,810
I'd be inspectable because we're not going to be changing anything in storyboard what this circle image

99
00:07:01,450 --> 00:07:06,230
subclassed is going to do is just going to just make everything that it is applied to a circle.

100
00:07:06,240 --> 00:07:06,700
OK.

101
00:07:07,050 --> 00:07:14,730
So we're going to stay awake from NIB and in here we are going to put a set up function views from the

102
00:07:14,730 --> 00:07:16,610
same set up view.

103
00:07:17,250 --> 00:07:23,010
And what we're going to do look for up the function phunk real funk set up you and what are we going

104
00:07:23,010 --> 00:07:23,310
to do.

105
00:07:23,350 --> 00:07:25,450
We're just going to make it round.

106
00:07:25,500 --> 00:07:31,910
So to do that we just go say self-taught layer dot corner radius is equal to.

107
00:07:32,050 --> 00:07:37,610
And then we're just going to say self-taught frame with divided by two.

108
00:07:37,620 --> 00:07:42,990
So if you give it a corner radius of half of its width assuming that it's a square then it's going to

109
00:07:42,990 --> 00:07:44,650
be a perfect circle.

110
00:07:44,780 --> 00:07:45,110
OK.

111
00:07:45,180 --> 00:07:52,660
And then we need to say self-taught clips to bounds equal to true.

112
00:07:52,860 --> 00:07:56,850
If you click on clips to bounds you get a better description it has a boolean value that determines

113
00:07:56,850 --> 00:08:01,060
whether sub views are confined to the bounds of the view.

114
00:08:01,320 --> 00:08:10,350
And lastly we need our prepare for interface build their function are going to call super dot prepare

115
00:08:10,350 --> 00:08:11,630
interface builder.

116
00:08:11,670 --> 00:08:17,790
And then we're going to call our setup function also.

117
00:08:18,450 --> 00:08:23,030
And here in Awake from NIB as well set up here as well.

118
00:08:23,030 --> 00:08:24,430
All right so that looks good.

119
00:08:24,510 --> 00:08:29,880
Just to recap when we awake from nib or when we were prepared for Interface Builder we call setup view

120
00:08:30,290 --> 00:08:38,070
in which we simply do a full rounding of the image view based on it's with Kames I want to save that

121
00:08:38,610 --> 00:08:39,130
in.

122
00:08:39,150 --> 00:08:42,980
Let's go ahead and run that again and see how that looks.

123
00:08:43,350 --> 00:08:44,610
Oh wait stop.

124
00:08:44,610 --> 00:08:47,770
We need to apply it to our images.

125
00:08:47,870 --> 00:08:51,210
And so we've got a couple of images that we want to be around.

126
00:08:51,220 --> 00:08:53,300
Here's one in our create account.

127
00:08:53,310 --> 00:08:59,490
Make sure you have the actual image selected though and go do its identity inspector and set this to

128
00:08:59,580 --> 00:09:08,580
circle image and then over here as well in the menu profile image we're going to set this two circle

129
00:09:08,610 --> 00:09:10,040
image also.

130
00:09:10,060 --> 00:09:11,430
All right then we're in a run.

131
00:09:11,870 --> 00:09:12,510
OK.

132
00:09:12,540 --> 00:09:15,070
So let's go ahead and open it up.

133
00:09:15,070 --> 00:09:17,260
Check out don't have an account choose.

134
00:09:17,300 --> 00:09:21,400
Avatar it's the spider here and.

135
00:09:21,430 --> 00:09:22,440
Hmm.

136
00:09:22,710 --> 00:09:26,590
Let's go ahead and generate a background color as we go.

137
00:09:27,080 --> 00:09:31,140
And then if we pick a light one see the octopus here.

138
00:09:31,650 --> 00:09:34,480
That's pretty cool.

139
00:09:34,620 --> 00:09:39,450
I think we can make this when we click on this make this look a little bit nice right now it's just

140
00:09:39,450 --> 00:09:41,620
like boom different color boom different color.

141
00:09:41,790 --> 00:09:44,740
Let's go ahead and add a little bit of an animation there I think.

142
00:09:44,990 --> 00:09:47,500
So we're going to jump back in to create account visi.

143
00:09:47,730 --> 00:09:50,510
And here let's see where it is are.

144
00:09:50,750 --> 00:09:54,510
OK right here pick background color pressed.

145
00:09:54,510 --> 00:10:00,770
All right so here we can see you by the you dot animate with duration.

146
00:10:01,320 --> 00:10:06,180
And we don't actually need this second part right here.

147
00:10:06,480 --> 00:10:12,400
So just with duration I'm going to say zero point two I think seconds will be good.

148
00:10:12,690 --> 00:10:18,590
And then we're going to do our opening closing curly braces and we're just going to drop this guy in

149
00:10:18,590 --> 00:10:19,900
right here.

150
00:10:19,900 --> 00:10:23,910
And I think I need a selfie right here for this background color.

151
00:10:23,960 --> 00:10:27,040
So basically here we're just creating a very simple animation.

152
00:10:27,060 --> 00:10:35,640
We're sitting the duration meaning the length of the animation period and we are just changing the background

153
00:10:35,640 --> 00:10:36,280
color.

154
00:10:36,420 --> 00:10:38,370
See how that looks.

155
00:10:38,420 --> 00:10:39,190
All right.

156
00:10:39,210 --> 00:10:43,180
Opening it up log in don't have an account.

157
00:10:43,320 --> 00:10:44,730
Choose an avatar.

158
00:10:44,740 --> 00:10:49,290
Let's get right here and generate background color and look at that.

159
00:10:49,290 --> 00:10:53,750
Now we got a nice little fade animation between the colors.

160
00:10:53,760 --> 00:10:54,700
That looks really good.

161
00:10:54,750 --> 00:10:56,200
I like that one right there.

162
00:10:56,220 --> 00:10:59,680
All right so what's next if we check out our.

163
00:10:59,790 --> 00:11:00,440
Let's see here.

164
00:11:00,450 --> 00:11:02,770
Do I have my mockups open.

165
00:11:03,030 --> 00:11:03,270
OK.

166
00:11:03,270 --> 00:11:08,400
So we're going to try and finish up the create a count VC in this video.

167
00:11:08,400 --> 00:11:16,410
So one of the things that we need to do is if you see here these placeholder text colors are different.

168
00:11:16,410 --> 00:11:16,840
Right.

169
00:11:16,950 --> 00:11:19,540
So let's go ahead and see if we can fix that.

170
00:11:19,860 --> 00:11:24,140
And surprisingly that's not something that you can fix in Interface Builder.

171
00:11:24,180 --> 00:11:26,780
You have to actually do this programmatically OK.

172
00:11:27,090 --> 00:11:29,260
So let's do it.

173
00:11:29,310 --> 00:11:35,160
I'm going to come down here to the bottom and create a new function called set up view so set up view

174
00:11:37,390 --> 00:11:38,100
OK.

175
00:11:38,160 --> 00:11:46,580
And so what we have to do is we need to actually use attribute ID text to set the font color for this.

176
00:11:46,580 --> 00:11:49,340
And so to do that we're going to create a new constant.

177
00:11:49,550 --> 00:11:55,020
We're going to jump over here to our Constans file and we'll create a new little header here for our

178
00:11:55,010 --> 00:12:06,590
colors and I'm going to say let SMAC purple place holder equal and I'm going to do a color a literal

179
00:12:08,060 --> 00:12:16,130
Kemang color that URL and the recently used.

180
00:12:16,130 --> 00:12:23,070
Make sure you got your purple one here and actually do and see if we can do other.

181
00:12:23,360 --> 00:12:27,360
And then we're going to drop the opacity here to 50 percent

182
00:12:30,660 --> 00:12:33,180
and there we have our new color.

183
00:12:33,590 --> 00:12:39,370
So that's our placeholder color scheme to save that and jump back into create account.

184
00:12:39,440 --> 00:12:49,160
VC So to set the font color of the placeholder what we got to do is we got to say user name text dot

185
00:12:49,910 --> 00:12:52,180
attribute tude placeholder.

186
00:12:52,340 --> 00:12:57,760
And so this is the styled string that is displayed when there is no other text in the text field.

187
00:12:57,830 --> 00:13:03,830
I'm going to set that equal to an end this afternoon and this attribute could string an argument to

188
00:13:03,830 --> 00:13:05,950
initialize that with.

189
00:13:05,950 --> 00:13:06,990
Let's see here.

190
00:13:08,500 --> 00:13:10,650
String and attributes.

191
00:13:10,720 --> 00:13:11,170
OK.

192
00:13:11,320 --> 00:13:21,370
So the string for the user name and that's just hopes user user name and then the attributes.

193
00:13:21,370 --> 00:13:26,680
If we click here on attributes this has the attributes for the new attribute of string.

194
00:13:26,770 --> 00:13:28,170
All right so what do we want to do.

195
00:13:28,170 --> 00:13:30,800
We want to change the color of it.

196
00:13:30,950 --> 00:13:39,250
So I'm going to do open close square brackets and we're going to say and s at true booted string key

197
00:13:39,310 --> 00:13:46,680
and the key that we want is foreground color and K and the value for that is our.

198
00:13:46,940 --> 00:13:52,450
Mac purple placeholder.

199
00:13:53,070 --> 00:14:00,220
So if we save that and run it let's make sure that works OK to log in to here.

200
00:14:00,430 --> 00:14:05,840
And that did not work because once again I forgot to call the function that we just created.

201
00:14:05,880 --> 00:14:12,270
All right backup to view to load and say set up you run that again.

202
00:14:12,290 --> 00:14:12,660
All right.

203
00:14:12,680 --> 00:14:16,860
I'm going to click you click here into the count and there we go.

204
00:14:16,960 --> 00:14:22,160
So now we have our placeholder text color that we actually want.

205
00:14:22,420 --> 00:14:24,880
So let's go ahead and do that for the other two.

206
00:14:24,880 --> 00:14:25,990
And here's an essay.

207
00:14:25,990 --> 00:14:32,440
Copy and paste and paste and this one here is going to be the email text

208
00:14:35,100 --> 00:14:43,260
and the stream user name is going to be just email or string for the placeholder then this guy right

209
00:14:43,260 --> 00:14:45,070
here is going to be pass.

210
00:14:45,180 --> 00:14:54,700
Text and it's placeholder text is password all ready and that should do.

211
00:14:54,700 --> 00:14:56,880
Going to build make sure that error goes away.

212
00:14:58,130 --> 00:15:00,710
All right let's go ahead and run this and make sure those look good.

213
00:15:01,960 --> 00:15:07,900
We're going to open this up and it's actually create a new use of this time and I'm going to choose

214
00:15:07,900 --> 00:15:09,170
an avatar.

215
00:15:09,430 --> 00:15:14,890
And about porcupine I think that is maybe I want to call him Porky.

216
00:15:15,610 --> 00:15:21,030
And email is Porky at porc dot com.

217
00:15:21,110 --> 00:15:27,440
The password is 1 2 3 4 5 6 going to generate a background color and that looks good.

218
00:15:27,790 --> 00:15:29,840
And we're going to create a count K

219
00:15:33,140 --> 00:15:39,440
so you'll notice that after I clicked on this there's no indication to the user that anything is happening.

220
00:15:39,850 --> 00:15:47,930
And especially if you are waiting for the for the for your server to come back alive if you're not if

221
00:15:47,930 --> 00:15:52,160
you're still on the free tier then that could be very troubling to the user that might click it again

222
00:15:52,190 --> 00:15:53,810
and then you might have some issues.

223
00:15:53,840 --> 00:16:00,380
So let's go ahead and throw a an activity indicator in our screen right here so I'm going to jump into

224
00:16:00,810 --> 00:16:04,280
that storyboard and you'll see the one that just popped up.

225
00:16:04,280 --> 00:16:12,850
That's what we're going to do right here in our create an account and a search for activity to build

226
00:16:12,850 --> 00:16:14,890
their own activity indicator.

227
00:16:15,100 --> 00:16:17,570
I'm just going to drop this right here.

228
00:16:18,010 --> 00:16:23,170
Here in the Daily Beast inspector changed the style to large and white and then we're going to change

229
00:16:23,170 --> 00:16:26,490
the color here to our purple.

230
00:16:26,530 --> 00:16:27,330
All right that looks good.

231
00:16:27,340 --> 00:16:30,760
And then I'm going to change and I'm going to give big constraints of horizontally and vertically in

232
00:16:30,760 --> 00:16:35,890
container and that looks kind of right over the face.

233
00:16:35,890 --> 00:16:37,140
Let's move it up a little bit.

234
00:16:37,180 --> 00:16:45,520
So if you go to our Cyzon inspector and come here to your constraints you can actually give offsets

235
00:16:45,520 --> 00:16:53,200
on your constraint so here a line center to why if you say minus 100 it's centered but shifted up the

236
00:16:53,200 --> 00:16:54,580
amount that you put in here.

237
00:16:54,820 --> 00:17:00,790
So I think that will look good and we need to have an outlet for someone to hold option and click on

238
00:17:00,790 --> 00:17:01,930
create account b c

239
00:17:06,140 --> 00:17:08,530
them we got to find it again.

240
00:17:08,530 --> 00:17:10,070
See right here.

241
00:17:10,480 --> 00:17:11,740
All right so outlets.

242
00:17:11,890 --> 00:17:14,460
I'm just going to see that.

243
00:17:14,530 --> 00:17:16,030
Make sure you've got your spinner selected.

244
00:17:16,030 --> 00:17:17,980
I'm going to control drag from over here.

245
00:17:18,050 --> 00:17:18,450
Yes.

246
00:17:18,470 --> 00:17:20,550
Call this spinner.

247
00:17:20,790 --> 00:17:21,110
OK.

248
00:17:21,110 --> 00:17:23,010
So now we have an outlet for it.

249
00:17:23,410 --> 00:17:26,570
Let's jump back into our create account.

250
00:17:26,580 --> 00:17:29,440
These Swift file and we're going to start out with it.

251
00:17:29,440 --> 00:17:29,860
Hit it.

252
00:17:29,860 --> 00:17:30,170
All right.

253
00:17:30,190 --> 00:17:39,180
So down here in our setup you function I'm going to say spinner that is hidden is equal to true.

254
00:17:39,480 --> 00:17:40,290
True.

255
00:17:40,880 --> 00:17:43,660
And just get this quick.

256
00:17:44,510 --> 00:17:46,600
OK so it starts out hidden.

257
00:17:46,640 --> 00:17:49,280
When do we want it to show we want it to show.

258
00:17:49,280 --> 00:17:57,710
Right when we click on the Create a count button when I say spinner that is hidden is equal to false

259
00:17:58,810 --> 00:18:00,230
and then started spinning.

260
00:18:00,230 --> 00:18:09,690
All we got to do is say spinner dot start animating and then it'll it'll show and start animating.

261
00:18:09,740 --> 00:18:14,040
And we want it to disappear if everything is successful.

262
00:18:14,090 --> 00:18:22,640
So I'm going to get rid of this print statement here and we're going to say spinner that his head is

263
00:18:22,700 --> 00:18:27,240
equal to true hand spinner.

264
00:18:27,320 --> 00:18:34,670
Stop animating and that's about as easy as it is to add a progress indicator.

265
00:18:34,680 --> 00:18:44,320
So when I run this again we need self because we are in a closure area I'm going to run that all right.

266
00:18:44,430 --> 00:18:45,420
Jump into here.

267
00:18:45,440 --> 00:18:47,700
Log in VC.

268
00:18:47,720 --> 00:18:50,050
All right here's our create an account VC.

269
00:18:50,190 --> 00:18:53,760
So I'm again choose an avid term like a shark.

270
00:18:54,120 --> 00:18:58,270
Different background color looks good.

271
00:18:58,280 --> 00:19:07,630
This is going to be Sharkboy and his e-mail is that shark at me dot com.

272
00:19:07,670 --> 00:19:13,660
And then the password but there's someone toggled the software keyboard and to do that it's command.

273
00:19:13,910 --> 00:19:21,830
And put in my password and then I know I can't create an account can I this the keyboard is covering

274
00:19:21,830 --> 00:19:22,340
it.

275
00:19:22,370 --> 00:19:24,480
So we're going to fix that here in just one second.

276
00:19:24,560 --> 00:19:27,710
But to make sure that our spinner is working on a click Create account.

277
00:19:27,740 --> 00:19:34,630
And hey there we go there is our spinner and it's going to spin until the creative process is over.

278
00:19:34,670 --> 00:19:36,430
Then it disappears.

279
00:19:36,440 --> 00:19:37,410
All right very nice.

280
00:19:37,640 --> 00:19:37,860
OK.

281
00:19:37,880 --> 00:19:45,350
So let's let's fix that problem where we can't click on the create button when the keyboard is up.

282
00:19:45,740 --> 00:19:51,350
So most of the time what we're used to is just being able to tap off of the keyboard and making the

283
00:19:51,590 --> 00:19:52,760
keyboard disappear.

284
00:19:52,760 --> 00:19:53,560
Right.

285
00:19:54,050 --> 00:19:55,510
So how do we do that.

286
00:19:55,760 --> 00:19:56,830
Well it's pretty easy.

287
00:19:56,850 --> 00:20:00,080
We've got to do it here in view to load.

288
00:20:00,080 --> 00:20:05,210
We're going to add a half gesture recognizer and feckless do that in set up view since we already have

289
00:20:05,210 --> 00:20:06,200
it.

290
00:20:06,290 --> 00:20:14,820
So we're going to do is we're going to say let tap equal and that's going to be a UI tap gesture recognizer

291
00:20:15,590 --> 00:20:19,460
and we're going to set it's target and it's action.

292
00:20:19,460 --> 00:20:25,990
So the target is self and the action is a function that we need to create first.

293
00:20:26,000 --> 00:20:33,530
So right here we're going to say phunk handle tap Haendel tap.

294
00:20:33,530 --> 00:20:40,370
And what we're going to do is we're just going to view it and editing and we're going to say true and

295
00:20:40,370 --> 00:20:46,000
what this does is this just causes the view or one of its embedded text fields to resign the first responders

296
00:20:46,070 --> 00:20:52,700
that has meaning if we have a keyboard open and we tap then it's just going to dismiss that keyboard

297
00:20:52,700 --> 00:20:53,280
for us.

298
00:20:53,300 --> 00:20:53,810
OK.

299
00:20:54,110 --> 00:21:02,450
So then here in the action selector we just need to say hash tag selector and then we're going to say

300
00:21:03,050 --> 00:21:13,430
create a count VCT that handle tap and then we're probably going to get this error because the new with

301
00:21:13,430 --> 00:21:19,430
swift for the syntax for an argument of Selecta refers to an instance method handled have that is not

302
00:21:19,430 --> 00:21:25,300
exposed to objective c at objective c to expose this instance method to Objective-C.

303
00:21:25,330 --> 00:21:33,200
And if you just click on fix then it adds at Objective-C to are handled tap function.

304
00:21:33,200 --> 00:21:39,400
So in switch 3 I think it was implicitly implied that these were exposed to Objective-C handles.

305
00:21:39,410 --> 00:21:45,260
But now once before we're just explicitly saying this isn't a function that's exposed to Objective-C.

306
00:21:45,260 --> 00:21:47,710
All right so we've created our tap gesture recognizer.

307
00:21:47,710 --> 00:21:55,880
Now we need to just assign it to the views and say View dot add gesture recognizer and we are the view

308
00:21:55,880 --> 00:21:58,120
that we are adding is tap.

309
00:21:58,160 --> 00:22:00,170
All right so that looks good.

310
00:22:00,260 --> 00:22:04,360
Save that and run it and let's make sure that's working.

311
00:22:04,370 --> 00:22:05,630
All right clicking here.

312
00:22:05,640 --> 00:22:06,550
Log in.

313
00:22:06,550 --> 00:22:08,080
I don't have an account.

314
00:22:08,290 --> 00:22:14,030
And click on the username toggle the software keyboard if it's not coming up and then I'm going to click

315
00:22:14,030 --> 00:22:17,450
over here and boom disappears.

316
00:22:17,460 --> 00:22:18,930
All right.

317
00:22:19,070 --> 00:22:19,670
Perfect.

318
00:22:19,670 --> 00:22:21,200
Very nice.

319
00:22:21,200 --> 00:22:27,050
All right and that pretty much takes care of everything in our create account of your controller.

320
00:22:27,050 --> 00:22:32,830
The only thing left is what happens when we create an account.

321
00:22:32,990 --> 00:22:36,320
You know right now we send off the call to the API.

322
00:22:36,590 --> 00:22:42,500
But you know nothing we don't know what to do after we create an account.

323
00:22:42,630 --> 00:22:47,030
So what we're going to do is we're going to create a notification using notification center and when

324
00:22:47,050 --> 00:22:51,480
notification center is like I like to compare it to kind of a radio station.

325
00:22:51,630 --> 00:22:58,130
You have notification posts and that's kind of just like blasting out in all directions to all classes

326
00:22:58,490 --> 00:23:08,120
that we haven't created a notification and to be able to receive and know what to do with these notifications.

327
00:23:08,120 --> 00:23:11,630
You need to be tuned in to that specific channel.

328
00:23:11,630 --> 00:23:11,860
All right.

329
00:23:11,870 --> 00:23:16,250
So what we're going to do right now is we're just going to create the post for the notification.

330
00:23:16,250 --> 00:23:22,350
We're just going to create the blasting out for the information that says hey we have created an account.

331
00:23:22,460 --> 00:23:25,550
We have changed we have changed some stuff up.

332
00:23:25,550 --> 00:23:26,250
All right.

333
00:23:26,250 --> 00:23:34,150
And we're going to create a reusable notification that's going to be useful called user data did change.

334
00:23:34,580 --> 00:23:39,280
And so what that means is either We've created an account we've logged in or even that we've logged

335
00:23:39,300 --> 00:23:39,730
out.

336
00:23:39,740 --> 00:23:45,570
Those are the kind of the scenarios that's going to be covered under the use of this notification.

337
00:23:45,570 --> 00:23:50,280
So let's create the notification names so jump into Constans.

338
00:23:50,380 --> 00:23:55,000
I'm just going to do it here under colors I'm going to say no to thickish.

339
00:23:55,160 --> 00:24:03,380
Constance and we're going to say let no tiff underscore user data did change.

340
00:24:03,600 --> 00:24:04,070
OK.

341
00:24:04,090 --> 00:24:15,910
And this is going to be a notification that name and that is going to be called notify if user data

342
00:24:17,140 --> 00:24:18,170
changed.

343
00:24:18,510 --> 00:24:23,120
OK so this is just creating the name of the notification and then we're going to jump back into create

344
00:24:23,120 --> 00:24:30,130
a count b c and after the create a count button is pressed and everything is successful.

345
00:24:30,280 --> 00:24:32,860
We are going to post this notification.

346
00:24:32,860 --> 00:24:40,930
Basically just sending out the notification saying hey world we have successfully logged in or logged

347
00:24:40,930 --> 00:24:45,970
out or created a user do with that information what you will.

348
00:24:45,970 --> 00:24:53,680
All right so we're going to see a notification centered not default not post.

349
00:24:53,740 --> 00:24:53,950
All right.

350
00:24:53,950 --> 00:24:59,830
And so what we need right here is this right here the notification name is the concern that we just

351
00:24:59,830 --> 00:25:00,490
created.

352
00:25:00,490 --> 00:25:06,250
So no to use the data to change and we're not sending any object with the notifications so this can

353
00:25:06,250 --> 00:25:11,980
be new accident going to say that and we won't be.

354
00:25:12,010 --> 00:25:17,570
Right now we can't tell that this works because we don't have any other classes that are tuned into

355
00:25:17,590 --> 00:25:19,430
this particular notification.

356
00:25:19,570 --> 00:25:24,190
But that right there completes our create a count visi.

357
00:25:24,220 --> 00:25:29,590
So now in the next videos what we can actually do with this notification is we'll know when the user

358
00:25:29,590 --> 00:25:35,890
has been created and when it gets dismissed we can't have that notification here in our channel Visi

359
00:25:36,100 --> 00:25:43,840
and then we can do things like update the profile image we can update the logon button to instead of

360
00:25:43,840 --> 00:25:45,970
saying log in showed the actual user's name.

361
00:25:46,070 --> 00:25:48,670
All right so that's the reason for this notification.

362
00:25:48,670 --> 00:25:51,280
And yes we're making great progress guys.

363
00:25:51,280 --> 00:25:52,630
Hope you are really having fun.

364
00:25:52,630 --> 00:25:55,140
I really like the A C.

365
00:25:55,150 --> 00:25:55,990
Do we still have here.

366
00:25:55,990 --> 00:26:01,150
This is one of my favorite things is the avatar picture and the generating the background color I just

367
00:26:01,150 --> 00:26:02,540
think is super cool.

368
00:26:02,580 --> 00:26:03,770
So because guys are having fun.

369
00:26:03,790 --> 00:26:04,720
I know that I am.

370
00:26:04,720 --> 00:26:10,450
And to just to finish off real quick going to commit and add our changes and then we will see you in

371
00:26:10,450 --> 00:26:11,060
the next one.