Building mobile apps using Phonegap

  • 5,157 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,157
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
244
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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.

Transcript

  • 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.
  • 3. What is PHONEGAP?
  • 4. What is PhoneGap
  • 5. What is PHONEGAP?
  • 6. PhoneGap Apps
    Orbium Puzzle
    Dairy
    3 Card Poker
    City Touch
    LogitechSqueezebox
    Chess
  • 7. Why PHONEGAP?
    Supported mobile platforms ….
  • 8. Why PHONEGAP?
  • 9. Why PHONEGAP?
    Total: 600,000
    Monthly: 44,000
  • 10. Why PHONEGAP?
  • 11. Why PHONEGAP?
  • 12. Why PHONEGAP?
  • 13. PHONEGAP Features
  • What do you need to develop in PHONEGAP?
    For iOSDevelopment
    For Android
    • Android SDK
    • 24. ADT plugin
    For BlackBerry
    For Symbian
    • SDK
    PHONEGAP Build
  • 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
  • 33. PHONEGAP
  • Sample Application
  • 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
  • 48. Sample Application: Accelerometer
  • 49. Accelerometer( continue ...)
  • 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. Accelerometer (Continue..)
  • 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
  • 62. Plugins
  • How to Deploy in Device
    • Change appName-info.plist file
  • How to Deploy in Device
    Change to iOS Device
    Change version & Device
  • 65. How to Deploy in Device
    Hit Run
  • 66. How to deploy in Device
  • 67. How to deploy in Device
    Run as Android Application
  • 68. Reference
    http://docs.phonegap.com
  • 69. Thank You
    Any Question?