development mobile app cross device

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Development Mobile App PhoneGap

Nguyen Thai Hoang Phuong – Dai-ichi Life


Agenda• Smartphone Market Share • PhoneGap• Setup and Configuration Tool • PhoneGap Build• Debugging PhoneGap Apps


Marketshare In 2012 With 40 Million Units Sold


What is PhoneGap?


• Traditional mobile development looks like this:

Platform

Tools Language

Objective-C

Platform

Tools Language

Java


PhoneGap - Cordova• Is an open source platform for building native

mobile applications using standard web technologies (HTML/CSS/JavaScript)

• Apache Cordova is the name of the open source project

• PhoneGap is the name of the Adobe’s Cordova distrbution


Why would you use PhoneGap?


Why would you use PhoneGap?• PhoneGap allows you to use “write once, run

everywhere” paradigm• Web standards based & Open Source• You get native installers for each platform

ready to be distributed through application stores (App Store, Android Market, …)


PhoneGap could be your best friend if

• You want to target multiple mobile platforms• You know HTML/JavaScript/CSS• You already have a web site/web application.

Thus you can reuse parts of this (see Wikipedia)


Setup and Configuration Tool


Setup Tool - Android• Eclipse Classichttp://www.eclipse.org/downloads/• Android SDKhttp://developer.android.com/sdk/index.html• PhoneGaphttp://phonegap.com/download

http://www.eclipse.org/downloads/

http://developer.android.com/sdk/index.html

http://phonegap.com/download


Configure the ADT Plugin for Eclipse• ADT plugin must be installed through the

Eclipse Install New Software wizard.Start Eclipse.These steps will guide you through the installation

of the ADT plugin. http://developer.android.com/sdk/installing/installing-adt.html

Restart Eclipse.

http://developer.android.com/sdk/installing/installing-adt.html

http://developer.android.com/sdk/installing/installing-adt.html


Using platform native tool chain• Use the OS and tools each platform

recommends:– iOS - http://phonegap.com/start#ios-x4– Android - http://phonegap.com/start#android– BlackBerry - http://phonegap.com/start#

blackberry– Windows Phone - http://phonegap.com/start#wp– WebOS: http://phonegap.com/start#webos – Symbian: http://phonegap.com/start#symbian

http://phonegap.com/start














Demo - Example


Add new contact


index.html


contact.js


How does PhoneGap work?PhoneGap App Mobile Device

PhoneGap NativeEngine

PhoneGap JavaScriptEngine

Web ViewRenders the app UI

Access to nativemobilefeaturesYour Code

HTML/JavaScript/CSS/Images/Frameworks/Libraries


Built-in device APIs


PhoneGap Plug-ins• Examples of plugins: https://

github.com/purplecabbage/phonegap-plugins

https://github.com/purplecabbage/phonegap-plugins

https://github.com/purplecabbage/phonegap-plugins


Demo - Example


Use Google Chart API


index.html


Building PhoneGap Apps


Build your PhoneGap app as you’d build a regular web app

• Using your favorite editors (Eclipse, vim, Dreamweaver)

• Test and debug the app using your desktop browser

• Test and debug the app using mobile simulators/emulators and the physical devices


What can you use to build your application?• Remember your application will run on the

device’s browser• You can use whatever JavaScript frameworks

or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so on


Creating the native installersThere are 2 different methods to build the native installers for your PhoneGap app:• Using the target platform tool chain• Using PhoneGap Build – a cloud service


Using PhoneGap Build• http://build.phonegap.com - a cloud service• Supports: iOS, Android, BlackBerry, WebOS, Windows

Phone 7, and Symbian • Supports one plugin (ChildBrowser); but you can hack

in support for other plugins• It is in beta and it is free; it will always be free for Open

Source projects• You upload your files (index.html, CSS, JS, images)• Or you provide a Git / SVN link• Support for debugging

http://build.phonegap.com/


Resources• Source: github.com/callback• Docs: docs.phonegap.com• Wiki: wiki.phonegap.com• PhoneGap Build: build.phonegap.com• Plugins: github.com/purplecabbage/phonegap-plugins• Support: groups.google.com/group/phonegap• IRC: irc.freenode.net #phonegap• Apps: phonegap.com/apps• Bugs: issues.apache.org/jira/browse/CB


Resources(cont)• Getting started with PhoneGap

in Eclipse for Android • Getting started with PhoneGap in Xcode for iOS • Develop Mobile Applications Using PhoneGap

and Kendo UI• Creating Cross-Device Compatible Mobile Applicatio

ns that Integrate with SharePoint

http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html



http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-xcode-for-ios.html







http://www.c-sharpcorner.com/UploadFile/dhananjaycoder/develop-mobile-applications-using-phonegap-and-kendo-ui-par/



http://www.sharepointpromag.com/content1/topic/sharepoint-crossdevice-compatible-mobile-applications-142911/catpath/collaboration

http://www.sharepointpromag.com/content1/topic/sharepoint-crossdevice-compatible-mobile-applications-142911/catpath/collaboration


Resource(cont)

Wrox.Beginning.PhoneGaphttps://skydrive.live.com/redir?resid=86951F18C2B21FFB!196&authkey=!AACYDJFxtXRv4Kc

PhoneGap Mobile Application Development Cookbookhttps://skydrive.live.com/redir?resid=86951F18C2B21FFB!190&authkey=!AMoFJrzjyP8JfZo

https://skydrive.live.com/redir?resid=86951F18C2B21FFB!196&authkey=!AACYDJFxtXRv4Kc



https://skydrive.live.com/redir?resid=86951F18C2B21FFB!190&authkey=!AMoFJrzjyP8JfZo

https://skydrive.live.com/redir?resid=86951F18C2B21FFB!190&authkey=!AMoFJrzjyP8JfZo


Thank You!Question & Answers Time!

development mobile app cross device

Technology