1

00:00:07,250 --> 00:00:12,210

All right ladies and gentlemen welcome back Johnny be here with scope's dot com.



2

00:00:12,300 --> 00:00:16,520

And in this video we are going to continue working on our UI.



3

00:00:16,860 --> 00:00:21,400

And the last one we left off here we created our loggin visi.



4

00:00:21,570 --> 00:00:24,970

And in this one we're going to create our create a count visi.



5

00:00:24,990 --> 00:00:31,710

So when we click on this is going to take us over to see who is going to take us over to the screen



6

00:00:31,710 --> 00:00:33,360

right here.



7

00:00:33,360 --> 00:00:33,630

All right.



8

00:00:33,630 --> 00:00:36,450

So let's go ahead and get started on that.



9

00:00:36,450 --> 00:00:41,160

You can see that as we have some similar elements are going to be able to reuse some of the work that



10

00:00:41,160 --> 00:00:42,890

we did in our last lesson.



11

00:00:42,900 --> 00:00:47,170

Same Clothes buttons similar text fields and similar buttons.



12

00:00:47,170 --> 00:00:48,570

So that's good.



13

00:00:48,570 --> 00:00:51,210

So yeah let's just jump right in.



14

00:00:51,210 --> 00:00:56,570

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,580 --> 00:01:04,530

library here and we're going to be Segway weighing over to it at some point so I'm going to click here



16

00:01:04,530 --> 00:01:10,590

on our log in the C control drag and drag over and see a show.



17

00:01:10,600 --> 00:01:15,380

All right now we're going to go and create an identifier for this segue here.



18

00:01:15,540 --> 00:01:19,650

I'm going to say to create a count.



19

00:01:20,040 --> 00:01:22,090

OK I'm going to copy that.



20

00:01:22,180 --> 00:01:26,160

Let's create a constant for it over in our Constans file.



21

00:01:26,330 --> 00:01:40,880

I say let to create a count equal and paste that and put it in quotation marks save that and jump back



22

00:01:40,880 --> 00:01:43,260

over to our storyboard.



23

00:01:43,480 --> 00:01:51,200

Right so we got our new View Controller set up here in the story boy we're going to need a controller



24

00:01:51,200 --> 00:01:52,380

file for it right.



25

00:01:52,400 --> 00:01:58,820

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,330 --> 00:02:07,420

and it is a subclass you have your controller and we want this to be called I think create a count.



27

00:02:07,680 --> 00:02:10,710

PVC is saying next.



28

00:02:11,180 --> 00:02:12,290

And create



29

00:02:15,890 --> 00:02:23,300

I'm going to go and get rid of some of this and unnecessary code here.



30

00:02:23,680 --> 00:02:24,560

And that looks good.



31

00:02:24,560 --> 00:02:27,160

Ready for us to work with.



32

00:02:27,290 --> 00:02:27,700

Real quick.



33

00:02:27,710 --> 00:02:32,880

Let's go ahead and just add the segue action here.



34

00:02:32,880 --> 00:02:39,110

So here in the story board I'm going to open up our assistant editor with the log in visi.



35

00:02:39,220 --> 00:02:47,260

So when I held option and clicked on log in VC that opens up the assistant editor and that's screwed



36

00:02:47,260 --> 00:02:51,450

over to our blog in VC here.



37

00:02:51,470 --> 00:02:57,670

I'm going to grab this don't have an account button and create an action for it.



38

00:02:58,060 --> 00:03:00,040

So I'm going to control drag.



39

00:03:00,180 --> 00:03:11,350

We're going to make an eye and action and when to say this say create a count button press.



40

00:03:11,380 --> 00:03:11,790

There he goes.



41

00:03:11,790 --> 00:03:15,500

We've got an action that looks good.



42

00:03:15,690 --> 00:03:19,650

All right and then going to go ahead and close this as close.



43

00:03:19,650 --> 00:03:26,070

The assistant editor to get back to our standard editor jump over to our log and VCT us with the file



44

00:03:26,100 --> 00:03:28,590

to the action that we just created.



45

00:03:28,770 --> 00:03:34,750

And we're just going to perform a segue over to that empty view controller that we've got right now.



46

00:03:34,760 --> 00:03:43,590

So was Segway with identifier the constant that we created is called to underscore Croot account.



47

00:03:43,590 --> 00:03:45,340

Sender is nil.



48

00:03:45,840 --> 00:03:48,960

All right so it looks good you're going to save that and run it.



49

00:03:49,540 --> 00:03:56,370

And what we should see is that when we click on that create a count button it should segue us to a blank



50

00:03:56,760 --> 00:03:58,010

empty screen.



51

00:03:58,440 --> 00:03:58,690

All right.



52

00:03:58,690 --> 00:04:02,250

So clicking on the menu to log in.



53

00:04:02,520 --> 00:04:04,710

And I don't have an account and there we go.



54

00:04:04,710 --> 00:04:05,090

All right.



55

00:04:05,100 --> 00:04:10,530

So we know that that's working and now we need to go ahead and add all of that.



56

00:04:10,650 --> 00:04:18,210

All of those elements so one more time let's jump back into our design document is kind of like our



57

00:04:18,210 --> 00:04:23,790

recipe book it tells us all of the steps that we need to take and what it's supposed to look like and



58

00:04:23,790 --> 00:04:24,160

stuff.



59

00:04:24,160 --> 00:04:24,750

All right.



60

00:04:24,990 --> 00:04:34,090

So we got a label up here our clothes button some text fields and they're dividers and image here for



61

00:04:34,090 --> 00:04:39,360

our avatar images that we will be able to select here in the future.



62

00:04:39,420 --> 00:04:43,500

A button for the background color as well and a button to create the account.



63

00:04:43,500 --> 00:04:43,860

All right.



64

00:04:43,950 --> 00:04:45,280

So that looks good.



65

00:04:45,600 --> 00:04:52,710

So I think we're going to do to save some time or is going to going a copy most of these elements and



66

00:04:53,250 --> 00:04:57,510

and use those in our new controller.



67

00:04:57,510 --> 00:05:04,110

So what I did is I just drug and selected all of these and I'm going to say command C for copy then



68

00:05:04,110 --> 00:05:06,050

I'm going to come over here to our new controller.



69

00:05:06,120 --> 00:05:06,650

Click.



70

00:05:06,660 --> 00:05:08,460

Make sure the view is selected.



71

00:05:08,670 --> 00:05:11,810

And just to command the to paste.



72

00:05:11,820 --> 00:05:17,340

And then we can kind of drag this up to where we want it more or less.



73

00:05:17,370 --> 00:05:18,180

So that's about right.



74

00:05:18,180 --> 00:05:19,430

Right there.



75

00:05:19,430 --> 00:05:23,610

And then we can just kind of delete the things that we don't need we don't need this logo to get rid



76

00:05:23,610 --> 00:05:25,120

of that.



77

00:05:25,290 --> 00:05:32,210

I'm going to pull this label outside of this stack of you because we don't need this stack for you anymore.



78

00:05:32,250 --> 00:05:35,360

So I'm going to delete the stack here.



79

00:05:35,570 --> 00:05:39,320

Now they will get kind of mood down here weird.



80

00:05:39,320 --> 00:05:41,150

All right so that's kind of a pain.



81

00:05:41,520 --> 00:05:47,690

But this button goes down here and this guy comes back up here.



82

00:05:48,630 --> 00:05:54,000

However when we do that copy is the copy over with there some other constraints.



83

00:05:54,300 --> 00:05:58,810

You can see that this loggin button is trained to be constrained to the bottom of the stack.



84

00:05:58,830 --> 00:06:03,360

You can go ahead and remove some of those constraints we're going to come up here to the size inspector



85

00:06:04,050 --> 00:06:09,990

and I'm going to say top space and we're just going to delete that constraint as well as this one here.



86

00:06:09,990 --> 00:06:15,280

So we're just left with the width and height constraints which is what we want.



87

00:06:15,810 --> 00:06:17,860

So it's going constrained this guy down here.



88

00:06:17,880 --> 00:06:24,250

We're going to say 20 from the bottom and we are going to center it horizontally.



89

00:06:24,470 --> 00:06:25,800

All right so that looks good.



90

00:06:25,810 --> 00:06:27,080

Let's going to rename it.



91

00:06:27,090 --> 00:06:34,560

This is going to be create a count an excuse when do this go up here.



92

00:06:34,740 --> 00:06:42,510

So when I say eight from the top and zero from the right with constraint margins checked to add two



93

00:06:42,510 --> 00:06:43,650

constraints.



94

00:06:43,950 --> 00:06:53,670

And then for this right here this is going to say create an account that looks good click and say command



95

00:06:53,730 --> 00:06:58,000

equal and then I can drag you down here a little bit.



96

00:06:58,010 --> 00:07:06,760

This is going to be 40 from the top and then centered horizontally.



97

00:07:07,110 --> 00:07:08,530

Know it's good.



98

00:07:08,670 --> 00:07:15,240

This stack for you here we already have two of these that we need we have a username and password we



99

00:07:15,240 --> 00:07:17,760

need a third one called e-mail.



100

00:07:17,760 --> 00:07:26,130

All right so once again awesome thing with Steck views is I can just take these two right here.



101

00:07:26,130 --> 00:07:28,280

Copy them and paste.



102

00:07:28,620 --> 00:07:33,640

And it just you know puts them right inside of the stack below.



103

00:07:33,660 --> 00:07:44,010

The other one so I can then change this user name to actually say e-mail and that's it.



104

00:07:44,210 --> 00:07:51,960

You know so easy don't have to mess with a whole bunch of individual constraints just works real nice.



105

00:07:51,960 --> 00:07:54,970

So then we need to constrain the stack view as a whole.



106

00:07:54,990 --> 00:08:02,730

We're going to go 40 from the top or from the bottom of the label above it the Create an account label



107

00:08:03,120 --> 00:08:07,500

say add one constraint and horizontally constrain it.



108

00:08:07,530 --> 00:08:10,520

So it's set to the center of the container.



109

00:08:11,130 --> 00:08:12,770

And that looks great.



110

00:08:12,930 --> 00:08:14,870

So that's all done.



111

00:08:15,320 --> 00:08:17,360

What do we have for constraints on this guy.



112

00:08:17,610 --> 00:08:19,700

We have with height.



113

00:08:19,770 --> 00:08:21,880

So that's that's fine.



114

00:08:21,900 --> 00:08:25,140

This is going to be our shoes avatar.



115

00:08:25,400 --> 00:08:36,270

Jews have a tar and let's go ahead and actually just remove its constraints for now to say command equal



116

00:08:36,900 --> 00:08:40,430

and we're going to do is we need an image here.



117

00:08:40,560 --> 00:08:41,330

OK.



118

00:08:41,760 --> 00:08:53,070

So an image view and this image is called profil default.



119

00:08:53,070 --> 00:08:59,420

All right let's go ahead and set the size 100 by 100 looks good.



120

00:08:59,910 --> 00:09:01,500

And we're going to do here.



121

00:09:01,950 --> 00:09:05,960

Well first off let me set the constraints for this image here.



122

00:09:06,010 --> 00:09:13,240

Going to say 40 from the bottom of the stack of you above is within the height.



123

00:09:13,340 --> 00:09:17,790

So I had those three constraints and then horizontally and container as well.



124

00:09:18,180 --> 00:09:23,160

And then we're going to cheat a little bit because if you were using this you would think that you could



125

00:09:23,160 --> 00:09:27,890

click on this guy and be able to choose your avatar as well as this button right here.



126

00:09:28,110 --> 00:09:37,730

So we're going to do is we're just going to actually make this button go over this image.



127

00:09:38,100 --> 00:09:41,130

We're going to do that is we're going to set up some constraints.



128

00:09:41,130 --> 00:09:46,520

So we're going to we're going to control drag and we're going to stay equal with this.



129

00:09:47,610 --> 00:09:51,930

And then if you control dragon do like a diagonal to it.



130

00:09:52,020 --> 00:09:54,340

What we want is top as well.



131

00:09:54,340 --> 00:10:01,170

So what that does is it sets the two tops to each other and then we're going to go ahead and just drag



132

00:10:02,010 --> 00:10:07,880

down and set the height to 130



133

00:10:13,540 --> 00:10:19,830

and then we go and then we're going to set this to be horizontally in the container.



134

00:10:20,920 --> 00:10:28,960

And the last are we're going to do is set the alignment to be at the bottom here.



135

00:10:28,990 --> 00:10:30,460

All right there you go.



136

00:10:30,460 --> 00:10:39,520

So basically what we did is we just created a button that is this big which covers the the the White



137

00:10:39,550 --> 00:10:40,210

image.



138

00:10:40,420 --> 00:10:41,440

But it's actually a button.



139

00:10:41,460 --> 00:10:45,550

And then we just dropped the alignment for the text to be at the very bottom.



140

00:10:45,550 --> 00:10:50,380

So now when a user clicks on the what they're thinking when they're thinking that clicking on this image



141

00:10:50,380 --> 00:10:53,170

they're actually clicking first on the button.



142

00:10:53,170 --> 00:10:53,660

All right.



143

00:10:53,920 --> 00:10:56,200

So that's what we're going to do there.



144

00:10:56,220 --> 00:11:02,770

Now we're going to need one more button and copy this guy again and paste it over here.



145

00:11:03,850 --> 00:11:06,650

And see what kind of constraints we have.



146

00:11:06,760 --> 00:11:08,350

That's fine.



147

00:11:08,530 --> 00:11:09,910

And this is going to say



148

00:11:13,280 --> 00:11:26,710

generate back my computer slowing down again generate back ground color.



149

00:11:26,720 --> 00:11:32,450

All right so we got our last button here generate background color and that's just going to go right



150

00:11:32,450 --> 00:11:34,410

below our Choose Avatar buttons.



151

00:11:34,430 --> 00:11:35,650

When it constrain it



152

00:11:38,680 --> 00:11:44,390

zero from the bottom and let's give it a little bit space maybe four and then we're going to center



153

00:11:44,410 --> 00:11:47,540

it as well horizontally in container.



154

00:11:47,570 --> 00:11:49,750

Right and that looks pretty good.



155

00:11:49,760 --> 00:11:53,690

We're going to go ahead and save that and let's run it.



156

00:11:53,790 --> 00:11:55,030

Jesus just an iPhone 6.



157

00:11:55,050 --> 00:11:56,340

Yes.



158

00:11:56,350 --> 00:11:58,340

Run that and see how it looks.



159

00:11:59,490 --> 00:12:01,300

I'm going to click on the menu.



160

00:12:01,470 --> 00:12:05,350

Click on the in don't have an account sign up here.



161

00:12:05,550 --> 00:12:06,900

And boom.



162

00:12:06,900 --> 00:12:09,010

You know although it looks really great.



163

00:12:09,910 --> 00:12:11,030

Yeah.



164

00:12:11,450 --> 00:12:11,680

All right.



165

00:12:11,690 --> 00:12:18,590

So the next thing we're going to look at here is how do we dismiss this because if I click on this and



166

00:12:18,650 --> 00:12:25,330

we tell it to dismiss this view what's going to actually happen is it's going to go back to the log



167

00:12:25,400 --> 00:12:30,350

view controller and that's not what we're really that's not really what we want we want to be able to



168

00:12:30,730 --> 00:12:36,050

do what's called unwind all the way back to the initial view controller.



169

00:12:36,110 --> 00:12:37,380

So that's what we're going to set up now.



170

00:12:37,400 --> 00:12:37,780

Right.



171

00:12:37,910 --> 00:12:40,780

So that's called an unwind segues.



172

00:12:40,790 --> 00:12:48,620

So what you got to do is the root controller that you want to go back to which is in our case all the



173

00:12:48,620 --> 00:12:53,740

way back from here to here which is our channel visi.



174

00:12:53,750 --> 00:13:00,440

So we need to come over here to our channel ABC and add an IB action that doesn't actually have anything



175

00:13:00,440 --> 00:13:01,430

connected to it.



176

00:13:01,640 --> 00:13:03,840

But it's an IB action.



177

00:13:04,060 --> 00:13:12,820

When we say action phunk and Burgett can I call it prepare for one wind.



178

00:13:13,100 --> 00:13:22,420

OK and that's going to be of type segue and UI story board segue.



179

00:13:22,730 --> 00:13:26,350

Can we just to open close curly braces right there.



180

00:13:26,490 --> 00:13:35,570

I when I say that and then we jump over to back the storyboard and over here our last one in line and



181

00:13:35,570 --> 00:13:36,920

a click here.



182

00:13:36,920 --> 00:13:42,710

I'm going to control drag from view controller right to exit right here and I'm going to say manual



183

00:13:42,710 --> 00:13:45,890

Segway prepare for unwind with a Segway.



184

00:13:46,000 --> 00:13:46,760

OK.



185

00:13:47,100 --> 00:13:49,660

And then I'm going to grab right here.



186

00:13:49,700 --> 00:13:57,440

The unwind segue here and we're going to give this an identifier and we're going to call this on wind



187

00:13:57,830 --> 00:13:59,990

to channel.



188

00:14:00,290 --> 00:14:00,910

OK.



189

00:14:01,340 --> 00:14:02,480

Copy that.



190

00:14:02,660 --> 00:14:05,300

And that's going create a new Segway constant.



191

00:14:05,420 --> 00:14:17,680

So over here and utility's Constance and we're just going to say left on the wind equal unwind to channel.



192

00:14:17,680 --> 00:14:25,380

All right so we're going to save that and then back here in our create account who the see.



193

00:14:25,930 --> 00:14:31,010

We're going to need an IB action for for that close button.



194

00:14:31,240 --> 00:14:37,690

So I'm going to hold option and click on main story board to open up our assistant editor and this can



195

00:14:38,140 --> 00:14:40,480

scroll over to find that here.



196

00:14:40,480 --> 00:14:49,610

All right so when I grab this here we haven't set the class for this controller yet so here slick controller



197

00:14:49,990 --> 00:14:56,710

can go up to our identity inspector and I'm going to send it to you what we call this create create



198

00:14:56,710 --> 00:14:57,920

account visi.



199

00:14:57,940 --> 00:14:58,630

There we go.



200

00:14:58,870 --> 00:15:03,070

So now I can zoom back in on this game.



201

00:15:03,250 --> 00:15:07,340

Now I can control drag over to our controller file.



202

00:15:07,390 --> 00:15:11,020

I'm going to say close pressed.



203

00:15:11,220 --> 00:15:15,270

I'm going to say oh this action.



204

00:15:15,390 --> 00:15:18,040

So it's an action and connect.



205

00:15:18,240 --> 00:15:23,640

And just to just kind of show you what would happen if we hadn't done that unwind and we were just trying



206

00:15:23,640 --> 00:15:24,430

to dismiss.



207

00:15:24,450 --> 00:15:31,250

So we'd say is true and completion is this true and completion is nil.



208

00:15:31,390 --> 00:15:37,600

So I want to run this real quick and come over to our menu click log in and have an account.



209

00:15:37,780 --> 00:15:43,950

So if I clicked on this we would just come back to our old logging and yeah you could do a you know



210

00:15:43,950 --> 00:15:49,400

a kind of a double click to get out but that's not really a great user experience.



211

00:15:49,410 --> 00:15:57,000

Once once we log in and once we create an account and have all of that logic and everything working



212

00:15:57,240 --> 00:16:02,370

you would expect to be able to once you create the account that it just dismisses everything and comes



213

00:16:02,370 --> 00:16:04,490

right back to the beginning.



214

00:16:04,580 --> 00:16:05,050

OK.



215

00:16:05,160 --> 00:16:06,390

So that's why we're doing this.



216

00:16:06,390 --> 00:16:07,780

All right so come back here.



217

00:16:07,800 --> 00:16:16,440

And the way to make the unwind a Segway work is pretty simple we just do regular perform Segway.



218

00:16:16,440 --> 00:16:24,630

So when I say perform SEGUI with identifier and the Segway identifier is NY and the sender is no Say



219

00:16:24,660 --> 00:16:28,590

that and run that one more time and make sure that's working.



220

00:16:28,590 --> 00:16:34,530

So what we should expect to see is when we get to the create account VC if I click on the close button



221

00:16:34,830 --> 00:16:38,160

we should unwind all the way back to the channel visi.



222

00:16:38,160 --> 00:16:39,700

All right so let's see if that's working.



223

00:16:39,860 --> 00:16:41,170

Open this up.



224

00:16:41,280 --> 00:16:42,620

Click on logon.



225

00:16:42,660 --> 00:16:44,440

Don't have an account sign up here.



226

00:16:44,700 --> 00:16:53,380

And hey you know we unwind all the way back to our channel Visi which is just what we wanted.



227

00:16:53,640 --> 00:16:56,040

So let me see how we're doing on time here.



228

00:16:56,040 --> 00:16:57,680

Looks like we're about out of time.



229

00:16:57,870 --> 00:17:05,950

But we accomplished what we set out to do here which was to create our create account.



230

00:17:05,990 --> 00:17:13,650

We see here and we created an unwind segue so that we could get back all the way to our original VC



231

00:17:13,650 --> 00:17:14,760

just like we wanted.



232

00:17:14,940 --> 00:17:21,360

And yes we're looking good we're getting about where we need to be to actually start working with the



233

00:17:21,360 --> 00:17:28,110

API because we needed to get to this point because we have to be able to first create accounts on the



234

00:17:28,110 --> 00:17:30,330

API to do anything less.



235

00:17:30,380 --> 00:17:36,000

That's the first point of being able to work with the API because once you're able to create an account



236

00:17:36,000 --> 00:17:40,140

you can get an authorization token and do everything else that we need to do.



237

00:17:40,140 --> 00:17:40,600

All right.



238

00:17:40,710 --> 00:17:44,730

So that's why we've been working so much with the UI is to be able to get up to this point.



239

00:17:44,990 --> 00:17:51,210

And I ask why in the next few lessons we're going to start talking about the tools that we use to work



240

00:17:51,210 --> 00:17:52,940

with the API.



241

00:17:53,010 --> 00:17:57,390

Some of the libraries that we're going to be using and so we get some cool stuff coming up.



242

00:17:57,400 --> 00:17:59,600

Hope you guys are very excited.



243

00:17:59,790 --> 00:18:05,280

Oh except I almost forgot we need to commit and push our changes.



244

00:18:05,280 --> 00:18:08,440

So I'm going to say right here we're on lesson five.



245

00:18:08,460 --> 00:18:23,580

And when I say get status I say get add that get commit Dasch am and this was less than five minutes.



246

00:18:23,580 --> 00:18:24,030

Push it.



247

00:18:24,030 --> 00:18:33,810

And we said get push origin less and dash 0 5.



248

00:18:33,820 --> 00:18:35,050

All right so we're good.



249

00:18:35,140 --> 00:18:36,780

And we'll see you in the next one.