Your SlideShare is downloading. ×
MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation

1,829
views

Published on

hybrid iPhone development

hybrid iPhone development

Published in: Technology, News & Politics

1 Comment
6 Likes
Statistics
Notes
  • Apple’s New iPod Touch
    A Worthy Innovation or a High Priced Techno Overload?
    http://www.slideshare.net/Zanura/new-i-pod-touch-review
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,829
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
61
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Hybrid App Development for the iPhone Bill Heyman Damon Allison CodeMorphic www.codemorphic.com Monday, April 6, 2009
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. Hybrid iPhone App Spectrum Hybrid Native Web A whole range of possibilities for mixing and matching web and native development on the iPhone Monday, April 6, 2009
  • 8. Hybrid iPhone App Spectrum Hybrid Native Web More Native, Less Web Selectively use UIWebView controls within your app for custom formatting. Monday, April 6, 2009
  • 9. Hybrid iPhone App Spectrum Hybrid Native Web Less Native, More Web Host your web content on the iPhone in a native UIWebView container. Monday, April 6, 2009
  • 10. Hybrid Containers Hybrid A few options... 1. PhoneGap 2. Quick Connect 3. Roll Your Own Monday, April 6, 2009
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. MyHealth: Calendar All HTML in a Web View Monday, April 6, 2009
  • 16. MyHealth: Account/Network HTML with images, iUI styled Monday, April 6, 2009
  • 17. 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
  • 18. Mobile Cookbook: Search native screens Monday, April 6, 2009
  • 19. Mobile Cookbook: Recipe HTML-based, catches add favorites link Monday, April 6, 2009
  • 20. Mobile Cookbook: e-mail HTML is used to format e-mail Monday, April 6, 2009
  • 21. 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
  • 22. Real Estate: Search native screens Monday, April 6, 2009
  • 23. Real Estate: Maps Web-based Google map, catches arrow click for property details Monday, April 6, 2009
  • 24. Real Estate: Property Details HTML/CSS presentation + JavaScript actions Monday, April 6, 2009
  • 25. Real Estate: CoverFlow UIWebView with zflow http://code.google.com/p/css-vfx/ Monday, April 6, 2009
  • 26. 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
  • 27. PRT 1.1: Overview native screens Monday, April 6, 2009
  • 28. PRT 1.1: About Screen HTML-based, inline (Base64) images Monday, April 6, 2009
  • 29. 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
  • 30. Public Radio Tuner 2.0 Sneak Peek Monday, April 6, 2009
  • 31. 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
  • 32. Human Atlas: Overview Monday, April 6, 2009
  • 33. Human Atlas: Video Playback Web View Used for Video Playback Monday, April 6, 2009
  • 34. Ask CodeMorphic Q&A with Bill and Damon Monday, April 6, 2009