Your SlideShare is downloading. ×
0
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Introduction to phone gap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to phone gap

739

Published on

This is just short introduction to Phone Gap that I have been take presentation on FOSSASIA (28 Feb- 1March 2014)

This is just short introduction to Phone Gap that I have been take presentation on FOSSASIA (28 Feb- 1March 2014)

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
739
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to PhoneGap Web Development for mobile platforms Present by Miss. Danet Krueng Company: Web Essentials Position: Web Developer Email: danet@web-essentials.asia
  • 2. Outline ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ What is PhoneGap Advantage PhoneGap API Overview Development Environment Working with PhoneGap Demo Q&A References
  • 3. 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
  • 4. 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
  • 5. PhoneGap API Overview ❏ Common Plugins: Good support across platforms ❏ Accelerometer - Camera ❏ Capture - Compass ❏ Connection - Contacts ❏ Device ❏ Events ❏ File ❏ Geolocation ❏ Media ❏ Notification ❏ Storage
  • 6. 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...
  • 7. 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/androidsdk-linux/platform-tools/ ❏ export PATH
  • 8. Create PhoneGap App ❏ ❏ ❏ $ phonegap create fossasia-demo $ cd fossasia-demo $ phonegap run android ❏ $ phonegap run android --emulator ❏ $ phonegap run android --device
  • 9. 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.
  • 10. 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
  • 11. Building PhoneGap There 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
  • 12. Demo And Q&A
  • 13. 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-developmentfor-the-dummies http://developer.android.com/sdk/index.html

×