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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie iOS app case study

Ähnlich wie iOS app case study (6)

Mehr von sgleadow

Mehr von sgleadow (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

iOS app case study