1
00:00:04,960 --> 00:00:10,750
Everyone and welcome back to class and Johnny B here was the stop stop come and this is where we left

2
00:00:10,750 --> 00:00:13,690
off in the previous target topic.

3
00:00:13,690 --> 00:00:20,200
All right so if you haven't gone and taken that one that is the firestorm intro and we we build this

4
00:00:20,230 --> 00:00:20,950
app out.

5
00:00:21,160 --> 00:00:27,670
We go over all of the basics we go over setting up the project importing the assets learning about how

6
00:00:27,670 --> 00:00:35,410
to how the fire store database is constructed with documents and collections how to add documents how

7
00:00:35,410 --> 00:00:39,620
to retrieve them sort order all of that good stuff for them.

8
00:00:39,700 --> 00:00:45,370
So if you haven't taken that one you need to go and take that one first because we are building on top

9
00:00:45,370 --> 00:00:46,840
of that app.

10
00:00:46,870 --> 00:00:47,550
All right.

11
00:00:47,950 --> 00:00:54,500
So this is the app that we built in that course and we are going to be expanding it significantly.

12
00:00:54,500 --> 00:00:55,190
Okay.

13
00:00:55,510 --> 00:00:57,990
So this is what it looked like when we finished up.

14
00:00:58,000 --> 00:01:05,920
We are able to sort by various categories three categories funny serious and crazy and then we are also

15
00:01:05,920 --> 00:01:08,930
able to order it by popular votes.

16
00:01:09,040 --> 00:01:14,250
We are able to add posts and yeah that's about it.

17
00:01:14,650 --> 00:01:16,810
So do we want to do in this course.

18
00:01:16,990 --> 00:01:23,380
Well in this course we are going to learn all about authentication and security rules as well as some

19
00:01:23,380 --> 00:01:27,220
additional fire store functionality Okay.

20
00:01:27,520 --> 00:01:35,820
And so inside of your assets for this course I'm just going to open up mine here from the desktop.

21
00:01:35,990 --> 00:01:42,640
You'll see that we have a folder for assets and we just got a few or just one new image that we are

22
00:01:42,640 --> 00:01:51,910
going to be using as well as the mockups for the expansion that we're going to do on this app.

23
00:01:51,910 --> 00:01:58,150
If you want to start fresh from exactly where I am right now we also have the starter project if you

24
00:01:58,150 --> 00:02:01,110
want to follow along just starting with what I have.

25
00:02:01,240 --> 00:02:01,860
Okay.

26
00:02:02,170 --> 00:02:09,480
All right so this question and these images just real quick going to open up our assets folder here

27
00:02:10,110 --> 00:02:14,310
and going to grab these three right here and drag them in.

28
00:02:14,310 --> 00:02:14,520
All right.

29
00:02:14,520 --> 00:02:15,360
That looks good.

30
00:02:15,370 --> 00:02:20,830
And then going to open up the mockup here and have it open over here actually.

31
00:02:21,010 --> 00:02:24,730
And so these are the changes that we are going to be working on.

32
00:02:24,880 --> 00:02:29,980
Like I said we're going to be working with authentication and security rules to authenticate.

33
00:02:29,980 --> 00:02:31,720
We need to be able to log in.

34
00:02:32,030 --> 00:02:38,170
All right and we're going to cover in this course the using the e-mail and password method.

35
00:02:38,290 --> 00:02:46,360
Firebase has a whole bunch of supported logging methods like Twitter or Facebook Google get hub and

36
00:02:46,390 --> 00:02:51,060
anonymous and maybe in a future course will go over like all of those.

37
00:02:51,100 --> 00:02:56,350
And this course we're just going to go over the email and password as that is a very very common way

38
00:02:56,350 --> 00:02:58,510
to log into apps.

39
00:02:58,510 --> 00:03:04,640
All right so we are going to build out these two screens in this in this lesson.

40
00:03:04,900 --> 00:03:10,370
The log in and the create user screens but just to go over a little bit else what we're going to be

41
00:03:10,420 --> 00:03:14,710
do and we are going to be adding a the comment feature.

42
00:03:14,980 --> 00:03:22,030
So each thought each post will now also have a image for the comments and display how many comments

43
00:03:22,030 --> 00:03:22,840
there are.

44
00:03:23,140 --> 00:03:30,370
And so we'll also have a commons view controller over here where you can add comments and view the other

45
00:03:30,370 --> 00:03:32,690
comments for that particular post.

46
00:03:33,160 --> 00:03:34,870
All right so let's get to it.

47
00:03:35,290 --> 00:03:35,720
All right.

48
00:03:35,740 --> 00:03:38,850
So we're just going to jump right in.

49
00:03:38,860 --> 00:03:43,270
We're going to be in the main storyboard most of this lesson here.

50
00:03:43,270 --> 00:03:43,550
All right.

51
00:03:43,600 --> 00:03:48,390
So here's our previous two controllers and we're going to need a couple new controllers.

52
00:03:48,490 --> 00:03:54,190
So I'm just going to drag those in right here and we're not going to use any segues or anything what

53
00:03:54,190 --> 00:04:01,270
we're going to do is in our main Visi we're going to do a check whether the user is logged in and if

54
00:04:01,270 --> 00:04:08,830
they are not logged in then we are going to instantiate this new view controller and then show it.

55
00:04:08,890 --> 00:04:09,490
OK.

56
00:04:09,880 --> 00:04:14,870
So this is going to be our log in VC Mickos this bottom pane here.

57
00:04:15,250 --> 00:04:20,200
And so pretty simple we just need a couple of text fields and a couple of buttons.

58
00:04:20,410 --> 00:04:32,620
So I'm going to search here for textfield and drag you in right here drag a second line and add a button

59
00:04:33,580 --> 00:04:40,990
and this is going to be our log in button and drag in a second button.

60
00:04:41,260 --> 00:04:51,850
And this is going to be a create user button and then we'll add a label to be able to say something

61
00:04:51,850 --> 00:04:59,750
like don't have an account and then we'll put that right above our user.

62
00:04:59,750 --> 00:05:00,100
All right.

63
00:05:00,190 --> 00:05:01,240
That's good.

64
00:05:01,240 --> 00:05:04,770
So let's go ahead and look a little bit nicer.

65
00:05:04,840 --> 00:05:12,170
We're going to like both of these text fields and we're going to change the font color to a dark gray

66
00:05:12,170 --> 00:05:21,410
color and change the font to custom and the family is going to be have an ear next.

67
00:05:21,560 --> 00:05:25,460
And we're going to drop the size down to 14.

68
00:05:25,490 --> 00:05:25,900
We're going to see.

69
00:05:25,910 --> 00:05:26,870
OK.

70
00:05:27,320 --> 00:05:37,590
And let's see here change the border style to none and then change the background to it see here background.

71
00:05:37,610 --> 00:05:43,880
We're going to pick a light gray color and then if you click on it right here again when he dropped

72
00:05:43,880 --> 00:05:48,090
the opacity down to about 20 percent.

73
00:05:49,040 --> 00:05:49,790
Good.

74
00:05:50,260 --> 00:05:56,480
And then for the top one our placeholder text is email.

75
00:05:57,200 --> 00:06:05,060
And for the second one our placeholder text is password and for the second one if you scroll down here

76
00:06:05,690 --> 00:06:08,580
you can check this secure text entry box.

77
00:06:08,690 --> 00:06:14,600
And this will make it with have the dots for the passwords so that you can see the password.

78
00:06:14,620 --> 00:06:14,850
All right.

79
00:06:14,850 --> 00:06:18,650
That looks good for this logon button here.

80
00:06:18,980 --> 00:06:28,700
Let's go and change the text color to white and the background color to our orange color that we've

81
00:06:28,700 --> 00:06:29,790
been using.

82
00:06:30,350 --> 00:06:42,090
And then we're going to change the S I use to the width to 1 15 and the height to 40.

83
00:06:42,920 --> 00:06:46,900
Go and exclude and then for the don't have an account.

84
00:06:46,940 --> 00:06:56,960
Let's go ahead and change the font to custom change the family to have an ear next and drop the font

85
00:06:56,960 --> 00:06:59,450
size down to see maybe 12.

86
00:06:59,450 --> 00:07:03,290
That looks good and change the color too dark great color.

87
00:07:05,020 --> 00:07:10,340
That was selected when say command equal to make it fit the size.

88
00:07:10,590 --> 00:07:16,320
And then for our create user buttons same thing as we had for a log in we're just going to change the

89
00:07:16,320 --> 00:07:28,140
text color to white change the font to custom family is Avenir next style is actually medium so we need

90
00:07:28,140 --> 00:07:28,820
to change.

91
00:07:28,920 --> 00:07:37,420
Change the first loggin button that looks good then change the background color to our orange color.

92
00:07:37,450 --> 00:07:37,620
Right.

93
00:07:37,650 --> 00:07:44,190
So when we change this real quick to oh I forgot to change the font for that one so fun for the top

94
00:07:44,190 --> 00:07:47,220
one is Avenir next.

95
00:07:47,700 --> 00:07:51,150
And style is medium done.

96
00:07:51,430 --> 00:07:52,920
That's good for this one.

97
00:07:52,920 --> 00:08:00,950
Change the size too with is 150 and the height is 40.

98
00:08:00,950 --> 00:08:03,240
There we go.

99
00:08:03,510 --> 00:08:03,740
All right.

100
00:08:03,740 --> 00:08:04,620
Very nice.

101
00:08:04,620 --> 00:08:06,840
So now I was going to add some constraints.

102
00:08:06,880 --> 00:08:15,380
So here at the top we went to say 20 from the left 20 from the top and from the right.

103
00:08:15,540 --> 00:08:19,710
Constrain that and let's make it a little bit.

104
00:08:20,060 --> 00:08:22,250
So give us some height as well actually.

105
00:08:22,500 --> 00:08:26,840
So we're going to give it a height of 30.

106
00:08:26,860 --> 00:08:28,210
There we go.

107
00:08:28,350 --> 00:08:37,770
Then move this password down a little bit and we'll say 20 from the left from the right and maybe 16

108
00:08:37,770 --> 00:08:45,730
from the textfield above it and height equal to 30 There we go.

109
00:08:46,000 --> 00:08:48,750
And then the log in button right below it.

110
00:08:48,750 --> 00:08:56,520
I'm going to say 16 from the textfield above it with the height.

111
00:08:57,330 --> 00:09:02,850
And we are going to center horizontally in container that we go.

112
00:09:03,330 --> 00:09:08,540
And then for this guy right here we're going to put you about.

113
00:09:08,570 --> 00:09:09,910
Man I think that looks good.

114
00:09:09,930 --> 00:09:16,800
We'll go 35 from the bottom of the log and button will add that constraint and then Center it horizontally

115
00:09:16,830 --> 00:09:18,070
in the container.

116
00:09:18,390 --> 00:09:28,320
And then for the create user button I'm going to go eight from the label above it and horizontally in

117
00:09:28,320 --> 00:09:29,680
container.

118
00:09:30,030 --> 00:09:37,440
And then I need to set the width and height that was 150 for the width and 40 for the height.

119
00:09:37,680 --> 00:09:38,760
All right there we go.

120
00:09:38,760 --> 00:09:39,880
Very nice.

121
00:09:40,470 --> 00:09:42,650
So we have our log in.

122
00:09:42,850 --> 00:09:44,480
VCU I set up.

123
00:09:44,520 --> 00:09:50,630
Let's go ahead and add a controller file for this to be linked up with a new file.

124
00:09:50,640 --> 00:09:59,940
When we go to Cocco touch class and this is going to be a subclass of UI you controller and we're ready

125
00:09:59,940 --> 00:10:02,360
to call this log in VC.

126
00:10:02,650 --> 00:10:16,610
When I say next and create a perfect save that I get rid of all this stuff down here and then we're

127
00:10:16,610 --> 00:10:25,160
going to see this and I'm going to open up the main story board in our assistant editors and hold option

128
00:10:25,190 --> 00:10:32,450
and click on Main storyboard and that we haven't been to select our view controller go to our identity

129
00:10:32,460 --> 00:10:37,500
inspector and change the class to log in VC.

130
00:10:37,520 --> 00:10:41,140
So now we can add our Iby outlets and actions.

131
00:10:41,140 --> 00:10:47,840
All right so right here I'm going to make a little header for outlets and when it control and drag our

132
00:10:47,930 --> 00:10:55,520
e-mail and I'm going to say you know text message connect with a password I'm going to control and drag

133
00:10:55,550 --> 00:11:05,880
and say password text and connect them for the log in button I'm going to control and drag and say the

134
00:11:06,070 --> 00:11:18,950
log in button and connect and create user create user and connect.

135
00:11:19,340 --> 00:11:24,680
Then we're going to need a couple of actions for the log in button and they create users are going to

136
00:11:24,680 --> 00:11:33,470
control and drag and say change changes to an action first and that name is going to be logged in and

137
00:11:33,530 --> 00:11:35,860
tap it and say connect

138
00:11:38,930 --> 00:11:48,190
then one more action for the create user function the control and drag and say create user tapped.

139
00:11:48,620 --> 00:11:52,060
I'm going to change this to an action and say connect.

140
00:11:52,070 --> 00:11:52,400
All right.

141
00:11:52,400 --> 00:11:53,000
Looking good.

142
00:11:53,000 --> 00:11:57,920
Going to close our assistant editor and just real quick going around the corners of our two buttons

143
00:11:57,920 --> 00:12:04,380
Here's one to say log in and layer that corner radius is equal to 10.

144
00:12:04,670 --> 00:12:11,140
And the create user and layer dark corner radius is equal to 10.

145
00:12:11,150 --> 00:12:11,470
All right.

146
00:12:11,580 --> 00:12:12,370
Good.

147
00:12:12,380 --> 00:12:15,920
Next up we're going to add our next controller.

148
00:12:15,980 --> 00:12:18,610
So opening back up main board.

149
00:12:18,800 --> 00:12:26,420
Now we would like to add our create user view controller that's software to control and drag in here

150
00:12:26,840 --> 00:12:28,190
or just drag it in here.

151
00:12:28,670 --> 00:12:33,130
And yeah let's see what we need here.

152
00:12:34,130 --> 00:12:41,140
So we just finished up our log in Visi in our create user Visi we have three textfield and two buttons

153
00:12:41,150 --> 00:12:44,570
again create user and a cancel button.

154
00:12:44,820 --> 00:12:45,800
And good.

155
00:12:45,840 --> 00:12:47,490
OK let's do it.

156
00:12:48,470 --> 00:12:54,830
OK so since I already have a similar layout built out in our log in VC we're going to select these three

157
00:12:54,830 --> 00:13:02,870
elements here and copy them and then click back in to our new view and I'm going to paste them and put

158
00:13:02,870 --> 00:13:04,110
them right there.

159
00:13:04,210 --> 00:13:04,990
Is good.

160
00:13:05,330 --> 00:13:10,280
And let's go and see what kind of constraints come over with some of them do come with constraints so

161
00:13:10,280 --> 00:13:13,360
we have a couple of constraints.

162
00:13:13,420 --> 00:13:20,230
Has any outlets no outlets for any of this one has an outlet so I'm going to remove it.

163
00:13:20,270 --> 00:13:21,010
Never go.

164
00:13:21,260 --> 00:13:21,470
All right.

165
00:13:21,470 --> 00:13:24,110
Now that can give some constraints.

166
00:13:24,110 --> 00:13:30,380
So we had that Tony from the left and 16 from the top I believe and with you from the right can have

167
00:13:30,380 --> 00:13:36,100
those constraints and everything else should actually fall into place except for this one.

168
00:13:36,110 --> 00:13:37,360
What do we need to add.

169
00:13:37,370 --> 00:13:39,650
We have top with and height.

170
00:13:39,890 --> 00:13:44,570
So I think we need a center case to center horizontally in container.

171
00:13:44,750 --> 00:13:45,800
All right there we go.

172
00:13:46,280 --> 00:13:54,020
And then we're going to need to remove actually these constraints for the top and move this guy down.

173
00:13:54,230 --> 00:14:02,810
And then for the e-mail I'm going to copy and paste and just drag that right down here so that we can

174
00:14:02,810 --> 00:14:06,560
change this to be our user name.

175
00:14:06,560 --> 00:14:07,270
Textfield.

176
00:14:07,360 --> 00:14:08,050
OK.

177
00:14:08,450 --> 00:14:14,600
So with it selected I'm going to go into our properties attributes or attributes and Inspector I'm going

178
00:14:14,600 --> 00:14:20,540
to change the placeholder to say username and then I'm just going to say public just add a note to the

179
00:14:20,540 --> 00:14:25,890
user that this is the user name that is going to be public for other users to see.

180
00:14:26,190 --> 00:14:26,860
OK.

181
00:14:27,290 --> 00:14:34,580
And then I'm going to add some constraints here and say 20 from the left 16 from the top and 20 from

182
00:14:34,580 --> 00:14:36,210
the right.

183
00:14:36,380 --> 00:14:44,150
I didn't get that third constraint 20 20 from the right area.

184
00:14:44,780 --> 00:14:50,150
And lastly for our log in button or that's not our logon button anymore as can be or create user Bruhn

185
00:14:50,180 --> 00:15:02,810
because hey 16 ask 20 20 from the top or you change the text here to say create user that would go.

186
00:15:03,290 --> 00:15:11,870
And then lastly we need a cancell bunds from just going to control command C and command V-2 paste error

187
00:15:11,930 --> 00:15:13,800
to copy and paste.

188
00:15:13,850 --> 00:15:24,170
We're going to change this to say cancel when to change the background color to our dark gray.

189
00:15:24,320 --> 00:15:32,110
And if you forgot that to is this is a different downgrade we want 3 6 3 6 3 6.

190
00:15:32,120 --> 00:15:33,350
There we go.

191
00:15:33,560 --> 00:15:37,440
That's our sort of dark grey theme for this app.

192
00:15:37,610 --> 00:15:45,560
And then I'm going to constrain this I'm willing to say it from the top width and height 150 and 40

193
00:15:46,040 --> 00:15:50,840
had those constraints and then Center horizontally in container.

194
00:15:51,230 --> 00:15:54,900
Looks like we have some duplicate constraints here and that's what these are.

195
00:15:55,040 --> 00:15:58,310
So you can usually tell when you have multiple blue lines here.

196
00:15:58,310 --> 00:16:02,840
So we go and open up our size inspector and sure enough I have a couple of duplicates.

197
00:16:02,840 --> 00:16:04,130
We have two with this one.

198
00:16:04,130 --> 00:16:06,120
Delete the second one into heights.

199
00:16:06,170 --> 00:16:10,280
So I'm going to delete the second one and that's good.

200
00:16:10,280 --> 00:16:10,610
All right.

201
00:16:10,620 --> 00:16:15,420
Let's see what was this area talking about here need.

202
00:16:15,680 --> 00:16:19,030
There no constraints on the sky.

203
00:16:19,100 --> 00:16:21,500
Looks like we need our side constraints.

204
00:16:21,530 --> 00:16:22,730
So that's it.

205
00:16:22,730 --> 00:16:24,870
20 and 20.

206
00:16:25,460 --> 00:16:26,320
That would get them.

207
00:16:26,690 --> 00:16:29,790
And then these ones are just about localization warnings.

208
00:16:29,930 --> 00:16:33,030
We can ignore those and to save that.

209
00:16:33,200 --> 00:16:38,750
And then there's going to create a new controller does filed for this view.

210
00:16:38,770 --> 00:16:44,630
That's when I right click on the controller and see new file and this going to be a Koca touch class.

211
00:16:44,650 --> 00:16:51,060
I'm going to say next controller is this is create user visi.

212
00:16:51,360 --> 00:16:52,870
I'm going to say next.

213
00:16:53,380 --> 00:17:02,330
And create a righty new you control a file get rid of this stuff done here right now using.

214
00:17:03,170 --> 00:17:05,010
And then I'm going to do the same thing.

215
00:17:05,020 --> 00:17:11,300
Open up our storyboard and our assistant editor holding option and clicking on Main storyboard.

216
00:17:11,710 --> 00:17:19,650
Then right click on View Controller up here to our identity inspector change the class to create user

217
00:17:19,650 --> 00:17:20,780
visi.

218
00:17:20,800 --> 00:17:28,780
Now we can add our outlets and actions you know with outlets here and I'm going to control and drag

219
00:17:29,320 --> 00:17:39,290
and say email text control and drag for the password and say password.

220
00:17:39,770 --> 00:17:40,290
Text

221
00:17:43,340 --> 00:17:58,330
and use her name text then four are two buttons going to control and drag and say create button and

222
00:17:58,340 --> 00:17:59,710
connect.

223
00:17:59,930 --> 00:18:05,910
And lastly cancel button and connect.

224
00:18:05,920 --> 00:18:10,880
Now we're getting in a couple of actions for these two women to control and direct again for our create

225
00:18:10,880 --> 00:18:22,990
user button change to an action and say create tapped and say connect get some space up here and there

226
00:18:23,000 --> 00:18:23,700
we go.

227
00:18:24,140 --> 00:18:24,580
All right.

228
00:18:25,630 --> 00:18:32,050
Draw and direct from or cancel button again and change it to an action and say cancel tapped

229
00:18:35,310 --> 00:18:39,020
and say connect right it's very good.

230
00:18:39,170 --> 00:18:45,540
So we have all of our outlets and the actions set up for both of our brand new viewers.

231
00:18:45,550 --> 00:18:50,160
So let's go and just check this out one more time make sure we didn't miss anything.

232
00:18:50,200 --> 00:18:51,340
Looks good looks good.

233
00:18:51,340 --> 00:18:53,840
Create user cancell.

234
00:18:54,220 --> 00:18:57,260
Let's compare to our designs.

235
00:18:57,470 --> 00:19:01,640
Oh I didn't round the corners on our second view yet.

236
00:19:01,870 --> 00:19:02,590
Let's do that.

237
00:19:02,650 --> 00:19:13,920
Here in our create user Visi real quick to say create and leared corner radius is equal to 10 and cancel.

238
00:19:13,990 --> 00:19:18,300
And layer dot corner radius is equal to 10.

239
00:19:18,310 --> 00:19:18,620
All right.

240
00:19:18,640 --> 00:19:19,900
We'll save that.

241
00:19:19,900 --> 00:19:21,730
All right so this is looking good.

242
00:19:21,730 --> 00:19:27,600
We got our two views set up and all of our actions and outlets hooked up.

243
00:19:27,640 --> 00:19:33,280
So the next lesson we are going to actually start talking about firebase authentication what it is how

244
00:19:33,280 --> 00:19:33,930
to use it.

245
00:19:34,000 --> 00:19:38,270
And we're going to get these views hooked up so we can actually see them and play with them.

246
00:19:38,530 --> 00:19:41,530
And I guess is going to be pretty cool and I'll see you in the next one.