The reason“Write code once in one language for an app, and run it on both iOS and Android.” If I could have one mediocre super power, I would want that. Imagine how wonderful it would be if you could build a phone app that can run on iOS or Android without learning any of the gimmicks of either app enviorment. The engineers working on Apache’s Cordova must have had the same thought.

Cordova is an open source framework from Apache that enables you to use Javascript, HTML and simple CSS to build your app, and compile it into any of these mobile platforms, and immediately start running the app. It is not perfect, it does not have all the bells and whistles of both platforms. However, it does a wonderful job for most of the part.

Cordova is a fantastic tool to quickly prototype apps. We can build a simple app for both platforms in less than 3 minutes.

Installation

First we will need to install Cordova using npm

npm install cordova -g

If you are going to use iOS, you will need to make sure that you have installed XCode.

If you are going to use Android, you should install Android SDK. You need to make sure android is accessible on your command line.

Creating your first app

Now that you have cordova, let’s create an app.

 cordova create <name-of-the-app-directory> <reverse-com-name> <app-name>

For example, let’s create an app called ‘ButtonMe’ under the directory named myapp:

 cordova create myapp com.baris.myapp ButtonMe

This will create the directory called ‘myapp’ with a sample app in it. Let’s now add support for Android.

 cd myapp
 cordova platform add android

Let’s also add support for iOS.

 cordova platform add ios

Creating and Starting Your Android Emulator

Type android on your terminal. This should start ‘Android SDK Manager’ (If this does not work, you either don’t have ‘Android SDK Manager’ installed or you don’t have it on your PATH enviorment variable). Once, ‘Android SDK Manager’ starts, click ‘Tools’ and ‘Manage AVDs’. Click on ‘Create’ to create a new Android Virtual Device and then ‘Start’ to start it so that Cordova can use it.

‘Android SDK Manager’ is a rapidly developed product. Its menu options change frequently. I won’t be giving instructions on how to create your AVD using ‘Android SDK Manager’ as it will most likely be obsolute very quickly. Instead please follow the most up-to-date documentation on Android’s website to create and start your AVD.

Your first app

The gist of Cordova is to design and build everything as a Single Page Application. You should update the html of your single page dynamically if you want to have multiple pages.

index.html (under myapp/www/index.html) and index.js (under myapp/www/js/index.js) are going to be the basic building blocks of our app. We will use index.html to create the layout of our app and index.js.

Let’s add a button to our index.html file.

<div class="app">
  <h1>My BEAUTIFUL APP</h1>
  <button id="mybutton"> HO-HO BUTTON</button>
  <div id="deviceready"></div>
</div>

And let’s modify index.js to add these lines:

var count = 0;

document.getElementById('mybutton').addEventListener('click', pressed, false);

function pressed() {
    count++;
    document.getElementById('deviceready').innerHTML = 'You clicked me ' + count + ' times. YAY!';
}

Your first app on emulators

Let’s send this app to Android and iOS emulators:

 cordova emulate android
The reason



 cordova emulate ios
The reason