1
00:00:00,000 --> 00:00:11,420

2
00:00:11,420 --> 00:00:13,590
>> TIANYU LIU: Hey, how's
it going everyone?

3
00:00:13,590 --> 00:00:20,250
And this is the iOS App
programming of objective c seminar.

4
00:00:20,250 --> 00:00:21,520
And my name is Tianyu Liu.

5
00:00:21,520 --> 00:00:26,114
I'm a Lowell junior right now,
concentrating in computer science.

6
00:00:26,114 --> 00:00:28,030
So in this seminar I'm
going to teach you guys

7
00:00:28,030 --> 00:00:30,770
a little bit about how to make an app.

8
00:00:30,770 --> 00:00:33,030
Yay, get excited for it.

9
00:00:33,030 --> 00:00:36,790
>> So before we even start diving
into the actual programming side,

10
00:00:36,790 --> 00:00:41,840
let's just really quickly talk about
why might you want to build an iOS app?

11
00:00:41,840 --> 00:00:43,940
Why is iOS so awesome?

12
00:00:43,940 --> 00:00:47,250
So the first problem, the first
thing that is pretty awesome for us,

13
00:00:47,250 --> 00:00:51,190
especially as a CS50
student, is that iOS

14
00:00:51,190 --> 00:00:55,860
uses Objective C. Well, there's
a new language called Swift,

15
00:00:55,860 --> 00:00:58,260
but we're not going to
use that in this seminar.

16
00:00:58,260 --> 00:01:01,540
If you're interested in Swift, there
is an independent seminar about that.

17
00:01:01,540 --> 00:01:05,590
But Objective C is basically
a superset of C. Meaning

18
00:01:05,590 --> 00:01:10,230
that everything you use in C can
be translated into Objective C

19
00:01:10,230 --> 00:01:11,630
very easily.

20
00:01:11,630 --> 00:01:15,730
>> As you might see later, that indeed
there are some very basic syntax, are

21
00:01:15,730 --> 00:01:19,790
basically exactly the same,
C and Objective C. So,

22
00:01:19,790 --> 00:01:22,860
since you have taken CS50
up this far, you already

23
00:01:22,860 --> 00:01:26,500
know Objective C, at least 40%.

24
00:01:26,500 --> 00:01:30,720
Also, Apple has a really
robust API for iOS.

25
00:01:30,720 --> 00:01:33,750
There are a lot of really crazy
things you can do with it.

26
00:01:33,750 --> 00:01:36,760
One of which is someone
actually created an iOS app

27
00:01:36,760 --> 00:01:40,600
for controlling cars, which
is pretty interesting.

28
00:01:40,600 --> 00:01:42,610
Probably a helicopter is more exciting.

29
00:01:42,610 --> 00:01:47,020
But that's how powerful
the iOS API can be.

30
00:01:47,020 --> 00:01:49,340
>> And as you might have
figured out right now,

31
00:01:49,340 --> 00:01:53,000
the stack overflow is probably one of
the most important online resources

32
00:01:53,000 --> 00:01:54,250
available to you.

33
00:01:54,250 --> 00:01:58,090
And good news, for every
single problem you can possibly

34
00:01:58,090 --> 00:02:01,840
think of while building your
final project in Objective C,

35
00:02:01,840 --> 00:02:05,910
there is likely a stack overflow answer.

36
00:02:05,910 --> 00:02:07,420
It's just awesome.

37
00:02:07,420 --> 00:02:12,780
In addition to that,
iOS is really a platform

38
00:02:12,780 --> 00:02:16,260
where you can reach a huge
audience with little effort.

39
00:02:16,260 --> 00:02:20,170
It's not like Android, where
everything's pretty fragmented.

40
00:02:20,170 --> 00:02:22,540
>> Everything iOS is unified.

41
00:02:22,540 --> 00:02:25,920
And as long as you create
an app for an iPhone,

42
00:02:25,920 --> 00:02:31,260
you can very easily port that to iPad,
iPad mini, or different iPhone sizes.

43
00:02:31,260 --> 00:02:33,050
These are all really convenient.

44
00:02:33,050 --> 00:02:36,430
And it's just really good
for impressing your friends.

45
00:02:36,430 --> 00:02:38,920
You can just hold an iPhone
and tell your friend hey,

46
00:02:38,920 --> 00:02:40,250
this is the app I make.

47
00:02:40,250 --> 00:02:43,860
You can do that for any
desktop apps, which is nice.

48
00:02:43,860 --> 00:02:48,870
>> All right, now let's actually get
into the language Objective C.

49
00:02:48,870 --> 00:02:52,910
So why don't we start with
some really basic syntax.

50
00:02:52,910 --> 00:02:57,410
As I mentioned before Objective
C It's basically a superset of C.

51
00:02:57,410 --> 00:03:01,860
So a lot of basic syntax are
actually exactly the same.

52
00:03:01,860 --> 00:03:06,150
Declaring a variable and
adding two variables together

53
00:03:06,150 --> 00:03:09,440
is exactly as we have done in Mario.

54
00:03:09,440 --> 00:03:11,140
Nothing new here.

55
00:03:11,140 --> 00:03:17,370
>> Similarly, the lodger for loop
and condition is also the same.

56
00:03:17,370 --> 00:03:22,370
You can do a for loop just as you
have did in a Mario [INAUDIBLE].

57
00:03:22,370 --> 00:03:26,280
And you can do conditions
just as what you

58
00:03:26,280 --> 00:03:29,240
have been doing in your previous p sets.

59
00:03:29,240 --> 00:03:33,400
However, Objective C
is not completely C,

60
00:03:33,400 --> 00:03:36,640
and there is something that
is kind of weird about it.

61
00:03:36,640 --> 00:03:42,340
>> The first one being that when you are
doing C programming, you typically call

62
00:03:42,340 --> 00:03:46,310
include and then a library name.

63
00:03:46,310 --> 00:03:49,860
But in Objective C you call that import.

64
00:03:49,860 --> 00:03:53,100
Basically saying functionality,
just different names.

65
00:03:53,100 --> 00:03:55,940
And the strings are
actually a little bit weird.

66
00:03:55,940 --> 00:03:58,250
You can see that the first
thing that is kind of weird

67
00:03:58,250 --> 00:04:04,190
is that you have a pretty weird--
sorry-- you have a pretty weird NS

68
00:04:04,190 --> 00:04:04,960
sign over here.

69
00:04:04,960 --> 00:04:07,452

70
00:04:07,452 --> 00:04:09,160
And the second thing
that's kind of weird

71
00:04:09,160 --> 00:04:14,090
is you have an at sign before
actually declaring the string.

72
00:04:14,090 --> 00:04:19,209
So the at sign basically signifies
that a string is not only a string,

73
00:04:19,209 --> 00:04:20,880
it is actually an object.

74
00:04:20,880 --> 00:04:22,780
We're going to explain
that later so don't

75
00:04:22,780 --> 00:04:25,800
panic if you don't
understand what that means.

76
00:04:25,800 --> 00:04:29,980
And printing to console is a little bit
different because in C we call printf,

77
00:04:29,980 --> 00:04:33,350
but in Objective C we call [INAUDIBLE].

78
00:04:33,350 --> 00:04:35,640
>> You might be wondering what is that.

79
00:04:35,640 --> 00:04:38,070
That is basically printf,
just a different language.

80
00:04:38,070 --> 00:04:41,370
Exactly the same usage,
exactly the same functionality.

81
00:04:41,370 --> 00:04:44,060
Well it turns out that
Objective C actually

82
00:04:44,060 --> 00:04:50,040
has an ns prefix in almost
everything, every basic data type,

83
00:04:50,040 --> 00:04:52,690
nsstring, nsarray, nsdictionary.

84
00:04:52,690 --> 00:04:56,340
The reason being that ns
actually stands for Next Step,

85
00:04:56,340 --> 00:04:59,980
which is a company that
Steve Jobs has founded,

86
00:04:59,980 --> 00:05:03,960
which is a company where the
language Objective C is born.

87
00:05:03,960 --> 00:05:06,140
So this is basically tradition.

88
00:05:06,140 --> 00:05:09,010
I know it's a little bit
weird, but it's Apple.

89
00:05:09,010 --> 00:05:16,840
>> So something that is even weirder
than that is a function declaration.

90
00:05:16,840 --> 00:05:22,600
This is very different from what we
see in C, because here it actually

91
00:05:22,600 --> 00:05:25,190
doesn't look like C anymore.

92
00:05:25,190 --> 00:05:28,810
What you have here-- by the
way this is not a bullet point,

93
00:05:28,810 --> 00:05:30,690
this is a minus sign.

94
00:05:30,690 --> 00:05:36,440
You have a minus sign parenthesis
void and then the function name.

95
00:05:36,440 --> 00:05:38,450
Let's just say if we
have hello world, then

96
00:05:38,450 --> 00:05:42,820
the return type would be void
because we return nothing.

97
00:05:42,820 --> 00:05:44,680
>> What gets really weird
is that when you're

98
00:05:44,680 --> 00:05:49,580
having more than one parameter
passing into a same function that

99
00:05:49,580 --> 00:05:53,870
will be really weird as shown here.

100
00:05:53,870 --> 00:05:58,230
We have a method name,
called addInt to [INAUDIBLE]

101
00:05:58,230 --> 00:06:00,370
and we're passing one parameter.

102
00:06:00,370 --> 00:06:05,170
But after that, we have
more method name call with.

103
00:06:05,170 --> 00:06:08,500
And after with we're passing
the second parameter.

104
00:06:08,500 --> 00:06:11,940
This is actually a little bit weird,
but all these function declarations

105
00:06:11,940 --> 00:06:14,770
follow the same pattern as this.

106
00:06:14,770 --> 00:06:17,450
>> We have a minus sign to begin with.

107
00:06:17,450 --> 00:06:21,550
The minus sign could be a plus sign
sometimes based on what kind of method

108
00:06:21,550 --> 00:06:22,340
is it.

109
00:06:22,340 --> 00:06:25,000
Method is basically
another name for function.

110
00:06:25,000 --> 00:06:26,760
And we're going to
explain that later when

111
00:06:26,760 --> 00:06:30,580
we're talking about object
oriented programming.

112
00:06:30,580 --> 00:06:34,300
You first specify the return
type inside parentheses,

113
00:06:34,300 --> 00:06:37,450
after which comes the method name.

114
00:06:37,450 --> 00:06:40,310
You're passing one parameter.

115
00:06:40,310 --> 00:06:44,750
And if you have more parameters
you need to extend the method name

116
00:06:44,750 --> 00:06:46,770
and basically write something more here.

117
00:06:46,770 --> 00:06:48,090
>> It could be anything you want.

118
00:06:48,090 --> 00:06:50,140
In our case it's with.

119
00:06:50,140 --> 00:06:56,160
But you could say end, or or, or
abc full bar, whatever you want.

120
00:06:56,160 --> 00:06:59,500
And then after that you're
passing parameter b.

121
00:06:59,500 --> 00:07:01,750
This is a really weird
convention but we are

122
00:07:01,750 --> 00:07:05,800
going to see why Apple wanted
to do that very quickly.

123
00:07:05,800 --> 00:07:10,530
So how do you call function?

124
00:07:10,530 --> 00:07:15,520
Calling a function in Objective
C is also different from C.

125
00:07:15,520 --> 00:07:18,170
>> Actually, calling a
function in Objective C

126
00:07:18,170 --> 00:07:21,030
is more like you're talking to someone.

127
00:07:21,030 --> 00:07:27,030
Here we have self, which
is called an object.

128
00:07:27,030 --> 00:07:33,830
You're basically telling the
object self to say "Hello World!"

129
00:07:33,830 --> 00:07:36,830
That is how to call the function.

130
00:07:36,830 --> 00:07:41,690
An object and a method name
combined with each other.

131
00:07:41,690 --> 00:07:49,600
And this is where the weird extension
for method name really comes into play.

132
00:07:49,600 --> 00:07:52,150
>> Let's look at the second example.

133
00:07:52,150 --> 00:07:56,780
We just defined a method called
addInt with blah blah blah.

134
00:07:56,780 --> 00:08:00,066
So in this case when you are calling
that specific [? message ?] it's going

135
00:08:00,066 --> 00:08:02,035
to look like self addInt:10 with:2.

136
00:08:02,035 --> 00:08:05,410

137
00:08:05,410 --> 00:08:08,070
It sounds like English.

138
00:08:08,070 --> 00:08:11,980
Although the function
function declaration is weird,

139
00:08:11,980 --> 00:08:15,600
the point of Objective C's
method declaration pattern,

140
00:08:15,600 --> 00:08:18,830
is that when you are calling
the function or method

141
00:08:18,830 --> 00:08:21,980
it will sound like actual English.

142
00:08:21,980 --> 00:08:25,270
So it's very intuitive
once you get into it.

143
00:08:25,270 --> 00:08:28,740
>> Especially in this case,
where you can basically

144
00:08:28,740 --> 00:08:33,010
see that the function name is
sort of documenting itself.

145
00:08:33,010 --> 00:08:35,390
You don't need any
more explanation to see

146
00:08:35,390 --> 00:08:42,770
what exactly is happening, what
exactly one parameter doing.

147
00:08:42,770 --> 00:08:48,470
Going beyond that, let's talk a little
bit about object oriented programming.

148
00:08:48,470 --> 00:08:52,160
Object oriented programming is
one of the fundamental programming

149
00:08:52,160 --> 00:08:57,110
techniques or patterns that is
used by Objective C. Objective C

150
00:08:57,110 --> 00:09:03,110
is called Objective C, not
C, for a really good reason.

151
00:09:03,110 --> 00:09:07,560
>> So before we get into
Objective C syntax,

152
00:09:07,560 --> 00:09:11,670
Let's really quickly look at
what exactly is an object.

153
00:09:11,670 --> 00:09:15,480
We've probably done something
like object before, which

154
00:09:15,480 --> 00:09:19,780
is called the struct when you are
implementing a tree or a linked list

155
00:09:19,780 --> 00:09:25,730
or [? try. ?] So, it's
basically like a struct,

156
00:09:25,730 --> 00:09:28,560
but it's much more powerful than that.

157
00:09:28,560 --> 00:09:33,150
An object has methods and properties.

158
00:09:33,150 --> 00:09:35,310
Methods are basically functions.

159
00:09:35,310 --> 00:09:39,480
Basically functions that a
specific to a certain object.

160
00:09:39,480 --> 00:09:45,440
>> And properties are basically the
field you specify in the struct.

161
00:09:45,440 --> 00:09:48,500
So for every single object
we have some property

162
00:09:48,500 --> 00:09:53,160
that has some variables which
are specific to the object.

163
00:09:53,160 --> 00:09:57,170
And we have some functions which
are also specific to the object.

164
00:09:57,170 --> 00:10:01,180
And the functions are called methods
and the variables are called properties.

165
00:10:01,180 --> 00:10:03,190
It's just a fancy name.

166
00:10:03,190 --> 00:10:10,440
While you fact, every single view
you see while you open an iOS app,

167
00:10:10,440 --> 00:10:17,720
let's just say Twitter or Facebook,
every single view you see is an object.

168
00:10:17,720 --> 00:10:22,110
And even the entire app is
an object to start with.

169
00:10:22,110 --> 00:10:25,340
Very interesting concept.

170
00:10:25,340 --> 00:10:28,480
>> And why do we want object
oriented programming?

171
00:10:28,480 --> 00:10:33,530
So you can imagine that when you
program it gets pretty complicated.

172
00:10:33,530 --> 00:10:36,400
Let's just say when you're
implementing chessboard,

173
00:10:36,400 --> 00:10:40,020
the logic is going to
be really complicated.

174
00:10:40,020 --> 00:10:43,280
You have 36 different
pieces, so that if you

175
00:10:43,280 --> 00:10:48,370
want to write logic for all
36 different pieces in chess,

176
00:10:48,370 --> 00:10:52,150
that's going to be a lot of
different functions and variables.

177
00:10:52,150 --> 00:10:54,070
It's a lot of trouble.

178
00:10:54,070 --> 00:10:58,980
And probably you're going to write a
different method or different function

179
00:10:58,980 --> 00:11:03,950
for each of the piece to
exactly control what they do.

180
00:11:03,950 --> 00:11:08,830
>> But if you do object oriented
programming, all of these pieces

181
00:11:08,830 --> 00:11:12,440
can be abstracted into
one single object.

182
00:11:12,440 --> 00:11:16,111
And the object will have some common
properties, like what kind of piece

183
00:11:16,111 --> 00:11:16,610
is it?

184
00:11:16,610 --> 00:11:17,740
What color is it?

185
00:11:17,740 --> 00:11:19,480
How can it move?

186
00:11:19,480 --> 00:11:24,660
And in that way you have greatly
simplified the logic of it.

187
00:11:24,660 --> 00:11:28,480
So it's just a really good way
to make complicated programs,

188
00:11:28,480 --> 00:11:33,700
and hierarchical relationship
within the program, very simple.

189
00:11:33,700 --> 00:11:36,800
As we're going to see
why very quickly when

190
00:11:36,800 --> 00:11:39,660
we're actually doing
programming-- when we're actually

191
00:11:39,660 --> 00:11:42,830
doing an S code
programming session later.

192
00:11:42,830 --> 00:11:48,120
>> Well in addition to that,
object oriented programming

193
00:11:48,120 --> 00:11:50,030
is just a lot of fun.

194
00:11:50,030 --> 00:11:51,990
You got to design your own object.

195
00:11:51,990 --> 00:11:56,080
You got to design what does
it look like by yourself.

196
00:11:56,080 --> 00:11:58,250
There is no right answer to it.

197
00:11:58,250 --> 00:12:02,940
And it's totally interesting.

198
00:12:02,940 --> 00:12:07,270
So in object oriented programming,
two fundamental concepts

199
00:12:07,270 --> 00:12:10,130
will be class and instance.

200
00:12:10,130 --> 00:12:13,570
A class is basically
a template for object.

201
00:12:13,570 --> 00:12:18,070
And an instance is basically
one specific object.

202
00:12:18,070 --> 00:12:21,090
>> Let's just say you're making a cookie.

203
00:12:21,090 --> 00:12:24,800
In this case, every single
cookie you actually end up with

204
00:12:24,800 --> 00:12:27,310
is going to be an object.

205
00:12:27,310 --> 00:12:35,830
But the cookie plate you use to bake
all the cookies will be a class.

206
00:12:35,830 --> 00:12:37,880
A class is basically a template.

207
00:12:37,880 --> 00:12:46,170
And the instance will be one specific
object created out of that class.

208
00:12:46,170 --> 00:12:49,970
>> And an instance will be created
based on class declaration,

209
00:12:49,970 --> 00:12:56,760
as we will see in later slides.

210
00:12:56,760 --> 00:13:00,010
So let's actually do a really
quick example [INAUDIBLE].

211
00:13:00,010 --> 00:13:04,280
Let's say we're declaring
an object for a cat.

212
00:13:04,280 --> 00:13:07,930
The object should have--
the cat class should

213
00:13:07,930 --> 00:13:11,260
have some properties and methods.

214
00:13:11,260 --> 00:13:17,300
What kind of properties should the
class have-- should the cat have?

215
00:13:17,300 --> 00:13:20,580
>> For instance, color,
age and breed, those

216
00:13:20,580 --> 00:13:24,440
will be variables that
are specific to each cat.

217
00:13:24,440 --> 00:13:27,790
And those are some things
that we use to describe a cat.

218
00:13:27,790 --> 00:13:31,880
What kind of method,
or what can a cat do?

219
00:13:31,880 --> 00:13:37,160
Some quick examples would be chase
mouse, eat fish or just meow.

220
00:13:37,160 --> 00:13:40,900
This is a really quick
example of cat class.

221
00:13:40,900 --> 00:13:46,920
And a really specific
cat object will be a cat

222
00:13:46,920 --> 00:13:50,930
where we specify the
color, the age and breed.

223
00:13:50,930 --> 00:13:53,790
>> In that case, our object is
no longer a class anymore.

224
00:13:53,790 --> 00:14:00,010
We copy the template from the class and
we specify each specific information

225
00:14:00,010 --> 00:14:04,510
to that specific object
to make it independent.

226
00:14:04,510 --> 00:14:09,350
And when you are calling
a method inside an object,

227
00:14:09,350 --> 00:14:16,640
you just call meow on the object,
which is the cat you just created.

228
00:14:16,640 --> 00:14:19,020
>> Probably you will print out
something like "Hello World!

229
00:14:19,020 --> 00:14:20,000
Meow."

230
00:14:20,000 --> 00:14:22,110
Pretty cute.

231
00:14:22,110 --> 00:14:24,500
All right, let's just
get into some details

232
00:14:24,500 --> 00:14:30,650
and see what exactly does that
translate into being iOS programming.

233
00:14:30,650 --> 00:14:36,500
So in iOS programming every single
class will be implemented in two files.

234
00:14:36,500 --> 00:14:41,420
One file is here, which
is called the interface.

235
00:14:41,420 --> 00:14:45,300
Another file is here, which
is called implementation.

236
00:14:45,300 --> 00:14:48,890
>> Typically the interface
will have extension.h

237
00:14:48,890 --> 00:14:51,740
as we have seen in C libraries.

238
00:14:51,740 --> 00:14:56,340
And implementation file is
going to have extension.n.

239
00:14:56,340 --> 00:14:57,260
It's kind of weird.

240
00:14:57,260 --> 00:15:01,270
But .n means actually .c, there is no
fundamental difference between those

241
00:15:01,270 --> 00:15:02,100
two.

242
00:15:02,100 --> 00:15:06,650
So in this case, we can see that we're
declaring interface, Cat : object.

243
00:15:06,650 --> 00:15:10,660

244
00:15:10,660 --> 00:15:13,760
That is called inheritance.

245
00:15:13,760 --> 00:15:19,170
We're basically inheriting the
cat class from the object class.

246
00:15:19,170 --> 00:15:24,790
So every property and method that was
previously defined in the object class

247
00:15:24,790 --> 00:15:28,560
will be automatically defined
in a cat class as well.

248
00:15:28,560 --> 00:15:35,900
>> In addition to that, we define color,
breed, and age, three variables.

249
00:15:35,900 --> 00:15:39,360
That actually looks like
something you have done before.

250
00:15:39,360 --> 00:15:41,770
It looks like struct.

251
00:15:41,770 --> 00:15:44,950
That is basically the syntax
for struct declaration,

252
00:15:44,950 --> 00:15:47,710
and that is totally correct.

253
00:15:47,710 --> 00:15:51,825
And since I mentioned before,
the difference a struct

254
00:15:51,825 --> 00:15:53,960
and an object, one of the
fundamental differences

255
00:15:53,960 --> 00:15:59,080
is that an object has method,
while a struct only has variables.

256
00:15:59,080 --> 00:16:03,450
So in addition to the properties or
variables we've created for the object,

257
00:16:03,450 --> 00:16:05,700
we specify some method.

258
00:16:05,700 --> 00:16:09,720
>> Let's just say here we have
two methods, one is meow,

259
00:16:09,720 --> 00:16:12,460
another one is chase mouse.

260
00:16:12,460 --> 00:16:18,600
We probably want to be passing a
parameter based on our previous method

261
00:16:18,600 --> 00:16:20,440
declaration pattern.

262
00:16:20,440 --> 00:16:22,160
You probably want to be passing a mouse.

263
00:16:22,160 --> 00:16:25,180
And you'll probably want
to return a bool signifying

264
00:16:25,180 --> 00:16:30,010
if your cat has successfully
caught the mouse or not.

265
00:16:30,010 --> 00:16:33,170
>> This is the interface, but we can
see that the interface actually

266
00:16:33,170 --> 00:16:35,150
doesn't do anything.

267
00:16:35,150 --> 00:16:40,800
It just tells a program what exists--
what exists in the cat class.

268
00:16:40,800 --> 00:16:43,640
So in order for the
program to do something,

269
00:16:43,640 --> 00:16:46,680
we need to have implementation files.

270
00:16:46,680 --> 00:16:51,940
So here, the first thing we do is
obviously we import the interface.

271
00:16:51,940 --> 00:16:56,470
After we import the interface,
we define the method.

272
00:16:56,470 --> 00:17:00,150
>> Let's just say here meow
would just print out

273
00:17:00,150 --> 00:17:01,740
"Hello World!" to the console.

274
00:17:01,740 --> 00:17:04,319

275
00:17:04,319 --> 00:17:08,460
And after the implementation
file, we're pretty much done.

276
00:17:08,460 --> 00:17:14,530
This is basically a class
declaration for one class.

277
00:17:14,530 --> 00:17:19,970
So now the question becomes,
how do you declare a variable?

278
00:17:19,970 --> 00:17:26,880
The way you use a class to create an
object in Objective C is written here.

279
00:17:26,880 --> 00:17:30,730
>> You first specify that
this is a cat pointer,

280
00:17:30,730 --> 00:17:38,700
because every object in Objective C
is finally implemented as a pointer.

281
00:17:38,700 --> 00:17:46,210
And you call the class, call them
as alloc, which is basically malloc,

282
00:17:46,210 --> 00:17:51,220
telling the operating system that you
need some memory space for this object.

283
00:17:51,220 --> 00:17:55,780
After that you have an object
already and you just initialize it.

284
00:17:55,780 --> 00:17:56,780
This is just convention.

285
00:17:56,780 --> 00:17:59,390

286
00:17:59,390 --> 00:18:04,410
I know it's is a little bit weird, but
this is actually how Apple does stuff.

287
00:18:04,410 --> 00:18:07,130
>> Assigning properties is
actually pretty straightforward.

288
00:18:07,130 --> 00:18:09,250
It's very similar to
what you're doing when

289
00:18:09,250 --> 00:18:13,780
you're assigning some specific
field inside of struct.

290
00:18:13,780 --> 00:18:16,830
You just have the variable
name, the property name,

291
00:18:16,830 --> 00:18:20,140
and assign a specific value to it.

292
00:18:20,140 --> 00:18:24,120
And calling a method is very similar.

293
00:18:24,120 --> 00:18:29,080
The calling a method is
basically what I talk about

294
00:18:29,080 --> 00:18:32,390
for calling any method in Objective C.

295
00:18:32,390 --> 00:18:36,660
>> You're passing an object, in
this case it's going to be myCat,

296
00:18:36,660 --> 00:18:42,490
and you're passing the method name.

297
00:18:42,490 --> 00:18:47,130
As if you're talking to the object,
myCat, that you should meow.

298
00:18:47,130 --> 00:18:48,570
It's pretty interesting.

299
00:18:48,570 --> 00:18:52,010

300
00:18:52,010 --> 00:18:55,680
After that, there is one
more essential design pattern

301
00:18:55,680 --> 00:18:59,940
that we need to talk about
before getting to actual S code.

302
00:18:59,940 --> 00:19:03,300
That design pattern is called
event driven programming.

303
00:19:03,300 --> 00:19:09,660
This is also probably one of the most
fundamental ideas in iOS programming.

304
00:19:09,660 --> 00:19:14,410
>> So you probably don't know what exactly
is the event driven programming,

305
00:19:14,410 --> 00:19:16,990
but it's not really that scary.

306
00:19:16,990 --> 00:19:20,400
Well in fact, you have
already done that before.

307
00:19:20,400 --> 00:19:24,894
This is one of the lines you've probably
already written in the last [INAUDIBLE]

308
00:19:24,894 --> 00:19:26,810
of CS50,
google.maps.event.addListener(marker,

309
00:19:26,810 --> 00:19:27,810
"click", function(){}):.

310
00:19:27,810 --> 00:19:32,410

311
00:19:32,410 --> 00:19:37,620
By calling this line you are
essentially telling the computer

312
00:19:37,620 --> 00:19:42,650
that whenever the event called
"click" happens on the marker,

313
00:19:42,650 --> 00:19:43,630
use that function.

314
00:19:43,630 --> 00:19:46,910

315
00:19:46,910 --> 00:19:50,950
>> This is very different from
what you do in mario.c.

316
00:19:50,950 --> 00:19:56,670
In mario.c you just run the program
once, it gives you an output,

317
00:19:56,670 --> 00:19:58,590
and you're done.

318
00:19:58,590 --> 00:20:02,590
These are sort of like
one shot programs.

319
00:20:02,590 --> 00:20:05,830
Event driven programs
are very, very different.

320
00:20:05,830 --> 00:20:10,230
Let's imagine, if Facebook is a one
shot program it's not really good.

321
00:20:10,230 --> 00:20:13,750
You just go to Facebook
once and it's done.

322
00:20:13,750 --> 00:20:16,700
It gives you some output
and you never got it back.

323
00:20:16,700 --> 00:20:19,380
You never got anything more.

324
00:20:19,380 --> 00:20:23,880
>> So here, especially
the pattern we use is

325
00:20:23,880 --> 00:20:26,940
event driven, so that
every function will

326
00:20:26,940 --> 00:20:31,480
be caught based on what
event has happened.

327
00:20:31,480 --> 00:20:34,670
For instance, if we have
a button and we specify

328
00:20:34,670 --> 00:20:39,870
that whenever that button is clicked,
call the function called "Hello World!"

329
00:20:39,870 --> 00:20:47,810
In that way we can really
manage the function logic

330
00:20:47,810 --> 00:20:50,560
flow in a highly flexible way.

331
00:20:50,560 --> 00:20:55,840
The user can do or call a function
that has already been called.

332
00:20:55,840 --> 00:20:59,900
It's completely based on what users do.

333
00:20:59,900 --> 00:21:04,080
>> So we can see that this is
actually much better than mario.c.

334
00:21:04,080 --> 00:21:07,190
And good news is that it's
actually not a new concept.

335
00:21:07,190 --> 00:21:12,140
You guys have already done
that in the last problem set.

336
00:21:12,140 --> 00:21:16,640
So in Objective C there are
three different diagrams

337
00:21:16,640 --> 00:21:19,030
for event driven programming.

338
00:21:19,030 --> 00:21:21,970
The first diagram is
called target action,

339
00:21:21,970 --> 00:21:26,990
where you bind a button
press with some function.

340
00:21:26,990 --> 00:21:31,590
Let's just say, whenever you click
some button, you call some function.

341
00:21:31,590 --> 00:21:33,620
This is very simple target action.

342
00:21:33,620 --> 00:21:35,580
>> The second one is
actually the hardest one,

343
00:21:35,580 --> 00:21:38,450
it's called delegation on protocol.

344
00:21:38,450 --> 00:21:41,800
We're going to explain
that in great detail later.

345
00:21:41,800 --> 00:21:44,420
And the third way is notification.

346
00:21:44,420 --> 00:21:46,770
This is actually not
very important as far

347
00:21:46,770 --> 00:21:50,920
as we're concerned, because the chance
that you're going to use notification

348
00:21:50,920 --> 00:21:53,310
in your final project is pretty low.

349
00:21:53,310 --> 00:21:56,440
So we're going to skip that part.

350
00:21:56,440 --> 00:21:59,460
>> And we're going to dive
into delegation on protocol.

351
00:21:59,460 --> 00:22:02,380

352
00:22:02,380 --> 00:22:04,470
So what exactly is a protocol?

353
00:22:04,470 --> 00:22:06,450
Or what exactly is a delegation?

354
00:22:06,450 --> 00:22:09,670
Let's talk about protocol to start with.

355
00:22:09,670 --> 00:22:13,360
Protocols are nothing but events.

356
00:22:13,360 --> 00:22:19,230
But these events are given to
you by Apple to start with.

357
00:22:19,230 --> 00:22:22,640
For instance, I'm not
completely sure how many of you

358
00:22:22,640 --> 00:22:27,930
guys use Apple's original
app mail or contact,

359
00:22:27,930 --> 00:22:32,180
but every time you scroll the
table and press the specific cell

360
00:22:32,180 --> 00:22:36,130
on the table, that is an event.

361
00:22:36,130 --> 00:22:38,330
>> And if you want to do
that event by yourself,

362
00:22:38,330 --> 00:22:40,410
it's actually a little bit hard.

363
00:22:40,410 --> 00:22:44,880
So Apple has given that even to you
so that you can just directly use

364
00:22:44,880 --> 00:22:49,610
the event to do something on your own.

365
00:22:49,610 --> 00:22:52,980
Protocols are actually
really, really widely used

366
00:22:52,980 --> 00:22:58,320
in Objective C. Well in
fact, every single app

367
00:22:58,320 --> 00:23:00,870
has something caught app delegate.

368
00:23:00,870 --> 00:23:06,330
Inside of delicate is all of the
protocols for loading the app.

369
00:23:06,330 --> 00:23:12,470
>> Let's just say there is
an event for app did load.

370
00:23:12,470 --> 00:23:18,200
So what should happen after you've
created an app, after you open the app,

371
00:23:18,200 --> 00:23:22,630
after you close the app, or after
you put the iPhone to sleep.

372
00:23:22,630 --> 00:23:27,480
These are all events that has
already been given to you.

373
00:23:27,480 --> 00:23:34,730
And originally inside these particles
there will be no implementation.

374
00:23:34,730 --> 00:23:39,750
Apple just told you that this function
will happen when some event happens,

375
00:23:39,750 --> 00:23:44,380
but what you do with that
function is completely up to you.

376
00:23:44,380 --> 00:23:49,290
>> Delegation is basically
telling the class

377
00:23:49,290 --> 00:23:53,060
that you should handle these protocols.

378
00:23:53,060 --> 00:23:55,340
It's a little bit
confusing, but it will be

379
00:23:55,340 --> 00:23:59,380
much clearer when we do
the s codes in action.

380
00:23:59,380 --> 00:24:04,760
Delegation on protocol is actually a
highly robust mechanism in the sense

381
00:24:04,760 --> 00:24:08,160
that if we do delegation
to a specific class,

382
00:24:08,160 --> 00:24:12,400
we can essentially handle
all kinds of events

383
00:24:12,400 --> 00:24:17,040
using any class we have,
very convenient tool.

384
00:24:17,040 --> 00:24:21,530
>> So one quick example for
delegation on protocol

385
00:24:21,530 --> 00:24:24,120
will be what I just talked about.

386
00:24:24,120 --> 00:24:26,720

387
00:24:26,720 --> 00:24:30,890
This protocol specifically is called
tableview [INAUDIBLE] select role

388
00:24:30,890 --> 00:24:35,480
at [? index ?] [? past. ?] So this an
event that would be caught when you

389
00:24:35,480 --> 00:24:39,710
actually tap on a specific
cell in your tableview,

390
00:24:39,710 --> 00:24:43,570
let's just say in your mail
or in your contacts app.

391
00:24:43,570 --> 00:24:48,180
>> Inside a function there was
originally doing nothing.

392
00:24:48,180 --> 00:24:51,950
The function doesn't
do anything by default.

393
00:24:51,950 --> 00:24:55,540
But you can specify
what the function does,

394
00:24:55,540 --> 00:24:59,610
given what you want out of your app.

395
00:24:59,610 --> 00:25:01,610
Very convenient tool.

396
00:25:01,610 --> 00:25:06,840
And with all that
being said, I basically

397
00:25:06,840 --> 00:25:11,430
cover some very basic syntax and
fundamental concept for Objective C

398
00:25:11,430 --> 00:25:15,860
programming, and we can do some s code.

399
00:25:15,860 --> 00:25:17,980
Much more exciting.

400
00:25:17,980 --> 00:25:21,070
So s code is actually a
little bit overwhelming

401
00:25:21,070 --> 00:25:23,330
when you open it for the first time.

402
00:25:23,330 --> 00:25:26,640
>> One quick note, so if you
want to do iOS development,

403
00:25:26,640 --> 00:25:29,630
I highly recommend you have a Mac.

404
00:25:29,630 --> 00:25:33,930
Because doing iOS development on
Windows is really, really hard.

405
00:25:33,930 --> 00:25:37,560
It's doable, but it's really hard.

406
00:25:37,560 --> 00:25:40,610
And you definitely do
not want to use g edit.

407
00:25:40,610 --> 00:25:47,950
So in s code we have
several different areas.

408
00:25:47,950 --> 00:25:53,050
When you first open up s code
you will see a navigation area,

409
00:25:53,050 --> 00:25:57,470
which basically shows you all the
files that is in your current project.

410
00:25:57,470 --> 00:26:03,590
>> You have a toolbar area, which
is basically managing views,

411
00:26:03,590 --> 00:26:08,570
or some little quick
tools about s code itself.

412
00:26:08,570 --> 00:26:11,140
And this is the actual editor area.

413
00:26:11,140 --> 00:26:15,900
This area is very similar g edit,
but much better than g edit.

414
00:26:15,900 --> 00:26:21,150
And in this right area, is
called the utility area.

415
00:26:21,150 --> 00:26:27,170
The area becomes really handy when
you're creating interface or specifying

416
00:26:27,170 --> 00:26:30,070
some quick setups for your app.

417
00:26:30,070 --> 00:26:34,570
>> And the final area is the debugging.

418
00:26:34,570 --> 00:26:37,970
This area contains the console.

419
00:26:37,970 --> 00:26:43,170
So whenever you say printf,
or nslog in our case,

420
00:26:43,170 --> 00:26:47,330
all your results are
going to be printed here.

421
00:26:47,330 --> 00:26:48,260
All right?

422
00:26:48,260 --> 00:26:52,090
I guess we can really quickly do
an example for iOS programming.

423
00:26:52,090 --> 00:26:54,220
And let's actually open up s code.

424
00:26:54,220 --> 00:26:57,210

425
00:26:57,210 --> 00:27:01,346
So every time you open up s code, it's
going to show up something like that.

426
00:27:01,346 --> 00:27:03,220
It's going to ask you
what do you want to do?

427
00:27:03,220 --> 00:27:06,830
Do you want to start something
random, a playground, basically you

428
00:27:06,830 --> 00:27:11,250
can just test code without
actually committing to any app.

429
00:27:11,250 --> 00:27:13,020
>> Do you want to create a new project?

430
00:27:13,020 --> 00:27:16,660
Or do you want to continue
working on the existing project?

431
00:27:16,660 --> 00:27:20,270
In our case we're going
to create a new project.

432
00:27:20,270 --> 00:27:22,980
So it's really nice, s
code actually has already

433
00:27:22,980 --> 00:27:26,820
given you some templates
for creating objects.

434
00:27:26,820 --> 00:27:32,680
If you want to do a game, s code
actually has a game template for you,

435
00:27:32,680 --> 00:27:36,890
has page based applications,
tab based application.

436
00:27:36,890 --> 00:27:39,280
In this case, we're going
to do something very simple,

437
00:27:39,280 --> 00:27:43,230
and we're going to use a
single view application.

438
00:27:43,230 --> 00:27:48,270
>> After that just what you want to call
your product, and what's your name,

439
00:27:48,270 --> 00:27:52,760
what's your identifier, and
what language do you use.

440
00:27:52,760 --> 00:27:57,060
Here we do not want to
check using Core Data.

441
00:27:57,060 --> 00:28:00,170
Core Data is basically a databasing iOS.

442
00:28:00,170 --> 00:28:05,360
If you do Core Data, s
code is going to define

443
00:28:05,360 --> 00:28:07,710
a lot more complicated classes for you.

444
00:28:07,710 --> 00:28:12,740
So to keep everything simple, we're
just going to do without Core Data

445
00:28:12,740 --> 00:28:15,290
right now.

446
00:28:15,290 --> 00:28:18,030
>> The problem we're going to be
using is that-- the problem

447
00:28:18,030 --> 00:28:23,770
we're going to be creating is that we
basically want to import Mario from C

448
00:28:23,770 --> 00:28:25,437
to an iOS app.

449
00:28:25,437 --> 00:28:26,645
So let's call that Mario-iOS.

450
00:28:26,645 --> 00:28:31,230

451
00:28:31,230 --> 00:28:34,880
Of course you specify what you
want to put in your project.

452
00:28:34,880 --> 00:28:37,870
And there we go.

453
00:28:37,870 --> 00:28:41,390
>> So this is a little bit
overwhelming, but this is actually

454
00:28:41,390 --> 00:28:43,540
what we just saw on the slides.

455
00:28:43,540 --> 00:28:49,710
And the first area we see right now
is basically project configuration.

456
00:28:49,710 --> 00:28:53,390
So everything you want to do
project, what kind of device,

457
00:28:53,390 --> 00:28:58,810
let's just say what kind of device
do you want your app to appear on?

458
00:28:58,810 --> 00:29:01,280
Is it iPhone, iPad or universal?

459
00:29:01,280 --> 00:29:04,660
So device orientation, all this stuff.

460
00:29:04,660 --> 00:29:08,490
Not very important,
but could be, but this

461
00:29:08,490 --> 00:29:11,050
is a place where you set up
your project if you actually

462
00:29:11,050 --> 00:29:15,180
want to deploy to the Apple store.

463
00:29:15,180 --> 00:29:20,420
>> All right, let's look at
something that is inside our code.

464
00:29:20,420 --> 00:29:22,360
Let's go through the file navigator.

465
00:29:22,360 --> 00:29:30,140
And these are all the files that already
came with the template, very nice.

466
00:29:30,140 --> 00:29:35,980
So when we click one of them
this is what it looks like.

467
00:29:35,980 --> 00:29:38,530
Very similar to g edit.

468
00:29:38,530 --> 00:29:41,340
But you can see that the
syntax highlighting is probably

469
00:29:41,340 --> 00:29:42,780
a little bit nicer.

470
00:29:42,780 --> 00:29:45,610
And it's actually much more
powerful than g editing.

471
00:29:45,610 --> 00:29:49,970
And you can auto complete
a lot of things for you,

472
00:29:49,970 --> 00:29:52,370
as we will see very quickly.

473
00:29:52,370 --> 00:29:54,100
>> Let's open the debugging area as well.

474
00:29:54,100 --> 00:30:02,790

475
00:30:02,790 --> 00:30:07,000
All right, as we can see,
the console is right here.

476
00:30:07,000 --> 00:30:13,840
This is what you're going to see where
you're in printf or nsloging something.

477
00:30:13,840 --> 00:30:17,155
So without further ado, let's actually
compile the app and see what happens.

478
00:30:17,155 --> 00:30:20,000

479
00:30:20,000 --> 00:30:23,410
One essential feature for
s code, is that s code

480
00:30:23,410 --> 00:30:25,850
comes with an iPhone simulator.

481
00:30:25,850 --> 00:30:29,820
So you don't need to have an
iPhone to try your project,

482
00:30:29,820 --> 00:30:34,440
s code can simulate that for
you, as we can see right now.

483
00:30:34,440 --> 00:30:36,406
>> It's pretty nice.

484
00:30:36,406 --> 00:30:38,640
It's taking a little
bit of time to compile

485
00:30:38,640 --> 00:30:43,040
and basically we have
an empty application,

486
00:30:43,040 --> 00:30:44,640
which actually does nothing.

487
00:30:44,640 --> 00:30:46,175
But it compiles.

488
00:30:46,175 --> 00:30:47,380
It's pretty awesome.

489
00:30:47,380 --> 00:30:50,200
It's much better than C, huh?

490
00:30:50,200 --> 00:30:52,130
All right, then let's
try to add something.

491
00:30:52,130 --> 00:30:56,050

492
00:30:56,050 --> 00:31:02,650
One file that is a little bit
weird here is called storyboard.

493
00:31:02,650 --> 00:31:08,020
This is actually a great,
awesome feature for s code.

494
00:31:08,020 --> 00:31:14,170
Because in s code, you can actually drag
and drop elements onto the interface

495
00:31:14,170 --> 00:31:17,430
and it will directly show up.

496
00:31:17,430 --> 00:31:18,055
Let's try that.

497
00:31:18,055 --> 00:31:21,230

498
00:31:21,230 --> 00:31:27,236
>> We drop a label here, "Hello World!!!"

499
00:31:27,236 --> 00:31:29,740
We can center that.

500
00:31:29,740 --> 00:31:30,970
Pretty cool.

501
00:31:30,970 --> 00:31:33,915
Now let's run this stop simulation.

502
00:31:33,915 --> 00:31:36,940

503
00:31:36,940 --> 00:31:38,700
Here we have "Hello World!!!"

504
00:31:38,700 --> 00:31:40,810
We didn't even do any coding yet.

505
00:31:40,810 --> 00:31:42,750
What the heck is happening?

506
00:31:42,750 --> 00:31:45,880
This is how powerful
Interface Builder can be.

507
00:31:45,880 --> 00:31:48,030
Somebody even said that
you can probably just

508
00:31:48,030 --> 00:31:52,800
complete an app without writing
probably a thousand lines of code

509
00:31:52,800 --> 00:31:54,820
just by using the Interface Builder.

510
00:31:54,820 --> 00:31:59,680
But it's probably not
the best way to do it.

511
00:31:59,680 --> 00:32:01,670
>> Now let's actually get down to coding.

512
00:32:01,670 --> 00:32:04,860

513
00:32:04,860 --> 00:32:08,330
So the structure for the file
is actually really interesting

514
00:32:08,330 --> 00:32:15,610
because, as you may see, there
is no main function anywhere.

515
00:32:15,610 --> 00:32:17,466
See?

516
00:32:17,466 --> 00:32:19,340
As we mentioned before,
you can see that this

517
00:32:19,340 --> 00:32:22,830
is an implementation file
for a specific class.

518
00:32:22,830 --> 00:32:25,690
But there is no main anywhere.

519
00:32:25,690 --> 00:32:27,490
So where is main?

520
00:32:27,490 --> 00:32:31,970
Actually, there is a main, but the
main is actually hidden from you.

521
00:32:31,970 --> 00:32:34,560
The main is here.

522
00:32:34,560 --> 00:32:37,120
That looks familiar.

523
00:32:37,120 --> 00:32:41,000
>> So basically what iOS
is doing inside main

524
00:32:41,000 --> 00:32:43,540
is that whenever main is
called, which is basically

525
00:32:43,540 --> 00:32:49,000
whenever the app is executed, it
creates a object called AppDelegate.

526
00:32:49,000 --> 00:32:52,980

527
00:32:52,980 --> 00:32:57,350
As I mentioned before, the entire
app is actually an object by itself.

528
00:32:57,350 --> 00:33:02,270
So in this way, basically the
iOS app is telling the compiler

529
00:33:02,270 --> 00:33:05,540
that OK, I'm going to create
a product called AppDelegate,

530
00:33:05,540 --> 00:33:07,620
and that is going to be my app.

531
00:33:07,620 --> 00:33:09,640
So you need to go
through that AppDelegate

532
00:33:09,640 --> 00:33:12,040
and see what that guy's doing.

533
00:33:12,040 --> 00:33:14,850
My job is done for me.

534
00:33:14,850 --> 00:33:22,070
>> And in AppDelegate you can see that
there are some really weird functions,

535
00:33:22,070 --> 00:33:25,290
well actually methods, that
Apple has already given you.

536
00:33:25,290 --> 00:33:27,464
What are these?

537
00:33:27,464 --> 00:33:31,010
These are actually just protocols
that I was talking about.

538
00:33:31,010 --> 00:33:35,670
So these are events that Apple
has given you to start with.

539
00:33:35,670 --> 00:33:38,050
There is nothing in some
of the functions right now,

540
00:33:38,050 --> 00:33:40,820
but if we want to initialize
something for our app

541
00:33:40,820 --> 00:33:46,140
before getting into displaying
any view, we do that here.

542
00:33:46,140 --> 00:33:51,150
>> You can just read the name and I guess
the event is actually really clear.

543
00:33:51,150 --> 00:33:54,160

544
00:33:54,160 --> 00:33:58,350
So now main has created
an object for AppDelegate.

545
00:33:58,350 --> 00:34:05,220
And what AppDelegate is going to do
is actually also hidden from you.

546
00:34:05,220 --> 00:34:09,250
The AppDelegate is going to start
loading the ViewController stock.

547
00:34:09,250 --> 00:34:13,170
So it's basically going to start
loading up all the views that you have

548
00:34:13,170 --> 00:34:17,500
and just render the view
based on the hierarchy.

549
00:34:17,500 --> 00:34:21,280
>> So in this case we only have
one view, which is here.

550
00:34:21,280 --> 00:34:25,060
So that is the only view
that's going to be called.

551
00:34:25,060 --> 00:34:28,159
The ViewController logic is right here.

552
00:34:28,159 --> 00:34:32,159
This is the code that actually
controls the view we just saw.

553
00:34:32,159 --> 00:34:33,679
All right, let's do something here.

554
00:34:33,679 --> 00:34:44,030

555
00:34:44,030 --> 00:34:50,560
So viewDidLoad sounds like an event,
when in fact this is also a delegate,

556
00:34:50,560 --> 00:34:52,500
this is also a protocol.

557
00:34:52,500 --> 00:34:56,350
>> So whatever the view is loaded,
everything inside the function

558
00:34:56,350 --> 00:34:57,920
will be called.

559
00:34:57,920 --> 00:35:02,840
In this case we should see "Hello
Tianyu!" if we run the program.

560
00:35:02,840 --> 00:35:09,820

561
00:35:09,820 --> 00:35:12,842
It's getting a little bit slow
compiling storyboard files.

562
00:35:12,842 --> 00:35:15,440

563
00:35:15,440 --> 00:35:18,190
Well indeed, we do see an output for it.

564
00:35:18,190 --> 00:35:20,720
It's pretty cool.

565
00:35:20,720 --> 00:35:22,000
Now let's actually do Mario.

566
00:35:22,000 --> 00:35:25,400

567
00:35:25,400 --> 00:35:27,625
I'm going to define the
function very quickly.

568
00:35:27,625 --> 00:35:31,510

569
00:35:31,510 --> 00:35:54,245
marioWithLevels: (int)level results.

570
00:35:54,245 --> 00:36:01,120

571
00:36:01,120 --> 00:36:06,410
>> All right, this is actually the awesome
feature of s code auto completion.

572
00:36:06,410 --> 00:36:10,680
So when you write for and type enter,
it has already given up the template

573
00:36:10,680 --> 00:36:12,325
for you, which is pretty cool.

574
00:36:12,325 --> 00:36:50,480

575
00:36:50,480 --> 00:36:52,850
That should look really
familiar to you guys.

576
00:36:52,850 --> 00:36:55,940

577
00:36:55,940 --> 00:36:59,680
Sorry, that's my fault.

578
00:36:59,680 --> 00:37:15,790

579
00:37:15,790 --> 00:37:18,120
All right, cool.

580
00:37:18,120 --> 00:37:22,710
That logic should look really familiar
to you guys, especially just Mario.

581
00:37:22,710 --> 00:37:26,140
>> But we will now print out to
the console every single time,

582
00:37:26,140 --> 00:37:29,280
because we want to somehow keep
track of what we are printing.

583
00:37:29,280 --> 00:37:31,810
We're going to use the
results somehow later,

584
00:37:31,810 --> 00:37:35,010
to display the print
out result to the user.

585
00:37:35,010 --> 00:37:37,730
So instead we're just
nslogging everything,

586
00:37:37,730 --> 00:37:42,410
which we're storing everything
into a function call result,

587
00:37:42,410 --> 00:37:44,070
but the logic is exactly the same.

588
00:37:44,070 --> 00:37:48,030

589
00:37:48,030 --> 00:37:51,800
After we finish it, we
just print our results.

590
00:37:51,800 --> 00:37:59,330

591
00:37:59,330 --> 00:38:04,970
>> And here instead of printing out my
name, we're going to call a function.

592
00:38:04,970 --> 00:38:15,340

593
00:38:15,340 --> 00:38:18,090
Let's see what happens.

594
00:38:18,090 --> 00:38:21,240
Oops, obviously.

595
00:38:21,240 --> 00:38:24,320
We do have a nice
little pyramid out here.

596
00:38:24,320 --> 00:38:28,370
This is basically C, we're just
manipulating where you call a function

597
00:38:28,370 --> 00:38:30,010
and how does a function look like.

598
00:38:30,010 --> 00:38:31,560
There's nothing different.

599
00:38:31,560 --> 00:38:34,040
But this is actually
not very exciting here,

600
00:38:34,040 --> 00:38:37,500
because we're not seeing
anything from the iPhone app.

601
00:38:37,500 --> 00:38:42,120
>> So if you actually have an iPhone app--
if you actually have Mario iOS right

602
00:38:42,120 --> 00:38:45,080
now, you're not going
to see anything that

603
00:38:45,080 --> 00:38:49,450
has anything to do with Mario because
all those outputs into a console

604
00:38:49,450 --> 00:38:51,620
are hidden from a user.

605
00:38:51,620 --> 00:38:53,850
This is what you see,
which is "Hello World!!!"

606
00:38:53,850 --> 00:38:55,720
Not good.

607
00:38:55,720 --> 00:39:03,090
Now let's try to make the user see
what exactly we're printing out.

608
00:39:03,090 --> 00:39:06,000
So we don't need to label anymore.

609
00:39:06,000 --> 00:39:09,800
Let's try and figure out something
else that could be useful.

610
00:39:09,800 --> 00:39:12,140
>> There is actually one
element that is called

611
00:39:12,140 --> 00:39:16,460
text field, which could
be very helpful to us.

612
00:39:16,460 --> 00:39:19,880
It basically displays a region
of text that can be edited.

613
00:39:19,880 --> 00:39:22,320
So that looks really helpful.

614
00:39:22,320 --> 00:39:23,810
Now let's drag it and drop it.

615
00:39:23,810 --> 00:39:26,880

616
00:39:26,880 --> 00:39:32,670
Wow, we have a text view
in our view, really fancy.

617
00:39:32,670 --> 00:39:35,430
That's a little bit too big.

618
00:39:35,430 --> 00:39:38,150
Let's make it smaller.

619
00:39:38,150 --> 00:39:40,290
Put it into center.

620
00:39:40,290 --> 00:39:43,760
Make it smaller as well.

621
00:39:43,760 --> 00:39:50,110
>> Now we have a text view, which we could
be used to display our final result.

622
00:39:50,110 --> 00:39:52,860
But right now it's
definitely not going to work

623
00:39:52,860 --> 00:39:56,970
because there is no-- the
ViewController we just

624
00:39:56,970 --> 00:40:03,010
defined doesn't know that
there is a text view out there.

625
00:40:03,010 --> 00:40:06,550
So we need to somehow
link the text view we just

626
00:40:06,550 --> 00:40:11,660
created with the class that
has already come with us.

627
00:40:11,660 --> 00:40:14,860
>> The way we do that is
actually really magical.

628
00:40:14,860 --> 00:40:18,190
So open up storyboard.

629
00:40:18,190 --> 00:40:22,220
There is a special [INAUDIBLE]
called [? assistant ?] [INAUDIBLE].

630
00:40:22,220 --> 00:40:25,190
When you click that, it's
going to open two files.

631
00:40:25,190 --> 00:40:29,425
One is a class and the other one
is a corresponding view for it.

632
00:40:29,425 --> 00:40:31,920
It's very, very helpful.

633
00:40:31,920 --> 00:40:35,950
And let's just goes through the .h file.

634
00:40:35,950 --> 00:40:39,110
Control, this is [INAUDIBLE] logic.

635
00:40:39,110 --> 00:40:47,280
Press Control and drag the
text view into the declaration.

636
00:40:47,280 --> 00:40:48,780
We're going to call that outputView.

637
00:40:48,780 --> 00:40:52,189

638
00:40:52,189 --> 00:40:53,670
Connect.

639
00:40:53,670 --> 00:40:59,420
So here we have declared a new
property for our ViewController class.

640
00:40:59,420 --> 00:41:02,300
And the new property
is just the text view

641
00:41:02,300 --> 00:41:05,000
we've created in the interface building.

642
00:41:05,000 --> 00:41:07,990
So in that way we could
access all the data

643
00:41:07,990 --> 00:41:13,630
and manipulate everything that is inside
the output view, which is awesome.

644
00:41:13,630 --> 00:41:19,260
>> So in our actual code,
let's do something with it.

645
00:41:19,260 --> 00:41:23,810
So this time when we are like printing
out the final result for Mario,

646
00:41:23,810 --> 00:41:28,020
we're in not logging anything.

647
00:41:28,020 --> 00:41:30,080
I mean we could keep
the logging statement.

648
00:41:30,080 --> 00:41:41,490
In addition to that, we
send the readout we just

649
00:41:41,490 --> 00:41:47,622
created to the output view, which
is a UI textview we just created.

650
00:41:47,622 --> 00:41:48,746
Now let's see what happens.

651
00:41:48,746 --> 00:41:54,470

652
00:41:54,470 --> 00:41:56,620
Wow.

653
00:41:56,620 --> 00:41:59,130
We have a pyramid in the app right now.

654
00:41:59,130 --> 00:42:06,720
>> So the user can see our output because
we have copied the output from our code

655
00:42:06,720 --> 00:42:08,045
to our interface.

656
00:42:08,045 --> 00:42:10,950
It's pretty good.

657
00:42:10,950 --> 00:42:14,990
It's actually not that
exciting because we can--

658
00:42:14,990 --> 00:42:18,250
All the app is doing is
showing a pyramid to you,

659
00:42:18,250 --> 00:42:20,520
and there's nothing you can do about it.

660
00:42:20,520 --> 00:42:22,330
It's not particularly exciting.

661
00:42:22,330 --> 00:42:27,840
So now let's make a button
that will clear the views.

662
00:42:27,840 --> 00:42:30,290
Seems that a button will be helpful.

663
00:42:30,290 --> 00:42:33,270
Drag and drop.

664
00:42:33,270 --> 00:42:33,900
Button one.

665
00:42:33,900 --> 00:42:36,730

666
00:42:36,730 --> 00:42:37,320
Button two.

667
00:42:37,320 --> 00:42:49,170

668
00:42:49,170 --> 00:42:52,052
>> So when we click the left
button, the view should clear.

669
00:42:52,052 --> 00:42:53,635
There should be nothing on the screen.

670
00:42:53,635 --> 00:42:56,970
And when we click the
right button, Mario,

671
00:42:56,970 --> 00:42:59,740
the view is going to appear again.

672
00:42:59,740 --> 00:43:05,510
So this way we also do the
magic stuff, control and drag

673
00:43:05,510 --> 00:43:08,740
to the class declaration
in the assistant director--

674
00:43:08,740 --> 00:43:11,600
in the assistant viewer.

675
00:43:11,600 --> 00:43:18,620
In this case we are specifying
that that should be an action.

676
00:43:18,620 --> 00:43:19,120
clearMario.

677
00:43:19,120 --> 00:43:21,650

678
00:43:21,650 --> 00:43:26,830
>> So here we have already created
an action called clearMario,

679
00:43:26,830 --> 00:43:34,210
which is the method that would be called
whenever we press the button clear.

680
00:43:34,210 --> 00:43:41,030
So in our actually code, let's just
put the output text and the output view

681
00:43:41,030 --> 00:43:44,620
into nothing, and that way
it will appear to be clear.

682
00:43:44,620 --> 00:43:47,500

683
00:43:47,500 --> 00:43:57,230
In addition to that, let's create
another method called runMario.

684
00:43:57,230 --> 00:44:00,140

685
00:44:00,140 --> 00:44:03,436
Oh sorry, that should not be a property.

686
00:44:03,436 --> 00:44:12,107

687
00:44:12,107 --> 00:44:13,940
All right, that should
be an action as well.

688
00:44:13,940 --> 00:44:25,780

689
00:44:25,780 --> 00:44:34,740
>> And when that function is
called, we just run Mario ten.

690
00:44:34,740 --> 00:44:37,620

691
00:44:37,620 --> 00:44:39,780
Hopefully that will be fine.

692
00:44:39,780 --> 00:44:41,120
Does it compile?

693
00:44:41,120 --> 00:44:43,920
Yes.

694
00:44:43,920 --> 00:44:45,090
Now we have a view.

695
00:44:45,090 --> 00:44:46,560
We have an output.

696
00:44:46,560 --> 00:44:50,040
And let's just see what happens.

697
00:44:50,040 --> 00:44:52,590
That's gone.

698
00:44:52,590 --> 00:44:54,500
It's back again.

699
00:44:54,500 --> 00:44:57,620
So here we have specified
what kind of function

700
00:44:57,620 --> 00:45:00,400
will be called when
we type in something,

701
00:45:00,400 --> 00:45:03,160
when we press a specific button.

702
00:45:03,160 --> 00:45:07,890
This is basically the
target action scheme

703
00:45:07,890 --> 00:45:12,510
for event driven
programming in Objective C.

704
00:45:12,510 --> 00:45:15,030
>> In addition to that,
it's not very exciting

705
00:45:15,030 --> 00:45:19,810
because we can't really change
how high the pyramid will be,

706
00:45:19,810 --> 00:45:23,640
so we probably want to somehow
get an input from the user

707
00:45:23,640 --> 00:45:29,490
and change the height of the
pyramid based on what they output.

708
00:45:29,490 --> 00:45:32,900
So we're going to do that.

709
00:45:32,900 --> 00:45:38,720
So this time when we call runMario,
we do not just call Mario directly.

710
00:45:38,720 --> 00:46:06,280

711
00:46:06,280 --> 00:46:07,000
This one's title.

712
00:46:07,000 --> 00:46:22,180

713
00:46:22,180 --> 00:46:23,700
>> Delegate.

714
00:46:23,700 --> 00:46:25,160
This is very interesting.

715
00:46:25,160 --> 00:46:26,720
What is a delegate?

716
00:46:26,720 --> 00:46:28,950
I'm going to put self here.

717
00:46:28,950 --> 00:46:31,038
And we're going to see
what that means later.

718
00:46:31,038 --> 00:46:46,380

719
00:46:46,380 --> 00:46:51,120
So here we have basically created a
specific instance called a UI alert

720
00:46:51,120 --> 00:46:52,210
view.

721
00:46:52,210 --> 00:46:54,440
A UI alert view is
basically what you will

722
00:46:54,440 --> 00:46:58,940
see every time something pops
up and asks you for input,

723
00:46:58,940 --> 00:47:03,080
like what will happen when you're trying
to purchase something on an app store.

724
00:47:03,080 --> 00:47:14,250
>> In addition to that, after you
create it, we just show the alert.

725
00:47:14,250 --> 00:47:20,090

726
00:47:20,090 --> 00:47:22,568
All right, let's just quickly
test will that work or not.

727
00:47:22,568 --> 00:47:31,105

728
00:47:31,105 --> 00:47:32,140
That's very cool.

729
00:47:32,140 --> 00:47:55,370

730
00:47:55,370 --> 00:47:59,120
Now let's actually create an
input field for the UI alert.

731
00:47:59,120 --> 00:48:01,170
This is how we do that.

732
00:48:01,170 --> 00:48:07,490
And we should have an
input view for the alert.

733
00:48:07,490 --> 00:48:09,020
Very cool.

734
00:48:09,020 --> 00:48:12,330
Let's just say 10.

735
00:48:12,330 --> 00:48:14,900
>> It's not doing anything right
now because the call actually

736
00:48:14,900 --> 00:48:17,770
didn't change for executing mario.

737
00:48:17,770 --> 00:48:23,470
So this has become a little
bit weird because whenever

738
00:48:23,470 --> 00:48:30,790
we press a button down, whenever we
press a button in the alert view,

739
00:48:30,790 --> 00:48:35,560
something should happen,
but it doesn't happen.

740
00:48:35,560 --> 00:48:37,220
How do we catch that?

741
00:48:37,220 --> 00:48:41,280
How do we know that a user
has dismissed an alert view

742
00:48:41,280 --> 00:48:45,630
and already entered a number, because
right now nothing's actually happening.

743
00:48:45,630 --> 00:48:50,450
>> Well, you might have guessed
it right, delegation.

744
00:48:50,450 --> 00:48:55,440
So in addition to all
these declarations,

745
00:48:55,440 --> 00:49:03,190
we need to add a new delegation to
it called UI alert view delegate.

746
00:49:03,190 --> 00:49:06,440
So that every single
interaction or event

747
00:49:06,440 --> 00:49:10,190
that we're going to have
with the UI alert view

748
00:49:10,190 --> 00:49:14,100
is going to be handled
by our class as well.

749
00:49:14,100 --> 00:49:26,297
>> So in addition to that, will be
alert view click button at index.

750
00:49:26,297 --> 00:49:34,260

751
00:49:34,260 --> 00:49:37,730
This is reached.

752
00:49:37,730 --> 00:49:42,020
So in that case we have
already-- so we have

753
00:49:42,020 --> 00:49:46,210
found out a protocol that
will handle the event when

754
00:49:46,210 --> 00:49:51,320
we click the Done button
on the alert view.

755
00:49:51,320 --> 00:49:55,976
So every time we dismiss the
alert view, this should happen.

756
00:49:55,976 --> 00:49:57,350
Let me just test it very quickly.

757
00:49:57,350 --> 00:50:16,220

758
00:50:16,220 --> 00:50:19,300
Well indeed, we have reached here.

759
00:50:19,300 --> 00:50:22,210
>> So here, what we won't
actually get is actually

760
00:50:22,210 --> 00:50:43,120
get the-- So we want to get out
the text that we have previously

761
00:50:43,120 --> 00:50:45,350
entered in the alert view.

762
00:50:45,350 --> 00:50:48,505
And based on text, we're
going to display Mario.

763
00:50:48,505 --> 00:50:52,336

764
00:50:52,336 --> 00:50:55,480
This very quickly turns out
if it actually works or not.

765
00:50:55,480 --> 00:50:59,476
So in that case, if we input,
let's say, 10, we should see 10.

766
00:50:59,476 --> 00:51:02,740

767
00:51:02,740 --> 00:51:05,210
>> Very good, we do have a number here.

768
00:51:05,210 --> 00:51:06,470
It's pretty good.

769
00:51:06,470 --> 00:51:16,840
Now the last step will be-- So the
last step we need to do right now

770
00:51:16,840 --> 00:51:21,100
is just a call Mario with
level based on the input

771
00:51:21,100 --> 00:51:23,270
that we have put into alert view.

772
00:51:23,270 --> 00:51:26,920
So we need to convert
this string into iOS.

773
00:51:26,920 --> 00:51:33,820

774
00:51:33,820 --> 00:51:35,496
Static overflow is very awesome.

775
00:51:35,496 --> 00:51:44,930

776
00:51:44,930 --> 00:51:51,182
And then we just call self
marioWithLevels value.

777
00:51:51,182 --> 00:51:54,550

778
00:51:54,550 --> 00:51:56,284
Let's see will that
actually work or not.

779
00:51:56,284 --> 00:51:59,070

780
00:51:59,070 --> 00:52:01,550
>> We're already given a pyramid.

781
00:52:01,550 --> 00:52:04,785
Let's try to change the height.

782
00:52:04,785 --> 00:52:06,530
That actually works.

783
00:52:06,530 --> 00:52:07,610
It's pretty cool.

784
00:52:07,610 --> 00:52:10,420
So that now you can just
input any value you want.

785
00:52:10,420 --> 00:52:12,440
Let's just say four.

786
00:52:12,440 --> 00:52:14,260
That's pretty awesome.

787
00:52:14,260 --> 00:52:17,090
So this is basically
a really quick example

788
00:52:17,090 --> 00:52:23,170
for how to create a project in s code
and how to really quickly wire up

789
00:52:23,170 --> 00:52:26,220
some really simple events and functions.

790
00:52:26,220 --> 00:52:28,840
>> So the source is going
to be put online later.

791
00:52:28,840 --> 00:52:33,400
So if you're interested
in how iOS Mario works,

792
00:52:33,400 --> 00:52:38,360
I'm going to put exactly the same
projects onto the CS50 website later.

793
00:52:38,360 --> 00:52:41,260
We're basically done with the
summer, and before we finish

794
00:52:41,260 --> 00:52:45,190
I just want to point you guys to
some really awesome resources that

795
00:52:45,190 --> 00:52:47,550
are available online.

796
00:52:47,550 --> 00:52:52,270
>> Obviously the Apple documentation
is going to be very helpful.

797
00:52:52,270 --> 00:52:57,630
But in addition to that, I especially
recommend four sources, code school,

798
00:52:57,630 --> 00:53:02,120
tree house, AppCoda and WWDC videos.

799
00:53:02,120 --> 00:53:07,270
Code school and tree house are
two online educating websites,

800
00:53:07,270 --> 00:53:10,210
which specifically focus
on software engineering.

801
00:53:10,210 --> 00:53:16,930
Especially for code school, they
have really good tutorial on iOS.

802
00:53:16,930 --> 00:53:19,550
>> That is a really quick example for it.

803
00:53:19,550 --> 00:53:22,980
They actually create a really cute--
look at that little cute iPhone

804
00:53:22,980 --> 00:53:24,920
dude over there, it's pretty awesome.

805
00:53:24,920 --> 00:53:31,010
And the way they explain Objective
C syntax is perfectly clear.

806
00:53:31,010 --> 00:53:32,230
Tree house is the same.

807
00:53:32,230 --> 00:53:34,660
And AppCoda is a forum.

808
00:53:34,660 --> 00:53:38,130
It's actually a blog that was run
by a really experienced Objective C

809
00:53:38,130 --> 00:53:39,120
programmer.

810
00:53:39,120 --> 00:53:43,950
And all those tutorials in AppCoda are
pretty short and easy to implement,

811
00:53:43,950 --> 00:53:45,390
highly recommended.

812
00:53:45,390 --> 00:53:47,700
>> And if you're a developer,
definitely go check

813
00:53:47,700 --> 00:53:55,660
how the WWDC videos where you can
learn about the latest iOS programming

814
00:53:55,660 --> 00:53:58,250
techniques, APIs and libraries.

815
00:53:58,250 --> 00:54:02,850
So that is pretty much
it for the seminar.

816
00:54:02,850 --> 00:54:03,820
Thank you so much.

817
00:54:03,820 --> 00:54:08,040
And I hope you have fun
creating your own iOS app.

818
00:54:08,040 --> 00:54:09,302