MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation

1,893
-1

Published on

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,893
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
61
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

MinneWebCon 2009 CodeMorphic Hybrid iPhone App Presentation

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

    Clipping is a handy way to collect important slides you want to go back to later.

×