MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation

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)


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...)


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


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


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


Hybrid iPhone App Spectrum

A whole range of possibilities for mixing and matching

web and native developmenton the iPhone

WebNative Hybrid



More Native, Less Web

Selectively use UIWebView controls within your app for custom formatting.

WebNative Hybrid



Less Native, More Web

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

WebNative Hybrid


Hybrid Containers

A few options...

1. PhoneGap

2. Quick Connect

3. Roll Your Own

Hybrid


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


http://www.phonegap.com

http://www.phonegap.com

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


http://www.quickconnect.sourceforge.net

http://www.quickconnect.sourceforge.net

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


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


MyHealth: Calendar

All HTML in a Web View


MyHealth: Account/Network

HTML with images, iUI styled


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


Mobile Cookbook: Search

native screens


Mobile Cookbook: Recipe

HTML-based, catches add favorites link


Mobile Cookbook: e-mail

HTML is used to format e-mail


Case Study: Real Estate

• Smarter Agent Mobile Real Estate Search

• Mostly native, but web used for:

• Maps

• Property Details

• Picture Display (CoverFlow !?!)


Real Estate: Search

native screens


Real Estate: Maps

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


Real Estate: Property Details

HTML/CSS presentation + JavaScript actions


Real Estate: CoverFlow

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


http://code.google.com/p/css-vfx/

http://code.google.com/p/css-vfx/

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


PRT 1.1: Overview

native screens


PRT 1.1: About Screen

HTML-based, inline (Base64) images


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


Public Radio Tuner 2.0

Sneak Peek


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.


Human Atlas: Overview


Human Atlas: Video Playback

Web View Used for Video Playback


Ask CodeMorphic

Q&A with Bill and Damon


MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation

Technology

Transcript of MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation