You are on page 1of 66

@WWCBelfast /

A Head First Introduction
to iOS Development
Matt McComb
About Me
- Graduated from Queen’s University in 2009.
- Began working as an enterprise Java developer.
- Learnt iOS development via Stanford Online.
- Began self-publishing a number of apps.
- Eventually joined Ecliptic Labs - a mobile
development startup as an iOS/Android engineer.
- Now work for Instil as a developer/trainer.
This Talk
The goal of this talk is to familiarise you with the
language, the libraries and the tools used to build
iOS apps.
Before we begin, a brief
history lesson.
Sept 1985
Steve Jobs quits
Apple and starts
May 1985
Steve Jobs stripped
of his executive status
at Apple
Objective-C specification
released by Brad Cox
NeXT release an OS
NeXTSTEP which is
written in Objective-C
Apple buys NeXT for
$429 million and
Jobs becomes Apple
OSX released and
based on
… 8 Years Later …
The iPhone 1 was released in

Quiz - how many apps were
released in its first year of
iOS Development Ecosystem
1. The Language
Objective-C is the default language for native iOS
apps. It’s a superset of C which adds OOP support.
As a compiled language it’s fast and has a low
memory footprint.
With the iOS 8 announcement Apple
introduced Swift.
- Interoperable with Objective-C
- Compiles to LLVM byte code
- Adds modern language features e.g.
generics support, functional
programming paradigms, a REPL
(read-eval-print-loop) etc.
2. The SDK
iOS Architecture
iOS Device (iPhone / iPad)
iOS Operating System
Core Services
AppKit and Foundation
Most applications will require only frameworks from the
top layer (AppKit). The exception is Foundation which
(excuse the pun) provides the foundations for iOS
3. The Tools
Xcode is the Apple provided IDE for Mac and iOS
development. It can be downloaded from the Mac App
Store and comes bundled with the iOS and Mac SDKs.
Also includes:
- LLVM Compiler
- Interface Builder
- Instruments
Learning by Example
building the SpeedTap sample app
The SpeedTap App
A simple single screen application which tests a user’s
reactions. The user is challenged to tap a button to
start a timer and then tap once more to stop it. They
must stop the timer as close to the 5 second interval
as possible.
1 2 3
Creating the Project
- Open Xcode (assuming 5.0 and iOS 7).
- File > New > Project
- Choose the ‘Single View Application’ template
- Product Name: SpeedTap
- Organization Name: {Your Name}
- Company Identifier: {You Domain}
- Run your application by selecting Product > Run.
Using the Xcode Simulator
To run your project on the Xcode simulator use the
⌘+r shortcut or select Product > Run from the main
menu bar.
Configure the target device and simulated OS using
the scheme selector.
1. Defining the User Interface
Code vs. Interface Builder
There are two approaches to defining user interfaces
in iOS. We can either hand-craft them with code or
use Xcode’s visual editor, Interface Builder.
View Creation in Code
Code vs. Interface Builder
Pros Cons
Code More control Hard to visualize
Easier to re-use Timely to create
Interface Builder Quick to create Merge conflicts
Easy to visualize
Overall application flow
is more obvious when
using storyboards
Apple’s preferred
As of Xcode 5.0 all project templates by default have a
Storyboard. A Storyboard is a description of all the
scenes in an application and their transitions. This
provides a single location where a developer can see
the overall flow of the application. Storyboards are
edited using Interface Builder.
Defining the User Interface
Step 1 - The Title Label
- Open the project’s main.storyboard file.
- Drag a label onto the canvas and set the
attributes as follows:
- Text: SpeedTap
- Font: Arial Rounded MT Bold (Size 27)
Defining the User Interface
Step 2 - The Description Label
- Again, drag a label onto the canvas and set
the attributes as follows:
- Text: (see pic)
- Font: Helvetica Neue (size 17)
- Text Style: Attributed (with different
coloured text for ‘Go’ and ‘Stop’).
- Number of Lines: 3
Defining the User Interface
Step 3 - The Elapsed Time Label
- Again, drag a label onto the canvas and set
the attributes as follows:
- Text: 00:00
- Font: Apple SD Gothic Neo Regular (size
- Background Colour: Light Gray
Defining the User Interface
Step 4 - The Go Button
- Drag a button onto the canvas.
- Title: Go
- Font: System (size 15)
- Background Colour: Light Green
- Text Colour: White
Defining the User Interface
Step 5 - The Stop Button
- Drag a button onto the canvas.
- Title: Stop
- Font: System (size 15)
- Background Colour: Light Red
- Text Colour: White
- Visibility: Hidden
Defining the User Interface
Step 6 - The Results Label
- Again, drag a label onto the canvas and set
the attributes as follows:
- Text: Blank
- Font: System (size 17)
- Visibility: Hidden
- Number of Lines: 3
2. Creating the View Controller
View Controllers
We have now defined our view. If you run the
application you will see the various components on
screen. However, they are static - e.g. don’t respond
to events such as taps. To make our view dynamic we
need to attach behaviours to the components. To do
this we need a view controller.
What is a View Controller?
The term ‘controller’ is a reference to the Model-View-
Controller (MVC) software design pattern. In this
pattern we have three distinct modules:
1. Model - encapsulates data and behaviour.
2. View - the user interface.
3. Controller - binds the model and the view.
Model View
Interacts with UI
user action
(Interface Builder)
(View Controller)
Presents the scene
defined in Interface
Builder to the user.
1. Updates the elapsed time label.
2. Handles ‘go’/‘stop’ button
events arriving from the view.
1.Tracks the time between
the user tapping ‘go’ and
2. Notifies the controller after
every elapsed 0.01 second
View Controllers in iOS
View controllers in iOS are subclasses of the
UIViewController class which defines default
behaviours for handling view lifecycle events.

Xcode has already created our view controller
subclass - and given it the imaginative name
To alter the state of the view from the controller we
need to be able to reference its controls. We can
achieve this by creating bindings between the
Interface Builder view and our ViewController class.
Binding View Controls
To bind to controls we need to create properties with
the IBOutlet annotation:
@property(nonatomic, strong) IBOutlet UIButton *startStopButton;
Binding View Events
To bind events from controls to methods in the view
controller we create methods with a return type of
- (IBAction)tappedStartButton:(UIButton*)startButton;
Step 7 - Define IBOutlet Properties
Create IBOutlet properties for the view components that
will need updated during the execution of the program -
the elapsed time and results labels as well as the start
and stop buttons.
Step 8 - Bind the Properties
Open main.storyboard in Interface Builder and bind the
newly defined properties to their associated user interface

Step 9 - Create ‘Go’ and ‘Stop’ Button Action
Add a methods to the ViewController class to handle tap
events from the Go and Stop buttons. The Go button
should hide itself when tapped, displaying the Stop button
and vice-versa.

3. Defining the Model
The SpeedTap Model
We will now implement the model component of our
application. The model will need to:
1. Time a 5 second interval
2. Store the time at which it was started
3. Notify the model as each 0.01s elapses
The SpeedTap Model
Step 10 - Create a Stopwatch class
The Stopwatch class should subclass the NSObject root
object type and add the following property definitions to
the Stopwatch.h file:
@property (nonatomic, assign) double targetTime;

@property (nonatomic, assign) double elapsedTime;;

@property (nonatomic, assign) double startTime;;
The SpeedTap Model
Step 11 - Create an Initialiser Method
Add an initialiser method to the Stopwatch class that
takes a single parameter - the target time of the
The SpeedTap Model
Step 12 - Add a Start Method
Add a start method to the stopwatch class that will start a
timer and record its start time. Use the Apple provided
NSTimer class to implement the timing component.
NB - the timer should update the elapsed time property of
the Stopwatch class every 0.01 seconds.
The SpeedTap Model
Step 13 - Add a Stop Method
Add a stop method that can be called to stop the timer.
4. Binding Model <-> View
The SpeedTap Model
Step 14 - Create a Stopwatch Property
Add a property definition to the ViewController header to
store a Stopwatch object.
The SpeedTap Model
Step 15 - Initialise and Start the Stopwatch in the ‘Go’
Button Action
In the ViewController’s go button action create and
initialise the stopwatch property with a target time of 5

The SpeedTap Model
Step 15 - Stop the Timer in the ‘Stop’ Button Action
In the ViewController’s stop button action call the
stopwatch’s stop method.
The SpeedTap Model
Step 16 - Observe the Stopwatch’s Elapsed Time
In order to update the elapsed time label in the view we
need to observe the Stopwatch’s elapsed time property.
We can use a Coca mechanism called KVO (Key-Value-
Observation) to do so.
The SpeedTap Model
Step 17 - Displaying the Player’s Reaction Time
After pressing the stop button we want to display the
user’s reaction time. Calculate the time difference
between the target time (5s) and the Stopwatch’s elapsed
time and display the result in the results label.
Interested in Learning More?
Stanford CS193P
Stanford CS193P - Developing iOS 7
Apps for iPhone and iPad.
- Online version of Stanford’s iOS course
from the Computer Science pathways.
- Distributed via iTunesU
- Free!
Big Nerd Ranch
iOS Programming: Big Nerd Ranch Guide
- Best available beginners book on iOS
- Written by Aaron Hillegass - one of the most
prominent iOS authors/bloggers.