Introduction to phone gap
Upcoming SlideShare
Loading in...5
×
 

Introduction to phone gap

on

  • 765 views

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)

Statistics

Views

Total Views
765
Views on SlideShare
765
Embed Views
0

Actions

Likes
2
Downloads
39
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to phone gap Presentation 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