1
00:00:01,320 --> 00:00:07,070
So let's go ahead and create new projects so I'm going to say inside of our tax code is a file new.

2
00:00:07,380 --> 00:00:13,990
I'm going to say I want to project you could have said command so you project here.

3
00:00:14,060 --> 00:00:15,110
I want this to

4
00:00:19,340 --> 00:00:20,450
so new project here.

5
00:00:20,460 --> 00:00:24,690
Someone needs to be single view IOW Of course.

6
00:00:24,690 --> 00:00:30,630
And this is going to be because I want to call this Biz Card

7
00:00:33,980 --> 00:00:35,320
XY eleven.

8
00:00:35,330 --> 00:00:39,070
This is just for me internally so I know this is X Code eleven.

9
00:00:39,120 --> 00:00:39,490
Okay.

10
00:00:39,530 --> 00:00:41,700
You don't have to add these codes there.

11
00:00:41,700 --> 00:00:48,580
I can just say BS card and I'm going to change this to B's card like this swift Swifty y.

12
00:00:48,590 --> 00:00:49,070
That's good.

13
00:00:49,070 --> 00:00:50,540
And I say next.

14
00:00:50,600 --> 00:00:54,680
And of course you're going to take me to where I create all of my projects.

15
00:00:54,680 --> 00:00:58,950
That is exactly what I want this to be say create.

16
00:00:58,990 --> 00:01:02,360
It's going to go ahead and create our new project their business card.

17
00:01:02,360 --> 00:01:08,170
I'm going to delete all of that stuff from the top to have a clean slate.

18
00:01:08,190 --> 00:01:08,590
Very good.

19
00:01:08,610 --> 00:01:14,480
And I usually like to go ahead and run real quick there so we make sure that things are actually working

20
00:01:14,480 --> 00:01:14,990
perfectly.

21
00:01:14,990 --> 00:01:15,710
And there we go.

22
00:01:15,710 --> 00:01:16,980
It is showing up.

23
00:01:17,300 --> 00:01:22,220
The next thing we need to do is to add a few assets that we need for our business card.

24
00:01:22,220 --> 00:01:24,230
So I'm gonna go and grab those assets.

25
00:01:24,230 --> 00:01:27,070
You should have at this point is just gonna be one image.

26
00:01:27,170 --> 00:01:32,190
So I'm going to grab it in AD instead of our assets folder here.

27
00:01:32,220 --> 00:01:33,040
Right.

28
00:01:33,080 --> 00:01:33,680
Let's do that

29
00:01:51,440 --> 00:01:59,150
grab and drop it there and voila you can see there's this there this very good looking gentleman there.

30
00:01:59,160 --> 00:02:01,380
Their goal is a picture of me.

31
00:02:01,400 --> 00:02:01,840
There we go.

32
00:02:01,880 --> 00:02:03,060
That's very simplistic.

33
00:02:03,360 --> 00:02:03,800
And there we go.

34
00:02:03,800 --> 00:02:09,080
We have a simplistic picture of me there and like I said before I can see you now the moment we add

35
00:02:09,080 --> 00:02:09,640
something.

36
00:02:09,650 --> 00:02:11,140
It's all contextual.

37
00:02:11,150 --> 00:02:16,580
I right here pane and we have a few things pertaining to this image so there's name of the image which

38
00:02:16,580 --> 00:02:22,070
is Paolo's dash nice dash photo brand their eyes default and all sort of things that we don't really

39
00:02:22,070 --> 00:02:24,840
need to worry too much about at this point.

40
00:02:25,040 --> 00:02:25,410
Very good.

41
00:02:25,640 --> 00:02:28,480
So we should have this asset or you can create your own.

42
00:02:28,520 --> 00:02:31,800
But in the beginning it would prefer that you just download the assets.

43
00:02:31,850 --> 00:02:37,470
This image here so we can follow along in later can change to something that you to a picture view of

44
00:02:37,490 --> 00:02:39,580
your dog or family whoever you want to add.

45
00:02:39,610 --> 00:02:40,780
OK.

46
00:02:41,130 --> 00:02:41,290
Right.

47
00:02:41,300 --> 00:02:43,110
So we have that let's go back to our content viewer.

48
00:02:43,130 --> 00:02:45,470
So here is of course where we're going to be start coding.

49
00:02:45,500 --> 00:02:48,120
Let's close a few things down there.

50
00:03:08,040 --> 00:03:08,280
All right.

51
00:03:08,310 --> 00:03:09,550
So let's continue here.

52
00:03:10,450 --> 00:03:10,680
OK.

53
00:03:10,690 --> 00:03:12,750
So there is our hello world there.

54
00:03:12,790 --> 00:03:17,800
Not much really going to get rid of that's the first thing we gotta do is we're going to organize everything

55
00:03:17,860 --> 00:03:19,520
so that we can have a better.

56
00:03:19,680 --> 00:03:23,370
First thing want to do is let's go ahead and put an H first.

57
00:03:23,410 --> 00:03:23,840
So what.

58
00:03:23,860 --> 00:03:27,080
Let's go ahead and put a stack here.

59
00:03:27,120 --> 00:03:31,310
You notice the moment we get rid of something inside of our body we have complaints.

60
00:03:31,330 --> 00:03:37,240
These complaints are valid because it's saying every time we are invoking the body here which inherits

61
00:03:37,300 --> 00:03:41,170
all conforms to the some view it expects to return something.

62
00:03:41,260 --> 00:03:44,250
That's why we can never not have anything better.

63
00:03:44,320 --> 00:03:51,340
But one other thing also if I say text and add some gibberish something like this and I save and run

64
00:03:51,400 --> 00:03:54,160
of course you will expect it to run again.

65
00:03:54,430 --> 00:03:54,850
Right.

66
00:03:54,850 --> 00:03:58,120
It's making a lot of things we should see here would be Hello.

67
00:03:58,120 --> 00:03:58,540
Perfect.

68
00:03:58,540 --> 00:03:59,370
It works.

69
00:03:59,380 --> 00:04:07,570
What about if I want to add another hello so I say text like there's something like that save and run.

70
00:04:07,570 --> 00:04:12,310
You notice we gonna have a problem here because you're gonna say well these function here returns only

71
00:04:12,310 --> 00:04:15,310
one thing you can return two things at once.

72
00:04:15,310 --> 00:04:17,850
That just doesn't make any sense.

73
00:04:17,920 --> 00:04:25,180
That's why we always want to add things inside of an enclosed entity enclosed view so we can actually

74
00:04:25,180 --> 00:04:27,040
add as many views as we want.

75
00:04:27,040 --> 00:04:30,970
In this case here are just a v stack as such and

76
00:04:33,730 --> 00:04:37,820
and I'm gonna go ahead and say the first thing I want to add is a text field.

77
00:04:37,830 --> 00:04:45,250
I will have to say something like Paolo this shown yours truly and I'm gonna add a few.

78
00:04:45,270 --> 00:04:53,730
Let's go ahead and make the font to be something title and is to be nice and I'm going to say the foreground.

79
00:04:53,730 --> 00:04:57,980
Remember now we can't just say colors or foreground.

80
00:04:58,020 --> 00:04:59,170
I wanted to be white.

81
00:04:59,850 --> 00:05:01,570
Okay very good.

82
00:05:01,590 --> 00:05:08,130
Notice also the moment we are actually typing it first of all all of this goes in dense to the left.

83
00:05:08,130 --> 00:05:14,910
But once we finish our once we finish our code hit enter and it just pushes all to the right.

84
00:05:14,910 --> 00:05:16,530
So organize the code for us.

85
00:05:16,530 --> 00:05:17,780
That's very nice.

86
00:05:17,820 --> 00:05:18,090
Very good.

87
00:05:18,090 --> 00:05:25,330
So I'm going to save this and give a runner real quick here to see where we at.

88
00:05:26,070 --> 00:05:26,450
OK.

89
00:05:26,470 --> 00:05:31,220
You may see the problem here the problem is that I said that our foreground is white.

90
00:05:31,300 --> 00:05:37,240
So the text is actually showing but because the background is white and that text is also white obviously

91
00:05:37,270 --> 00:05:38,140
nothing's showing.

92
00:05:38,170 --> 00:05:39,820
For now let's go ahead and changes to Gray.

93
00:05:39,820 --> 00:05:46,850
We can always change it later once we have our user interface complete disappointed we should see Polish

94
00:05:46,870 --> 00:05:52,830
on there looking very good and the next thing I want is also to add another text right below it.

95
00:05:52,840 --> 00:05:53,170
Right.

96
00:05:53,200 --> 00:06:05,620
So when it's a text such let's say text and this gonna be something like build apps with Paolo dot com.

97
00:06:05,760 --> 00:06:06,130
OK.

98
00:06:06,170 --> 00:06:08,940
Just a text and do the same thing here.

99
00:06:08,940 --> 00:06:16,280
I'm one the font to be subheading because I want it to be smaller than the head and the color also is

100
00:06:16,280 --> 00:06:17,430
going to be I'm gonna.

101
00:06:17,440 --> 00:06:24,320
Well let's go to grey at this point because we can add white we'll change all of that later and run

102
00:06:24,350 --> 00:06:26,690
once again just to see how things are looking.

103
00:06:26,690 --> 00:06:27,820
And you can see there go.

104
00:06:27,950 --> 00:06:30,370
There's my name and the buildups and Polycom.

105
00:06:30,380 --> 00:06:31,110
Very good.

106
00:06:31,130 --> 00:06:32,230
So it's looking real good.

107
00:06:32,390 --> 00:06:33,560
But next thing we want to do

108
00:06:39,760 --> 00:06:45,460
next we're going to do is to add next thing we're going to do is we want to add the Twitter account

109
00:06:45,460 --> 00:06:46,600
at the bottom here.

110
00:06:46,600 --> 00:06:51,640
Now remember the other thing not one thing to consider here is that the Twitter account will have just

111
00:06:51,730 --> 00:06:52,740
a text right.

112
00:06:52,750 --> 00:06:55,870
It says add buildups with me whatever.

113
00:06:55,870 --> 00:07:01,690
Now the Twitter account here will consist of a text but we also want to add to the left of that text

114
00:07:02,080 --> 00:07:09,130
an image that will be some sort of an image for instance an image that will have a T of some sort.

115
00:07:09,130 --> 00:07:09,760
OK.

116
00:07:09,760 --> 00:07:12,420
So what do we need to do here we have to think a little bit about it.

117
00:07:12,450 --> 00:07:13,570
What you need to do here.

118
00:07:13,570 --> 00:07:14,110
We can.

119
00:07:14,350 --> 00:07:15,190
What are we going to do here.

120
00:07:15,190 --> 00:07:16,870
We actually going to create another

121
00:07:19,360 --> 00:07:20,110
stack here.

122
00:07:20,110 --> 00:07:21,790
This is going to be horizontal stack.

123
00:07:21,790 --> 00:07:28,090
So I'm going to say each stack and such horizontal because everything inside of it is going to be horizontally

124
00:07:28,210 --> 00:07:29,560
stacked.

125
00:07:29,590 --> 00:07:30,330
All right.

126
00:07:30,330 --> 00:07:33,470
And in this case here what I'm going to do so now I'm going to put.

127
00:07:33,880 --> 00:07:36,130
So what I'm gonna do I'm going to add a text.

128
00:07:36,130 --> 00:07:45,740
This text is going to say something like this text is going to be the at build apps with me like that.

129
00:07:45,760 --> 00:07:48,130
Shameful plug.

130
00:07:48,230 --> 00:07:54,160
And when I say I want add a font and I want us to be sub headline as well.

131
00:07:54,310 --> 00:07:59,290
And for one color I want this to be I want it to be white.

132
00:07:59,320 --> 00:08:01,240
But for now I'm going to say green.

133
00:08:01,430 --> 00:08:06,680
Notice the other thing I haven't told you here is that we can also invoke the color class if we want

134
00:08:06,680 --> 00:08:13,390
to more if we want initialize our own color or if we want to continue to go and get the closer we have

135
00:08:13,390 --> 00:08:13,840
access to.

136
00:08:13,840 --> 00:08:16,360
So it's your option really.

137
00:08:16,510 --> 00:08:19,060
But in this case I'm just gonna go ahead and use grey again.

138
00:08:19,360 --> 00:08:19,630
Okay.

139
00:08:19,640 --> 00:08:26,500
The difference here is that I'm using the color class and invoke de Grey but same thing as we did here.

140
00:08:26,500 --> 00:08:26,770
Very good.

141
00:08:26,770 --> 00:08:28,190
Let's save this and run.

142
00:08:28,210 --> 00:08:32,390
We should see something below our bailouts.

143
00:08:32,390 --> 00:08:32,910
There we go.

144
00:08:32,940 --> 00:08:33,890
Looks real good.

145
00:08:33,890 --> 00:08:34,300
Okay.

146
00:08:34,370 --> 00:08:37,730
So now we need to add something leading.

147
00:08:38,480 --> 00:08:43,580
Now we need to add an icon leading this whole Twitter account.

148
00:08:43,580 --> 00:08:48,580
Well because we are in H stack horizontal stack everything is going to be stack horizontally.

149
00:08:48,590 --> 00:08:49,390
We can do so.

150
00:08:49,940 --> 00:08:58,990
Why how we do it so we can do so by invoking the image right there is the image view we can use.

151
00:08:59,240 --> 00:09:06,170
And this image here we can parse images that we have in our assets or we can pass a system name image

152
00:09:06,360 --> 00:09:07,100
huh.

153
00:09:07,100 --> 00:09:15,500
The beauty here if I pass say system name as such it requires a string which is going to be the actual

154
00:09:15,500 --> 00:09:18,810
name of our image.

155
00:09:18,830 --> 00:09:23,980
Now we will see later how to go and get or how to know the.

156
00:09:24,080 --> 00:09:28,760
Now later I'm going to show you how to actually know all of the images names and so forth that we can

157
00:09:28,760 --> 00:09:36,440
get from the system for now all we have to do just say T dot square dot feel just like that.

158
00:09:36,440 --> 00:09:41,730
So I'm saying I want a square that is filled that contains a letter T.

159
00:09:41,780 --> 00:09:42,170
All right.

160
00:09:42,170 --> 00:09:47,680
And I can also that add a few other things in this case and it's going to add a foreground color just

161
00:09:47,680 --> 00:09:54,680
the color in this case I want this to be let's say dot pink Well it changes colors later but that's

162
00:09:54,680 --> 00:10:02,080
totally fine for now save and run and we should be able to see a little icon showing.

163
00:10:02,080 --> 00:10:02,920
Look at that.

164
00:10:02,990 --> 00:10:03,650
Very nice.

165
00:10:03,660 --> 00:10:06,890
There's T for two Twitter and ad build apps with me.

166
00:10:06,890 --> 00:10:11,630
Now this may be a little bit small for you but now this may be a little bit small for you perhaps it

167
00:10:11,630 --> 00:10:13,500
can make this a little bit bigger.

168
00:10:13,610 --> 00:10:15,350
Now this may be a little bit small for you.

169
00:10:15,350 --> 00:10:20,360
Let me make this a little bit bigger so you can see now you're not going to see the entire

170
00:10:22,880 --> 00:10:24,070
simulator anymore.

171
00:10:24,080 --> 00:10:25,190
That's fine.

172
00:10:25,190 --> 00:10:27,460
As you can see there we go.

173
00:10:27,530 --> 00:10:29,990
OK very good.

174
00:10:29,990 --> 00:10:33,170
So this is making sense and we're making really good progress.

175
00:10:33,290 --> 00:10:36,620
But the next thing we really want to do is we want to be able to

176
00:10:40,280 --> 00:10:45,200
now let's go and differentiate our Twitter account here from anything else so I can go.

177
00:10:45,210 --> 00:10:47,710
Come down here and add more modifiers.

178
00:10:47,700 --> 00:10:48,790
I want this to be bold

179
00:10:54,550 --> 00:11:02,350
like that and I want also for it to be italic like this looks like the invitation is that invitation

180
00:11:02,740 --> 00:11:05,500
looks like the indent is not working.

181
00:11:05,500 --> 00:11:07,030
That's fine we can do ourselves a swine.

182
00:11:07,030 --> 00:11:07,620
This real quick

183
00:11:11,020 --> 00:11:13,570
and well I like to differentiate things a little bit.

184
00:11:13,580 --> 00:11:15,080
Looks much much nicer.

185
00:11:15,100 --> 00:11:15,720
Very good.

186
00:11:15,730 --> 00:11:21,850
Now the next thing we want to do is if we want to be able to add a nice card around it how do we do

187
00:11:21,850 --> 00:11:22,030
that.

188
00:11:22,060 --> 00:11:29,170
Well the best way to do this is to understand well the best way to think about this is to understand

189
00:11:29,260 --> 00:11:35,230
how to stack things the best way to think about this is that not just that we have this V stack at the

190
00:11:35,230 --> 00:11:41,280
top here which is enclosing this H stack which is exactly what we added here.

191
00:11:41,290 --> 00:11:41,590
All right.

192
00:11:42,100 --> 00:11:43,510
So in order for us

193
00:11:55,270 --> 00:11:59,620
so what are we gonna do is we are also adding another stack.

194
00:11:59,660 --> 00:12:05,660
This case is going to be an H stack horizontal stack that will include everything.

195
00:12:05,800 --> 00:12:06,910
Something like this.

196
00:12:06,910 --> 00:12:10,120
This will become more apparent later so I need to close that.

197
00:12:10,150 --> 00:12:10,770
Let's see.

198
00:12:10,780 --> 00:12:14,020
I have this one so I'm going to come below that.

199
00:12:14,110 --> 00:12:17,120
That's the latest one that was enclosing everything.

200
00:12:17,240 --> 00:12:17,910
OK.

201
00:12:17,920 --> 00:12:22,900
The other thing I like to do is another thing to organize the whole code.

202
00:12:22,900 --> 00:12:26,940
I like to I like to.

203
00:12:27,010 --> 00:12:27,930
Another thing we can do.

204
00:12:27,930 --> 00:12:38,060
Also I like to say command a to select everything and go to Ed and I like to go to structure and I go

205
00:12:38,060 --> 00:12:43,980
to structure like this and I say right indent and invents everything for me.

206
00:12:44,030 --> 00:12:44,550
OK.

207
00:12:44,720 --> 00:12:50,770
That's a that's a good way to indent everything and put everything and make everything look good.

208
00:12:50,810 --> 00:12:53,960
So we have our H stack at the top here.

209
00:12:54,200 --> 00:13:01,130
If we save and run we shouldn't see really any differences here but we're going to see this will become

210
00:13:01,130 --> 00:13:03,110
more apparent in a bit

211
00:13:07,920 --> 00:13:10,500
but this will become more apparent in the next video.