building and debugging Apache Cordova apps
- sponsored by IBM
by:
@pmuellr
http://muellerware.org/
- sponsored by IBM
etc
canonical links to presentation
- muellerware.org/papers/2013-02-Cinci-Cordova
- dl.dropbox.com/u/2192156/Papers/2013-02-Cinci-Cordova/index.html
other mobile development presentations by me
slide template
- html5slides - code.google.com/p/html5slides/
last modified
- ???
who
Patrick Mueller:
- has worked at IBM for a long time
- has worked on Web Stuff for a long time
- live and work in the Raleigh area of North Carolina
- grew up in Northern Kentucky
- reformed WebKit contributor,
primary focus: Web Inspector - current Apache Cordova committer,
primary focus: weinre debugger
what
This presentation will cover:
- what is a mobile app?
- why build a mobile app with Apache Cordova?
- how do you build a mobile app with Cordova?
- how do you debug a mobile app built with Cordova?
what is a mobile app?
what is a mobile app?
how do you build a mobile app?
how do you build a mobile app?
iOS (iPhone, iPad, i*):
- coding in Objective C
- build your UI with Interface Builder
- use Xcode as your IDE
how do you build a mobile app?
Android:
- coding in Java
- build your UI with XML and Java
- use Eclipse as your IDE
how do you build a mobile app?
Windows Phone:
- moar stuff ...
Blackberry:
- moar stuff ...
...:
- moar stuff ...
what is a mobile app?
limited/no code sharing when building apps for multiple platforms
what if you could use:
- HTML
- CSS
- JavaScript
→ Apache Cordova
Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript
who uses Cordova to build mobile apps?
This release is based on the same code that powers our Android application – an advantage of basing our app on Apache Cordova
This enables us to reach the most number of platforms with the least amount of code.
Fully embracing HTML5, CSS3, & Javascript commits us to the open Web technologies of the future.
the web isn't going away
see also:
phonegap.com/app
more than 1200 apps listed
details: Cordova platforms
- Android
- Bada
- Blackberry
- iOS
- Mac OS X
- WebOS
- Windows (desktop)
- Windows Phone 7
- Windows Phone 8
- QT
details: Cordova device access
- Accelerometer
- Camera
- Audio/Video Capture/Playback
- Compass
- Connection
- Contacts
- File
- Geolocation
- Globalization
- Visual/Audible/Tactile Notification
- and more ...
details: device access
or add your own device access with our plugin APIs
or use one of the hundreds of other plugins at:
github.com/phonegap/phonegap-plugins
details: Cordova goverance / backing
- top-level Apache project
- liberal Apache open source license (obviously)
- committers from Adobe, IBM, Google, Blackberry
- used in products from Adobe - Edge
- used in products from IBM - Worklight
details: ui libraries
- we don't ship one
- we're agnostic
- use whatever you're comfortable with
details: server backends
- we don't ship one
- we're agnostic
- use whatever you're comfortable with
hint: see IBM Worklight
details: more info
- cordova.apache.org
main web site, link to downloads, doc, etc
- groups.google.com/group/phonegap
user mailing list - ~50 posts/day
- www.ibm.com/software/mobile-solutions/worklight
information about IBM Worklight
how do you build a mobile app with Cordova?
notes
- You will need to install plaform-specific native tooling like XCode, Eclipse, etc
- You will need to learn a bit about these native platforms
- But you won't need to spend all your time in them
basic work flow
- create initial app files with Cordova tools
- edit your HTML / CSS / JavaScript
- build / test
- rinse and repeat
- ... later
- submit your app to app stores
- you thought building the apps was the hard part?
demo: build an app
demo: index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/index.css" />
<script src="cordova-2.4.0.js"></script>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<title>WhoDey</title>
</head>
<body>
<img src="img/hu-dey.jpeg" width="100%">
<button id="playSong-button">play</button>
</body>
</html>
demo: index.css
button {
font-size: 200%;
}
demo: index.js
document.addEventListener('deviceready', deviceReady, false)
function deviceReady() {
song = new Media("audio/who-dey.mp3")
$("#playSong-button").click(function() {
song.play()
})
}
how do you debug a mobile app built with Cordova?
debug mobile web apps
on a desktop, you debug web apps with:
- Chrome Dev Tools (Webkit Web Inspector)
- Safari Web Inspector (Webkit Web Inspector)
- Firebug
what do you use for mobile web?
debug mobile web apps
ios 6: use built-in Web Inspector
- kinda horky, but useful in a pinch
- instructions here
debug mobile web apps
Blackberry: use built-in Web Inspector
debug mobile web apps
for anything else, try weinre, WEb INspector REmote
or try Apache Ripple, a mobile simulator for Chrome, so you can use Chrome Dev Tools
also see some of my other papers for additional debugging tools