As shown in the preceding screenshot, the generated Apache Cordova project contains the following main directories and files:

If we look in the www directory, we will find that it contains the following three files:

The following code snippet includes the most important part of the index.html page:

<div class="app">
    <h1>Apache Cordova</h1>
    <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>

The index.html page has a single div "app", which contains a child div "deviceready". The "deviceready" div has two paragraph elements, the "event listening" and "event received" paragraphs. The "event received" paragraph is initially hidden as indicated by index.css:

.event.received {
    background-color:#4B946A;
    display:none;
}

In the index.html page, there are two main JavaScript-included files, as follows:

Finally, the index.html page calls the initialize() method of the app object. Let's see the details of the app object in index.js:

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready'),
    },
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening'),
        var receivedElement = parentElement.querySelector('.received'),

        listeningElement.setAttribute('style', 'display:none;'),
        receivedElement.setAttribute('style', 'display:block;'),

        console.log('Received Event: ' + id);
    }
};

The initialize() method calls the bindEvents() method, which adds an event listener for the 'deviceready' event. When the device is ready, the onDeviceReady() method is called, and this in turn calls the receivedEvent() method of the app object.

In the receivedEvent() method, the "event listening" paragraph is hidden and the "event received" paragraph is shown to the user. This is to display the Device is Ready message to the user once Apache Cordova is fully loaded.

Now you have an Apache Cordova project that has common cross-platform code, so we need to generate a platform-specific code in order to deploy our code on a real device. To generate Android platform code, you need to add the Android platform as follows:

> cd soundRecorder
> cordova platform add android

In order to add any platform, you need to execute the cordova platform command from the application directory. Note that in order to execute the cordova platform command without problems, you need to perform the following instructions:

After executing the cordova platform add command, you will find a new subdirectory Android added under the soundRecorder/platforms directory. In order to build the project, use the following command:

> cordova build

Finally, you can run and test the generated Android project in the emulator by executing the following command:

> cordova emulate android

You might see the ERROR: No emulator images (avds) found message flash if no Android AVDs are available in your operating system. So, make sure you create one!

The following screenshot shows our Sound Recorder application's initial screen:

It is recommended that you make your code changes in the root www directory, and not in the platforms/android/assets/www directory (especially if you are targeting multiple platforms) as the platforms directory will be overridden every time you execute the cordova build command, unless you are willing to use Apache Cordova CLI to initialize the project for a single platform only.