building mobile apps using phonegap
DESCRIPTION
Building mobile applications using HTML5, CSS3, Javascript and PhoneGap.TRANSCRIPT
BUILDING MOBILE APPS USING PHONEGAP
Saidur Rahman BijonMd. 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
3 Card Poker Dairy Orbium Puzzle
City TouchChessLogitech Squeezebox
Supported mobile platforms ….
Why PHONEGAP?
Why PHONEGAP?
Why PHONEGAP?
Total: 600,000Monthly: 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 iOS Development•Xcode•iOS SDK
For Android•Android SDK•ADT plugin
For BlackBerry•Sun SDK•Apache ant•BlackBerry WebWorks SDK
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 ( CONTİNUE ...)
<script type="text/javascript” src="phonegap.0.9.6.min.js"></script><body onload="onBodyLoad()">
NOTIFICATION ( CONTİNUE ...)
navigator.notification.alert (‘msg’);
document.addEventListener ("deviceready",onDeviceReady,false);
NOTIFICATION (CONTİNUE..)
function onDeviceReady() {// do your thing!
navigator.notification.alert(”Phonegap is working");
}
Notification
Sample Application: Accelerometer
ACCELEROMETER ( CONTİNUE ...)
Navigator.accelerometer.getCurrentAcceleration()
Captures device motion in the x, y, and z direction.
ACCELEROMETER API ( CONTİNUE ...)
function onDeviceReady() { navigator.accelerometer.getCurrentAcceleration (onSuccess,onError);}
ACCELEROMETER API ( CONTİNUE ...)
function onSuccess(acceleration) { $(‘#id’).('Acceleration X: ' + acceleration.x + 'Acceleration Y: ' + acceleration.y + 'Acceleration Z: ' + acceleration.z + ); }
ACCELEROMETER API ( CONTİNUE ...)
ACCELEROMETER (CONTINUE..)
STORAGE API
Access to the W3C Web storage.
SAMPLE APPLICATION : STORAGE API
var db; //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
var db; //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, title varchar(255) NOT NULL, description TEXT)');
SAMPLE APPLICATION : 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
STORAGE API
PLUGİNS
• 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?