1
00:00:00,540 --> 00:00:03,570
‫Presenter: Hi, I hope you made it on your own

2
00:00:03,570 --> 00:00:05,190
‫in your first assignment.

3
00:00:05,190 --> 00:00:06,940
‫If so, congratulations.

4
00:00:06,940 --> 00:00:09,181
‫If you got stuck at a point, don't worry.

5
00:00:09,181 --> 00:00:12,750
‫You are going to learn how to do that.

6
00:00:12,750 --> 00:00:17,750
‫You haven't practiced anything so far, so don't worry.

7
00:00:18,300 --> 00:00:20,158
‫You're just going to see how it's done.

8
00:00:20,158 --> 00:00:22,357
‫So I'm creating a new project over here.

9
00:00:22,357 --> 00:00:25,979
‫I'm going to name the simple calculator, okay?

10
00:00:25,979 --> 00:00:30,979
‫And of course I'm going to go with Swift and then hit next.

11
00:00:31,950 --> 00:00:35,610
‫Then I'm going to create my simple calculator,

12
00:00:35,610 --> 00:00:40,610
‫or you can call it the worst calculator ever as well,

13
00:00:40,890 --> 00:00:43,523
‫and place it on your own folder.

14
00:00:43,523 --> 00:00:48,000
‫So let me start by designing my app.

15
00:00:48,000 --> 00:00:51,920
‫Okay? So let me go to main dot storyboard over here

16
00:00:51,920 --> 00:00:54,780
‫because we are going to need some text fields,

17
00:00:54,780 --> 00:00:57,879
‫and we are going to need some buttons and labels.

18
00:00:57,879 --> 00:01:02,310
‫So far we haven't even created a project

19
00:01:02,310 --> 00:01:04,120
‫except our first app.

20
00:01:04,120 --> 00:01:07,998
‫So you may have experienced some difficulties

21
00:01:07,998 --> 00:01:11,400
‫doing all these operations by yourself,

22
00:01:11,400 --> 00:01:13,578
‫if you try to do these assignments.

23
00:01:13,578 --> 00:01:17,790
‫So how do we drag and drop some views over here?

24
00:01:17,790 --> 00:01:22,710
‫Maybe you remember, you hit your shift+L command

25
00:01:22,710 --> 00:01:23,673
‫in your keyboard,

26
00:01:24,802 --> 00:01:27,276
‫or you can just click over here to this plus button.

27
00:01:27,276 --> 00:01:30,903
‫And, we are going to go for text fields, okay?

28
00:01:30,903 --> 00:01:34,050
‫So if you just search for text,

29
00:01:34,050 --> 00:01:37,864
‫you can take this and put it on your own view.

30
00:01:37,864 --> 00:01:39,720
‫So as you can see, it displays

31
00:01:39,720 --> 00:01:43,379
‫a rounded rectangle that can contain editable text.

32
00:01:43,379 --> 00:01:47,100
‫It means that users can edit this text,

33
00:01:47,100 --> 00:01:50,760
‫and we can get what's going to be inside

34
00:01:50,760 --> 00:01:52,196
‫of this text field either way.

35
00:01:52,196 --> 00:01:54,640
‫So let me just put it,

36
00:01:54,640 --> 00:01:57,960
‫and make it a little bit bigger like this.

37
00:01:57,960 --> 00:02:00,718
‫So let me zoom in so you can see better.

38
00:02:00,718 --> 00:02:03,836
‫And here you go.

39
00:02:03,836 --> 00:02:05,700
‫This is our first text field, right?

40
00:02:05,700 --> 00:02:09,443
‫So, let me put it this into the center.

41
00:02:09,443 --> 00:02:12,595
‫So, let me go to the attributes pane over here.

42
00:02:12,595 --> 00:02:16,380
‫And you don't know the attributes, the options

43
00:02:16,380 --> 00:02:19,380
‫of this text field at this moment,

44
00:02:19,380 --> 00:02:21,390
‫but let me show you how it's done.

45
00:02:21,390 --> 00:02:23,143
‫So, there is a placeholder text here.

46
00:02:23,143 --> 00:02:27,060
‫It means that this, whatever I write here,

47
00:02:27,060 --> 00:02:30,184
‫will be staying as a placeholder, like this first number.

48
00:02:30,184 --> 00:02:34,074
‫And if somebody or if user type something over here,

49
00:02:34,074 --> 00:02:35,970
‫this will be deleted.

50
00:02:35,970 --> 00:02:39,716
‫Okay? So this is automatically handled by Swift.

51
00:02:39,716 --> 00:02:41,850
‫So this is the placeholder.

52
00:02:41,850 --> 00:02:44,058
‫If there is a text, it won't show up.

53
00:02:44,058 --> 00:02:46,500
‫If there's not a text, it'll show up.

54
00:02:46,500 --> 00:02:48,516
‫So it's a cool feature.

55
00:02:48,516 --> 00:02:52,980
‫So let's try to play with this text field a little bit.

56
00:02:52,980 --> 00:02:56,643
‫So we have seen what a placeholder is, right?

57
00:02:56,643 --> 00:02:58,860
‫But we have other options as well, and,

58
00:02:58,860 --> 00:03:00,870
‫we don't need to change any of this.

59
00:03:00,870 --> 00:03:03,270
‫I'm just trying to make you comfortable

60
00:03:03,270 --> 00:03:04,880
‫with Xcode a little bit.

61
00:03:04,880 --> 00:03:06,750
‫So here you see the color.

62
00:03:06,750 --> 00:03:08,970
‫You may choose whatever color you want.

63
00:03:08,970 --> 00:03:11,116
‫So this is going to be your text color.

64
00:03:11,116 --> 00:03:13,791
‫You see the alignment, you see the font,

65
00:03:13,791 --> 00:03:15,598
‫you can change the font.

66
00:03:15,598 --> 00:03:20,598
‫Okay? So in here we have some text input traits over here.

67
00:03:21,960 --> 00:03:24,459
‫So for example, in content type,

68
00:03:24,459 --> 00:03:29,459
‫you may choose if you're expecting a name input

69
00:03:29,700 --> 00:03:33,760
‫from the user or if you're expecting a job title

70
00:03:33,760 --> 00:03:37,921
‫from the user or location or a street address.

71
00:03:37,921 --> 00:03:40,659
‫And we are not going to do that, okay?

72
00:03:40,659 --> 00:03:43,530
‫I'm just going to go for unspecified.

73
00:03:43,530 --> 00:03:48,530
‫But if this text field is specifically put for something,

74
00:03:48,824 --> 00:03:51,675
‫you are more than welcome to choose this.

75
00:03:51,675 --> 00:03:54,240
‫For example, organization name,

76
00:03:54,240 --> 00:03:56,640
‫for example, telephone number.

77
00:03:56,640 --> 00:04:01,110
‫Okay? And we don't need this right now,

78
00:04:01,110 --> 00:04:05,010
‫we're just expecting a number from the user.

79
00:04:05,010 --> 00:04:10,010
‫Okay? So I'm going to leave this as here, unspecified,

80
00:04:10,442 --> 00:04:15,442
‫and let us see if there is some important trait.

81
00:04:16,560 --> 00:04:18,690
‫Yeah, we have this keyboard type.

82
00:04:18,690 --> 00:04:20,719
‫For example, I can go for default

83
00:04:20,719 --> 00:04:23,670
‫and it will bring the default keyboard.

84
00:04:23,670 --> 00:04:26,500
‫Okay? If I choose anything like numbers,

85
00:04:26,500 --> 00:04:31,500
‫or here like a number path, user will only see the numbers.

86
00:04:31,804 --> 00:04:34,800
‫Actually, it makes sense for us to choose

87
00:04:34,800 --> 00:04:39,800
‫in this app because we are just expecting numbers from user,

88
00:04:40,920 --> 00:04:42,270
‫but I'm not going to do that

89
00:04:42,270 --> 00:04:44,302
‫and I will show you why later on.

90
00:04:44,302 --> 00:04:49,302
‫So for first number, that's okay, but I have to copy

91
00:04:49,470 --> 00:04:52,350
‫and paste this in order to create my second number.

92
00:04:52,350 --> 00:04:55,800
‫So, you can do that with command C and command V

93
00:04:55,800 --> 00:04:57,224
‫in your keyboard.

94
00:04:57,224 --> 00:05:00,780
‫So, once you copy the second text field,

95
00:05:00,780 --> 00:05:03,596
‫I can change this placeholder to the second number.

96
00:05:03,596 --> 00:05:06,480
‫And by the way,

97
00:05:06,480 --> 00:05:09,150
‫of course, I could have dragged another tax field

98
00:05:09,150 --> 00:05:13,339
‫from this library as well, but I can just copy and paste.

99
00:05:13,339 --> 00:05:15,545
‫So whatever pleases you.

100
00:05:15,545 --> 00:05:19,320
‫So the next thing, I'm going to need a button, right?

101
00:05:19,320 --> 00:05:21,321
‫Because, as you might to remember,

102
00:05:21,321 --> 00:05:25,522
‫user was clicking the plus button and it'll just,

103
00:05:25,522 --> 00:05:29,559
‫some user was click clicking the minus button,

104
00:05:29,559 --> 00:05:32,430
‫and it will just subtract.

105
00:05:32,430 --> 00:05:33,570
‫So we're going to do that.

106
00:05:33,570 --> 00:05:35,961
‫I'm just going to copy and paste this four times,

107
00:05:35,961 --> 00:05:40,470
‫and I'm going to change the signs accordingly.

108
00:05:40,470 --> 00:05:42,103
‫So first one will be sum,

109
00:05:42,103 --> 00:05:47,103
‫and this one deduction, and this one multiplication.

110
00:05:47,380 --> 00:05:49,051
‫Yeah, this one.

111
00:05:49,051 --> 00:05:53,877
‫And let's see, copy and paste one more time.

112
00:05:53,877 --> 00:05:58,350
‫And this will divide the first number into second.

113
00:05:58,350 --> 00:06:00,330
‫So that's okay.

114
00:06:00,330 --> 00:06:03,360
‫So you can choose four of them together

115
00:06:03,360 --> 00:06:05,640
‫and just drag it like this.

116
00:06:05,640 --> 00:06:09,450
‫Okay? And after all, we are done with this,

117
00:06:09,450 --> 00:06:12,336
‫I'm going to display the result in a label.

118
00:06:12,336 --> 00:06:15,750
‫Okay? So let me take a label.

119
00:06:15,750 --> 00:06:18,756
‫And you remember, we just put some text in labels.

120
00:06:18,756 --> 00:06:21,210
‫So, this is nothing fancy.

121
00:06:21,210 --> 00:06:25,397
‫If you want to show a text, you can use labels.

122
00:06:25,397 --> 00:06:28,800
‫So, let me make this a little bit bigger

123
00:06:28,800 --> 00:06:30,360
‫and put it over here.

124
00:06:30,360 --> 00:06:34,380
‫Let me just try and make this into center.

125
00:06:34,380 --> 00:06:35,933
‫Yeah, that's okay.

126
00:06:35,933 --> 00:06:40,933
‫And for label, we can just actually make this something

127
00:06:42,090 --> 00:06:44,130
‫like a result, okay?

128
00:06:44,130 --> 00:06:46,680
‫Or we can just leave this empty as well.

129
00:06:46,680 --> 00:06:51,680
‫But, in order to be clear, I'm not going to do that

130
00:06:51,755 --> 00:06:55,320
‫because we cannot even see the label over here.

131
00:06:55,320 --> 00:06:58,200
‫It's the same color as background.

132
00:06:58,200 --> 00:07:00,817
‫So, I'm going to leave this as a result.

133
00:07:00,817 --> 00:07:03,930
‫So, I think that's okay.

134
00:07:03,930 --> 00:07:08,930
‫Right, and you can work with this line break

135
00:07:10,380 --> 00:07:13,470
‫thing in order to wrap the result

136
00:07:13,470 --> 00:07:17,617
‫or in order to have two different lines when it won't fit.

137
00:07:17,617 --> 00:07:20,790
‫But we are not going to go over that right now.

138
00:07:20,790 --> 00:07:22,656
‫I'm just going to go

139
00:07:22,656 --> 00:07:24,480
‫for this reset to suggested constraints.

140
00:07:24,480 --> 00:07:26,310
‫Remember, we have to do that

141
00:07:26,310 --> 00:07:29,490
‫in order to make sure our views will stay

142
00:07:29,490 --> 00:07:33,390
‫in their places when we play them in simulators

143
00:07:33,390 --> 00:07:37,475
‫in actual phones, so that they will be displaying similar

144
00:07:37,475 --> 00:07:41,400
‫in different kinds of sizes.

145
00:07:41,400 --> 00:07:43,290
‫So, in the next section

146
00:07:43,290 --> 00:07:45,300
‫actually we are going to deep dive onto this,

147
00:07:45,300 --> 00:07:47,070
‫but for right now you can just click

148
00:07:47,070 --> 00:07:49,997
‫on that and say reset to suggested constraints.

149
00:07:49,997 --> 00:07:54,930
‫And in fact, I believe we are done with our design, right?

150
00:07:54,930 --> 00:07:56,670
‫We got what we need in here.

151
00:07:56,670 --> 00:08:01,290
‫So the next step will be, to just defining this

152
00:08:01,290 --> 00:08:04,433
‫into coding section, and then working

153
00:08:04,433 --> 00:08:07,377
‫with those views in order to reach our goal

154
00:08:07,377 --> 00:08:12,377
‫of doing four basic operations in our reverse calculator.