Developing cross platform mobile applications with phone gap for windows phone
Introduction to phone gap
-
Upload
danet-krueng -
Category
Technology
-
view
739 -
download
1
description
Transcript of Introduction to phone gap
![Page 1: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/1.jpg)
Introduction to PhoneGapWeb Development for mobile platforms
Present by Miss. Danet KruengCompany: Web EssentialsPosition: Web DeveloperEmail: [email protected]
![Page 2: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/2.jpg)
Outline❖ What is PhoneGap❖ Advantage❖ PhoneGap API Overview❖ Development Environment❖ Working with PhoneGap❖ Demo❖ Q&A❖ References
![Page 3: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/5.jpg)
PhoneGap API Overview❏ Common Plugins: Good support across platforms
❏ Accelerometer - Camera❏ Capture - Compass❏ Connection - Contacts❏ Device❏ Events❏ File❏ Geolocation❏ Media❏ Notification❏ Storage
![Page 6: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/6.jpg)
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...
![Page 7: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/7.jpg)
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/android-
sdk-linux/platform-tools/❏ export PATH
![Page 8: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/8.jpg)
Create PhoneGap App❏ $ phonegap create fossasia-demo❏ $ cd fossasia-demo❏ $ phonegap run android
❏ $ phonegap run android --emulator❏ $ phonegap run android --device
![Page 9: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/9.jpg)
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.
![Page 10: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/11.jpg)
Building PhoneGapThere 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
![Page 12: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/12.jpg)
Demo And Q&A
![Page 13: Introduction to phone gap](https://reader033.fdocuments.net/reader033/viewer/2022052522/554d18e1b4c905d4568b568c/html5/thumbnails/13.jpg)
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-development-
for-the-dummies❏ http://developer.android.com/sdk/index.html