Developing with Phonegap - Adobe Refresh 2012
-
Upload
ryan-stewart -
Category
Technology
-
view
2.763 -
download
0
description
Transcript of Developing with Phonegap - Adobe Refresh 2012
![Page 1: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/1.jpg)
Developing with PhoneGap
Building mobile applications with HTML/JS
Saturday, March 31, 2012
![Page 2: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/2.jpg)
e Power of PhoneGap
Saturday, March 31, 2012
![Page 3: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/3.jpg)
HTML/JS/CSS for Mobile Apps
Saturday, March 31, 2012
![Page 4: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/4.jpg)
What’s the bene!t of web standards for mobile
applications?
Saturday, March 31, 2012
![Page 5: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/5.jpg)
Marketshare Language
29%
53%
10%
3%
Objective C
Java
Java/ActionScript
C#
Saturday, March 31, 2012
![Page 6: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/6.jpg)
Mobile Web:Marketshare: 100%
Language: HTML/JS/CSS
Why not write apps that way?
Saturday, March 31, 2012
![Page 7: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/7.jpg)
e web is awesome:Using web technologies leaves you free
to target any device/os/platform you want
Saturday, March 31, 2012
![Page 8: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/8.jpg)
So how does it work?
Saturday, March 31, 2012
![Page 9: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/9.jpg)
Your Code
Saturday, March 31, 2012
![Page 10: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/10.jpg)
Native Web View
Your Code
Saturday, March 31, 2012
![Page 11: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/11.jpg)
Native APIsNative Web View
Your Code
Saturday, March 31, 2012
![Page 12: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/12.jpg)
Native App - .apk, .ipa, etcNative APIs
Native Web View
Your Code
Saturday, March 31, 2012
![Page 13: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/13.jpg)
PhoneGap provides a JavaScript Library that reaches out into the native APIs.
That means anything the device supports is doable.
Saturday, March 31, 2012
![Page 14: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/14.jpg)
PhoneGap is completely open source and has been submitted to the Apache Foundation.
Saturday, March 31, 2012
![Page 15: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/15.jpg)
The entire project is available on Githubhttps://github.com/cordova
Saturday, March 31, 2012
![Page 16: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/16.jpg)
There are multiple ways to “start” with PhoneGap.The project includes command line tools, IDE plugins, and Dreamweaver 5.5 ships with PhoneGap support.
Saturday, March 31, 2012
![Page 17: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/17.jpg)
Out of the box, PhoneGap provides support for a number of basic device APIs
- Accelerometer- Camera- Capture- Compass- Connection- Contacts- Device- Events- File- Geolocation- Media- Network- Notification- Storage
Saturday, March 31, 2012
![Page 18: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/18.jpg)
For added functionality PhoneGap provides a plug-in mechanism.Includes OS-specific code/libraries and the JS to use it in PhoneGapSome of the helpful ones: PayPal, Facebook, Push Notification
Saturday, March 31, 2012
![Page 19: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/19.jpg)
Camera API example
Saturday, March 31, 2012
![Page 20: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/20.jpg)
Demo:Using PhoneGap
Saturday, March 31, 2012
![Page 21: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/21.jpg)
Debugging
Saturday, March 31, 2012
![Page 22: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/22.jpg)
Debugging these kinds of apps is best done on device.
Saturday, March 31, 2012
![Page 23: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/23.jpg)
It’s all just HTML/JS, so you can use your browser!Take advantage of Chrome Developer tools/Firebug to test your app’s UI.
Saturday, March 31, 2012
![Page 24: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/24.jpg)
But what about Device APIs?Because we’re in the web view, there
is no way to do line-by-line debugging.
Saturday, March 31, 2012
![Page 25: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/25.jpg)
Luckily we have Weinre, which lets us debug and manipulate the DOM from our PCs.
Saturday, March 31, 2012
![Page 26: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/26.jpg)
Weinre can be configured as a server (there is a Mac application) and uses the developer tools from Chrome to provide hooks into the mobile app.
Saturday, March 31, 2012
![Page 27: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/27.jpg)
But, a much easier way:http://debug.phonegap.com/
Saturday, March 31, 2012
![Page 28: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/28.jpg)
Demo:debug.phonegap.com
Saturday, March 31, 2012
![Page 29: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/29.jpg)
Deployingbuild.phonegap.com
Saturday, March 31, 2012
![Page 30: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/30.jpg)
e Problem:
You’re building a cross-platform app, but dealing with a lot of native projects
Saturday, March 31, 2012
![Page 31: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/31.jpg)
e Solution:PhoneGap Build - a cloud service for
creating binary files for multiple platforms from a single codebase
Saturday, March 31, 2012
![Page 32: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/32.jpg)
Saturday, March 31, 2012
![Page 33: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/33.jpg)
Build for every platform at once
PhoneGap Build creates binaries for all of the major platforms at the same time and in one place.
Saturday, March 31, 2012
![Page 34: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/34.jpg)
Core part of PhoneGap Build:
Work how you want to work
Saturday, March 31, 2012
![Page 35: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/35.jpg)
Using Git/SVN repositories
Saturday, March 31, 2012
![Page 36: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/36.jpg)
Debugging and Testing
Saturday, March 31, 2012
![Page 37: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/37.jpg)
Build includes a debugging option that will inject the Weinre JavaScript into the app so it can be remotely debugged using debug.phonegap.com
Saturday, March 31, 2012
![Page 38: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/38.jpg)
Demo:PhoneGap Build
Saturday, March 31, 2012
![Page 39: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/39.jpg)
Demo:PhoneGap in Action
Saturday, March 31, 2012
![Page 40: Developing with Phonegap - Adobe Refresh 2012](https://reader034.fdocuments.net/reader034/viewer/2022042607/554bbd56b4c90530298b4d91/html5/thumbnails/40.jpg)
Ryan StewartWeb Developer Evangelist, Adobe
@ryanstewart
blog.digitalbackcountry.com
github.com/ryanstewart
Saturday, March 31, 2012