PhoneGap

Page 1


What is PhoneGap? It's a tool for building mobile apps using web-tech.

HTML for layout ( Better yet HTML5 ) JavaScript for accessing device functionality CSS for rich look and feel. ( Better yet CSS3 )


The Situation? iPhone – Objective C. Android – Java Blackberry – Java Windows Mobile - .NET or unmanaged C++ Nokia – C++, Java, Python, Flash, WRT Palm – Web Tech


The Distribution? Apple App Store Android Market Blackberry App World Nokia Ovi Store Samsung App Store LG Application Store Windows Marketplace and many more ‌.



So What Happens? Fragmentation. Cost. Nightmares.



Why HTML ? Scalability. Platform Independent. Custom User Interface Custom fonts Free: as in freedom.




Going Native ! Create an HTML5 App that can work offline. Join hands with PhoneGap! Use native features using JS! Compile Applications for multiple platforms Publish and Share !


How To Build A Mobile App var idea = "An app than solves all your problems"; [ios,android,blackberry].forEach(function(platform){ createMobileApp(idea,platform);}) // using native APIs and tools function createMobileApp(idea,platform){ var app,profit; platform.registerForDeveloperProgram(); platform.downloadAndInstallSDK(); platform.learnNativeAPIs(); app = platform.writeNativeApp(idea); app.buildForPlatform(); profit = app.submitToAppStore(); return profit; }


Same with PhoneGap addJavascript(" phoneGap.js ",head); var idea = " An app than solves all your problems "; var HTML5app = writeAppWithHTML5(idea); createMobileApp(HTML5app, [ios, android, blackberry]); function createMobileApp (HTML5app, platforms){ var app, profit = 0; platforms.forEach(function (platform) { platform.registerForDeveloperProgram(); platform.downloadAndInstallSDK(); app = platform.buildNativeAppWithPhoneGap(HTML5app); app.buildForPlatform(); profit += app.submitToAppStore(); }); return profit; }



Phone Gap is Cross-Platform iOS, Android, BlackBerry 4.6+, webOS, Symbian... Open Source - MIT outbound, MIT + Apache inbound Web Technologies - defer to native support Extensible – any[many] native code available any JS libraries available through <script>


Core


PhoneGap apps are just web pages? - Yes, web pages that access device functionality. - Apps can still provide a rich experience, especially with CSS transitions and tweening animations. - There are even games built with PhoneGap!

Bubble Drop >


What Native APIs are available ? Geolocation Accelerometer Notifications Media playback Camera Device info Contacts Online/Offline SMS / Telephone Magnetometer!


Geolocation ! function getLocation() { debug.log("Getting your Current Location"); navigator.notification.activityStart(); var win = function(p) { debug.log(p.latitude + " - " + p.logitude); navigator.notification.activityStop(); }; var fail = function() { debug.log("You Have no Location. Bump!"); }; navigator.geolocation.getCurrentPosition(win,fail); }


Accelerometer! function needforspeed() { debug.log("Watching the Accelerometer"); var win = function(a){ debug.log(roundNumber(a.x)+" - "+roundNumber(a.y)+ " - "+roundNumber(a.z)); }; var fail = function(){ //We never fail right ? }; navigator.accelerometer.watchAcceleration(win,fail,{frequency:100}); }


Contacts! function thirdPerson() { debug.log("Getting the Second Contact"); navigator.contactManager.get(function(c) { debug.log("Contact 2: " + c.contacts[1].name); }); }


Vibration! navigator.notification.vibrate(); //grrrrrrrr


ASK !


Now... go write some apps!* http://phonegap.com http://groups.google.com/group/phonegap

Reach The Presenter afzaal@afzaalace.com Twitter @afzaalace


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.