Introduction to PhoneGapWeb Development for mobile platforms

Present by Miss. Danet KruengCompany: Web EssentialsPosition: Web DeveloperEmail: danet@web-essentials.asia

Outline❖ What is PhoneGap❖ Advantage❖ PhoneGap API Overview❖ Development Environment❖ Working with PhoneGap❖ Demo❖ Q&A❖ References

What is PhoneGap❏ Mobile web development framework❏ Based on Javascript, HTML5 and CSS3❏ Open source: Apache 2.0 License❏ Supported platforms: iPhone, Android, Windows Phone,

BlackBerry, Symbian, webOS, and Bada

Advantages➔ Multi-platform➔ Well-known technologies: HTML5 + Javascript + CSS3➔ Vast amount of JavaScript libraries/framework available:

◆ General purpose: JQuery, Prototype…◆ Mobile: JQuery Mobile, Enyo…

➔ Conclusion More and more web is everywhere

PhoneGap API Overview❏ Common Plugins: Good support across platforms

❏ Accelerometer - Camera❏ Capture - Compass❏ Connection - Contacts❏ Device❏ Events❏ File❏ Geolocation❏ Media❏ Notification❏ Storage

Development Environment❏ IDE Tool

❏ Eclipse, Dreamweaver, Visual Studio, XCode ...❏ Software Tool

❏ iOS Development: iOS SDK❏ Android: Android SDK, ADT plugin❏ BlackBerry: Sun SDK, Apache ant❏ Symbian: SDK...

Installing PhoneGap❏ Install PhoneGap

❖ Install Node Js➢ http://howtonode.org/how-to-install-nodejs

❖ $ sudo npm install -g phonegap❖ if no npm command install yet

➢ $ sudo apt-get install npm

❏ Set SDK path❏ PATH=$PATH:/home/sdk/android-sdk-linux/tools/::/home/sdk/android-

sdk-linux/platform-tools/❏ export PATH

Create PhoneGap App❏ $ phonegap create fossasia-demo❏ $ cd fossasia-demo❏ $ phonegap run android

❏ $ phonegap run android --emulator❏ $ phonegap run android --device

PhoneGap Structure❏ Merges: offers a place to specify assets to deploy on specific platforms.❏ Platforms: directory houses platform build files.❏ Plugins: When we install a plugin, the plugin artifacts will be placed in this

directory.❏ www: directory houses the application resources like html, css, js, and img

files.❏ config.xml: contains metadata needed to generate and distribute the

application.

Debug PhoneGap❏ Install Ripper add on in Chrome❏ Right click on Ripper icon -> Manage -> Check allow access to file URLs❏ Open index.html of your application❏ Click on Ripper icon -> enable

Building PhoneGapThere are many different ways to build PhoneGap App❏ Using PhoneGap build

❏ https://build.phonegap.com/❏ Command line

❏ http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-Line%20Interface

❏ IDE Approach

Demo And Q&A

References❏ http://phonegap.com/❏ http://docs.phonegap.com/en/edge/guide_platforms_index.md.html❏ http://docs.phonegap.com/en/3.3.0/index.html❏ http://code.tutsplus.com/tutorials/introduction-to-iphone-sdk-development--

mobile-133❏ https://github.com/phonegap/phonegap/wiki❏ http://code.tutsplus.com/tutorials/introduction-to-phonegap-development--

mobile-2470❏ http://www.slideshare.net/smronju1/building-mobile-apps-using-phonegap❏ https://www.openshift.com/blogs/day-10-phonegap-mobile-development-

for-the-dummies❏ http://developer.android.com/sdk/index.html