building and debugging Apache Cordova apps

Cincinnati Community Event - Feb 13 2013
- sponsored by IBM

by:       Patrick Mueller


canonical links to presentation

other mobile development presentations by me

slide template

last modified


Patrick Mueller:


This presentation will cover:

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*):

how do you build a mobile app?


how do you build a mobile app?

Windows Phone:



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:


more than 1200 apps listed

details: Cordova platforms

details: Cordova device access

details: device access

or add your own device access with our plugin APIs

or use one of the hundreds of other plugins at:

details: Cordova goverance / backing

details: ui libraries

details: server backends

hint: see IBM Worklight

details: more info

how do you build a mobile app with Cordova?


basic work flow

demo: build an app

demo: index.html

<!DOCTYPE html>

        <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>

        <img src="img/hu-dey.jpeg" width="100%">
        <button id="playSong-button">play</button>

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() {

how do you debug a mobile app built with Cordova?

debug mobile web apps

on a desktop, you debug web apps with:

what do you use for mobile web?

debug mobile web apps

ios 6: use built-in Web Inspector

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

demo: debug an app