Your SlideShare is downloading. ×
0
Introduction to PhoneGap
Web Development for mobile platforms
Present by Miss. Danet Krueng
Company: Web Essentials
Positi...
Outline
❖
❖
❖
❖
❖
❖
❖
❖

What is PhoneGap
Advantage
PhoneGap API Overview
Development Environment
Working with PhoneGap
De...
What is PhoneGap
❏
❏
❏
❏

Mobile web development framework
Based on Javascript, HTML5 and CSS3
Open source: Apache 2.0 Lic...
Advantages
➔ Multi-platform
➔ Well-known technologies: HTML5 + Javascript + CSS3
➔ Vast amount of JavaScript libraries/fra...
PhoneGap API Overview
❏

Common Plugins: Good support across platforms
❏ Accelerometer
- Camera
❏ Capture
- Compass
❏ Conn...
Development Environment
❏ IDE Tool
❏ Eclipse, Dreamweaver, Visual Studio, XCode ...
❏ Software Tool
❏ iOS Development: iOS...
Installing PhoneGap
❏

Install PhoneGap
❖ Install Node Js
➢ http://howtonode.org/how-to-install-nodejs
❖ $ sudo npm instal...
Create PhoneGap App
❏
❏
❏

$ phonegap create fossasia-demo
$ cd fossasia-demo
$ phonegap run android
❏ $ phonegap run andr...
PhoneGap Structure
❏
❏
❏
❏

Merges: offers a place to specify assets to deploy on specific platforms.
Platforms: directory...
Debug PhoneGap
❏
❏
❏
❏

Install Ripper add on in Chrome
Right click on Ripper icon -> Manage -> Check allow access to file...
Building PhoneGap
There are many different ways to build PhoneGap App
❏ Using PhoneGap build
❏ https://build.phonegap.com/...
Demo And Q&A
References
❏
❏
❏
❏
❏
❏
❏
❏
❏

http://phonegap.com/
http://docs.phonegap.com/en/edge/guide_platforms_index.md.html
http://d...
Upcoming SlideShare
Loading in...5
×

Introduction to phone gap

756

Published on

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
756
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to phone gap"

  1. 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. 2. Outline ❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖ What is PhoneGap Advantage PhoneGap API Overview Development Environment Working with PhoneGap Demo Q&A References
  3. 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. 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. 5. PhoneGap API Overview ❏ Common Plugins: Good support across platforms ❏ Accelerometer - Camera ❏ Capture - Compass ❏ Connection - Contacts ❏ Device ❏ Events ❏ File ❏ Geolocation ❏ Media ❏ Notification ❏ Storage
  6. 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. 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. 8. Create PhoneGap App ❏ ❏ ❏ $ phonegap create fossasia-demo $ cd fossasia-demo $ phonegap run android ❏ $ phonegap run android --emulator ❏ $ phonegap run android --device
  9. 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. 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. 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. 12. Demo And Q&A
  13. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×