Mobile
Article
By Mark Brown

Quick Tip – Using and Installing Cordova

By Mark Brown

Cordova is a phenomenal tool that allows you to build native mobile apps using the web technologies you know and love. It gives access to some hardware features unaccessible in vanilla HTML5, and most crucially, the marketing potential of app stores. Cordova allows you to write your application code once in HTML5 and JavaScript, and deploy to multiple targets using the same code. In this quick tip, I will cover basic usage, and installing Cordova.

Install

First install Node.js from their official packages, Homebrew (Mac), Chocolatey or Scoop (Windows). Cordova uses the package manager of Node.js, npm, for installation.

On OSX and Linux open your terminal and run:

sudo npm install -g cordova

On Windows open Command Prompt run:

C:\>npm install -g cordova

This installs the Cordova package globally and accessible in any project.

Create a Project

Create a new project with cordova create <name> e.g.

cordova create my-mobile-app
cd my-mobile-app

Add a Platform

Type cordova platform to see a list of available platforms. You’ll see different options depending on the operating system, here’s the results on a Mac.

Cordova Platform Options

Add a platform with cordova platform add <platform>, e.g.

cordova platform add ios
cordova platform add android

To build and run you’ll need SDKs for each platform that you want to target installed. We have a handy quick tip for installing Android and for iOS you will need XCode.

To check you have everything needed for the platforms added, run:

cordova requirements

Build

Build your app with cordova build <platform>, e.g.

cordova build ios
cordova build android

You can also run cordova build to build all platforms added to the project.

--ADVERTISEMENT--

Run

Run the app with cordova run <platform>, e.g.

cordova run ios
cordova run android

Cordova Apps Running

Note: On a Mac cordova run ios will open the iOS Simulator. A good option for emulating android devices is with GenyMotion that lets you install and run popular android devices as a Virtual Machine (VM). Once the VM is running, cordova run android will install and run the app.

Plugins

Plugins are additions to Cordova that allow you to access hardware features from JavaScript.

To Install a plugin run cordova plugin add <plugin>. For example, to install the camera plugin.

cordova plugin add cordova-plugin-camera

Adding Your Application

The custom code for your app sits in the www directory. You can edit those files, build and run to see the changes reflected in an emulator. As an example, add a button which will take a photo from the library and show it in the view.

Replace the #deviceready div in index.html with:

<div id="deviceready">
  <p>
    <button id="get-picture">Take a photo</button>
  </p>
  <p>
    <img id="my-photo" width="300" />
  </p>
</div>

Add the following to the end of js/index.js:

document.getElementById('get-picture').addEventListener('click', getPicture, false);

function getPicture() {
  navigator.camera.getPicture(onSuccess, onFail, {
    quality: 50,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    destinationType: Camera.DestinationType.FILE_URI
  });
}

function onSuccess(imageURI) {
  var image = document.getElementById('my-photo');
  image.src = imageURI;
}

function onFail(message) {
  alert('Failed because: ' + message);
}

Build then Run and you should be able to test out your first ‘native’ feature.

Camera Example

You’re on your way to building great apps :)

Next Steps

Read the Cordova Overview for an understanding of how Cordova works and search the Plugins to see what’s available on different platforms.

SitePoint has a lot of articles relating to Cordova if you want to dive straight into more tutorials.

  • arun

    Good article Mark, can I run the cordova app as web based with out adding any platform – Arun

    • Chris Ward

      Hmm, you used to be able to, but I can’t seem to find an option now.

    • You have to add the browser platform:

      cordova platform add browser

    • markbrown4

      Thanks Arun, what @disqus_Vbbbnlplgm:disqus says it correct. `cordova platform add browser` and `cordova run browser` is a nice way to build the app out in the browser.

      It’s possible for plugins to support alternative things that will work in the web, but for most part you should expect that plugins are designed to access the device features so won’t be available in the web version. For development though, the browser is where you will spend the majority of time.

  • Ivan

    hello, I followed your tutorial but changed “cordova run android” to “cordova emulate android”
    Anyway the emulator opens but the app is nowhere (no problem when launching the browser as ryanjsalva pointed out): any help, please?
    This is what I get:

    emulator: WARNING: VM heap size set below hardware specified minimum of 228MB
    emulator: WARNING: Setting VM heap size to 384MB
    Hax is enabled
    Hax ram_size 0x60000000
    HAX is working and emulator runs in fast virt mode.
    console on port 5554, ADB on port 5555

  • Ivan

    Thanks, this seems to be easier :-)

Recommended
Sponsors
Get the latest in Mobile, once a week, for free.