minnewebcon 2009 codemorphic hybrid iphone app presentation
DESCRIPTION
hybrid iPhone developmentTRANSCRIPT
![Page 1: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/1.jpg)
Hybrid App Development for the
iPhone Bill Heyman
Damon Allison
CodeMorphicwww.codemorphic.com
Monday, April 6, 2009
![Page 2: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/2.jpg)
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
![Page 3: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/3.jpg)
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
![Page 4: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/4.jpg)
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
![Page 5: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/5.jpg)
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
![Page 6: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/6.jpg)
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
![Page 7: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/7.jpg)
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
![Page 8: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/8.jpg)
Hybrid iPhone App Spectrum
More Native, Less Web
Selectively use UIWebView controls within your app for custom formatting.
WebNative Hybrid
Monday, April 6, 2009
![Page 9: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/9.jpg)
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
![Page 10: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/10.jpg)
Hybrid Containers
A few options...
1. PhoneGap
2. Quick Connect
3. Roll Your Own
Hybrid
Monday, April 6, 2009
![Page 11: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/11.jpg)
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
![Page 12: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/12.jpg)
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
![Page 13: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/13.jpg)
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
![Page 14: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/14.jpg)
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
![Page 15: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/15.jpg)
MyHealth: Calendar
All HTML in a Web View
Monday, April 6, 2009
![Page 16: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/16.jpg)
MyHealth: Account/Network
HTML with images, iUI styled
Monday, April 6, 2009
![Page 17: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/17.jpg)
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
![Page 18: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/18.jpg)
Mobile Cookbook: Search
native screens
Monday, April 6, 2009
![Page 19: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/19.jpg)
Mobile Cookbook: Recipe
HTML-based, catches add favorites link
Monday, April 6, 2009
![Page 20: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/20.jpg)
Mobile Cookbook: e-mail
HTML is used to format e-mail
Monday, April 6, 2009
![Page 21: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/21.jpg)
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
![Page 22: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/22.jpg)
Real Estate: Search
native screens
Monday, April 6, 2009
![Page 23: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/23.jpg)
Real Estate: Maps
Web-based Google map, catches arrow click for property details
Monday, April 6, 2009
![Page 24: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/24.jpg)
Real Estate: Property Details
HTML/CSS presentation + JavaScript actions
Monday, April 6, 2009
![Page 25: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/25.jpg)
Real Estate: CoverFlow
UIWebView with zflowhttp://code.google.com/p/css-vfx/
Monday, April 6, 2009
![Page 26: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/26.jpg)
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
![Page 27: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/27.jpg)
PRT 1.1: Overview
native screens
Monday, April 6, 2009
![Page 28: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/28.jpg)
PRT 1.1: About Screen
HTML-based, inline (Base64) images
Monday, April 6, 2009
![Page 29: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/29.jpg)
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
![Page 30: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/30.jpg)
Public Radio Tuner 2.0
Sneak Peek
Monday, April 6, 2009
![Page 31: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/31.jpg)
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
![Page 32: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/32.jpg)
Human Atlas: Overview
Monday, April 6, 2009
![Page 33: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/33.jpg)
Human Atlas: Video Playback
Web View Used for Video Playback
Monday, April 6, 2009
![Page 34: MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation](https://reader037.vdocuments.net/reader037/viewer/2022110114/5458a8b9af795998788b553d/html5/thumbnails/34.jpg)
Ask CodeMorphic
Q&A with Bill and Damon
Monday, April 6, 2009