• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
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

on

  • 4,434 views

 

Statistics

Views

Total Views
4,434
Views on SlideShare
4,356
Embed Views
78

Actions

Likes
4
Downloads
69
Comments
0

4 Embeds 78

http://www.citytechinc.com 67
http://paper.li 5
http://paper.li 5
http://citytechinc.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    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 Presentation Transcript

    • 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
    • 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
    • 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
    • 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 $$$
    • Question
      • Balance native functionality
      • without sacrificing development costs?
    • X-Platform Choices
      • RhoMobile (Ruby)
      • MonoTouch (C#)
      • Appcelerator (JavaScript)
      • Phone Gap (JavaScript)
    • 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
    • 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
    • JQTouch --------- Phone Gap
    • CT Weather
      • Simple Weather App
        • About / License / Instructions
        • Get Current Weather by Zip
      • Third Party Libraries
        • Phone Gap
        • JQTouch
        • JQuery
        • www.worldweatheronline.com
    • Demo Desktop
    • <!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
    • 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> <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)
    • Better
    •  
    • Broken App?
      • Fix Navigation
        • Consolidate into a single index.html
        • Update Anchors <a href>
      • Fix JavaScript
    • CITYTECH Stylesheet
    • Native Android
      • Launch Android Emulator
      • Copy home.html to index.html
      • Use Phone Gap Ruby script
      • ant debug install
      • DONE
    • Native iPhone
      • Launch xCode
      • Choose PhoneGap template
      • Replace www directory with ours
      • Copy icon.png and Default.png
      • DONE
    • 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);
    •  
    • Questions? Jeff Schwartz [email_address]