1
00:00:07,440 --> 00:00:08,090
All right.

2
00:00:08,100 --> 00:00:12,150
Ladies and gentlemen welcome back Johnny be here with scope's dot com.

3
00:00:12,240 --> 00:00:18,450
And in this video we are going to continue working on our UI and the last one we left off here.

4
00:00:18,450 --> 00:00:21,360
We created our loggin visi.

5
00:00:21,540 --> 00:00:24,900
And in this one we're going to create our create account visi.

6
00:00:24,960 --> 00:00:29,530
So when we click on this is going to take us over to them here.

7
00:00:29,790 --> 00:00:33,300
It's going to take us over to the screen right here.

8
00:00:33,300 --> 00:00:33,570
All right.

9
00:00:33,570 --> 00:00:36,390
So let's go and get started on that.

10
00:00:36,390 --> 00:00:39,120
You can see that it's we have some similar elements.

11
00:00:39,120 --> 00:00:42,820
We're going to be able to reuse some of the work that we did on our last lesson.

12
00:00:42,840 --> 00:00:48,500
Same Clothes buttons similar text fields and similar buttons so that's good.

13
00:00:48,510 --> 00:00:51,150
So yeah let's just jump right in.

14
00:00:51,150 --> 00:00:56,510
First off we're going to need a new View Controller so I'm going to drag in a view controller from our

15
00:00:56,520 --> 00:01:02,550
library here and we're going to be Sigge weighing over to it at some point.

16
00:01:02,550 --> 00:01:10,540
So I'm going to click here on our log in B C control drag and drag over and see a show.

17
00:01:10,550 --> 00:01:15,280
All right now we're going to go and create an identifier for this segue here.

18
00:01:15,480 --> 00:01:19,620
I'm going to say to create a count.

19
00:01:20,000 --> 00:01:21,820
OK I'm going to copy that.

20
00:01:22,050 --> 00:01:26,140
And it's created a constant for it over in our constant file.

21
00:01:26,190 --> 00:01:40,560
When I say left to create a count equal and paste that and put it in quotation marks save that and jump

22
00:01:40,560 --> 00:01:43,490
back over to our storyboard.

23
00:01:43,490 --> 00:01:51,150
All right so we got our new controller set up here in the story boy we're going to need a controller

24
00:01:51,150 --> 00:01:52,180
file for it right.

25
00:01:52,350 --> 00:01:58,780
So when I right click on our controller folder and see a new file and say Cocoa touch class and next

26
00:01:59,280 --> 00:02:07,830
and it is of subclassed you have your controller and we want this to be called I think create a count.

27
00:02:08,160 --> 00:02:10,580
PVC I say next.

28
00:02:11,130 --> 00:02:12,420
And create

29
00:02:15,820 --> 00:02:23,550
I'm going to go and get rid of some of this and unnecessary code here.

30
00:02:23,650 --> 00:02:24,510
And that looks good.

31
00:02:24,510 --> 00:02:27,090
Ready for us to work with.

32
00:02:27,200 --> 00:02:32,830
Real quick let's go ahead and just add the segue action here.

33
00:02:32,830 --> 00:02:39,030
So here in the story board I'm going to open up our assistant editor with the log in visi.

34
00:02:39,160 --> 00:02:47,210
So when I held the option and clicked on log in VC that opens up the assistant editor and that's screwed

35
00:02:47,210 --> 00:02:51,390
over to our log in VC here.

36
00:02:51,410 --> 00:02:58,010
I'm going to grab this don't have an account button and create an IB action for it.

37
00:02:58,010 --> 00:02:59,920
So I'm going to control drag.

38
00:03:00,140 --> 00:03:11,990
We're going to make an ebb and action and when to say this say create a count and press it goes we got

39
00:03:11,990 --> 00:03:15,630
an action that looks good.

40
00:03:15,630 --> 00:03:20,930
All right and I'm going to go ahead and close this and close the assistant editor to get back to our

41
00:03:20,930 --> 00:03:22,100
standard editor.

42
00:03:22,340 --> 00:03:29,270
Jump over to our log in Visi that's the file to the Iby action that we just created and we're just going

43
00:03:29,270 --> 00:03:34,760
to perform a segue over to that empty view controller that we've got right now.

44
00:03:34,790 --> 00:03:43,390
And perform segment with identifier the constant that we created is called to underscore accrete account.

45
00:03:43,550 --> 00:03:45,750
Sender is nil.

46
00:03:45,800 --> 00:03:48,740
All right so it looks good you're going to save that and run it.

47
00:03:49,490 --> 00:03:55,850
And what we should see is that when we click on that create a account button it should segue us to a

48
00:03:55,850 --> 00:03:57,960
blank empty screen.

49
00:03:58,400 --> 00:03:58,610
All right.

50
00:03:58,610 --> 00:04:03,900
So clicking on the menu going to log in and it don't have an account.

51
00:04:03,920 --> 00:04:04,670
And there we go.

52
00:04:04,670 --> 00:04:05,020
All right.

53
00:04:05,030 --> 00:04:06,830
So we know that that's working.

54
00:04:07,170 --> 00:04:10,570
But now we need to go ahead and add all of that.

55
00:04:10,610 --> 00:04:18,170
All of those elements so one more time let's jump back into our design document is kind of like our

56
00:04:18,170 --> 00:04:23,750
recipe book it tells us all of the steps that we need to take and what it's supposed to look like and

57
00:04:23,750 --> 00:04:24,080
stuff.

58
00:04:24,080 --> 00:04:24,650
All right.

59
00:04:24,920 --> 00:04:34,030
So we got a label up here our clothes button some text fields and they're dividers and image here for

60
00:04:34,030 --> 00:04:39,090
our avatar images that we will be able to select here in the future.

61
00:04:39,380 --> 00:04:43,430
A button to forward the background color as well and a button to create the account.

62
00:04:43,430 --> 00:04:43,770
All right.

63
00:04:43,880 --> 00:04:45,490
So that looks good.

64
00:04:45,530 --> 00:04:50,540
So I think we're going to do to save some time or is going to get a copy.

65
00:04:50,690 --> 00:04:57,450
Most of these elements and and use those in our new controller.

66
00:04:57,440 --> 00:05:04,040
So what I did is I just drug and selected all of these and I'm going to say command C for copy then

67
00:05:04,040 --> 00:05:06,570
I'm going to come over here to our new controller click.

68
00:05:06,590 --> 00:05:14,510
Make sure the view is selected and just do command the to paste and then we can kind of drag this up

69
00:05:14,510 --> 00:05:17,300
to where we want it more or less.

70
00:05:17,330 --> 00:05:18,140
So that's about right.

71
00:05:18,140 --> 00:05:19,390
Right there.

72
00:05:19,420 --> 00:05:22,980
And then we can just kind of delete the things that we don't need we don't need this logo.

73
00:05:23,010 --> 00:05:30,620
So when you get rid of that I'm going to pull this label outside of this stack of you because we don't

74
00:05:30,620 --> 00:05:32,130
need this stack of you anymore.

75
00:05:32,180 --> 00:05:38,970
So I'm going to delete the stack here and I'll label that kind of mood down here weird.

76
00:05:39,290 --> 00:05:41,070
All right so that's kind of a pain.

77
00:05:41,450 --> 00:05:47,690
But this button goes down here and this guy comes back up here.

78
00:05:48,590 --> 00:05:53,950
However when we do that copy is copy over with there some other constraints.

79
00:05:54,050 --> 00:05:59,300
And you can see that this loggin button is trained to be constrained to the bottom of the stack view.

80
00:05:59,300 --> 00:06:03,310
So we can go ahead and move some of those constraints are going to come up here to the size inspector

81
00:06:03,980 --> 00:06:09,840
and I'm going to say top space and we're just going to delete that constraint as well as this one here.

82
00:06:09,920 --> 00:06:15,460
So we're just left with the width and height constraints which is what we want.

83
00:06:15,740 --> 00:06:17,840
So it's quite constrained this guy down here.

84
00:06:17,840 --> 00:06:24,310
We're going to say 20 from the bottom and we are going to center it horizontally.

85
00:06:24,540 --> 00:06:25,680
Right so that looks good.

86
00:06:25,760 --> 00:06:27,030
Let's go in and rename it.

87
00:06:27,050 --> 00:06:30,180
This is going to be create account.

88
00:06:31,870 --> 00:06:34,490
And that excuse is going to this guy up here.

89
00:06:34,650 --> 00:06:42,460
So when I say eight from the top and zero from the right with constraint to margins checked to add two

90
00:06:42,460 --> 00:06:43,900
constraints.

91
00:06:43,900 --> 00:06:53,620
And then for this right here this is going to say create an account that looks good click and say command

92
00:06:53,650 --> 00:06:57,820
equal and then going to drag you down here a little bit.

93
00:06:57,870 --> 00:07:06,660
This is going to be 40 from the top and then centered horizontally.

94
00:07:07,080 --> 00:07:08,420
Right looks good.

95
00:07:08,620 --> 00:07:15,340
This stack for you here we already have 2 of these that we need we have a username and password we need

96
00:07:15,340 --> 00:07:17,710
a third one called e-mail.

97
00:07:17,710 --> 00:07:26,410
All right so once again awesome thing with stack views is I can just take these two right here copy

98
00:07:26,410 --> 00:07:33,580
them and paste and it just you know puts them right inside of the stack below.

99
00:07:33,610 --> 00:07:44,150
The other one so I can then change this user name to actually say e-mail and that's it.

100
00:07:44,140 --> 00:07:49,340
You know so easy don't have to mess with a whole bunch of individual constraints.

101
00:07:49,690 --> 00:07:51,910
Just Works real nice.

102
00:07:51,910 --> 00:07:54,920
So then we need to constrain the suspect as a whole.

103
00:07:54,940 --> 00:08:02,120
We're going to go 40 from the top or 40 from the bottom of the label above it the Create an account

104
00:08:02,200 --> 00:08:07,420
label say add one constraint and horizontally constrain it.

105
00:08:07,480 --> 00:08:10,460
So it's set to the center of the container.

106
00:08:11,080 --> 00:08:12,720
And that looks great.

107
00:08:12,880 --> 00:08:15,270
So that's all done.

108
00:08:15,270 --> 00:08:17,330
What do we have for constraints on this guy.

109
00:08:17,530 --> 00:08:19,660
We have with a height.

110
00:08:19,720 --> 00:08:21,830
So that's that's fine.

111
00:08:21,850 --> 00:08:31,270
This is going to be our Choose Avatar and Jews have tor and let's go in and actually just remove its

112
00:08:31,270 --> 00:08:32,060
constraints.

113
00:08:32,140 --> 00:08:40,370
For now I'm going to say command equal and we're going to do is we need an image here.

114
00:08:40,510 --> 00:08:41,120
OK.

115
00:08:41,650 --> 00:08:58,180
So an image view and this image is called profil default all go ahead and set the size 100 by 100.

116
00:08:58,420 --> 00:08:59,440
Looks good.

117
00:08:59,860 --> 00:09:01,440
And we're going to do here.

118
00:09:01,900 --> 00:09:09,970
Well first off let me set the constraints for this image here as we're going to say 40 from the bottom

119
00:09:09,970 --> 00:09:12,920
of the stack are you above is it within the height.

120
00:09:13,220 --> 00:09:17,750
So I had those three constraints and then horizontally and container as well.

121
00:09:18,130 --> 00:09:23,110
And then we're going to cheat a little bit because if you were using this you would think that you could

122
00:09:23,110 --> 00:09:27,830
click on this guy and be able to choose your avatar as well as this button right here.

123
00:09:28,030 --> 00:09:37,710
So we're going to do is we're just going to actually make this button go over this image all right.

124
00:09:37,880 --> 00:09:40,890
So now we're going to do that is we're going to set up some constraints.

125
00:09:41,110 --> 00:09:49,390
So we're going to we're going to control drag and we're going to say equal with this and then if you

126
00:09:49,390 --> 00:09:54,280
control drag and do like a diagonal to it what we want is top as well.

127
00:09:54,280 --> 00:10:01,090
So what that does is it sets the two tops to each other and then we're going to go ahead and just drag

128
00:10:01,960 --> 00:10:07,830
down and set the height to 130

129
00:10:13,950 --> 00:10:19,940
go there you're going to set this to be horizontally in the container.

130
00:10:20,850 --> 00:10:28,890
And last we're going to do is set the alignment to be at the bottom here.

131
00:10:28,920 --> 00:10:30,190
All right there we go.

132
00:10:30,390 --> 00:10:39,480
So basically what we did is we just created a button that is this big which covers the the the white

133
00:10:39,480 --> 00:10:41,380
image but it's actually a button.

134
00:10:41,400 --> 00:10:45,510
And then we just drop to the alignment for the text to be at the very bottom.

135
00:10:45,510 --> 00:10:50,460
So now when a user clicks on the what they're thinking when think of that clicking on this image they're

136
00:10:50,460 --> 00:10:53,130
actually clicking first on the button.

137
00:10:53,130 --> 00:10:53,610
All right.

138
00:10:53,880 --> 00:10:56,180
So that's what we're going to do there.

139
00:10:56,180 --> 00:11:01,950
And then we're going to need one more button when I go out and copy this guy again and paste it over

140
00:11:01,950 --> 00:11:02,700
here.

141
00:11:03,820 --> 00:11:06,680
And see what kind of constraints we have.

142
00:11:06,740 --> 00:11:08,300
That's fine.

143
00:11:08,470 --> 00:11:09,850
And this is going to say

144
00:11:13,230 --> 00:11:26,640
generate back my computer slowing down again generate back ground color.

145
00:11:26,670 --> 00:11:32,400
All right so we got our last button here generated background color and that's just going to go right

146
00:11:32,400 --> 00:11:34,380
below our Choose Avatar buttons.

147
00:11:34,380 --> 00:11:35,580
When it constrain it

148
00:11:38,660 --> 00:11:44,330
zero from the bottom and let's give it a little bit of space maybe four and then we're going to center

149
00:11:44,360 --> 00:11:47,600
it as well horizontally in container.

150
00:11:47,620 --> 00:11:49,710
Right and that looks pretty good.

151
00:11:49,730 --> 00:11:53,980
I want to go ahead and save that and let's run it.

152
00:11:54,020 --> 00:11:54,990
For an iPhone 6.

153
00:11:55,010 --> 00:11:55,940
Yes.

154
00:11:56,300 --> 00:11:58,300
Run that and see how it looks.

155
00:11:59,420 --> 00:12:01,260
I'm going to click on the menu.

156
00:12:01,460 --> 00:12:05,300
Click on the log in don't have an account sign up here.

157
00:12:05,510 --> 00:12:06,860
And boom.

158
00:12:06,860 --> 00:12:08,980
You know that that looks really great.

159
00:12:09,830 --> 00:12:11,010
Yeah.

160
00:12:11,420 --> 00:12:11,630
All right.

161
00:12:11,630 --> 00:12:18,530
So the next thing we're going to look at here is how do we dismiss this because if I click on this and

162
00:12:18,590 --> 00:12:25,320
we tell it to dismiss this view what's going to actually happen is it's going to go back to the loggin

163
00:12:25,340 --> 00:12:30,290
view controller and that's not what we're really that's not really what we want we want to be able to

164
00:12:31,640 --> 00:12:35,990
what's called unwind all the way back to the initial view controller.

165
00:12:36,050 --> 00:12:37,710
So that's what we're going to set up now right.

166
00:12:37,850 --> 00:12:40,720
So that's called an unwind segues.

167
00:12:40,730 --> 00:12:48,590
So what you got to do is the root controller that you want to go back to which is in our case all the

168
00:12:48,590 --> 00:12:53,480
way back from here to here which is our channel visi.

169
00:12:53,690 --> 00:13:00,410
So we need to come over here to our channel Visi and add an action that doesn't actually have anything

170
00:13:00,410 --> 00:13:03,810
connected to it but it's an IB action.

171
00:13:03,980 --> 00:13:12,720
When we say IP action phunk and just can I call it prepare for one wind.

172
00:13:13,020 --> 00:13:13,360
OK.

173
00:13:13,370 --> 00:13:21,420
And that's going to be of type Segway and UI story board.

174
00:13:21,680 --> 00:13:26,400
Segway can we just to open close curly braces right there.

175
00:13:26,470 --> 00:13:35,120
I want to say that and then we jump over to back in the storyboard and over here our last one in line

176
00:13:35,360 --> 00:13:36,890
and a click here.

177
00:13:36,890 --> 00:13:43,150
I'm going to control drag from view controller right to exit right here and I'm when I say manual Segway

178
00:13:43,160 --> 00:13:45,630
prepare for unwind with Segway.

179
00:13:45,960 --> 00:13:46,790
OK.

180
00:13:47,220 --> 00:13:49,640
And then I'm going to grab him right here.

181
00:13:49,640 --> 00:13:57,380
The unwind segue here and we're going to give this an identifier and we're going to call this on wind

182
00:13:57,770 --> 00:13:59,930
to channel.

183
00:14:00,240 --> 00:14:00,860
OK.

184
00:14:01,280 --> 00:14:02,420
Copy that.

185
00:14:02,600 --> 00:14:05,250
And that's going create a new Segway constant.

186
00:14:05,360 --> 00:14:17,610
So over here in utility's Constance in him we're just going to say a lot on wind equal unwind channel.

187
00:14:17,620 --> 00:14:26,140
All right so we're going to save that and then back here in our create account who the see we're going

188
00:14:26,140 --> 00:14:31,150
to need and be action for for that close button.

189
00:14:31,190 --> 00:14:37,630
So I'm going to hold option and click on main story board to open up our assistant editor and this can

190
00:14:38,080 --> 00:14:40,410
scroll over to find that here.

191
00:14:40,420 --> 00:14:40,650
All right.

192
00:14:40,650 --> 00:14:48,490
So when I grab this here I'm going to we haven't set the class for this controller yet so here it's

193
00:14:48,590 --> 00:14:55,060
like controller go up to our identity inspector and I'm going to send it to you.

194
00:14:55,060 --> 00:14:57,870
What do we call this create create account visi.

195
00:14:57,880 --> 00:14:58,580
There we go.

196
00:14:58,810 --> 00:15:03,000
So now I can zoom back in on this game.

197
00:15:03,190 --> 00:15:07,300
Now I can control drag over to our controller file.

198
00:15:07,360 --> 00:15:10,880
I'm going to say close pressed.

199
00:15:11,180 --> 00:15:15,320
I'm going to say is an action.

200
00:15:15,330 --> 00:15:18,010
So it's an action and connect.

201
00:15:18,180 --> 00:15:22,390
And just to just kind of show you what would happen if we hadn't done that.

202
00:15:22,410 --> 00:15:24,370
Unwind and we were just trying to dismiss.

203
00:15:24,390 --> 00:15:31,200
So we'd say this is true and completion is it's true and completion is nil.

204
00:15:31,330 --> 00:15:37,690
So I want to run this real quick and come over to our menu click log in and have an account.

205
00:15:37,740 --> 00:15:43,890
So if I clicked on this we would just come back to our old logon and you know you could do a you know

206
00:15:43,890 --> 00:15:49,010
a kind of a double click to get out but that's not really a great user experience.

207
00:15:49,350 --> 00:15:56,970
Once once we logged in and once we create an account and have all of that logic and everything working

208
00:15:57,210 --> 00:16:02,310
you would expect to be able to once you create the account that it just dismisses everything and comes

209
00:16:02,310 --> 00:16:04,440
right back to the beginning.

210
00:16:04,550 --> 00:16:04,990
OK.

211
00:16:05,100 --> 00:16:06,330
So that's why we're doing this.

212
00:16:06,330 --> 00:16:07,730
All right so come back here.

213
00:16:07,740 --> 00:16:16,410
And the way to make the unwind a Segway work is pretty simple we just do regular perform Segway.

214
00:16:16,460 --> 00:16:23,940
So when I say perform SEGUI with identifier and the Segway identifier is NY and the sender is nil.

215
00:16:24,210 --> 00:16:28,530
Save that and run that one more time and make sure that's working.

216
00:16:28,530 --> 00:16:34,500
So what we should expect to see is when we get to the create account VC if I click on the close button

217
00:16:34,770 --> 00:16:38,100
we should unwind all the way back to the channel visi.

218
00:16:38,100 --> 00:16:41,180
All right so let's see if that's working can open this up.

219
00:16:41,220 --> 00:16:42,560
Click on logon.

220
00:16:42,600 --> 00:16:44,350
Don't have an account set up here.

221
00:16:44,640 --> 00:16:53,180
And hey you know we unwind all the way back to our channel Visi which is just what we wanted.

222
00:16:53,620 --> 00:16:55,980
So let me see how we're doing on time here.

223
00:16:55,980 --> 00:16:57,620
Looks like we're about out of time.

224
00:16:57,820 --> 00:17:05,860
But we accomplished what we set out to do here which was to create our create account.

225
00:17:05,920 --> 00:17:13,800
We see here we created an online segue so that we could get back all the way to our original VC just

226
00:17:13,800 --> 00:17:14,910
like we wanted.

227
00:17:14,910 --> 00:17:16,490
And yes we're looking good.

228
00:17:16,490 --> 00:17:22,860
We're getting about where we need to be to actually start working with the API because we needed to

229
00:17:22,860 --> 00:17:30,250
get to this point because we have to be able to first create accounts on the API to do anything less.

230
00:17:30,330 --> 00:17:35,970
That's the first point of being able to work with the API because once you're able to create an account

231
00:17:35,970 --> 00:17:40,090
you can get an authorization token and do everything else that we need to do.

232
00:17:40,080 --> 00:17:40,540
All right.

233
00:17:40,650 --> 00:17:45,570
So that's why we've been working so much with the UI is to be able to get up to this point and spend

234
00:17:45,600 --> 00:17:52,870
the next few lessons we're going to start talking about the tools that we use to work with the API.

235
00:17:52,950 --> 00:17:57,350
Some of the libraries that we're going to be using and so we got some cool stuff coming up.

236
00:17:57,360 --> 00:17:59,550
Hope you guys are very excited.

237
00:17:59,730 --> 00:18:05,220
Oh except I almost forgot we need to commit and push our changes.

238
00:18:05,220 --> 00:18:08,380
So I'm going to say right here we're on lesson five.

239
00:18:08,380 --> 00:18:19,410
And when I say get status say Get add that get commit Dasch am.

240
00:18:19,440 --> 00:18:23,540
And this was less than five minutes.

241
00:18:23,550 --> 00:18:33,750
Push it to me said get push origin less and dash 0 5.

242
00:18:33,760 --> 00:18:35,000
All right so we're good.

243
00:18:35,110 --> 00:18:36,750
And we'll see you in the next one.