Building mobile apps using Phonegap
•Download as PPTX, PDF•
5 likes•4,287 views
Phonegap allows developers to build mobile apps using standard web technologies like HTML, CSS, and JavaScript. It supports developing apps for platforms like iOS, Android, Blackberry and others. The presentation outlines what Phonegap is, why developers should use it, its features, the development process, and includes examples of building simple apps using the accelerometer and storage APIs. Sample apps are deployed to real devices to demonstrate the process.
Report
Share
Related slideshows
Building mobile apps using Phonegap
- 1. Building mobile apps using PhonegapSaidurRahmanBijonMd. Shoriful Islam Ronju
- 2. Presentation outlineWhat is PHONEGAP?Why PHONEGAP?Features? What do you need to develop in PHONEGAP?Development stepsResources Sample appDeploy in DeviceQuestions and Answer.
- 6. PhoneGap AppsOrbium PuzzleDairy3 Card PokerCity TouchLogitechSqueezeboxChess
- 7. Why PHONEGAP?Supported mobile platforms ….
- 9. Why PHONEGAP?Total: 600,000Monthly: 44,000
- 10. Why PHONEGAP?
- 11. Why PHONEGAP?
- 12. Why PHONEGAP?
- 14. Camera
- 15. Compass
- 16. Contacts
- 17. File
- 18. Geolocation
- 19. Media
- 20. Network
- 21. Storage
- 22. NotificationsWhat do you need to develop in PHONEGAP?For iOSDevelopmentXcode
- 24. ADT pluginFor BlackBerrySun SDK
- 25. Apache ant
- 27. Setup PhoneGap
- 28. Development steps for iPhone
- 29. Development steps for iPhone
- 30. Development steps for iPhone
- 31. Development steps for iPhone
- 32. Development steps for iPhone
- 34. Camera
- 35. Compass
- 36. Contacts
- 37. File
- 38. Geolocation
- 39. Media
- 40. Network
- 41. Storage
- 43. Sample Application : Notification
- 44. Index.html( continue ...)<script type="text/javascript” src="phonegap.0.9.6.min.js"></script><body onload="onBodyLoad()">
- 45. Notification ( continue ...)document.addEventListener ("deviceready",onDeviceReady,false);navigator.notification.alert (‘msg’);
- 46. Notification (continue..)function onDeviceReady() { // do your thing!navigator.notification.alert(”Phonegap is working"); }
- 47. Notification
- 50. Accelerometer API ( continue ...)Captures device motion in the x, y, and z direction.Navigator.accelerometer.getCurrentAcceleration()
- 51. Accelerometer API ( continue ...)function onDeviceReady() {navigator.accelerometer.getCurrentAcceleration (onSuccess,onError);}
- 52. Accelerometer API ( continue ...)functiononSuccess(acceleration) {$(‘#id’).('Acceleration X: ' + acceleration.x+ 'Acceleration Y: ' + acceleration.y + 'Acceleration Z: ' + acceleration.z+ ); }
- 54. Storage APIAccess to the W3C Web storage.
- 55. Sample Application : Storage API
- 56. Sample Application : Storage APIvardb; //set a global variable // create the db instance function createDB() { db= window.openDatabase( "myblog", "1.0", "Blog DB");db.transaction(populateDB, errorCB, successCB); }
- 57. Sample Application : Storage APIvardb; //set a global variablefunction populateDB(tx) { // drop the Blog table if it existstx.executeSql(’Blog TABLE IF EXISTS POSTS'); }
- 58. Sample Application : Storage APItx.executeSql(’ CREATE TABLE IF NOT EXISTS POSTS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, titlevarchar(255) NOT NULL, description TEXT)');
- 59. Storage APItx.executeSql("INSERT INTO POSTS (title, description) VALUES (?, ?)", [title, post_desc]);
- 60. Storage APItx.executeSql("INSERT INTO POSTS(title, description) VALUES (?, ?)", [title, post_desc]);navigator.notification.alert("Title "+ title );
- 61. Storage APItx.executeSql('SELECT * FROM POSTS', [], querySuccess, errorCB);function querySuccess(tx, results) {results.rows.item(i).title
- 62. PluginsFacebook
- 63. Paypal
- 64. More….How to Deploy in DeviceChange appName-info.plist fileHow to Deploy in DeviceChange to iOS DeviceChange version & Device
- 65. How to Deploy in DeviceHit Run
- 66. How to deploy in Device
- 67. How to deploy in DeviceRun as Android Application
Editor's Notes
- 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.