1
00:00:06,460 --> 00:00:07,030
Hey everyone.

2
00:00:07,030 --> 00:00:09,320
Mark Price here at DEF slopes dot com.

3
00:00:09,340 --> 00:00:13,570
And in this exciting video you're going to build your very first iOS app.

4
00:00:13,570 --> 00:00:20,440
Now this app can be built with X cotinine X Cotendo data or the final released version of X code 10.

5
00:00:20,540 --> 00:00:27,040
We are going to be doing this in X code 10 beta and the app works completely fine in any of those versions

6
00:00:27,040 --> 00:00:27,960
of X code.

7
00:00:28,240 --> 00:00:35,200
And I'm going to click Create a new X code project and we're going to choose a single view app.

8
00:00:35,230 --> 00:00:39,490
This is a one view application and we're not going to go into great detail on everything we're doing

9
00:00:39,820 --> 00:00:43,590
because I want to show you how simple it is to create your very first iPhone app.

10
00:00:43,630 --> 00:00:48,970
We're going to call this hello color and click next.

11
00:00:48,970 --> 00:00:51,840
Now your data here will actually be different but that's OK.

12
00:00:51,880 --> 00:00:57,020
Just go ahead and follow the flow and whatever it says and you can store this wherever you want.

13
00:00:57,020 --> 00:01:03,750
I'm creating mine on the desktop and so what we're going to be building is an app where you can click

14
00:01:03,750 --> 00:01:06,430
a button and the color of the background will change.

15
00:01:06,540 --> 00:01:10,830
And so we're going to focus over here on the left hand side and you're going to see something called

16
00:01:10,920 --> 00:01:12,810
view controller does Swift.

17
00:01:12,810 --> 00:01:17,900
This is a code file that does with files or the code files where you're right all of your code and in

18
00:01:17,940 --> 00:01:25,520
here we have something called a view controller which is a piece of code written by Apple that helps

19
00:01:25,520 --> 00:01:27,430
you manage working with views.

20
00:01:27,600 --> 00:01:30,180
And we're not going to go too in-depth on it right now.

21
00:01:30,240 --> 00:01:36,050
But what I want to do is just show you that this file exists and also show you that the main storyboard

22
00:01:36,090 --> 00:01:40,240
filed on your left hand side over here is where you're going to create all of your views.

23
00:01:40,260 --> 00:01:41,880
It's a drag and drop interface.

24
00:01:41,880 --> 00:01:42,860
Really cool.

25
00:01:43,020 --> 00:01:45,170
And this is where we're going to build out our app.

26
00:01:45,190 --> 00:01:46,450
It's a very simple app.

27
00:01:46,680 --> 00:01:53,550
So on the new X code 10 you're going to see something up here called an object library or if you're

28
00:01:53,550 --> 00:01:58,740
working with X cotinine versions it's down on the bottom right hand side and you can also access this

29
00:01:58,740 --> 00:02:00,810
library by pressing command shift.

30
00:02:00,900 --> 00:02:06,020
Well that'll pop open a window to let you find things in the object library.

31
00:02:06,030 --> 00:02:09,540
And so I'm going to type in the word button and you're going to see a button right here.

32
00:02:09,540 --> 00:02:12,720
I'm going to click it and drag it onto the screen.

33
00:02:12,720 --> 00:02:15,090
You can put yours where ever you want.

34
00:02:15,900 --> 00:02:22,800
I'm going to drag mine right here in the middle like so and I don't like the Deep South but I want mind

35
00:02:22,860 --> 00:02:27,660
to have some color still play around with some of the settings so if you hover over here on the right

36
00:02:27,660 --> 00:02:32,610
hand side you're going to see an object here called the attributes inspector and this is where you can

37
00:02:32,610 --> 00:02:34,740
change certain attributes on views.

38
00:02:35,220 --> 00:02:38,600
And I'm going to scroll down to the bottom here and there's one that says background.

39
00:02:38,880 --> 00:02:41,130
And I'm going to pick a blue color you may not have that.

40
00:02:41,150 --> 00:02:43,320
There you can pick whatever color you want.

41
00:02:43,320 --> 00:02:47,700
But I'm going to pick this blue one that is sitting right here for me and then I'm going to scroll back

42
00:02:47,700 --> 00:02:50,860
up to the top and you see something here called Tex color.

43
00:02:50,910 --> 00:02:52,940
I'm going to change mine to white.

44
00:02:53,160 --> 00:02:55,850
You can pick whatever color you want for your text.

45
00:02:56,220 --> 00:02:56,570
OK.

46
00:02:56,580 --> 00:02:59,030
And so we have this cool looking button here.

47
00:02:59,040 --> 00:03:04,290
Now when we click the button we want to change the background but we can't do that with the user interface

48
00:03:04,290 --> 00:03:04,490
here.

49
00:03:04,500 --> 00:03:06,450
We have to do it in code.

50
00:03:06,450 --> 00:03:11,000
And so what we're actually going to do is connect our button to our code file.

51
00:03:11,160 --> 00:03:12,070
And how do we do that.

52
00:03:12,090 --> 00:03:17,130
Well there's a few ways but the easiest way is to go to these double circles here which is called the

53
00:03:17,130 --> 00:03:19,720
assistant editor and click it.

54
00:03:19,770 --> 00:03:26,010
It's going to show the code file that is associated with the view here for this view controller in the

55
00:03:26,020 --> 00:03:31,980
storyboard and you can scroll around with the trackpad or your Magic Mouse if you want to see more of

56
00:03:31,980 --> 00:03:36,690
the view here or if you need more room there's a little button here at the bottom left that you can

57
00:03:36,690 --> 00:03:39,830
click to hide and show this window.

58
00:03:39,830 --> 00:03:41,940
And so that's how you can get more space there.

59
00:03:41,970 --> 00:03:46,740
And what we're going to do is holding the control key command key with holding the control key.

60
00:03:46,740 --> 00:03:52,560
We're going to click and direct from the PA and over into the code file right after these curly braces

61
00:03:52,560 --> 00:03:53,900
that you see here Kate.

62
00:03:53,970 --> 00:03:58,990
But not after the ones here on line 19 the ones right in between.

63
00:03:59,180 --> 00:04:04,000
And we're going to let go make sure that the connection says action because we want an action to happen.

64
00:04:04,000 --> 00:04:08,830
We're saying we want to tap the button and we're going to call this change color.

65
00:04:09,350 --> 00:04:10,620
OK.

66
00:04:10,620 --> 00:04:16,260
And I click connect and it's inserted some code for us and actually connected that view automatically

67
00:04:16,260 --> 00:04:18,400
here to the code file which is really cool.

68
00:04:18,540 --> 00:04:21,750
Back at the top right hand side we don't need that assistant editor anymore.

69
00:04:21,810 --> 00:04:28,110
So we're going to go back to the standard editor like so what I'm going to do is click the view controller

70
00:04:28,960 --> 00:04:29,620
OK.

71
00:04:29,790 --> 00:04:34,740
And in this code file I'm going to click on the curly braces gonna add an extra newline here so it looks

72
00:04:34,740 --> 00:04:35,540
nice.

73
00:04:35,640 --> 00:04:40,900
And what we want to do is when that button is pressed we want to change the color on the background.

74
00:04:40,920 --> 00:04:48,900
And since I connected the view button here to this function K A function is basically a block of code

75
00:04:48,900 --> 00:04:52,710
that will run some type of commands.

76
00:04:52,740 --> 00:04:54,720
We'll talk more about functions later.

77
00:04:54,720 --> 00:04:59,070
And basically you'll see this little circle here that's filled and that means that your code is connected

78
00:04:59,070 --> 00:05:00,950
to your storyboard.

79
00:05:01,020 --> 00:05:04,070
Ok to the view and what we want to do is change the color.

80
00:05:04,080 --> 00:05:09,270
And so what we're going to do is we're going to choose purple and red And so how would we do this.

81
00:05:09,270 --> 00:05:12,000
And you don't have to understand everything just yet.

82
00:05:12,000 --> 00:05:16,530
We'll learn more as we go along here but I'm going to create something called a variable and I appear

83
00:05:16,590 --> 00:05:17,190
at the top.

84
00:05:17,190 --> 00:05:20,930
I'm going to call this is purple equals false.

85
00:05:20,970 --> 00:05:24,070
So by default it's not going to be purple.

86
00:05:24,210 --> 00:05:29,910
And then in the change color function what we want to do is change the color but we need to know if

87
00:05:29,910 --> 00:05:33,010
it's purple or not so we can change it to red or vice versa.

88
00:05:33,030 --> 00:05:40,580
So what we're going to do is create a statement here called an if statement it is purple.

89
00:05:40,700 --> 00:05:43,460
So if it's purple if it's true.

90
00:05:43,810 --> 00:05:47,210
OK what do we want to do what we want to change the color to red.

91
00:05:47,210 --> 00:05:54,080
So we're going to say view now view is the view that's on the View Controller and so X code automatically

92
00:05:54,080 --> 00:05:56,590
knows that this view exists.

93
00:05:56,630 --> 00:05:58,580
Ok it's already there for us to access.

94
00:05:58,580 --> 00:06:02,830
That's why you don't see it anywhere else because it's inside of the parent view controller which will

95
00:06:02,830 --> 00:06:13,750
also talk about in later lessons and so view that background color equals UI color dot red.

96
00:06:13,760 --> 00:06:21,140
So if it's purple We want to change the background color to red and then we want to change the variable

97
00:06:21,260 --> 00:06:23,860
is purple equals false.

98
00:06:23,870 --> 00:06:24,980
We want to set it to false.

99
00:06:24,980 --> 00:06:29,610
Every time that it's not purple and then we're going to say Elle's.

100
00:06:29,690 --> 00:06:33,970
So if it's purple do this else or otherwise OK.

101
00:06:33,980 --> 00:06:36,770
We need to go ahead and change it to purple.

102
00:06:36,890 --> 00:06:43,820
So we're going to save you thought background color equals you white color purple and then we're going

103
00:06:43,820 --> 00:06:47,300
to say is purple equals true.

104
00:06:47,330 --> 00:06:53,900
So what we've just done is we've connected a view a rather a button the action of a button to this view

105
00:06:53,900 --> 00:06:56,590
controller here and then we see if it's purple.

106
00:06:56,630 --> 00:06:59,480
If it's not purple we change it to red.

107
00:06:59,480 --> 00:07:03,710
Otherwise if it is purple or rather if it's not purple we change it to purple.

108
00:07:03,920 --> 00:07:04,470
OK.

109
00:07:04,850 --> 00:07:09,330
And so what we're going to do now is save this file pressing command s.

110
00:07:09,350 --> 00:07:11,330
It also saves automatically for you.

111
00:07:11,330 --> 00:07:15,710
And what we're going to do is click this run button over here.

112
00:07:15,710 --> 00:07:20,870
Now you can have a few different versions of simulators here to run your application and you can pick

113
00:07:20,960 --> 00:07:22,270
any one that you want.

114
00:07:22,310 --> 00:07:23,630
Yours might be different than mine.

115
00:07:23,670 --> 00:07:28,100
And the one I'm about to run and where you place your button may look different on these different screens

116
00:07:28,130 --> 00:07:32,060
but we're not going to worry about getting the button looking correct and all the screen right now so

117
00:07:32,060 --> 00:07:36,350
I'm just going to pick the iPhone 8 plus and click run.

118
00:07:36,350 --> 00:07:40,220
You're going to see a blue bar here that indicates that it's building and then it's going to say launching

119
00:07:40,550 --> 00:07:44,830
in your X code will actually launch automatically your X code simulator.

120
00:07:47,790 --> 00:07:48,300
OK.

121
00:07:48,450 --> 00:07:50,520
And so when you see your button you know that your app is running.

122
00:07:50,520 --> 00:07:55,410
Now again my buttons not centered anymore because the screen that I built on in the storyboard is not

123
00:07:55,410 --> 00:07:58,330
the same as the simulator but we're not worried about that right now.

124
00:07:58,350 --> 00:08:00,060
Maybe in a different spot as well.

125
00:08:00,360 --> 00:08:06,140
So if I click and it turns purple and red and purple and red and purple and red.

126
00:08:06,510 --> 00:08:11,340
So really cool I mean the colors are a little bit bright and not very appealing to the eye but you've

127
00:08:11,340 --> 00:08:17,980
just built your very first iOS application and you've learned how to connect views to code.

128
00:08:18,000 --> 00:08:21,570
And this is only a small taste of all the things that you're going to learn but it always starts here

129
00:08:21,870 --> 00:08:26,670
and it always starts with a storyboard and with a code file or often a view controller.

130
00:08:26,670 --> 00:08:29,610
So congratulations on building your very first app.

131
00:08:29,610 --> 00:08:30,660
There's so much more to learn.

132
00:08:30,660 --> 00:08:32,230
Let's go ahead and get started.