Downloaded 296 times
Uploaded byMohammad Shoriful Islam Ronju
Building mobile apps using Phonegap
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.
Building mobile apps using Phonegap
- 1. Building mobile appsusing PhonegapSaidurRahmanBijonMd. Shoriful Islam Ronju
- 2. Presentation outlineWhat isPHONEGAP?Why PHONEGAP?Features? What do you need to develop in PHONEGAP?Development stepsResources Sample appDeploy in DeviceQuestions and Answer.
- 3.
- 4.
- 5.
- 6. PhoneGap AppsOrbium PuzzleDairy3Card PokerCity TouchLogitechSqueezeboxChess
- 7. Why PHONEGAP?Supported mobileplatforms ….
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. NotificationsWhat do youneed to develop in PHONEGAP?For iOSDevelopmentXcode
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. Development steps foriPhone
- 29. Development steps foriPhone
- 30. Development steps foriPhone
- 31. Development steps foriPhone
- 32. Development steps foriPhone
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. Sample Application :Notification
- 44. Index.html( continue ...)<scripttype="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.
- 48.
- 49.
- 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+ ); }
- 53.
- 54. Storage APIAccess tothe 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 INTOPOSTS (title, description) VALUES (?, ?)", [title, post_desc]);
- 60. Storage APItx.executeSql("INSERT INTOPOSTS(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.
- 63.
- 64. More….How to Deployin DeviceChange appName-info.plist fileHow to Deploy in DeviceChange to iOS DeviceChange version & Device
- 65. How to Deployin DeviceHit Run
- 66. How to deployin Device
- 67. How to deployin DeviceRun as Android Application
- 68.
- 69.
Editor's Notes
- #2 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.
- #3 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.
- #4 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.
- #6 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.
- #14 This is another option for an overview slide.
- #15 This is another option for an overview slide.
- #16 This is another option for an overview slide.
- #17 This is another option for an overview slide.
- #18 This is another option for an overview slide.
- #19 This is another option for an overview slide.
- #20 This is another option for an overview slide.
- #21 This is another option for an overview slide.
- #22 This is another option for an overview slide.