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.
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Introduction to PhoneGap Mobile Development
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
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...
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