Setting up Apache Cordova for cross-platform mobile development – Part 1 – Android

This article is the first of a series that will cover the steps to set up Apache Cordova for the Android, Windows and iOS platforms.

See the full list of platforms supported by Apache Cordova here.

Hello, Droid

In this article I’ll first set up an Android environment with the Android SDK, an Android Virtual Device, Apache Ant and finally, Cordova.

I will then use Cordova to create a starter cross-platform mobile app, and run it on the Android virtual device. I will add new platform targets to the same Cordova project in subsequent articles.

I have performed this installation on Windows 8.1, but the same steps would apply for Linux as well. You would only need to adapt the environment variables (simply use ${VARIABLE} instead of %VARIABLE% )

Before you start, you will first need to ensure the Java Development Kit is installed for Android. You can check if you already have it by running  “java -version” from the terminal.

So, let’s get started:

  1. Install the Android SDK, you could either use the Windows installer, or download and unzip the SDK into a folder. Note that the installer will not set the PATH for you.
  1. Set the environment variables so Cordova (and you) can find the Android SDK:
  • Set ANDROID_HOME to the install / extract folder.
  • Update PATH to include:

%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

  • Set ANDROID_SDK_HOME to your profile home directory. For example:

C:\Users\<your username>\.android

  1. In a terminal or Powershell, start the Android SDK manager, which will let you choose which components will be installed. Simply type:

android

and you will get:

Android SDK manager
Android SDK manager
  1. Select Android API Level 19. Android’s ARM emulator is pretty slow, so if you have an Intel CPU supporting VT-x, you can speed things up by installing the Intel x86 Atom System Image and the Intel x86 emulator accelerator (You will find this in Extras -> HAXM Installer)
  1. Once you finish configuring the SDK, quit the SDK manager and confirm your newly installed SDK targets with:

android list targets

  1. Next, create an Android Virtual Device (AVD) with:

android avd

Creating an Android Virtual Device
Creating an Android Virtual Device

Use the Device Definitions tab to choose one of the preinstalled templates, and give it a name and architecture type leaving the other defaults intact. If you installed the x86 emulator images, set the target architecture to x86. I called mine LGTab.

Creating an Android Virtual Device
Creating an Android Virtual Device
  1. Quit the AVD manager. You can now review the AVD(s) you created with:

android list avd

Listing the Android Virtual Devices
Listing the Android Virtual Devices
  1. To run and test your virtual device, use

emulator -avd LGTab

Android emulator booting
Android emulator booting
Android emulator up and running
Android emulator up and running

Now that the Android setup is ready, we need to install Apache Ant, which is used by Cordova to build Android apps. Like Android, this is a simple xcopy installation and you will need to set the environment variables so you can use it anywhere on your system.

  1. Download and extract Apache Ant into a folder.
  1. Set the following environment variables:
  • Set ANT_HOME to the extracted Ant folder
  • Set ANT_OPTS to “-Xmx1024m -XX:MaxPermSize=512m
  • Append PATH to include:

%ANT_HOME%\bin;

Finally, we install Apache Cordova via npm, the package manager for Node.js.  (If you don’t have Node.js installed, go to http://nodejs.org/download/ and do so now!)

  1. Install Cordova to the npm global registry so you can use it from any project folder.

npm install cordova -g

And that’s it! Cordova is installed!

  1. You can check what’s been installed in your global npm registry with

npm list -g --depth=0

This completes our installation!

  1. So what are you waiting for? Lets ask Cordova to create a project, add the mobile platforms you want the project to target, and run it!

cordova create HelloCordova

cd HelloCordova

cordova platform add android

cordova build

Adding the Android target to Cordova
Adding the Android target to Cordova

Building the Android target with Cordova
Building the Android target with Cordova

We will now run the Android app on the emulator we created earlier.

I will cover the Windows & iOS targets in a subsequent post.

  1. Finally, we start the app in the emulator using the AVD we just created.

cordova run --target=LGTab
or just,
cordova run

An Apache Cordova app running on Android
An Apache Cordova app running on Android

Go forth and write responsive cross-platform apps!

I hope you enjoyed this article. Please leave some feedback to let me know if you found it useful!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s