iOS app case study

iPhone App Case Study

Stewart Gleadowsgleadow@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 featuresin iPhone apps

Outline

1. Basic table views

2. Custom table views

3. Dynamic content

4. Master/detail navigation

5. Make it awesome

Camera control

Basic tables

Advanced tables

Scroll views

Location awareness

Master/detail navigation

Consuming and presenting information

from the web

Build up your toolbox

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

1. Basic table view

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;

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

Put logic in your model classes

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

UITableView

UIViewController

UITableView

UIViewController

UITableViewDataSource

UITableViewDelegate

UITableViewCell

UITableView

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

Creating your UITableView

UITableView

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

Setting up your delegates

UITableView

[self.view addSubview:table];

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

Setting up your delegates

Adding the table to the view

UITableView

UITableViewCell

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

Creating a table cell

UITableViewCell

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

UITableViewCell

Reuse is important

UITableViewCell

Reuse is important

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

UITableViewDataSourceHow many sections do I have?

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

How many rows are in each section?

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

What is the cell for a given row/section?

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

How many sections do I have?- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

What is the cell for a given row/section?

Demo 1:Basic table view

2. Custom table view

UITableViewCell

textLabelimageView

detailTextLabel

UITableViewCell

textLabelimageView

detailTextLabel

• backgroundView

• selectedBackgroundView

• contentView

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

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

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

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

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

Server code

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

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

templateJSON file

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

Don’t reinvent the wheel

Networking

• NSURLConnection

• ASIHttpRequest

• LRResty

• AFNetworking

• RestKit

Networking

• NSURLConnection

• ASIHttpRequest

• LRResty

• AFNetworking

• RestKit

Networking

LRResty

Performing a GET request

LRResty

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

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

Parsing data

• JSONKit

• json framework

• YAJL

Parsing data

• JSONKit

• json framework

• YAJL

Parsing data

Converting NSString or NSData to JSON

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

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

NSDictionary -> Property

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

Demo 3:Dynamic content

4. Master/detailnavigation

DetailViewController

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

- (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 *)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

Demo 4:Master / Detail

5. Make it awesome

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 finished 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 Gleadowgsgleadow@thoughtworks.com

Appendix

• 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

iOS app case study

Technology

Transcript of iOS app case study

iOS App Development Services

iOS App for Youtube - MobileMerit.commobilemerit.com/wp-content/uploads/2015/02/PDF-iOS-App-for-Yout… · Youtube App for iOS Youtube app for iOS is a video browsing app in which

UXDi Case Study - IMDb IOS app redesign

follow-app BOOTCAMP 4: iOS

App coordinators in iOS

iOS Provisioning : Running your app in an iOS device

APP APP, IOS Android - qydj.scjg.tj.gov.cnqydj.scjg.tj.gov.cn/reportOnlineService/static/login/loginhb/images/qydj_gg.pdf · APP APP, IOS Android . Created Date: 5/5/2019 11:02:26

2. iOS App Programming

Mobile app for iOS - websmp104.sap-ag.desapidp/011000358700000988962010E/… · Mobile app for iOS Version 1.11.x, Q1 2017 Public ... SAP Business One mobile app for iOS - User Guide

Beginning iOS App Localization

The kontakios iOS app

PERSPECTIVE iOS APP GUIDE - Resolver Support · Table of Contents Welcome to the Perspective iOS App ..... 1

App Extensions iOS

iOS App Extensions

App Store Rankings - iOS App Store ASO

Ios App Development in Dubai,Ios App Development Company Dubai

5 ELOQUA HACKS - Home | Simantel · 5 ELOQUA HACKS YOU CAN USE TODAY. If ... Android Native App 40 ... Android Yahoo! App 45 iOS Native App 90 iOS Gmail App 50 iOS Yahoo! App 50 Windows

iOS secure app development

iPhone101 - Your First iOS App

iOS App Development