ios app case study

105
iPhone App Case Study Stewart Gleadow [email protected] @stewgleadow Friday, 16 September 11

Upload: sgleadow

Post on 10-May-2015

3.059 views

Category:

Technology


0 download

DESCRIPTION

The slides from a lecture I gave at RMIT doing a case study of a simple property search application.

TRANSCRIPT

Page 1: iOS app case study

iPhone App Case Study

Stewart [email protected]@stewgleadow

Friday, 16 September 11

Page 2: iOS app case study

Why iPhone development?

Friday, 16 September 11

Page 3: iOS app case study

YOW Conference

• Workshops November 28-30

• Conference December 1-2

• http://www.yowconference.com.au/

[email protected]

Friday, 16 September 11

Page 4: iOS app case study

Common featuresin iPhone apps

Friday, 16 September 11

Page 5: iOS app case study

Outline

1. Basic table views

2. Custom table views

3. Dynamic content

4. Master/detail navigation

5. Make it awesome

Friday, 16 September 11

Page 6: iOS app case study

Games

Friday, 16 September 11

Page 7: iOS app case study

Camera control

Friday, 16 September 11

Page 8: iOS app case study

Basic tables

Friday, 16 September 11

Page 9: iOS app case study

Advanced tables

Friday, 16 September 11

Page 10: iOS app case study

Forms

Friday, 16 September 11

Page 11: iOS app case study

Scroll views

Friday, 16 September 11

Page 12: iOS app case study

Maps

Friday, 16 September 11

Page 13: iOS app case study

Location awareness

Friday, 16 September 11

Page 14: iOS app case study

Master/detail navigation

Friday, 16 September 11

Page 15: iOS app case study

Master/detail navigation

Friday, 16 September 11

Page 16: iOS app case study

Consuming and presenting information

from the web

Friday, 16 September 11

Page 17: iOS app case study

Build up your toolbox

Friday, 16 September 11

Page 18: iOS app case study

Build up your toolbox

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

Friday, 16 September 11

Page 19: iOS app case study

Build up your toolbox

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

Friday, 16 September 11

Page 20: iOS app case study

1. Basic table view

Friday, 16 September 11

Page 21: iOS app case study

PropertyAn Objective C domain model class

Friday, 16 September 11

Page 22: iOS app case study

PropertyAn Objective C domain model class

@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

Friday, 16 September 11

Page 23: iOS app case study

PropertyAn Objective C domain model class

@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

Friday, 16 September 11

Page 24: iOS app case study

PropertyMake your objects easy to create and configure

Friday, 16 September 11

Page 25: iOS app case study

PropertyMake your objects easy to create and configure

+ (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;}

Friday, 16 September 11

Page 26: iOS app case study

UITableView

UIViewController

Friday, 16 September 11

Page 27: iOS app case study

UITableView

UIViewController

UITableViewDataSource

UITableViewDelegate

UITableViewCell

Friday, 16 September 11

Page 28: iOS app case study

UITableView

Friday, 16 September 11

Page 29: iOS app case study

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

Creating your UITableView

UITableView

Friday, 16 September 11

Page 30: iOS app case study

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

table.delegate = self;table.dataSource = self;

Creating your UITableView

Setting up your delegates

UITableView

Friday, 16 September 11

Page 31: iOS app case study

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

[self.view addSubview:table];

table.delegate = self;table.dataSource = self;

Creating your UITableView

Setting up your delegates

Adding the table to the view

UITableView

Friday, 16 September 11

Page 32: iOS app case study

UITableView

Friday, 16 September 11

Page 33: iOS app case study

UITableView

Friday, 16 September 11

Page 34: iOS app case study

UITableViewCell

Friday, 16 September 11

Page 35: iOS app case study

UITableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier;

Creating a table cell

Friday, 16 September 11

Page 36: iOS app case study

UITableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier;

Creating a table cell

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

Friday, 16 September 11

Page 37: iOS app case study

UITableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier;

Creating a table cell

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

Reuse is important

Friday, 16 September 11

Page 38: iOS app case study

UITableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier;

Creating a table cell

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

Reuse is important

Configuring the cellcell.textLabel.text = @"title string";cell.detailTextLabel.text = @"subtitle string";

Friday, 16 September 11

Page 39: iOS app case study

UITableViewDataSource

Friday, 16 September 11

Page 40: iOS app case study

UITableViewDataSourceHow many sections do I have?

Friday, 16 September 11

Page 41: iOS app case study

UITableViewDataSourceHow many sections do I have?

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

Friday, 16 September 11

Page 42: iOS app case study

UITableViewDataSourceHow many sections do I have?

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

How many rows are in each section?

Friday, 16 September 11

Page 43: iOS app case study

UITableViewDataSourceHow many sections do I have?

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

How many rows are in each section?- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

Friday, 16 September 11

Page 44: iOS app case study

UITableViewDataSourceHow 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?

Friday, 16 September 11

Page 45: iOS app case study

UITableViewDataSource

- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

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?

Friday, 16 September 11

Page 46: iOS app case study

Demo 1:Basic table view

Friday, 16 September 11

Page 47: iOS app case study

2. Custom table view

Friday, 16 September 11

Page 48: iOS app case study

UITableViewCell

textLabelimageView

detailTextLabel

Friday, 16 September 11

Page 49: iOS app case study

UITableViewCell

textLabelimageView

detailTextLabel

• backgroundView

• selectedBackgroundView

• contentView

Plus:

Friday, 16 September 11

Page 50: iOS app case study

Customising Cellsif (cell == nil){ cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle 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}

Friday, 16 September 11

Page 51: iOS app case study

Customising Cellsif (cell == nil){ cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle 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}

Friday, 16 September 11

Page 52: iOS app case study

Customising Cellsif (cell == nil){ cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle 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}

Refactor into our own styled cell class

Friday, 16 September 11

Page 53: iOS app case study

PropertyCellA subclass of UITableViewcell

Friday, 16 September 11

Page 54: iOS app case study

PropertyCellA subclass of UITableViewcell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{ if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) { self.textLabel.textColor = [UIColor darkGrayColor]; self.textLabel.backgroundColor = [UIColor clearColor]; // More cell styling code goes here } return self;}

Friday, 16 September 11

Page 55: iOS app case study

Demo 2:Custom table view

Friday, 16 September 11

Page 56: iOS app case study

3. Dynamic content

Friday, 16 September 11

Page 57: iOS app case study

Backend server

• Hosted on Heroku

• http://rmit-property-search.heroku.com/search

• Written in Ruby

• Uses the Sinatra framework

Friday, 16 September 11

Page 58: iOS app case study

Server code

Friday, 16 September 11

Page 59: iOS app case study

Server code

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

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

Friday, 16 September 11

Page 60: iOS app case study

Server code

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

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

templateJSON file

Friday, 16 September 11

Page 61: iOS app case study

Example JSON

Friday, 16 September 11

Page 62: iOS app case study

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" },

... ]}

Friday, 16 September 11

Page 63: iOS app case study

Networking

Friday, 16 September 11

Page 64: iOS app case study

Don’t reinvent the wheel

Networking

Friday, 16 September 11

Page 67: iOS app case study

LRResty

Friday, 16 September 11

Page 68: iOS app case study

Performing a GET request

LRResty

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

Friday, 16 September 11

Page 69: iOS app case study

Performing a GET request

- (void)restClient:(LRRestyClient *)client receivedResponse:(LRRestyResponse *)response;{ NSData *data = [response responseData]; // convert data to property objects}

LRResty

Receiving the delegate callback

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

Friday, 16 September 11

Page 70: iOS app case study

Parsing data

Friday, 16 September 11

Page 71: iOS app case study

Don’t reinvent the wheel

Parsing data

Friday, 16 September 11

Page 72: iOS app case study

Don’t reinvent the wheel

• JSONKit

• json framework

• YAJL

Parsing data

Friday, 16 September 11

Page 73: iOS app case study

Don’t reinvent the wheel

• JSONKit

• json framework

• YAJL

Parsing data

Friday, 16 September 11

Page 74: iOS app case study

YAJL

Friday, 16 September 11

Page 75: iOS app case study

Converting NSString or NSData to JSON

YAJL

- (id)yajl_JSON;

Friday, 16 September 11

Page 76: iOS app case study

Converting NSString or NSData to JSON

YAJL

- (id)yajl_JSON;

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];}

Extracting property data

Friday, 16 September 11

Page 77: iOS app case study

Converting NSString or NSData to JSON

YAJL

- (id)yajl_JSON;

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];}

Extracting property data

Friday, 16 September 11

Page 78: iOS app case study

NSDictionary -> Property

Friday, 16 September 11

Page 79: iOS app case study

Pull the values you want out of the dictionary

NSDictionary -> Property

+ (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"]];}

Friday, 16 September 11

Page 80: iOS app case study

Demo 3:Dynamic content

Friday, 16 September 11

Page 81: iOS app case study

4. Master/detailnavigation

Friday, 16 September 11

Page 82: iOS app case study

DetailViewController

Friday, 16 September 11

Page 83: iOS app case study

Creating the new view controller with a property

Friday, 16 September 11

Page 84: iOS app case study

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;}

Friday, 16 September 11

Page 85: iOS app case study

Updating content in the DetailViewController

Friday, 16 September 11

Page 86: iOS app case study

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;}

Friday, 16 September 11

Page 87: iOS app case study

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

Friday, 16 September 11

Page 88: iOS app case study

UITableViewDelegate- (void)tableView:(UITableView *)tableViewdidSelectRowAtIndexPath:(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

Friday, 16 September 11

Page 89: iOS app case study

Demo 4:Master / Detail

Friday, 16 September 11

Page 90: iOS app case study

5. Make it awesome

Friday, 16 September 11

Page 91: iOS app case study

What’s missing?

Friday, 16 September 11

Page 92: iOS app case study

What’s missing?

• Can’t dismiss the keyboard

Friday, 16 September 11

Page 93: iOS app case study

What’s missing?

• Can’t dismiss the keyboard

• Search does not actually search

Friday, 16 September 11

Page 94: iOS app case study

What’s missing?

• Can’t dismiss the keyboard

• Search does not actually search

• No progress indicator while loading

Friday, 16 September 11

Page 95: iOS app case study

What’s missing?

• Can’t dismiss the keyboard

• Search does not actually search

• No progress indicator while loading

• People like pull-to-refresh like Facebook

Friday, 16 September 11

Page 96: iOS app case study

Demo 5:Making it awesome

Friday, 16 September 11

Page 97: iOS app case study

The finished product

Friday, 16 September 11

Page 98: iOS app case study

The finished product

Friday, 16 September 11

Page 99: iOS app case study

Master/detail navigation

Friday, 16 September 11

Page 100: iOS app case study

Summary

1. Basic table views

2. Custom table views

3. Dynamic content

4. Master/detail navigation

5. Make it awesome

Friday, 16 September 11

Page 101: iOS app case study

iPhone App Case Study

Stewart [email protected]

Friday, 16 September 11

Page 102: iOS app case study

Appendix

Friday, 16 September 11

Page 103: iOS app case study

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/

Friday, 16 September 11

Page 104: iOS app case study

Linking static libraries and frameworks

Friday, 16 September 11

Page 105: iOS app case study

Other linker flags: -all_load -ObjC

Linking static libraries and frameworks

Friday, 16 September 11