• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to phone gap
 

Introduction to phone gap

on

  • 492 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
492
Views on SlideShare
492
Embed Views
0

Actions

Likes
2
Downloads
27
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 Introduction to phone gap Presentation Transcript

    • Introduction to PhoneGap Web Development for mobile platforms Present by Miss. Danet Krueng Company: Web Essentials Position: Web Developer Email: 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/androidsdk-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 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
    • 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-developmentfor-the-dummies http://developer.android.com/sdk/index.html