Click here to Skip to main content
12,885,022 members (33,548 online)
Click here to Skip to main content
Add your own
alternative version

Stats

12.4K views
6 bookmarked
Posted 17 Feb 2015

Setting up Apache Cordova for cross-platform mobile development

, 17 Feb 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
In this article I will cover the steps to set up Apache Cordova. I’ll first set up 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 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.

Cordova also supports iOS, Windows Phone and FireFox OS and more. See the full list here. 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
  1. Go forth and write responsive cross-platform apps!

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


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionNice, but... Pin
Klaus Luedenscheidt17-Feb-15 18:52
memberKlaus Luedenscheidt17-Feb-15 18:52 
AnswerRe: Nice, but... Pin
Feature Extraction18-Feb-15 11:18
memberFeature Extraction18-Feb-15 11:18 
AnswerRe: Nice, but... Pin
Feature Extraction7-Mar-15 7:51
memberFeature Extraction7-Mar-15 7:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170424.1 | Last Updated 17 Feb 2015
Article Copyright 2015 by Feature Extraction
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid