@WWCBelfast / queries@womenwhocode.co.uk

A Head First Introduction to iOS

DevelopmentMatt 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.

NeXTSTEP

Sept 1985

1986

Steve Jobs quits Apple and starts

NeXTMay 1985

Steve Jobs strippedof his executive status

at Apple

Objective-C specificationreleased by Brad Cox

1989

NeXT release an OSNeXTSTEP which is

written in Objective-C1996

Apple buys NeXT for

$429 million and Steve

Jobs becomes AppleCEO

1999

OSX released and

based on NeXTSTEP

… 8 Years Later …

The iPhone 1 was released in

2007.

Quiz - how many apps were

released in its first year of

existence?

iOS Development Ecosystem

1. The Language

Objective-C

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.

Swift

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

Media

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 development.

3. The Tools

Xcode

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 Examplebuilding 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

Verbose

Interface Builder Quick to create Merge conflicts

Easy to visualize

Overall application flow is more obvious when using storyboards

Apple’s preferred approach

Storyboards

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 36)

- 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.

https://developer.apple.com/library/ios/documentation/general/conceptual/CocoaEncyclopedia/Model-View-Controller/Model-View-Controller.html

MVC

ModelView

Controller

Interacts with UI

user action

updates

notifies

updates

MVC

Model(Stopwatch)

View (Interface Builder)

Controller(View Controller)

Presents the scenedefined in InterfaceBuilder to the user.

1. Updates the elapsed time label.2. Handles ‘go’/‘stop’ button events arriving from the view.

1.Tracks the time betweenthe user tapping ‘go’ andstop. 2. Notifies the controller afterevery elapsed 0.01 secondinterval.

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

ViewController.

Bindings

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:

- (IBAction)tappedStartButton:(UIButton*)startButton;

Bindings

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.

Bindings

Step 8 - Bind the Properties

Open main.storyboard in Interface Builder and

bind the newly defined properties to their

associated user interface components.

Bindings

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 stopwatch.

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 Controller

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 seconds.

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!

https://itunes.apple.com/gb/course

/developing-ios-7-apps-for/id73364

4550

Big Nerd Ranch

iOS Programming: Big Nerd Ranch

Guide

- Best available beginners book on iOS

development

- Written by Aaron Hillegass - one of the

most prominent iOS authors/bloggers.

http://www.amazon.co.uk/iOS-Progra

mming-Ranch-Guide-Guides/dp/03219

42051/ref=sr_1_1?ie=UTF8&qid=1403

614769&sr=8-1&keywords=big+nerd

+ranch

Questions?