1. European
Innovation
Academy
Introduction to
Lesson 1
Making your first App
Zakery Kline • Zakery@berkeley.edu
coding
in
Obj-C
© Zakery Kline 2014. All rights reserved. You may not duplicate or distribute, in part or in whole, this document without the written
expressed permission of Zakery Kline.

2. European
Innovation
Academy
Anyone can make an app.
If this is your first time making an app, don’t
worry.
I started from scratch over a winter-break and
made a fully working app on my own (in four
weeks). If I can do it— so can you!

3. European
Innovation
Academy
Resources
Before delving in, here are some resources
that I use on a daily basis when prototyping,
designing, and coding my own apps.

4. European
Innovation
Academy
Resources: Prototyping
Before coding an app, you should map out its
wireframe (a sketch of the flow of the screens
you want a user to see).
In the app store search for: POP- Prototyping
on Paper
Its a free app that lets you take pictures of your
sketches and let your users test your mockup.

5. European
Innovation
Academy
Resources: Design
Not a Photoshop Guru? Not a problem. There
are many great resources for the icons and
backgrounds you will use in your apps.
Check out:
www.thenounproject.com - icons of everything
www.iconmonstr.com - free icons
www.subtlepatterns.com - background patterns

6. European
Innovation
Academy
Resources: Photoshop, but easier.
I encourage you to check out Sketch (available
in the Mac app-store) to make any custom
elements and layout your app before coding.
It’s easier than Photoshop and designed just
for this purpose.
You can also layout everything in Keynote.
You should get Keynote anyways if you want
to make a winning slide-deck. ;)

7. European
Innovation
Academy
Into the Code

8. European
Innovation
Academy
Getting Familiar with the Basics
When coding for any major platform (iOS,
Android, MacOS, etc) there are some
rudimentary elements that you should be
familiar with.

9. European
Innovation
Academy
Getting Familiar with the Basics Data Types
integers/ floats – numbers ex. 4.00
(integers and floats are different, but we don’t need to worry about that right now)
These include elements include:
Booleans – TRUE or FALSE (YES or NO)
Strings — a list of characters ex. “Hello World.”
Array—A list of objects (such as a list of strings)
ex. [“Hello World!” , “Goodbye World!”];
Dictionary — like a real dictionary, there is a
word and definition relationship (we call the
‘word’ a ‘key’ and the ‘definition’ a ‘value’)
ex. [“Hello” ; “a common salutation”];

10. European
Innovation
Academy
What is an Object?
Ex. A Student Object would be:
String: First Name
String: Last Name
Integer: Age
String: Eye Color
Boolean: Has Brown Eyes? (YES or NO)
An Object is a ‘thing’ with traits.
Integer: Grade Level (#)

11. European
Innovation
Academy
LOOPS
When coding you will often tell your program
to go in a circle and change a small element (a
LOOP)
Loops come in a variety of forms, but you will
most likely see ‘while’ and ‘for’ loops.
In english, you would say:
“For when the following condition is true, do
this.”
We use this in code to do things like:
“For when we have less than the TOTAL NUMBER OF STUDENTS,
add THE NEXT STUDENT to our STUDENT NAME ARRAY (list).”

12. European
Innovation
Academy
IF Statements
When we want to check if something has been
completed or check if something is True (does
STUDENT have BLUE EYES), we use an ‘if
statement’.
An example of how we could use this is if we
want to delete every student with brown eyes
from our STUDENT array, we can loop through
the array and check each STUDENT object to
see: if EYES != (this means “does not equal”)
BROWN, add STUDENT to the
NOBROWNEYES array.

13. European
Innovation
Academy
XCode and iOS Apps

14. European
Innovation
Academy
Getting Started
You will need XCode which you can download
for free in the app store
XCode is a coding environment (IDE) that will
allow you to build your apps and test them.

15. European
Innovation
Academy
Making your first project
There are many prebuilt templates to build
your apps from, but we will start with the
simplest: A Single View Application

16. European
Innovation
Academy
Making your first project
Give your app a name! It is customary to use
your name or your company’s name as the
company identifier as shown above.

17. European
Innovation
Academy
Welcome to the Xcode Environment
On the next few slides I will show you how
XCode works.

18. European
Innovation
Academy
Welcome to the Xcode Environment
this button will run your code. go ahead and click it!
These are all the files in your app.
This is where all your code,
graphics, and libraries (other
people’s prebuilt code) go.
We will go more in depth later
about what each of these files and
folder groups do.

19. European
Innovation
Academy
Welcome to the Xcode Environment
This panel allows you to show and
hide parts of XCode. You can turn
on and off the side panels to make
more room for coding or other
tasks that we will come to.
The Assistant Editor button
allows you to split screen
between two files. This is
extremely useful for linking up
code to your layout as we’ll see
soon.

20. European
Innovation
Academy
Understanding the App
When you launch your app, the
AppDelegate file is called. In
iOS, we rarely mess with the
AppDelegate because most of
our code is handled by
something called the
ViewController.
Your ViewController Files
control each screen (and
sometimes just part of a screen)
of your app.
Let’s explore the StoryBoard
next.

21. European
Innovation
Academy
StoryBoard
From our Single View
template selection, our
storyboard is automatically
populated with a single
“View Controller.”
Here is where we can add
elements such as other
ViewControllers to our
storyboard to make new
screens or add elements to
existing View Controllers
such as text labels,time
pickers and scroll wheels,
and text entry fields.

22. European
Innovation
Academy
Laying out your App
Let’s build the way your app will look.
Let’s put a textfield for people to type into the app by dragging it to the
ViewController.

23. European
Innovation
Academy
Laying out your App
Let’s build the way your app will look.
Next, lets add a button that will do something later.
By double clicking the
“Button” on the
ViewController, we can
rename it. Let’s call it
“Answer”

24. European
Innovation
Academy
Laying out your App
Let’s build the way your app will look.
Lastly, let’s add a text “label” where we will output something from the app.
Let’s rename the label to
say “Ask your Question.”
Hit the run button to run your
code. Look! Your app should
look exactly as you laid it out.

25. European
Innovation
Academy
.h and .m files
You’ll notice that your ViewController files have a .h and .m
The .h stands for “header” and this is where other parts of
your program will look for the acceptable information to
give to the file. For instance, you may declare that your
ViewController can accept some text for the label you
dragged onto it earlier.
The .m stands for “main” and this is where the bulk of the
actual code will go. You can also put some private
functions here that other parts of your app won’t need to
access.
Open up the .h file.
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
* ** *

26. European
Innovation
Academy
ViewController.h : I Do Declare.
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
Here is where you
will declare what is
in your
ViewController’s
interface elements
such as the button
and text label we
created.
These are
comments. To
make a comment,
simply write “//”
before the line and
XCode will not
compile the line as
code.

27. European
Innovation
Academy
ViewController.h : I Do Declare.
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
Please write the following to declare your button and Label
What does it all mean?
This tells the
interface that we
are declaring a
new property. A
lot of Obj-C uses
these “@”
symbols to
differentiate the
code from C.
This refers to the type of
memory we will be
allocating. Don’t worry
about this yet.
You’ll notice when
you were typing
this you could
choose between
IBAction and
IBOutlet.
IBActions are
associated with a
function that takes
place when you
interact with it and
IBOutlets are for..
Outputs.
This is the type
of object/
element we
are declaring.
In Obj-C you
must always
tell it what is
you are
creating.
This is the name of the
variable you are
creating. When you are
creating an Obj-C
variable, it always has a
“*” in front of it.

28. European
Innovation
Academy
ViewController.h : One Last Thing.
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
You’ve declared your variables and labels, but you still need to connect your
code to your storyboard. This is when we use this little guy:
By default you will see a split screen between the “.m” and “.h” files. Navigate
the second screen to your storyboard as follows:

29. European
Innovation
Academy
ViewController.h : One Last Thing.
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
Next to your code
you’ll notice this little
circle.
You can either right click the element on your View Controller or click the circle and
drag it to the corresponding elements like so:
Do this for both your properties.

30. European
Innovation
Academy
ViewController.m: What is all this?
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
This is the same thing as the .h
file. So why is it here? The .m file
is an extension of the .h file (see
the #import “ViewController.h”),
but remember this is where we
place things that can’t be
accessed by other parts of the
application.
This tells the compiler (the thing
that turns your code to 1’s and
0’s) that you are writing the code
for your ViewController
This is the first function you will see
in any iOS app. It is automatically
called when your ViewController
loads on the device. Instance
Functions are written with a “—”
followed by a parenthetical that
says what the function should
return (in this case nothing
indicated by void), followed by the
function name, followed by a pair
of curly brackets that contains the
code of the function.
To call a function we write [TheThingThatHoldsTheFunction TheFunction];
In the case of [super viewDidLoad]; — the ‘super’ class contains the function viewDidLoad and it
is running it (this is a bit circular). You will use this more likely in the following context:
[self MySpecialFunction initWithData: the_data_you_want_your_function_to_use];

31. European
Innovation
Academy
OBJ-C CRASH COURSE
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
To code an iOS app you should know the basic Syntax of a line of code.
Pause
This is a basic String. Notice the @ symbol. This tells the
compiler that you are writing Obj-C and not C which
doesn’t support strings. Obj-C is built entirely on top of
the C language. Apple has done the heavy lifting of
telling C that you are writing a list of characters (as C
only supports single characters)
This will be the most used line of code you use. It tells your program to print something to the
console which is very useful for debugging.
This is the Log Function.
Almost all core functions of
Obj-C begin with “NS”
which comes from
NEXTStep Computers— the
company Steve Jobs
founded after being booted
from Apple. When Apple
bought Next to get Steve
back, Obj-C came with and
is the basis of all modern
Macs today!
Try typing the prefix “NS”
into XCode to see other
functions it auto-suggests to
you.
To tell the compiler
that you are done
with your line of
code, you always
put a semicolon.
In the viewDidLoad function of your app, try writing your own Log
function.
Your Console
(log) will be
here.

32. European
Innovation
Academy
ViewController.m: Let’s Code It!
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
We can make a function using the IBAction that we discussed earlier. Let’s use
the assistant editor to connect our button to our .m file code in the form of a
function

33. European
Innovation
Academy
ViewController.m: Let’s Code It!
When you add your Action, XCode will automatically build the function for you.
this is the name of your function.
This is the type of object your button
is. id means it can be anything and
thus have any properties. The actual
object is called a UIButton.
This is how the function is activated.
Touch Up Inside refers to touching the
button and letting go before
activating the function.
Arguments are the parameters that
your function takes. In this case
whatever sends the action (your
button) initiates the function.

34. European
Innovation
Academy
ViewController.m: Let’s Code It!
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
Look! XCode prebuilt your button’s function. All you have to do is add some code to tell
your app what happens when you touch it. Lets do it!
We declare the data
type of our variable
The name of our
variable
A function in Obj-C that generates a
random number

35. European
Innovation
Academy
ViewController.m: Let’s Code It!
The .m stands for “main” and this is where the bulk of the actual code wi
You can also put some private functions here that other parts of your app
Here is an if statement that checks
if our random_number is greater
than 50. If so it changes the text
property of the OutputLabel
declared in the header file to the
string @”Yes”
We have an underscore
before our OutputLabel
variable because we did
not @synthesize our
OutputLabel in the main
file. The difference is
negligible so don’t worry
about that for now.
Here is the string we
assign to the text property
of the label. Hit Run and try
out your answer
button!

36. European
Innovation
Academy
ViewController.m: Cleaning up
Add this function so that when you touch your textfield, you can dismiss the keyboard by
touching anywhere else on the screen
Let’s add a nice background image (you can google something, but we’ll add some code
to add a pattern to the background from subtlepatterns.com).
First, let’s create a new image asset set for our patterns and drag our images in.
1
2
3
4

37. European
Innovation
Academy
ViewController.m: Cleaning up
Let’s add the background in through code. Add this line of code to your viewDidLoad
Lastly, in Storyboard we can add some static labels and re-adjust our app to be more user
friendly.
You can adjust the
style of your buttons
and labels all here in
the storyboard
without writing any
code (although you
will find that as you
code more you will
do most of your
styling in code).

38. Final Product!
European
Innovation
Academy
Congrats! Now you can make all your life decisions on
your very first app!
It’s not
everything you
need to know,
but it’s a good
start.
Welcome to the
world of iOS
Dev!