Cross Platform Mobile Development <ul><li>The Easy Way to developing  </li></ul><ul><li>Native iPhone & Android Apps </li>...
Agenda <ul><li>Recent History of Mobile Computing </li></ul><ul><li>Native vs Web Apps </li></ul><ul><li>Options for X-Pla...
History <ul><li>Pre-2007 - B.I.E (Before iPhone Era) - PDA Phones </li></ul><ul><ul><li>All apps native.  Multiple languag...
Web  Native <ul><li>Advantages </li></ul><ul><ul><li>Open Standards </li></ul></ul><ul><ul><li>No Approval Process </li></...
Question <ul><li>Balance native functionality  </li></ul><ul><li>without sacrificing development costs? </li></ul>
X-Platform Choices <ul><li>RhoMobile (Ruby) </li></ul><ul><li>MonoTouch (C#) </li></ul><ul><li>Appcelerator (JavaScript) <...
JQTouch / Phone Gap <ul><li>Multiple Devices </li></ul><ul><ul><li>iPhone, Android, Blackberry, etc </li></ul></ul><ul><li...
X-Platform Decisions <ul><li>Know the tool’s technological limits </li></ul><ul><li>Risk and expense increase as limits ar...
JQTouch --------- Phone Gap
CT Weather  <ul><li>Simple Weather App </li></ul><ul><ul><li>About / License / Instructions </li></ul></ul><ul><ul><li>Get...
Demo Desktop
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot; http://www.w3.org/TR/html4/strict.dtd &quot;> <html>   ...
Demo Mobile Web
What’s Wrong?
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot; http://www.w3.org/TR/html4/strict.dtd &quot;> <html> <h...
Better
 
Broken App? <ul><li>Fix Navigation </li></ul><ul><ul><li>Consolidate into a single index.html </li></ul></ul><ul><ul><li>U...
CITYTECH Stylesheet
Native Android <ul><li>Launch Android Emulator  </li></ul><ul><li>Copy home.html to index.html </li></ul><ul><li>Use Phone...
Native iPhone <ul><li>Launch xCode </li></ul><ul><li>Choose PhoneGap template </li></ul><ul><li>Replace www directory with...
Geolocation <ul><li>From xCode </li></ul><ul><li>index.html: </li></ul><ul><li><script type=&quot;text/javascript&quot; sr...
 
Questions? Jeff Schwartz [email_address]
Upcoming SlideShare
Loading in...5
×

Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps

4,289

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,289
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
75
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps

  1. 1. Cross Platform Mobile Development <ul><li>The Easy Way to developing </li></ul><ul><li>Native iPhone & Android Apps </li></ul>Jeff Schwartz http://www.digitaltrends.com/wp-content/uploads/2010/06/iphone-4-vs-android.jpg
  2. 2. Agenda <ul><li>Recent History of Mobile Computing </li></ul><ul><li>Native vs Web Apps </li></ul><ul><li>Options for X-Platform Mobile Dev </li></ul><ul><li>Introduce - JQTouch / Phone Gap </li></ul><ul><li>Build Example App - CT Weather </li></ul><ul><ul><li>Native iPhone CT Weather </li></ul></ul><ul><ul><li>Native Android CT Weather </li></ul></ul><ul><ul><li>Add GPS </li></ul></ul>
  3. 3. History <ul><li>Pre-2007 - B.I.E (Before iPhone Era) - PDA Phones </li></ul><ul><ul><li>All apps native. Multiple languages </li></ul></ul><ul><li>Summer 2007 - iPhone Released - Game Changer </li></ul><ul><ul><li>Web Apps (Safari Mobile Browser) </li></ul></ul><ul><ul><li>Native Apps (Mail, Phone, Contacts, Maps, etc) </li></ul></ul><ul><ul><li>Third Party Web Apps with HTML </li></ul></ul><ul><li>Summer 2008 - Apple Releases iPhone 2.0 SDK (and AppStore) </li></ul><ul><ul><li>Third Party Native Apps with Objective-C </li></ul></ul><ul><li>October 2008 - Google Releases Android SDK (and Market) </li></ul><ul><ul><li>Third Party Native Apps with Java </li></ul></ul><ul><li>April 2010 - Apple Announces iOS 4.0 SDK (New T & C) </li></ul><ul><ul><li>Applications must be originally written in Objective-C, C, C++ or JavaScript as executed by the iPhone OS WebKit engine </li></ul></ul><ul><ul><li>Expressly forbids the use of “an intermediary translation or compatibility layer or tool” </li></ul></ul><ul><li>September 2010 - Apple Relaxes iOS 4.0 T & C </li></ul>
  4. 4. Web Native <ul><li>Advantages </li></ul><ul><ul><li>Open Standards </li></ul></ul><ul><ul><li>No Approval Process </li></ul></ul><ul><li>Disadvantages </li></ul><ul><ul><li>Browser Limitations </li></ul></ul><ul><ul><li>How Users Find App? </li></ul></ul>vs <ul><li>Advantages </li></ul><ul><ul><li>Full H/W Capability </li></ul></ul><ul><ul><li>AppStore / Market </li></ul></ul><ul><li>Disadvantages </li></ul><ul><ul><li>Hard to Develop </li></ul></ul><ul><ul><li>Subjective Approval </li></ul></ul><ul><ul><li>Cross Platform $$$ </li></ul></ul>
  5. 5. Question <ul><li>Balance native functionality </li></ul><ul><li>without sacrificing development costs? </li></ul>
  6. 6. X-Platform Choices <ul><li>RhoMobile (Ruby) </li></ul><ul><li>MonoTouch (C#) </li></ul><ul><li>Appcelerator (JavaScript) </li></ul><ul><li>Phone Gap (JavaScript) </li></ul>
  7. 7. JQTouch / Phone Gap <ul><li>Multiple Devices </li></ul><ul><ul><li>iPhone, Android, Blackberry, etc </li></ul></ul><ul><li>Mobile StyleSheet </li></ul><ul><li>Open Standards (HTML5 / CSS / JS) </li></ul><ul><li>Some Native Functionality </li></ul><ul><li>Cost-Efficient for Cross Platform Development </li></ul>
  8. 8. X-Platform Decisions <ul><li>Know the tool’s technological limits </li></ul><ul><li>Risk and expense increase as limits are crossed </li></ul><ul><li>Tools getting more capable every day </li></ul><ul><li>Steve can change his mind again </li></ul>
  9. 9. JQTouch --------- Phone Gap
  10. 10. CT Weather <ul><li>Simple Weather App </li></ul><ul><ul><li>About / License / Instructions </li></ul></ul><ul><ul><li>Get Current Weather by Zip </li></ul></ul><ul><li>Third Party Libraries </li></ul><ul><ul><li>Phone Gap </li></ul></ul><ul><ul><li>JQTouch </li></ul></ul><ul><ul><li>JQuery </li></ul></ul><ul><ul><li>www.worldweatheronline.com </li></ul></ul>
  11. 11. Demo Desktop
  12. 12. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot; http://www.w3.org/TR/html4/strict.dtd &quot;> <html> <head> <meta http-equiv=&quot;Content-type&quot; content=&quot;text/html; charset=utf-8&quot;> <title>CT Weather</title> <script type=&quot;text/javascript&quot; src=&quot;lib/json2.js&quot; charset=&quot;utf-8&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;jqtouch/jquery.js&quot; charset=&quot;utf-8&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/ct-common-pg.js&quot; charset=&quot;utf-8&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/ct-weather.js&quot; charset=&quot;utf-8&quot;></script> <link rel=&quot;stylesheet&quot; href=&quot;themes/web/theme.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;> <link rel=&quot;stylesheet&quot; href=&quot;css/ct-weather.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;> </head> <body> <div id=&quot;home&quot;> <div class=&quot;toolbar&quot;> <h1>CT Weather</h1> <a class=&quot;button flip&quot; href=&quot;about.html&quot; id=&quot;aboutButton&quot;>About</a> </div> <ul class=&quot;individual&quot;> <li><a href=&quot;instructions.html&quot;>Instructions</a></li> <li><a href=&quot;rules.html&quot; id=&quot;readRulesButton&quot;>License</a></li> </ul> <form id=&quot;weatherForm&quot; method=&quot;POST&quot; class=&quot;form&quot; onsubmit=&quot;onWeatherSubmit(event);&quot;> <h2 id=&quot;content&quot;>Enter Zipcode</h2> <ul class=&quot;rounded&quot;> <li><input placeholder=&quot;Zipcode&quot; type=&quot;text&quot; name=&quot;zipcode&quot; id=&quot;zipcode&quot; value=&quot;&quot; /></li> </ul> <p style=&quot;margin:10px&quot; class=&quot;whiteButton&quot; id=&quot;forecastButton&quot;>Forecast</p> </form> <div class=&quot;info&quot;>CT Weather<br>&copy; 2010, CITYTECH, Inc.</div> </div> </body> </html> home.html
  13. 13. Demo Mobile Web
  14. 14. What’s Wrong?
  15. 15. <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot; http://www.w3.org/TR/html4/strict.dtd &quot;> <html> <head> <meta name=&quot;viewport&quot; content=&quot;width=device-width; user-scalable=no&quot; /> <meta http-equiv=&quot;Content-type&quot; content=&quot;text/html; charset=utf-8&quot;> <title>CT Weather</title> <script type=&quot;text/javascript&quot; src=&quot;lib/json2.js&quot; charset=&quot;utf-8&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;jqtouch/jquery.js&quot; charset=&quot;utf-8&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;jqtouch/jqtouch.js&quot; charset=&quot;utf-8&quot;></script> <link rel=&quot;stylesheet&quot; href=&quot;jqtouch/jqtouch.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;> <link rel=&quot;stylesheet&quot; href=&quot;themes/apple/theme.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;> <script type=&quot;text/javascript&quot; src=&quot;js/ct-common-pg.js&quot; charset=&quot;utf-8&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/ct-weather.js&quot; charset=&quot;utf-8&quot;></script> </head> <body> <div id=&quot;home&quot;> <div class=&quot; toolbar &quot;> <h1>CT Weather</h1> <a class=&quot; button flip &quot; href=&quot;about.html&quot; id=&quot;aboutButton&quot;>About</a> </div> <ul class=&quot; individual &quot;> <li><a href=&quot;instructions.html&quot;>Instructions</a></li> <li><a href=&quot;rules.html&quot; id=&quot;readRulesButton&quot;>License</a></li> </ul> <div class=&quot; info &quot;>CT Weather<br>&copy; 2010, CITYTECH, Inc.</div> ... </div> </body> </html> home.html (mobile)
  16. 16. Better
  17. 18. Broken App? <ul><li>Fix Navigation </li></ul><ul><ul><li>Consolidate into a single index.html </li></ul></ul><ul><ul><li>Update Anchors <a href> </li></ul></ul><ul><li>Fix JavaScript </li></ul>
  18. 19. CITYTECH Stylesheet
  19. 20. Native Android <ul><li>Launch Android Emulator </li></ul><ul><li>Copy home.html to index.html </li></ul><ul><li>Use Phone Gap Ruby script </li></ul><ul><li>ant debug install </li></ul><ul><li>DONE </li></ul>
  20. 21. Native iPhone <ul><li>Launch xCode </li></ul><ul><li>Choose PhoneGap template </li></ul><ul><li>Replace www directory with ours </li></ul><ul><li>Copy icon.png and Default.png </li></ul><ul><li>DONE </li></ul>
  21. 22. Geolocation <ul><li>From xCode </li></ul><ul><li>index.html: </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;phonegap.js&quot; charset=&quot;utf-8&quot;></script> </li></ul><ul><li>ct-weather.js: </li></ul><ul><li>navigator.geolocation.getCurrentPosition </li></ul><ul><ul><li>(mapPositionSuccessCallback, mapPositionFailedCallback); </li></ul></ul>
  22. 24. Questions? Jeff Schwartz [email_address]
  1. A particular slide catching your eye?

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

×