Hybrid App Development for the

iPhone Bill Heyman

Damon Allison

CodeMorphicwww.codemorphic.com

Monday, April 6, 2009

What makes an iPhone App?

A iPhone app package is:

➡ built using Apple’s IDE: XCode

➡ written in Objective C

➡ using frameworks in iPhone SDK

➡ signed with a developer’s certificate

➡ distributed via iTunes (or Ad Hoc)

Monday, April 6, 2009

Native iPhone Apps Can Use...

• Sqlite Database / File System

• Location / GPS services

• Camera / Photo Library

• Accelerometer

• OpenGL / Quartz / Animation / Audio

• Socket communication, custom protocols➡ Web apps can’t (or are limited...)

Monday, April 6, 2009

Web = Mobile Safari

• Built on WebKit (525.20)

• HTML 4.01, XHTML 1.0

• DOM 2, ECMAScript 3

• CSS 2.1, partial CSS 3

• SVG, Canvas

• 320 x 416 Screen Size

Monday, April 6, 2009

Native Web View

• Mobile Safari sans “chrome”(up to 480 visible pixels high)

• Load HTML via URL or string

• Native side can:

• run JavaScript on Web page

• receive events when links are clicked

Monday, April 6, 2009

So, what’s a web developer to do?

• Learn Objective C?

• Learn Cocoa Framework?

• Become a native iPhone app developer?

➡ Fortunately, it can be a bit easier...

Monday, April 6, 2009

Hybrid iPhone App Spectrum

A whole range of possibilities for mixing and matching

web and native developmenton the iPhone

WebNative Hybrid

Monday, April 6, 2009

Hybrid iPhone App Spectrum

More Native, Less Web

Selectively use UIWebView controls within your app for custom formatting.

WebNative Hybrid

Monday, April 6, 2009

Hybrid iPhone App Spectrum

Less Native, More Web

Host your web content on the iPhone in a native UIWebView container.

WebNative Hybrid

Monday, April 6, 2009

Hybrid Containers

A few options...

1. PhoneGap

2. Quick Connect

3. Roll Your Own

Hybrid

Monday, April 6, 2009

Hybrid: PhoneGap

• www.phonegap.com

• Open source, developed by sintaxi

• Is a native shell for hosting web pages

• Uses JavaScript and custom URL schemes to interact with the hardware

• Supports: iPhone, Android, and Blackberry

Monday, April 6, 2009

Hybrid: QCiPhone

• quickconnect.sourceforge.net

• Open source web app hosting framework

• Interface can be developed in DashCode

• Uses JavaScript calls to interface with iPhone

• Supports: iPhone, Android, Linux, Mac

Monday, April 6, 2009

Hybrid: Roll Your Own

Sometimes, you need:

• improved user experience

• better performance

• more hardware access and graphics

• custom protocols

➡So, you’ll need more native code...

Monday, April 6, 2009

Case Study: My Health

• CodeMorphic prototype for health care industry

• Native container for navigation and tabs

• All screen content is HTML/CSS, styled with iUI CSS framework

Monday, April 6, 2009

MyHealth: Calendar

All HTML in a Web View

Monday, April 6, 2009

MyHealth: Account/Network

HTML with images, iUI styled

Monday, April 6, 2009

Case Study: Mobile Cookbook

• Betty Crocker Mobile Cookbook developed January 2009

• Mostly native, all data on phone:

• Sqlite database contains 4000+ recipes

• Uses HTML formatting for dynamic recipe view

Monday, April 6, 2009

Mobile Cookbook: Search

native screens

Monday, April 6, 2009

Mobile Cookbook: Recipe

HTML-based, catches add favorites link

Monday, April 6, 2009

Mobile Cookbook: e-mail

HTML is used to format e-mail

Monday, April 6, 2009

Case Study: Real Estate

• Smarter Agent Mobile Real Estate Search

• Mostly native, but web used for:

• Maps

• Property Details

• Picture Display (CoverFlow !?!)

Monday, April 6, 2009

Real Estate: Search

native screens

Monday, April 6, 2009

Real Estate: Maps

Web-based Google map, catches arrow click for property details

Monday, April 6, 2009

Real Estate: Property Details

HTML/CSS presentation + JavaScript actions

Monday, April 6, 2009

Real Estate: CoverFlow

UIWebView with zflowhttp://code.google.com/p/css-vfx/

Monday, April 6, 2009

Case Study: Public Radio Tuner

• Originally: Minnesota Public Radio app

• Transferred to Public Radio Exchange to fashion into the iPhone app for Public Radio

• Version 1.1 released January 2009, 1.6M downloads (According to Doc Searls as of this AM)

• Version 2.0 to be released Summer 2009

Monday, April 6, 2009

PRT 1.1: Overview

native screens

Monday, April 6, 2009

PRT 1.1: About Screen

HTML-based, inline (Base64) images

Monday, April 6, 2009

Public Radio Tuner 2.0

• Planned availability June 2009

• UI developed with DashCode

• Will use QuickConnect iPhone

• Backend audio streaming will use an updated version of the 1.x engine

Monday, April 6, 2009

Public Radio Tuner 2.0

Sneak Peek

Monday, April 6, 2009

Case Study: Human Atlas

• Blausen develops high resolution graphics, videos, and 3-D models for the medical and legal industries.

• Human Atlas makes use of the video playback capabilities of the UIWebView.

Monday, April 6, 2009

Human Atlas: Overview

Monday, April 6, 2009

Human Atlas: Video Playback

Web View Used for Video Playback

Monday, April 6, 2009

Ask CodeMorphic

Q&A with Bill and Damon

Monday, April 6, 2009