cross platform mobile development: the easy way to develop native iphone & android apps
Post on 13-May-2015
4.247 Views
Preview:
TRANSCRIPT
Cross PlatformMobile Development
The Easy Way to developing Native iPhone & Android Apps
Jeff Schwartzhttp://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
HistoryPre-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 NativeAdvantages
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 ChoicesRhoMobile (Ruby)
MonoTouch (C#)
Appcelerator (JavaScript)
Phone Gap (JavaScript)
JQTouch / Phone GapMultiple Devices
iPhone, Android, Blackberry, etc
Mobile StyleSheet
Open Standards (HTML5 / CSS / JS)
Some Native Functionality
Cost-Efficient for Cross Platform Development
X-Platform DecisionsKnow 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 "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>CT Weather</title> <script type="text/javascript" src="lib/json2.js" charset="utf-8"></script> <script type="text/javascript" src="jqtouch/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="js/ct-common-pg.js" charset="utf-8"></script> <script type="text/javascript" src="js/ct-weather.js" charset="utf-8"></script> <link rel="stylesheet" href="themes/web/theme.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/ct-weather.css" type="text/css" media="screen"> </head> <body> <div id="home">
<div class="toolbar"> <h1>CT Weather</h1> <a class="button flip" href="about.html" id="aboutButton">About</a></div><ul class="individual"> <li><a href="instructions.html">Instructions</a></li> <li><a href="rules.html" id="readRulesButton">License</a></li></ul>
<form id="weatherForm" method="POST" class="form" onsubmit="onWeatherSubmit(event);"> <h2 id="content">Enter Zipcode</h2> <ul class="rounded"> <li><input placeholder="Zipcode" type="text" name="zipcode" id="zipcode" value="" /></li> </ul> <p style="margin:10px" class="whiteButton" id="forecastButton">Forecast</p> </form>
<div class="info">CT Weather<br>© 2010, CITYTECH, Inc.</div> </div> </body></html>
home.html
Demo Mobile Web
What’s Wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta name="viewport" content="width=device-width; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>CT Weather</title> <script type="text/javascript" src="lib/json2.js" charset="utf-8"></script> <script type="text/javascript" src="jqtouch/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="jqtouch/jqtouch.js" charset="utf-8"></script> <link rel="stylesheet" href="jqtouch/jqtouch.css" type="text/css" media="screen"> <link rel="stylesheet" href="themes/apple/theme.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ct-common-pg.js" charset="utf-8"></script> <script type="text/javascript" src="js/ct-weather.js" charset="utf-8"></script> </head> <body> <div id="home">
<div class="toolbar"> <h1>CT Weather</h1> <a class="button flip" href="about.html" id="aboutButton">About</a></div><ul class="individual"> <li><a href="instructions.html">Instructions</a></li> <li><a href="rules.html" id="readRulesButton">License</a></li></ul><div class="info">CT Weather<br>© 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 AndroidLaunch Android Emulator
Copy home.html to index.html
Use Phone Gap Ruby script
ant debug install
DONE
Native iPhoneLaunch xCode
Choose PhoneGap template
Replace www directory with ours
Copy icon.png and Default.png
DONE
GeolocationFrom xCode
index.html:<script type="text/javascript" src="phonegap.js" charset="utf-8"></script>
ct-weather.js:navigator.geolocation.getCurrentPosition
(mapPositionSuccessCallback, mapPositionFailedCallback);
top related