Building mobile apps using Phonegap<br />SaidurRahmanBijon<br />Md. Shoriful Islam Ronju<br />
Presentation outline<br />What is PHONEGAP?<br />Why PHONEGAP?<br />Features?<br /> What do you need to develop in PHONEGA...
What is PHONEGAP?<br />
What is PhoneGap<br />
What is PHONEGAP?<br />
PhoneGap Apps<br />Orbium Puzzle<br />Dairy<br />3 Card Poker<br />City Touch<br />LogitechSqueezebox<br />Chess<br />
Why PHONEGAP?<br />Supported mobile platforms ….<br />
Why PHONEGAP?<br />
Why PHONEGAP?<br />Total: 600,000<br />Monthly: 44,000<br />
Why PHONEGAP?<br />
Why PHONEGAP?<br />
Why PHONEGAP?<br />
PHONEGAP Features<br /><ul><li>Accelerometer
Camera
Compass
Contacts
File
Geolocation
Media
Network
Storage
Notifications</li></li></ul><li>What do you need to develop in PHONEGAP?<br />For iOSDevelopment<br /><ul><li>Xcode
iOSSDK</li></ul>For Android<br /><ul><li>Android SDK
ADT plugin</li></ul>For BlackBerry<br /><ul><li>Sun SDK
Apache ant
BlackBerry WebWorksSDK</li></ul>For Symbian<br /><ul><li>SDK</li></ul>PHONEGAP Build<br />
Setup PhoneGap<br />
Development steps for iPhone<br />
Development steps for iPhone<br />
Development steps for iPhone<br />
Development steps for iPhone<br />
Development steps for iPhone<br />
PHONEGAP <br /><ul><li>Accelerometer
Camera
Compass
Contacts
File
Geolocation
Media
Network
Storage
Notifications</li></li></ul><li>Sample Application<br />
Sample Application : Notification<br />
Index.html( continue ...)<br /><script type="text/javascript” src="phonegap.0.9.6.min.js"></script><br /><body onload="onB...
Notification  ( continue ...)<br />document.addEventListener ("deviceready",onDeviceReady,false);<br />navigator.notificat...
Notification (continue..)<br />function onDeviceReady() {<br />				// do your thing!<br />navigator.notification.alert(”Ph...
Notification<br />
Sample Application: Accelerometer<br />
Accelerometer( continue ...)<br />
Upcoming SlideShare
Loading in...5
×

Building mobile apps using Phonegap

5,737

Published on

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

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,737
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
284
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • This template can be used as a starter file for presenting training materials in a group setting.SectionsSections can help to organize your slides or facilitate collaboration between multiple authors. On the Home tab under Slides, click Section, and then click Add Section.NotesUse the Notes pane for delivery notes or to provide additional details for the audience. You can see these notes in Presenter View during your presentation. Keep in mind the font size (important for accessibility, visibility, videotaping, and online production)Coordinated colors Pay particular attention to the graphs, charts, and text boxes.Consider that attendees will print in black and white or grayscale. Run a test print to make sure your colors work when printed in pure black and white and grayscale.Graphics, tables, and graphsKeep it simple: If possible, use consistent, non-distracting styles and colors.Label all graphs and tables.
  • Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
  • Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
  • Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
  • This is another option for an overview slide.
  • This is another option for an overview slide.
  • This is another option for an overview slide.
  • This is another option for an overview slide.
  • This is another option for an overview slide.
  • This is another option for an overview slide.
  • This is another option for an overview slide.
  • This is another option for an overview slide.
  • This is another option for an overview slide.
  • 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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×