Introduction to phone gap
Post on 09-May-2015
737 Views
Preview:
DESCRIPTION
Transcript
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
top related