Upload
mihai-corlan
View
4.204
Download
3
Embed Size (px)
DESCRIPTION
Introduction to PhoneGap - an open source and cross platform solution for building mobile applications using web standards
Citation preview
© 2011 Adobe Systems Incorporated.
Introduction to PhoneGapMihai Corlan | Web Developer Evangelist | Adobe
© 2011 Adobe Systems Incorporated.
About Me
Mihai Corlan
Adobe Web Developer Evangelist
Blog: http://corlan.org
Twitter: mcorlan
Email: [email protected]
2
© 2011 Adobe Systems Incorporated.
Agenda
PhoneGap
PhoneGap Build
Debugging PhoneGap Apps
© 2011 Adobe Systems Incorporated.
What is PhoneGap?
© 2011 Adobe Systems Incorporated.
PhoneGap - Cordova
Is an open source platform for building native mobile applications using standard web technologies (HTML/CSS/JavaScript)
Apache Cordova is the name of the open source project (it is in incubator for now): http://incubator.apache.org/cordova/
PhoneGap is the name of the Adobe’s Cordova distrbution
© 2011 Adobe Systems Incorporated.
Why would you use PhoneGap?
Traditional mobile development looks like this:
Platform
Tools Language
Objective-C
© 2011 Adobe Systems Incorporated.
Why would you use PhoneGap?
Traditional mobile development looks like this:
Platform
Tools Language
Objective-C
Platform
Tools Language
Java
© 2011 Adobe Systems Incorporated.
Why would you use PhoneGap?
What if you want iOS, Android, Symbian, Windows, BlackBerry?
© 2011 Adobe Systems Incorporated.
Why would you use PhoneGap?
PhoneGap allows you to use “write once, run everywhere” paradigm
Web standards based & Open Source
You get native installers for each platform ready to be distributed through application stores (App Store, Android Market, …)
© 2011 Adobe Systems Incorporated.
PhoneGap supports 7 platforms
© 2011 Adobe Systems Incorporated.
PhoneGap could be your best friend if
You want to target multiple mobile platforms
You know HTML/JavaScript/CSS
You already have a web site/web application. Thus you can reuse parts of this (see Wikipedia)
© 2011 Adobe Systems Incorporated.
Demo
© 2011 Adobe Systems Incorporated.
How does PhoneGap work?
PhoneGap App Mobile Device
PhoneGap NativeEngine
PhoneGap JavaScriptEngine
Web ViewRenders the app UI
Access to nativemobilefeaturesYour Code
HTML/JavaScript/CSS/Images/Frameworks/Libraries
© 2011 Adobe Systems Incorporated.
Built-in device APIs
© 2011 Adobe Systems Incorporated.
PhoneGap Plug-ins
http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
Examples of plugins: https://github.com/purplecabbage/phonegap-plugins
Extend the built-in functionality with custom plug-ins
Delegate heavyweight data processing to native code
Create background services
© 2011 Adobe Systems Incorporated.
Building PhoneGap Apps
© 2011 Adobe Systems Incorporated.
Build your PhoneGap app as you’d build a regular web app
Using your favorite editors (Eclipse, vim, Dreamweaver)
Test and debug the app using your desktop browser
Test and debug the app using mobile simulators/emulators and the physical devices
© 2011 Adobe Systems Incorporated.
What can you use to build your application?
Remember your application will run on the device’s browser
You can use whatever JavaScript frameworks or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so on
Pay attention to performance (mobile vs. desktop)
Pay attention to mobile browser features or lack of them (I am talking about SVG)
© 2011 Adobe Systems Incorporated.
Creating the native installers
There are 2 different methods to build the native installers for your PhoneGap app:
Using the target platform tool chain
Using PhoneGap Build – a cloud service
© 2011 Adobe Systems Incorporated.
Using platform native tool chain
Use the OS and tools each platform recommends:
iOS - http://phonegap.com/start#ios-x4
Android - http://phonegap.com/start#android
BlackBerry - http://phonegap.com/start#blackberry
Windows Phone - http://phonegap.com/start#wp
WebOS: http://phonegap.com/start#webos
Symbian: http://phonegap.com/start#symbian
© 2011 Adobe Systems Incorporated.
Using PhoneGap Build
http://build.phonegap.com - a cloud service
Supports: iOS, Android, BlackBerry, WebOS, Windows Phone 7, and Symbian
Supports one plugin (ChildBrowser); but you can hack in support for other plugins
It is in beta and it is free; it will always be free for Open Source projects
You upload your files (index.html, CSS, JS, images)
Or you provide a Git / SVN link
Support for debugging
© 2011 Adobe Systems Incorporated.
Resources
Source: github.com/callback
Docs: docs.phonegap.com
Wiki: wiki.phonegap.com
PhoneGap Build: build.phonegap.com
Plugins: github.com/purplecabbage/phonegap-plugins
Support: groups.google.com/group/phonegap
IRC: irc.freenode.net #phonegap
Apps: phonegap.com/apps
Bugs: issues.apache.org/jira/browse/CB
© 2011 Adobe Systems Incorporated.
Thank You!
Question & Answers Time!
http://corlan.org
http://twitter.com/
mcorlan
http://github.com/
mcorlan
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.