1
00:00:07,850 --> 00:00:11,300
Welcome back everybody Johnny B who was the slowest dot com.

2
00:00:11,420 --> 00:00:15,920
And in this lesson we are going to pick up right off where we left in the last lesson.

3
00:00:15,920 --> 00:00:19,410
I know lesson was really long and pretty heavy.

4
00:00:19,460 --> 00:00:23,150
So we're going to see if we can make this one little bit shorter and lighter.

5
00:00:23,150 --> 00:00:23,720
All right.

6
00:00:23,900 --> 00:00:31,000
So in the last one we created this register user function and we've seen how it works in Postman.

7
00:00:31,190 --> 00:00:34,440
So now let's actually make it work here in our app.

8
00:00:34,440 --> 00:00:34,950
All right.

9
00:00:35,180 --> 00:00:40,710
So we're going to do is we're going to be working in our create account Visi that's we have to file.

10
00:00:40,820 --> 00:00:43,190
And right now we don't have we don't have much in here.

11
00:00:43,190 --> 00:00:49,060
All right so we're going to have to hook up all of our UI elements that are in the main storyboard.

12
00:00:49,310 --> 00:00:55,580
So I just option click on the main story board to bring up our assistant editor and let's see if we

13
00:00:55,580 --> 00:01:02,370
can create a little bit more room and then closed the left and right panels.

14
00:01:03,080 --> 00:01:10,550
And yes we went here with the create a count controller here and we're just going to create some outlets

15
00:01:10,580 --> 00:01:14,700
for for for our text fields and buttons and stuff.

16
00:01:14,700 --> 00:01:15,160
OK.

17
00:01:15,590 --> 00:01:17,720
So we'll start here with the user name.

18
00:01:17,720 --> 00:01:26,530
I'm going to control drag and drop over here and say user name text DX T.

19
00:01:26,780 --> 00:01:28,000
And we got an outlet.

20
00:01:28,030 --> 00:01:39,150
I'm going to quick create my outlet's header of there we go.

21
00:01:39,170 --> 00:01:48,770
Next up we have the emails from that control drag and drop it right here and say email text and then

22
00:01:48,770 --> 00:01:54,530
we have the password textfield I want to say pass.

23
00:01:54,780 --> 00:02:01,710
Text Then let's go ahead and do these other ones that we have right now.

24
00:02:01,880 --> 00:02:03,040
We're going to grab the image here.

25
00:02:03,050 --> 00:02:07,850
But make sure you have the actual image not the button that goes over it.

26
00:02:07,980 --> 00:02:11,000
So make sure you've got the profile of the full image right here.

27
00:02:11,300 --> 00:02:13,070
And I'm going to control drag.

28
00:02:13,280 --> 00:02:15,860
And here we're going to see a user image.

29
00:02:15,860 --> 00:02:19,280
I am g and connect that.

30
00:02:19,350 --> 00:02:24,440
Now we're going to grab the actually we're not going to do the choose to turn generic background color

31
00:02:24,440 --> 00:02:29,850
buttons yet but we will need an action for this.

32
00:02:29,870 --> 00:02:31,530
Create a count button here.

33
00:02:31,610 --> 00:02:33,020
So I'm going to control drag.

34
00:02:33,380 --> 00:02:36,110
And this time make sure that it is an action.

35
00:02:36,680 --> 00:02:42,190
And we were going to say create a count press.

36
00:02:42,580 --> 00:02:45,910
OK so that's an actual touch up inside and connect.

37
00:02:46,430 --> 00:02:49,500
And you know what let's go ahead and add these other buttons here.

38
00:02:49,500 --> 00:02:52,200
Bawler at it that way we won't have to do it later.

39
00:02:52,490 --> 00:02:59,500
So with the choose Avatar button selected I'm control and dragging and I'm going to say Pick have a

40
00:02:59,530 --> 00:03:05,990
top are pressed and that's going to be an action and connect.

41
00:03:06,580 --> 00:03:12,230
And then below that one I'm going to grab the general background color and I'm going to say control

42
00:03:12,230 --> 00:03:25,160
drag and make this an action and say pick back just because they pick B.G. color pressed I'm going to

43
00:03:25,160 --> 00:03:27,210
say connect or connect there.

44
00:03:27,340 --> 00:03:30,780
All right so we have all the stuff that we need.

45
00:03:31,010 --> 00:03:36,270
But the most doublechecked username email password that one's already hooked up got the image.

46
00:03:36,290 --> 00:03:39,470
And these two and all three of these buttons are right so I think frigate's I'm going to go ahead and

47
00:03:39,470 --> 00:03:44,460
close our assistant editor and re-open our left and her right panes.

48
00:03:44,780 --> 00:03:55,970
And so now we are able to work in with what happens when we push push that create account pressed button

49
00:03:56,480 --> 00:03:57,810
and see what's going to happen.

50
00:03:57,930 --> 00:04:06,660
Well first off we are going to grab what is in the username text email text and password text and will

51
00:04:06,680 --> 00:04:12,290
not the not the username quite yet just email the password because remember in postman although we need

52
00:04:12,290 --> 00:04:15,510
to register a user as an email and a password.

53
00:04:15,830 --> 00:04:20,590
So let's go ahead and create some variables for those who are inside guard.

54
00:04:20,750 --> 00:04:31,220
Let email equal email text that text and we're going to do a check here so we're going to say Kamo which

55
00:04:31,220 --> 00:04:38,570
denotes where we're saying Gardley e-mail equal what's inside of the e-mail that text if or where the

56
00:04:38,580 --> 00:04:44,780
e-mail text that text does not equal an empty string.

57
00:04:44,780 --> 00:04:50,420
And if all of that checks out then we'll take that into the variable e-mail.

58
00:04:50,510 --> 00:04:52,100
If not then we're just going to say.

59
00:04:52,100 --> 00:04:53,710
Else return.

60
00:04:54,080 --> 00:05:04,940
Can number do the same thing with password reset guard and let pass equal to pass text dot text where

61
00:05:04,970 --> 00:05:12,190
the last text that text does not equal an empty string.

62
00:05:12,200 --> 00:05:15,170
Else we're going to return.

63
00:05:15,450 --> 00:05:22,640
OK so if you haven't looked at gardes statements yet what it is essentially is another way of unwrapping

64
00:05:22,830 --> 00:05:24,880
optional values.

65
00:05:24,890 --> 00:05:25,450
OK.

66
00:05:25,770 --> 00:05:31,950
So the values of the text fields if you click on text here you'll see that the it's an optional string.

67
00:05:31,980 --> 00:05:34,600
So that's why we have to unwrap them.

68
00:05:35,100 --> 00:05:40,740
And then once we have our email on password all we're going to do is call our our register function

69
00:05:40,770 --> 00:05:47,690
inside of the service and we say all the service is not in it Officer service instance dot registry

70
00:05:47,700 --> 00:05:48,360
user.

71
00:05:48,840 --> 00:05:57,030
And we are going to pass here the e-mail and then we're going to pass in the Pass the password that

72
00:05:57,030 --> 00:05:59,400
we have that we unwrapped right here.

73
00:05:59,400 --> 00:06:05,220
And then on the completion if you click here and then press enter we get the completion handler and

74
00:06:05,220 --> 00:06:08,470
we're going to rename it here to be success.

75
00:06:09,060 --> 00:06:17,220
And then here we can say if success then we're going to see print

76
00:06:20,770 --> 00:06:31,190
registered user OK so simple as that as we're going to save that.

77
00:06:31,190 --> 00:06:35,970
So let's talk about real people we've done we've gone ahead and unwrapped and created variables for

78
00:06:35,970 --> 00:06:37,280
our email and password.

79
00:06:37,280 --> 00:06:39,990
And those are taken from the e-mail text and password.

80
00:06:40,070 --> 00:06:41,210
Text You.

81
00:06:41,210 --> 00:06:45,000
I text fields right here in our app.

82
00:06:45,110 --> 00:06:45,640
Right.

83
00:06:45,920 --> 00:06:51,410
And then we pass those into the service thight instance that register user function that we created

84
00:06:51,410 --> 00:07:00,010
and the last lesson when we click on the use register user button.

85
00:07:00,440 --> 00:07:04,500
And if it's successful we're just going to print out this print statement right here.

86
00:07:04,500 --> 00:07:07,290
So let's go ahead and give that a try.

87
00:07:07,510 --> 00:07:14,220
I'm going to toggle off the software keyboard and here we're going to try registering it using we say

88
00:07:15,530 --> 00:07:24,620
test and register dot com and the password is 1 2 3 4 5 6 and I'm going to click here.

89
00:07:25,130 --> 00:07:32,160
And if it works we should see a print statement down here and in a few seconds.

90
00:07:32,210 --> 00:07:33,820
And remember there it is.

91
00:07:33,970 --> 00:07:40,220
So the server had gone to sleep again remember that if you don't want your server to ever go to sleep

92
00:07:40,220 --> 00:07:46,100
you're going to have to upgrade your account to the I think the next one is called hobby and that's

93
00:07:46,100 --> 00:07:47,470
only seven bucks a month.

94
00:07:47,540 --> 00:07:48,790
So not a lot.

95
00:07:48,920 --> 00:07:53,780
And so if you want to have it always awake and always ready to respond immediately then you can do that.

96
00:07:53,970 --> 00:07:55,080
All right.

97
00:07:55,400 --> 00:08:01,500
So we registered to user in fact let's go ahead and check out our labs.

98
00:08:01,640 --> 00:08:10,340
If we come over here to lab dot com or if you did the one the one button deploy with Heroku that will

99
00:08:10,340 --> 00:08:16,360
be here under resources you'll see the light bulb here and you can click on it and it'll take you to

100
00:08:16,450 --> 00:08:17,650
the same type of thing.

101
00:08:17,960 --> 00:08:25,610
So if we come over here and click on our on our server on our Mugwort database come down here to accounts

102
00:08:27,200 --> 00:08:33,520
then we should see it's right here test at the register dot com.

103
00:08:33,710 --> 00:08:35,310
So guys this is super cool.

104
00:08:35,330 --> 00:08:46,030
We just coded a web request gave it the information that we wanted it to send to the server to our API.

105
00:08:46,040 --> 00:08:52,460
The API took that information created a count object and then sent that over to our Mongo D-B online

106
00:08:52,460 --> 00:08:54,590
database and saved it here.

107
00:08:54,800 --> 00:08:57,380
So some super cool stuff.

108
00:08:57,410 --> 00:09:04,370
So that's step 1 in the creating a user account process remember so we have really we just register

109
00:09:04,370 --> 00:09:09,810
to user the next two steps is to log in the user and then add the user.

110
00:09:10,170 --> 00:09:15,650
But in this video like I said we're going to keep it light and instead of jumping into some more heavy

111
00:09:15,890 --> 00:09:19,710
API code we're going to do a little bit of UI enhancements.

112
00:09:19,700 --> 00:09:20,020
All right.

113
00:09:20,030 --> 00:09:28,190
So what we're going to do if we check out are if we check out our designs these buttons they have some

114
00:09:28,190 --> 00:09:29,870
rounded edges.

115
00:09:30,050 --> 00:09:30,910
OK.

116
00:09:31,220 --> 00:09:40,260
Now we could do it the old fashioned way of coming over here to our loggin the CSA and having gay and

117
00:09:40,470 --> 00:09:48,660
the outlet for the button and then doing and layer that corner radius is equal to five.

118
00:09:48,830 --> 00:09:55,670
But you know you shouldn't really have a lot of that type of code in your view controller.

119
00:09:55,670 --> 00:10:01,490
If you can let's you want to extract that out into subclasses so that's over do just like we created

120
00:10:01,490 --> 00:10:04,140
a greeting view subclass.

121
00:10:04,190 --> 00:10:08,870
We're going to create a rounded button subclass of you I buy in.

122
00:10:08,870 --> 00:10:09,390
All right.

123
00:10:09,590 --> 00:10:14,900
So let's go ahead and get started I'm going to click on view and see a new file and we're going to do

124
00:10:14,900 --> 00:10:16,110
cocoa touch class.

125
00:10:16,160 --> 00:10:16,360
Good.

126
00:10:16,370 --> 00:10:21,100
Next we're going to look for you I button.

127
00:10:21,110 --> 00:10:22,010
Here we go.

128
00:10:22,050 --> 00:10:25,470
I'm going to say rounded on.

129
00:10:25,690 --> 00:10:27,810
OK we're going to say next.

130
00:10:28,100 --> 00:10:30,800
And create.

131
00:10:30,800 --> 00:10:31,090
All right.

132
00:10:31,100 --> 00:10:36,130
And we're going to delete this hand just like a greeting view we want to be able to see the changes

133
00:10:36,140 --> 00:10:42,290
right there and storyboards So we're going to make this an ivy the Zeina.

134
00:10:42,340 --> 00:10:43,290
There we go.

135
00:10:43,700 --> 00:10:49,230
And we want to be able to change also the corner radius in storyboard.

136
00:10:49,310 --> 00:10:54,830
So we're going to create an IP inspectable something to say I be inspectable That's a variable called

137
00:10:54,980 --> 00:11:02,410
coronor radius that's going to be a C.G. float because that's what corner radius requires.

138
00:11:02,570 --> 00:11:09,400
And we'll set a default value of 3.0 and we're going to say did set.

139
00:11:09,890 --> 00:11:17,210
So when we change in storyboard what's going to happen we are going to set the corner radius of the

140
00:11:17,210 --> 00:11:20,860
button to the new one that we just set.

141
00:11:20,900 --> 00:11:25,160
So self-declared a corner radius equal to the corner radius.

142
00:11:25,370 --> 00:11:33,320
So the do the run and Button UI buttons layer not corner radius value will be set to this value right

143
00:11:33,320 --> 00:11:33,740
here.

144
00:11:33,920 --> 00:11:34,410
OK.

145
00:11:34,700 --> 00:11:41,810
So pretty straightforward then we're going to say override or if we just do awake from NIB.

146
00:11:41,810 --> 00:11:51,160
So when it is created when it awakes from its KNIBBS state we're going to say self dot set up the you.

147
00:11:51,290 --> 00:11:52,790
And that's just a function that we haven't created yet.

148
00:11:52,790 --> 00:11:57,500
So one of them right here can see phunk set up view.

149
00:11:58,970 --> 00:12:07,190
And here also we're just going to say self-taught fayer corner radius is equal to corner radius and

150
00:12:07,190 --> 00:12:12,110
then the last thing that we need to do is we're going to call a function called prepare for interface

151
00:12:12,140 --> 00:12:18,660
builder which you can see here is called 180 signable object is created in Interface Builder.

152
00:12:18,910 --> 00:12:19,480
OK.

153
00:12:19,730 --> 00:12:25,790
And then we're going to also need to call super dot prepare for Interface Builder.

154
00:12:25,790 --> 00:12:29,960
And if we click on it here we can read a little bit about what it does this is called when a desirable

155
00:12:29,960 --> 00:12:36,060
object is created and an Interface Builder one Interface Builder instantiates a class with the desirable

156
00:12:36,110 --> 00:12:41,630
attribute it calls this method to let the resulting object know that it was created at design time.

157
00:12:41,660 --> 00:12:47,460
You can implement this method in your design classes and use it to configure their design time appearance.

158
00:12:47,780 --> 00:12:55,460
So here we are also going to put a self-taught set of view so that when it's so that when we change

159
00:12:55,810 --> 00:13:00,200
in storyboard then we know to set it up right here right.

160
00:13:00,560 --> 00:13:05,730
So pretty straightforward going to clean up a couple of things here and get rid of unwanted spaces.

161
00:13:05,740 --> 00:13:07,610
And I think that looks good.

162
00:13:07,620 --> 00:13:14,420
So I want to save it and we're going to jump back into storyboard and let's go ahead and set those two

163
00:13:14,600 --> 00:13:20,930
buttons that we have to this class here in log and I'm just selecting in coming over here to its attribute

164
00:13:21,000 --> 00:13:22,710
or the identity inspector.

165
00:13:22,720 --> 00:13:30,170
And we're going to change its class to a rounded button and you can see that it already has a rounded

166
00:13:30,170 --> 00:13:36,170
appearance now and then we're into the same thing for the Create count button when I say rounded button

167
00:13:37,050 --> 00:13:41,570
and that looks looks pretty good I think we want to a little bit more rounded though.

168
00:13:41,570 --> 00:13:48,650
So let's go ahead and come to our attributes and inspector and you can see here this is the Iby inspectable

169
00:13:48,650 --> 00:13:52,400
variable that we created in our rounded button class.

170
00:13:52,400 --> 00:13:58,340
So we're going to I'm going to bump this up to five and then the same thing with the create a count

171
00:13:58,340 --> 00:14:02,560
button and bump that up to five and see how that looks.

172
00:14:02,630 --> 00:14:06,160
And yeah I think that looks really good.

173
00:14:06,410 --> 00:14:09,860
And you know what that is all we are going to cover in this lesson.

174
00:14:09,860 --> 00:14:10,820
Short and sweet.

175
00:14:10,880 --> 00:14:14,050
We fixed up our credit account.

176
00:14:14,530 --> 00:14:20,180
We we added the outlets for us for all of our stuff Iby actions for our buttons that we're going to

177
00:14:20,180 --> 00:14:26,300
use in the future as well as the create a count button right now we went ahead and we called our office

178
00:14:26,300 --> 00:14:33,950
service type instance dot register user function passing into the email and password so that it could.

179
00:14:34,090 --> 00:14:34,750
And then.

180
00:14:34,840 --> 00:14:36,650
So let's go ahead and follow it over.

181
00:14:36,650 --> 00:14:42,700
So if you command click and click on a method you can say jump to definition and I'll take you over

182
00:14:42,700 --> 00:14:43,170
there.

183
00:14:43,410 --> 00:14:49,820
And so just a refresher of what we did and the last lesson we are passing into this function the email

184
00:14:49,820 --> 00:14:56,910
and password we have our completion handler and so we're just sending over to our online API.

185
00:14:57,080 --> 00:15:03,220
This web request with the information and the API handles creating the user or registering the user

186
00:15:03,230 --> 00:15:04,090
I should say.

187
00:15:04,190 --> 00:15:05,780
So that's some pretty cool stuff.

188
00:15:05,780 --> 00:15:08,450
Hope you guys are enjoying it so far.

189
00:15:08,450 --> 00:15:13,070
And before we sign off here I'm going to go ahead and just commit our changes.

190
00:15:13,100 --> 00:15:19,860
So we say get status say Get add that get to commit cash.

191
00:15:19,990 --> 00:15:23,460
And this was less than 10.

192
00:15:24,410 --> 00:15:31,210
And that I'm going to do get push origin lesson dash.

193
00:15:31,600 --> 00:15:36,120
All right looking great guys and I will see you in the next one.