Apache Cordova is a mobile application development framework that can be used to create cross-platform mobile apps using HTML5 and pure JavaScript. By cross-platform, we mean that the application code base can be written once using HTML5 and JavaScript and it can be run across multiple target mobile platforms such as Android, iOS or Windows mobile.

Mobile app development and Web app development

The web development community has been continually innovating and with the recent development of frameworks such as Angular, jQuery and React, the traditional web applications have now almost become indistinguishable from their native platform-specific peers in terms of functionality.

From a traditional viewpoint, mobile application development is generally thought to be a specific skill set with knowledge of a particular mobile platform. Every platform has got its own set of rules and frameworks. These are very specific skills that apply only to a platform. And I’m not sure how much of the functionality (such as UI frames or native api calls) can be re-used across platforms to a reasonable extent. This means that for many of the use cases that have a wide customer base across desktop/tablet/Android and iOS users, there is a high chance of redundant development and maintenance efforts for managing each of the applications for a target platform.

For the most part as a Java developer, I find those platform dependencies bear a very close resemblance to Swing. Of course, there’s nothing wrong with that, but considering the current the speed of product launches and time to market, it becomes a difficult challenge to stick to platform native application development. This scenario has forced the mobile developer community to reinvent itself. This time to match the current demands of speed, scalability and availability in today’s modern mobile world.

Coming back to mobile application development, I was getting my hands dirty with the Cordova framework. It seems to have a large, active community and user base. And you can build cross-platform iOS/Android/Windows apps with technologies that are most common amongst the web application development community. Cordova apps can be developed using HTML5 and JavaScript and then it has a JavaScript abstraction over the native mobile platform-specific OS-level API calls.

If you’re a web application developer, on deeper dive you will find more similarities than differences in developing Cordova hybrid mobile apps. A wide array of platform-specific native features are available as plug-ins. These plug-ins can be invoked using pure JavaScript and this makes mobile web app development a seamless experience. Of course, with a single code-base, you can now publish your app to both Android and iOS compatible executables.

And the most important thing is: Cordova is free and open source. Here’s how to get started with Apache Cordova.

Getting started with Apache Cordova

To build a Cordova hybrid app, the first thing that you need is the NodeJS setup. Along with that you need to have an emulator of your choice. In my case, I have chosen Android as my target platform.

Cordova is available as a node package that can be installed using: npm install -g cordova

Once the cordova package has been installed successfully, the next step is to create a skeleton application. Here, I want to create an app called cordovaapp. I can do that using cordova create cordovaapp

The bare-bone project structure looks as the image shown below.

The highlighted section contains the html files, the css files and the JavaScript files for your application. These are specifically located in the www folder.

One important file here is the config.xml, that stores the application specific configuration settings.

We can list the available platforms using cordova platform

For configuring our cordovaapp, we will add three target platforms for our app to run on viz. browser, iOS and android: cordova platform add browser

cordova platform add android

cordova platform add ios

Adding platforms updates the config.xml file appropriately to reflect your application configuration.

Now we can start up our Android emulator and see the app in action.

For that you can run the cli command cordova emulate android. And if your emulator is configured correctly, you can see the default app.

Of course, you can also emulate the app in your browser using the cli command cordova run browser.

Our app basically does nothing. So we will add some jQuery and BootStrap goodness to our app and add the camera plug-in to test the native camera API call using JavaScript.

cordova plugin add cordova-plugin-camera

Once the plug-in has been added successfully and the config.xml file updated, we can shell out some HTML and JavaScript code to interact with our camera.

<div class=”container”>
<div class=”panel panel-default”>
<div class=”panel-heading”>Apache Cordova | Camera</div>
<div class=”panel-body”>
<p>
Once a picture is taken, it would be rendered in the panel below</p>
<p>
<button type=”button” class=”btn btn-success”
id=”cameraButton”>
Click here to take a picture
</button>
</p><div id=”capturedImageDiv” >
<img id=”capturedImage” style=”width: 200px; height: 200px”></img>
</div>
</div>
</div>
</div>

var app = {
// Application Constructor
initialize: function() {
document.addEventListener(‘deviceready’, this.onDeviceReady.bind(this), false);
},// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// ‘pause’, ‘resume’, etc.
onDeviceReady: function() {
this.receivedEvent(‘deviceready’);
},// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
console.log(‘Received Event: ‘ + id);
console.log(‘camera = ‘+JSON.stringify(navigator.camera));
$(‘#cameraButton’).click(cameraButtonClicked);
}
};app.initialize();function cameraButtonClicked(){
console.log(‘cameraButtonClicked’);
var camera = navigator.camera;
console.log(‘camera = ‘+camera);
camera.getPicture(function(imageURI){
var image = document.getElementById(‘capturedImage’);
image.src = imageURI;}, function(){},{ quality: 50,
destinationType: Camera.DestinationType.FILE_URI
}
);
}

Now we can run the android emulator again with the updated build and we can interact with the camera and save the captured image.

Conclusion

A description of the architecture and plug-in demonstrations can be found at the official Apache Cordova website here. But I hope this overview and quick dive into Apache Cordova has helped you understand how to get started with this great development tool.