iOS app case study

iPhone App Case Study

Stewart Gleadow
sgleadow@thoughtworks.com
@stewgleadow

Friday, 16 September 11

Why iPhone
development?


YOW Conference

• Workshops November 28-30
• Conference December 1-2
• http://www.yowconference.com.au/
• lisa@yowconference.com


Common features
in iPhone apps


Outline
1. Basic table views
2. Custom table views
3. Dynamic content
4. Master/detail navigation
5. Make it awesome


Games


Camera control


Basic tables


Advanced tables


Forms


Scroll views


Maps


Location awareness


Master/detail navigation


Consuming and
presenting information
from the web


Build up your toolbox


Build up your toolbox

http://cocoawithlove.com/2011/06/process-of-writing-ios-application.html


1. Basic table
view


Property
An Objective C domain model class


Property

@interface Property : NSObject

@property (nonatomic, copy) NSString *address;
@property (nonatomic, copy) NSString *suburb;
@property (nonatomic, copy) NSString *postode;

@property (nonatomic, retain) UIImage *photo;
@property (nonatomic, copy) NSString *summary;

- (NSString *)location;

@end


Property

@interface Property : NSObject

@property (nonatomic, copy) NSString *address;
@property (nonatomic, copy) NSString *suburb;
@property (nonatomic, copy) NSString *postode;

@property (nonatomic, retain) UIImage *photo;
@property (nonatomic, copy) NSString *summary;

- (NSString *)location;

@end

Put logic in your model classes


Property
Make your objects easy to create and conﬁgure


Property
Make your objects easy to create and conﬁgure

+ (Property *)propertyWithAddess:(NSString *)anAddress
suburb:(NSString *)aSuburb
postcode:(NSString *)aPostcode
photo:(NSString *)photoName
summary:(NSString *)aSummary;
{
Property *property = [[[Property alloc] init] autorelease];

property.address = anAddress;
property.suburb = aSuburb;
property.postode = aPostcode;

property.photo = [UIImage imageNamed:photoName];
property.summary = aSummary;

return property;
}

UIViewController

UITableView


UIViewController

UITableView UITableViewDataSource

UITableViewDelegate

UITableViewCell


UITableView


UITableView
Creating your UITableView
UITableView *table;
table = [[UITableView alloc]
initWithFrame:self.view.bounds
style:UITableViewStylePlain];


UITableView
UITableView *table;

Setting up your delegates
table.delegate = self;
table.dataSource = self;


UITableView
UITableView *table;

Setting up your delegates
table.delegate = self;
table.dataSource = self;

Adding the table to the view
[self.view addSubview:table];


UITableViewCell


UITableViewCell
Creating a table cell
- (id)initWithStyle:(UITableViewCellStyle)style
reuseIdentifier:(NSString *)reuseIdentifier;


UITableViewCell

[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:@"RMITCellIdentifier"];


UITableViewCell


Reuse is important


UITableViewCell


Reuse is important

Conﬁguring the cell
cell.textLabel.text = @"title string";
cell.detailTextLabel.text = @"subtitle string";


UITableViewDataSource


How many sections do I have?


- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;



How many rows are in each section?



- (NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section;




What is the cell for a given row/section?




What is the cell for a given row/section?
- (UITableViewCell *)tableView:(UITableView *)aTableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath;


Demo 1:
Basic table view


2. Custom
table view


UITableViewCell

textLabel
imageView
detailTextLabel


UITableViewCell

textLabel
imageView
detailTextLabel

Plus: • backgroundView
• selectedBackgroundView
• contentView

Customising Cells
if (cell == nil)
{
cell = [[[UITableViewCell alloc]
reuseIdentifier:cellIdentifier] autorelease];

self.textLabel.backgroundColor = [UIColor clearColor];
self.textLabel.font = [UIFont boldSystemFontOfSize:14];
self.textLabel.shadowOffset = CGSizeMake(0, 1);

// And a whole lot more
}


Customising Cells
if (cell == nil)
{
cell = [[[UITableViewCell alloc]
reuseIdentifier:cellIdentifier] autorelease];

self.textLabel.font = [UIFont boldSystemFontOfSize:14];
self.textLabel.shadowOffset = CGSizeMake(0, 1);

// And a whole lot more
}

Refactor into our own styled cell class


PropertyCell
A subclass of UITableViewcell


PropertyCell
A subclass of UITableViewcell
reuseIdentifier:(NSString *)reuseIdentifier
{
if ((self = [super initWithStyle:style
reuseIdentifier:reuseIdentifier]))
{
self.textLabel.textColor = [UIColor darkGrayColor];

// More cell styling code goes here
}

return self;
}


Demo 2:
Custom table view


3. Dynamic
content


Backend server

• Hosted on Heroku
• http://rmit-property-search.heroku.com/search

• Written in Ruby
• Uses the Sinatra framework


Server code


Server code

require 'rubygems'
require 'bundler'
require 'erb'
Bundler.require

get '/search' do
@search = params[:q]
erb :properties
end


Server code

require 'rubygems'
require 'bundler'
require 'erb'
Bundler.require

get '/search' do
@search = params[:q] template
erb :properties
end JSON ﬁle


Example JSON


Example JSON
{
"title" : "",
"properties" : [
{
"address" : "60-74 Buckingham Drive",
"suburb" : "Heidelberg",
"postcode" : "3084",
"photo" : "photo1.jpg",
"summary" : "Banyule House, 1839"
},
{
"address" : "3 Macedon Street",
"suburb" : "Sunbury",
"postcode" : "3429" ,
"photo" : "photo10.jpg",
"summary" : "Rupertswood"
},
...
]
}

Networking


Networking
Don’t reinvent
the wheel


Networking
Don’t reinvent
the wheel
• NSURLConnection

• ASIHttpRequest

• LRResty

• AFNetworking

• RestKit


LRResty


LRResty
Performing a GET request
- (IBAction)search
{
[[LRResty client]
get:@"http://rmit-property-search.heroku.com/search"
delegate:self];
}


LRResty
Performing a GET request
- (IBAction)search
{
[[LRResty client]
get:@"http://rmit-property-search.heroku.com/search"
delegate:self];
}

Receiving the delegate callback
- (void)restClient:(LRRestyClient *)client
receivedResponse:(LRRestyResponse *)response;
{
NSData *data = [response responseData];

// convert data to property objects
}


Parsing data


Parsing data
Don’t reinvent
the wheel


Parsing data
Don’t reinvent
the wheel

• JSONKit

• json framework

• YAJL


YAJL


YAJL
Converting NSString or NSData to JSON
- (id)yajl_JSON;


YAJL
Converting NSString or NSData to JSON
- (id)yajl_JSON;

Extracting property data
NSDictionary *jsonDict = [data yajl_JSON];
NSArray *propertiesArray = [jsonDict valueForKey:@"properties"];

NSMutableArray *newProperties = [NSMutableArray array];

for (NSDictionary *dict in propertiesArray)
{
Property *property = [Property propertyWithDictionary:dict];
[newProperties addObject:property];
}


NSDictionary -> Property


NSDictionary -> Property
Pull the values you want out of the dictionary

+ (Property *)propertyWithDictionary:(NSDictionary *)dict
{
return [Property propertyWithAddess:[dict valueForKey:@"address"]
suburb:[dict valueForKey:@"suburb"]
postcode:[dict valueForKey:@"postcode"]
photo:[dict valueForKey:@"photo"]
summary:[dict valueForKey:@"summary"]];
}


Demo 3:
Dynamic content


4. Master/detail
navigation


DetailViewController


Creating the new view controller with a property


Creating the new view controller with a property

- (id)initWithProperty:(Property *)aProperty
{
if ((self = [super initWithNibName:@"DetailViewController"
bundle:nil]))
{
self.property = aProperty;
self.title = @"Property";
}

return self;
}


Updating content in the DetailViewController


Updating content in the DetailViewController
- (void)viewDidLoad;
{
[super viewDidLoad];

self.address.text = self.property.address;
self.location.text = self.property.location;
self.photo.image = self.property.photo;
self.summary.text = self.property.summary;
}


UITableViewDelegate
- (void)tableView:(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath;


UITableViewDelegate
- (void)tableView:(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

• pull out the Property object for selected row

• create a new DetailViewController with that Property

• push the new controller onto the navigation stack


Demo 4:
Master / Detail


5. Make it awesome


What’s missing?


What’s missing?

• Can’t dismiss the keyboard


What’s missing?

• Search does not actually search


What’s missing?

• No progress indicator while loading


What’s missing?

• No progress indicator while loading
• People like pull-to-refresh like Facebook


Demo 5:
Making it awesome


The ﬁnished product


Summary
1. Basic table views
2. Custom table views
3. Dynamic content
4. Master/detail navigation
5. Make it awesome


iPhone App Case Study

Stewart Gleadow
g
sgleadow@thoughtworks.com


Appendix


Links

• https://github.com/lukeredpath/LRResty

• http://gabriel.github.com/yajl-objc/

• https://github.com/jdg/MBProgressHUD

• https://github.com/chpwn/PullToRefreshView

• http://www.heroku.com/

• http://www.sinatrarb.com/


Linking static libraries
and frameworks


Linking static libraries
and frameworks

Other linker ﬂags: -all_load -ObjC


iOS app case study

More Related Content

Viewers also liked

Similar to iOS app case study

More from sgleadow

Recently uploaded

iOS app case study