• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building mobile apps using Phonegap
 

Building mobile apps using Phonegap

on

  • 5,414 views

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

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

Statistics

Views

Total Views
5,414
Views on SlideShare
5,308
Embed Views
106

Actions

Likes
5
Downloads
223
Comments
0

3 Embeds 106

http://avaminzhang.wordpress.com 104
http://localhost 1
https://avaminzhang.wordpress.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Building mobile apps using Phonegap Presentation Transcript

  • Building mobile apps using Phonegap
    SaidurRahmanBijon
    Md. Shoriful Islam Ronju
  • 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.
  • What is PHONEGAP?
  • What is PhoneGap
  • What is PHONEGAP?
  • PhoneGap Apps
    Orbium Puzzle
    Dairy
    3 Card Poker
    City Touch
    LogitechSqueezebox
    Chess
  • Why PHONEGAP?
    Supported mobile platforms ….
  • Why PHONEGAP?
  • Why PHONEGAP?
    Total: 600,000
    Monthly: 44,000
  • Why PHONEGAP?
  • Why PHONEGAP?
  • Why PHONEGAP?
  • PHONEGAP Features
    • Accelerometer
    • Camera
    • Compass
    • Contacts
    • File
    • Geolocation
    • Media
    • Network
    • Storage
    • Notifications
  • What do you need to develop in PHONEGAP?
    For iOSDevelopment
    • Xcode
    • iOSSDK
    For Android
    • Android SDK
    • ADT plugin
    For BlackBerry
    • Sun SDK
    • Apache ant
    • BlackBerry WebWorksSDK
    For Symbian
    • SDK
    PHONEGAP Build
  • Setup PhoneGap
  • Development steps for iPhone
  • Development steps for iPhone
  • Development steps for iPhone
  • Development steps for iPhone
  • Development steps for iPhone
  • PHONEGAP
    • Accelerometer
    • Camera
    • Compass
    • Contacts
    • File
    • Geolocation
    • Media
    • Network
    • Storage
    • Notifications
  • Sample Application
  • Sample Application : Notification
  • Index.html( continue ...)
    <script type="text/javascript” src="phonegap.0.9.6.min.js"></script>
    <body onload="onBodyLoad()">
  • Notification ( continue ...)
    document.addEventListener ("deviceready",onDeviceReady,false);
    navigator.notification.alert (‘msg’);
  • Notification (continue..)
    function onDeviceReady() {
    // do your thing!
    navigator.notification.alert(”Phonegap is working");
    }
  • Notification
  • Sample Application: Accelerometer
  • Accelerometer( continue ...)
  • Accelerometer API ( continue ...)
    Captures device motion in the x, y, and z direction.
    Navigator.accelerometer.getCurrentAcceleration()
  • Accelerometer API ( continue ...)
    function onDeviceReady() {
    navigator.accelerometer.getCurrentAcceleration (onSuccess,onError);}
  • Accelerometer API ( continue ...)
    functiononSuccess(acceleration) {
    $(‘#id’).('Acceleration X: ' + acceleration.x+
    'Acceleration Y: ' + acceleration.y +
    'Acceleration Z: ' + acceleration.z+
    );
    }
  • Accelerometer (Continue..)
  • Storage API
    Access to the W3C Web storage.
  • Sample Application : Storage API
  • 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);
    }
  • 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');
    }
  • 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)');
  • Storage API
    tx.executeSql("INSERT INTO POSTS (title, description)
    VALUES (?, ?)",
    [title, post_desc]);
  • Storage API
    tx.executeSql("INSERT INTO POSTS(title, description) VALUES (?, ?)", [title, post_desc]);
    navigator.notification.alert("Title "+ title );
  • Storage API
    tx.executeSql('SELECT * FROM POSTS', [],
    querySuccess, errorCB);
    function querySuccess(tx, results) {
    results.rows.item(i).title
  • Plugins
    • Facebook
    • Paypal
    • More….
  • How to Deploy in Device
    • Change appName-info.plist file
  • How to Deploy in Device
    Change to iOS Device
    Change version & Device
  • How to Deploy in Device
    Hit Run
  • How to deploy in Device
  • How to deploy in Device
    Run as Android Application
  • Reference
    http://docs.phonegap.com
  • Thank You
    Any Question?