Technical Seminar on

PhoneGap PLATFORM

SUBMITTED BY :

HARSHAL RAVERKAR

141013004

COMPUTING TECHNOLOGY & VIRTUALIZATION

CONTENTS

Introduction What is PhoneGap Supported Platform How it works Architecture Apache Cordova Pros & Cons of PhoneGap Application conclusion Reference

INTRODUCTION PhoneGap is a open source mobile

development framework produced by Nitobi, purchased by Adobe Systems in 2011.

Enables building of mobile device applications using JavaScript, HTML and CSS.

The PhoneGap applications are hybrid.

What is PhoneGap PhoneGap uses the native browser on

the device to render the HTML/CSS/JS Keep in mind that can affect the

experience It also keeps apps nice and small

PhoneGap uses the native project format for each platform

Open, emulate, and test from within the native development environment!

Package Your App for Distribution

Supported Platform

Basic API

Out of the box, PhoneGap provides support for a number of basic device APIs.- Accelerometer- Camera- Capture- Compass- Connection- Contacts- Device- Events- File- Geolocation- Media- Network- Notification- Storage

How it Works

Wrap it up with PhoneGap• Using the free open source framework

or PhoneGap build • You can access the native APIs

Deploy to multiple platforms Build your app once with web-standards• Based on HTML5• Standards-based web technologies to

bridge web applications and mobile devices

How it Works Include web code in a native app

project:- assets/www/js/, css/,

images/, etc. Native code loads a URL to the web

code through the device’s internal browser:-

Extend a CordovaWebViewClient - super.loadUrl(

“file:///android_asset/www/login.html” ); Apache Cordova exposes native device

APIs through JavaScript:navigator.device.

capture.captureImage ( captureSuccess(), captureError(), [options] );

Your CodeNative Web View

Native APIs

Native App - .apk, .xap, etc.

Architecture of PhoneGap

Device Notifications

Data Storage

Apache Cordova“Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript.”

A platform-specific engine that exposes

access to native device functionality through a series of JavaScript APIs.

PhoneGap is actually an open source distribution of Cordova.

Pros for PhoneGap Development

HTML5, CSS and JavaScript skills vs. Objective-C, Java and C#

Single code base for all platforms iOS, Android, WP 7 Mango, mobile web

You can take advantage of distribution and integrated payment Via the App Store or Android Market

Cons for PhoneGap Development Poor performance• If your app is graphically intense, i.e. a

game. • Caching or leveraging some 3rd party

solutions may be implemented with native graphics

• For the most part a native app is much faster/smoother than mobile web app

Cons for PhoneGap Development

Lack of pre-built UI widgets, transitions, standard controls, etc.

• Your development time can take longer Especially if you want a

polished- looking app with a native look and feel

Application

Conclusion Single Page Architecture Use Templates Structure Your Code Optimize Data Transfer Abstract Components Optimize for Touch Use Hardware Acceleration Optimize For Performance

Reference

tricedesigns.com/presentations/html5devconf/architecture/

PhoneGap.com/2012/05/02/PhoneGap-explained-visually/

docs.PhoneGap.com/en/2.2.0/guide_plugin-development_index.md.html

en.wikipedia.org/wiki/PhoneGap

PhoneGap.com/2012/.../new-wikipedia-ios-app-is-powered-by-PhoneGap

Any Question

Thanking You

Keep Smiling