Phonegap

4,323 views
4,187 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,323
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Phonegap

  1. 1. What is PhoneGap?Its 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 )
  2. 2. The Situation?iPhone – Objective C. Android – Java Blackberry – Java Windows Mobile - .NET or unmanaged C++ Nokia – C++, Java, Python, Flash, WRT Palm – Web Tech
  3. 3. The Distribution?Apple App Store Android Market Blackberry App World Nokia Ovi Store Samsung App Store LG Application Store Windows Marketplace and many more ….
  4. 4. So What Happens?Fragmentation. Cost. Nightmares.
  5. 5. Why HTML ? Scalability. Platform Independent. Custom User Interface Custom fonts Free: as in freedom.
  6. 6. 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 !
  7. 7. How To Build A Mobile Appvar idea = "An app than solves all your problems";[ios,android,blackberry].forEach(function(platform){createMobileApp(idea,platform);})// using native APIs and toolsfunction createMobileApp(idea,platform){ var app,profit; platform.registerForDeveloperProgram(); platform.downloadAndInstallSDK(); platform.learnNativeAPIs(); app = platform.writeNativeApp(idea); app.buildForPlatform(); profit = app.submitToAppStore(); return profit; }
  8. 8. Same with PhoneGapaddJavascript(" 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; }
  9. 9. Phone Gap isCross-PlatformiOS, 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>
  10. 10. Core
  11. 11. 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 >
  12. 12. What Native APIs are available ?Geolocation Accelerometer Notifications Media playback Camera Device info Contacts Online/Offline SMS / Telephone Magnetometer!
  13. 13. 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); }
  14. 14. 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}); }
  15. 15. Contacts!function thirdPerson() {debug.log("Getting the Second Contact"); navigator.contactManager.get(function(c) { debug.log("Contact 2: " + c.contacts[1].name); });}
  16. 16. Vibration!navigator.notification.vibrate();//grrrrrrrr
  17. 17. ASK !
  18. 18. Now... go write some apps!*http://phonegap.comhttp://groups.google.com/group/phonegap Reach The Presenter afzaal@afzaalace.com Twitter @afzaalace

×