Building mobile apps using Phonegap
•Descargar como PPTX, PDF•
5 recomendaciones•4,283 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Similar a Building mobile apps using Phonegap
Similar a Building mobile apps using Phonegap (20)
Último
Último (15)
Building mobile apps using Phonegap
- 1. Building mobile apps using Phonegap SaidurRahmanBijon Md. Shoriful Islam Ronju
- 2. Presentation outline What is PHONEGAP? Why PHONEGAP? Features? What do you need to develop in PHONEGAP? Development steps Resources Sample app Deploy in Device Questions and Answer.
- 6. PhoneGap Apps Orbium Puzzle Dairy 3 Card Poker City Touch LogitechSqueezebox Chess
- 7. Why PHONEGAP? Supported mobile platforms ….
- 9. Why PHONEGAP? Total: 600,000 Monthly: 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
- 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 API Access to the W3C Web storage.
- 55. Sample Application : Storage API
- 56. Sample Application : Storage API vardb; //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 API vardb; //set a global variable function populateDB(tx) { // drop the Blog table if it exists tx.executeSql(’Blog TABLE IF EXISTS POSTS'); }
- 58. Sample Application : Storage API tx.executeSql(’ CREATE TABLE IF NOT EXISTS POSTS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, titlevarchar(255) NOT NULL, description TEXT)');
- 59. Storage API tx.executeSql("INSERT INTO POSTS (title, description) VALUES (?, ?)", [title, post_desc]);
- 60. Storage API tx.executeSql("INSERT INTO POSTS(title, description) VALUES (?, ?)", [title, post_desc]); navigator.notification.alert("Title "+ title );
- 61. Storage API tx.executeSql('SELECT * FROM POSTS', [], querySuccess, errorCB); function querySuccess(tx, results) { results.rows.item(i).title
- 63. Paypal
- 65. How to Deploy in Device Hit Run
- 66. How to deploy in Device
- 67. How to deploy in Device Run as Android Application
- 69. Thank You Any Question?
Notas del editor
- 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.