Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building mobile apps using Phonegap

6,581 views

Published on

Building mobile applications using HTML5, CSS3, Javascript and PhoneGap.

  • Be the first to comment

Building mobile apps using Phonegap

  1. 1. Building mobile apps using Phonegap<br />SaidurRahmanBijon<br />Md. Shoriful Islam Ronju<br />
  2. 2. Presentation outline<br />What is PHONEGAP?<br />Why PHONEGAP?<br />Features?<br /> What do you need to develop in PHONEGAP?<br />Development steps<br />Resources <br />Sample app<br />Deploy in Device<br />Questions and Answer.<br />
  3. 3. What is PHONEGAP?<br />
  4. 4. What is PhoneGap<br />
  5. 5. What is PHONEGAP?<br />
  6. 6. PhoneGap Apps<br />Orbium Puzzle<br />Dairy<br />3 Card Poker<br />City Touch<br />LogitechSqueezebox<br />Chess<br />
  7. 7. Why PHONEGAP?<br />Supported mobile platforms ….<br />
  8. 8. Why PHONEGAP?<br />
  9. 9. Why PHONEGAP?<br />Total: 600,000<br />Monthly: 44,000<br />
  10. 10. Why PHONEGAP?<br />
  11. 11. Why PHONEGAP?<br />
  12. 12. Why PHONEGAP?<br />
  13. 13. PHONEGAP Features<br /><ul><li>Accelerometer
  14. 14. Camera
  15. 15. Compass
  16. 16. Contacts
  17. 17. File
  18. 18. Geolocation
  19. 19. Media
  20. 20. Network
  21. 21. Storage
  22. 22. Notifications</li></li></ul><li>What do you need to develop in PHONEGAP?<br />For iOSDevelopment<br /><ul><li>Xcode
  23. 23. iOSSDK</li></ul>For Android<br /><ul><li>Android SDK
  24. 24. ADT plugin</li></ul>For BlackBerry<br /><ul><li>Sun SDK
  25. 25. Apache ant
  26. 26. BlackBerry WebWorksSDK</li></ul>For Symbian<br /><ul><li>SDK</li></ul>PHONEGAP Build<br />
  27. 27. Setup PhoneGap<br />
  28. 28. Development steps for iPhone<br />
  29. 29. Development steps for iPhone<br />
  30. 30. Development steps for iPhone<br />
  31. 31. Development steps for iPhone<br />
  32. 32. Development steps for iPhone<br />
  33. 33. PHONEGAP <br /><ul><li>Accelerometer
  34. 34. Camera
  35. 35. Compass
  36. 36. Contacts
  37. 37. File
  38. 38. Geolocation
  39. 39. Media
  40. 40. Network
  41. 41. Storage
  42. 42. Notifications</li></li></ul><li>Sample Application<br />
  43. 43. Sample Application : Notification<br />
  44. 44. Index.html( continue ...)<br /><script type="text/javascript” src="phonegap.0.9.6.min.js"></script><br /><body onload="onBodyLoad()"><br />
  45. 45. Notification ( continue ...)<br />document.addEventListener ("deviceready",onDeviceReady,false);<br />navigator.notification.alert (‘msg’);<br />
  46. 46. Notification (continue..)<br />function onDeviceReady() {<br /> // do your thing!<br />navigator.notification.alert(”Phonegap is working");<br /> }<br />
  47. 47. Notification<br />
  48. 48. Sample Application: Accelerometer<br />
  49. 49. Accelerometer( continue ...)<br />
  50. 50. Accelerometer API ( continue ...)<br />Captures device motion in the x, y, and z direction.<br />Navigator.accelerometer.getCurrentAcceleration()<br />
  51. 51. Accelerometer API ( continue ...)<br />function onDeviceReady() {<br />navigator.accelerometer.getCurrentAcceleration (onSuccess,onError);}<br />
  52. 52. Accelerometer API ( continue ...)<br />functiononSuccess(acceleration) {<br />$(‘#id’).('Acceleration X: ' + acceleration.x+<br /> 'Acceleration Y: ' + acceleration.y + <br /> 'Acceleration Z: ' + acceleration.z+<br /> );<br /> }<br />
  53. 53. Accelerometer (Continue..)<br />
  54. 54. Storage API<br />Access to the W3C Web storage.<br />
  55. 55. Sample Application : Storage API<br />
  56. 56. Sample Application : Storage API<br />vardb; //set a global variable<br /> // create the db instance<br /> function createDB() { <br />db= window.openDatabase(<br /> "myblog", "1.0", "Blog DB");<br />db.transaction(populateDB, <br />errorCB, successCB);<br /> }<br />
  57. 57. Sample Application : Storage API<br />vardb; //set a global variable<br />function populateDB(tx) {<br /> // drop the Blog table if it exists<br />tx.executeSql(’Blog TABLE <br /> IF EXISTS POSTS'); <br />}<br />
  58. 58. Sample Application : Storage API<br />tx.executeSql(’<br /> CREATE TABLE IF NOT EXISTS POSTS <br /> (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, <br />titlevarchar(255) NOT NULL, description TEXT)');<br />
  59. 59. Storage API<br />tx.executeSql("INSERT INTO POSTS (title, description) <br /> VALUES (?, ?)", <br /> [title, post_desc]);<br />
  60. 60. Storage API<br />tx.executeSql("INSERT INTO POSTS(title, description) VALUES (?, ?)", [title, post_desc]);<br />navigator.notification.alert("Title "+ title );<br />
  61. 61. Storage API<br />tx.executeSql('SELECT * FROM POSTS', [], <br />querySuccess, errorCB);<br />function querySuccess(tx, results) {<br />results.rows.item(i).title<br />
  62. 62. Plugins<br /><ul><li>Facebook
  63. 63. Paypal
  64. 64. More….</li></li></ul><li>How to Deploy in Device<br /><ul><li>Change appName-info.plist file</li></li></ul><li>How to Deploy in Device<br />Change to iOS Device<br />Change version & Device<br />
  65. 65. How to Deploy in Device<br />Hit Run<br />
  66. 66. How to deploy in Device<br />
  67. 67. How to deploy in Device<br />Run as Android Application<br />
  68. 68. Reference<br />http://docs.phonegap.com<br />
  69. 69. Thank You<br />Any Question?<br />

×