Your SlideShare is downloading. ×
0
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
Cross Platform Mobile Development: The Easy Way to Develop Native iPhone & Android Apps
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

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

4,262

Published on

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

No Downloads
Views
Total Views
4,262
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
75
Comments
0
Likes
4
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. 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. 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. 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. 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. Question <ul><li>Balance native functionality </li></ul><ul><li>without sacrificing development costs? </li></ul>
  • 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. 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. 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. JQTouch --------- Phone Gap
  • 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. Demo Desktop
  • 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. Demo Mobile Web
  • 14. What’s Wrong?
  • 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. 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>
  • 19. CITYTECH Stylesheet
  • 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>
  • 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>
  • 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>
  • 23.  
  • 24. Questions? Jeff Schwartz [email_address]

×