phonegap

PhoneGap Writing iPhone and Android applications in JavaScript, HTML and CSS What is PhoneGap? ● Mobile development framework ● iPhoneDevCamp, San Francisco 2008 ● Nitobi Software ● Bridges the gap between SDKs ● Open source ● MIT License Phone support iOS Android Blackberry Symbian Palm Geo Location Yes Yes Yes Yes Yes Vibration Yes Yes Yes Yes Yes Camera Yes Yes Yes Yes No Accelerometer Yes Yes OS 4.7 Yes Yes Sound Yes Yes Yes Yes Yes Contact Support Yes Yes Yes Yes N/A How does it work? ● Mobile SDKs ship a browser ● UIWebView object for iPhone ● WebView object with Android ● Interpreted language ● JavaScript ● Deploy over standard means ● App Store ● Android market Writing Your Application ● WebKit ● Android / iPhone ● Blackberry 6+ / Palm WebOS ● HTML5 ● Canvas, Databases and Geolocation ● CSS3 ● Transitions, Gradients and Rounded Corners ● Cross-domain security policy does not apply ● $.getJSON('http://search.twitter.com/trends/current.json') jQTouch ● A jQuery plugin for mobile web development ● For iOS ● Supports: ● Page Transitions (CSS 3) ● Page History ● Toolbar ● Forms ● Home screen Icons ● MIT Licensed jQTouch Pages iScroll ● Provides a scroll content inside a fixed width/height element ● Android >=1.5, iPad >=3.2, iPhone >=2.0 ● Uses touch JavaScript events: ● touchstart ● touchmove ● touchend ● Will work on desktop also ● MIT / GPL dual licensed jQuery Mobile ● Part of jQuery project ● Similar to jQTouch with more device support ● New project (alpha) ● MIT / GPL dual licensed Persistence.js ● Asynchronous Javascript object-relational mapper library ● It can be used in web browser: ● HTML5 WebSQL database (WebKit) ● Google Gears (Firefox / IE) ● Also on the server using node.js: ● Node-mysql ● MIT Licensed Processing.js ● Port of the processing language to JavaScript ● Uses canvas element ● Good replacement for flash ● Can also be used directly as a JavaScript libary ● MIT Licensed Meta Tags ● Viewport ● changes the window size used when displaying on iOS / Android ● ● Full-screen mode ● ● Style of the status bar ● Link Tags ● Add icon to bookmark ● ● Icon with no gloss ● ● Startup screen: ● Install PhoneGap ● iPhone: ● Install Xcode plus iOS SDK (3 GB download) ● Use installer PhoneGap provides ● Select PhoneGap when making a new project in Xcode. ● Android ● Install android SDK and add to $PATH ● Run “android” to grab latest version ● Setup Eclipse with Android plugin ● Add PhoneGap.jar to project Developing for iPhone ● PhoneGap builds in Xcode with iOS SDK ● Intel-based Mac ● Apple developer account (free) – Allows the use of iOS simulator ● Developer Program ● $99 per year ● Allows install onto device and release to store Deploying to iOS device Demo using Xcode ● Add HTML, CSS and JavaScript to www path ● Build and run ● App code comes after “deviceready” event ● Debugging: ● console.log (JS) ● NSLog (ObjC) ● Note: ● *-Info.plist – settings file Basic PhoneGap API ● Accelerometer ● Camera ● Contacts ● Device ● Events ● Geolocation ● Network ● Notification ● Also phone specific ones: ● Android menu / back buttons ● Read through phonegap.js Beta testing ● Do a release build ● Create a release provisioning profile ● Done through apples developer site ● Uses phone UUID ● Up to 100 phones ● End user drag profile and .app folder into iTunes ● Sync with phone as normal Submit to Apple ● Make sure the app does something ● Make sure app doesn't crash ● Check before using network ● Be careful how you use GPS ● Check copyright ● Apples testers seem US based Objective C ● Strict superset of C ● Message passing to object instances ● [obj method: argument]; ● Garbage collection ● Desktop only – [obj release]; Event Based How does PhoneGap work? ● webView:shouldStartLoadWithRequest:navigationType: ● Messaged from instance of UIWebView ● PhoneGap looks for patterns like: ● gap://./[][?] ● Then creates instance of class and passes message Writing iPhone plugins ● Create new header file (“Test.h”) ● Extend PhoneGapCommand Class ● Create new ObjC class (“Test.m”) ● Import new header file ● Call ObjC from JS ● PhoneGap.exec("Test.test"); ● Update JS from ObjC ● [webView stringByEvaluatingJavaScriptFromString:@“alert('test')”] Developing for Android ● Works on linux / mac / windows ● No yearly fee (one time $25) ● No app review process ● Instant updates vs a week ● Not all phones have Android Market ● Many 3rd party stores ● Fractured? 75% on 2.x Screen Sizes Demo using SDK ● Phone: ● Enable usb development ● Allow unknown sources ● Note: AndroidManifest.xml ● Like *-Info.plist on iPhone ● Permissions ● Debug: ● console.log (JS) ● Log.d (Java) Build Process ● Also available through UI with Android Eclipse plug-in Screen Sizes ● AndroidManifest.xml turn on similar ipad mode ● Viewport can in force 3GS type ● window.innerHeight / element.offsetHeight Beta testing / Release ● Allow unknown sources in applications menu ● Transfer .apk file to phone: ● Normally download in phones browser ● For release self sign .apk file Java ● Garbage collection ● Easier to cause an app lock up ● Google provide AsyncTask Writing Android plugins ● WebView features: ● addJavascriptInterface(JavaObject, “NameInJs”) ● Allows Java method to be called directly by JS ● PhoneGap 0.9.2 features JavaScript controlled plugin manager: ● PluginManager.addService( "HelloWorld", "com.phonegap.HelloWorldPlugin.HelloWorld" ); ● PhoneGap.execAsync(win, fail, "HelloWorld", "sayHello", []); Plugin Code Applications using PhoneGap ● Safari Books ● Ars Technica ● Wine.com ● CakeFest 2010 ● TransLink ● Food Hygiene Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 Slide 13 Slide 14 Slide 15 Slide 16 Slide 17 Slide 18 Slide 19 Slide 20 Slide 21 Slide 22 Slide 23 Slide 24 Slide 25 Slide 26 Slide 27 Slide 28 Slide 29 Slide 30 Slide 31 Slide 32 Slide 33 Slide 34 Slide 35 Slide 36 Slide 37 Slide 38 Slide 39