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

  • 4,165 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,165
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
72
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
    • The Easy Way to developing
    • Native iPhone & Android Apps
    Jeff Schwartz http://www.digitaltrends.com/wp-content/uploads/2010/06/iphone-4-vs-android.jpg
  • 2. Agenda
    • Recent History of Mobile Computing
    • Native vs Web Apps
    • Options for X-Platform Mobile Dev
    • Introduce - JQTouch / Phone Gap
    • Build Example App - CT Weather
      • Native iPhone CT Weather
      • Native Android CT Weather
      • Add GPS
  • 3. History
    • Pre-2007 - B.I.E (Before iPhone Era) - PDA Phones
      • All apps native. Multiple languages
    • Summer 2007 - iPhone Released - Game Changer
      • Web Apps (Safari Mobile Browser)
      • Native Apps (Mail, Phone, Contacts, Maps, etc)
      • Third Party Web Apps with HTML
    • Summer 2008 - Apple Releases iPhone 2.0 SDK (and AppStore)
      • Third Party Native Apps with Objective-C
    • October 2008 - Google Releases Android SDK (and Market)
      • Third Party Native Apps with Java
    • April 2010 - Apple Announces iOS 4.0 SDK (New T & C)
      • Applications must be originally written in Objective-C, C, C++ or JavaScript as executed by the iPhone OS WebKit engine
      • Expressly forbids the use of “an intermediary translation or compatibility layer or tool”
    • September 2010 - Apple Relaxes iOS 4.0 T & C
  • 4. Web Native
    • Advantages
      • Open Standards
      • No Approval Process
    • Disadvantages
      • Browser Limitations
      • How Users Find App?
    vs
    • Advantages
      • Full H/W Capability
      • AppStore / Market
    • Disadvantages
      • Hard to Develop
      • Subjective Approval
      • Cross Platform $$$
  • 5. Question
    • Balance native functionality
    • without sacrificing development costs?
  • 6. X-Platform Choices
    • RhoMobile (Ruby)
    • MonoTouch (C#)
    • Appcelerator (JavaScript)
    • Phone Gap (JavaScript)
  • 7. JQTouch / Phone Gap
    • Multiple Devices
      • iPhone, Android, Blackberry, etc
    • Mobile StyleSheet
    • Open Standards (HTML5 / CSS / JS)
    • Some Native Functionality
    • Cost-Efficient for Cross Platform Development
  • 8. X-Platform Decisions
    • Know the tool’s technological limits
    • Risk and expense increase as limits are crossed
    • Tools getting more capable every day
    • Steve can change his mind again
  • 9. JQTouch --------- Phone Gap
  • 10. CT Weather
    • Simple Weather App
      • About / License / Instructions
      • Get Current Weather by Zip
    • Third Party Libraries
      • Phone Gap
      • JQTouch
      • JQuery
      • www.worldweatheronline.com
  • 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?
    • Fix Navigation
      • Consolidate into a single index.html
      • Update Anchors <a href>
    • Fix JavaScript
  • 19. CITYTECH Stylesheet
  • 20. Native Android
    • Launch Android Emulator
    • Copy home.html to index.html
    • Use Phone Gap Ruby script
    • ant debug install
    • DONE
  • 21. Native iPhone
    • Launch xCode
    • Choose PhoneGap template
    • Replace www directory with ours
    • Copy icon.png and Default.png
    • DONE
  • 22. Geolocation
    • From xCode
    • index.html:
    • <script type=&quot;text/javascript&quot; src=&quot;phonegap.js&quot; charset=&quot;utf-8&quot;></script>
    • ct-weather.js:
    • navigator.geolocation.getCurrentPosition
      • (mapPositionSuccessCallback, mapPositionFailedCallback);
  • 23.  
  • 24. Questions? Jeff Schwartz [email_address]