2. European
Innovation
Academy
Anyone can make an app.
If this is your ïŹrst 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!
4. European
Innovation
Academy
Resources: Prototyping
Before coding an app, you should map out its
wireframe (a sketch of the ïŹow 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. ;)
9. European
Innovation
Academy
Getting Familiar with the Basics Data Types
integers/ ïŹoats â numbers ex. 4.00
(integers and ïŹoats 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 deïŹnition relationship (we call the
âwordâ a âkeyâ and the âdeïŹnitionâ 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.
18. European
Innovation
Academy
Welcome to the Xcode Environment
this button will run your code. go ahead and click it!
These are all the ïŹles 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 ïŹles 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 ïŹles. 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 ïŹle 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 ïŹelds.
22. European
Innovation
Academy
Laying out your App
Letâs build the way your app will look.
Letâs put a textïŹeld 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 ïŹles
Youâll notice that your ViewController ïŹles 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 ïŹle. 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 ïŹle.
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â ïŹles. 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
ïŹle. So why is it here? The .m ïŹle
is an extension of the .h ïŹle (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 ïŹrst 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 preïŹx â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 ïŹle 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 ïŹle to the
string @âYesâ
We have an underscore
before our OutputLabel
variable because we did
not @synthesize our
OutputLabel in the main
ïŹle. 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 textïŹeld, 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 ïŹnd that as you
code more you will
do most of your
styling in code).