This document introduces PhoneGap, a mobile development framework that allows building apps using HTML, CSS, and JavaScript. PhoneGap supports development for platforms like iOS, Android, and BlackBerry. It offers advantages like cross-platform capability using well-known web technologies. The document outlines PhoneGap's API, development environment, and process for creating, building, and debugging PhoneGap apps. It was presented by Danet Krueng from Web Essentials.

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