Cordova Development Guide

Written by Spencer Roberts

In an effort to reach users who go to the app stores first to find content, the team investigated ways to create placeholder apps for multiple mobile platforms in the most cost-effective way. The development team decided to use the Apache Cordova open-source mobile development framework, because we didn’t want to expend time and resources developing, and maintaining separate apps for each type of device.

The framework uses common web programming languages (HTML5, CSS3, and JavaScript) rather than languages specific for each operating system, and creates one set of content files using HTML and CSS can be packaged for multiple devices. Cordova contains and uses the software development kits (SDKs) for each brand of device on behalf of its developers.

There are different ways to create an app with Cordova. If a website uses basic HTML and CSS pages, the entire site can be packaged and distributed for users to download and use on their phone without a data or WiFi connection. For database-driven sites that include large image and media files, it is better to create an app with one page that directs users to the full site in their web browser.

The steps below describe a standard procedure for implementing Cordova with simple landing/launching pages that send users from an app to a web-hosted site. Many of the steps follow the Cordova documentation, and when necessary, we modified the procedure for our needs. Cordova can be used for a variety of platforms, we focus here on Android, iOS, Blackberry, Windows Phone, and Windows 8.

1.    Install Cordova

The process of installing Cordova can be complicated for users unfamiliar with the command-line used by their operating system. Because we are primarily interested in simple, cross-platform development, we will use only the command-line interface (CLI).

It is best to navigate within the command-line interface (such as Terminal) to a directory close to the root for your OS. For instance, we can use something like: MacintoshHD/Developer/apps
The Cordova documentation explains and points to guides about how to accomplish these first three steps.

  1. Install Node.js
  2. Install a git client
  3. Use npm to install cordova

This is an important section:

  • You may need to add the npm directory to your PATH in order to invoke globally installed npm modules.
  • On Windows, npm can usually be found at: C:\Users\username\AppData\Roaming\npm
  • On OS X and Linux it can usually be found at: /usr/local/share/npm

2.    Create the App

Using only one command, Cordova can create a new project and its base files. Follow the instructions in the documentation to understand how the command works and create a new project.

 3.    Build the HTML pages and CSS stylesheet

Strangely, the Cordova documentation skips over an important step: editing the base files for the new project.

Once you create a new project, Cordova generates a folder called www in which is stored the primary content in files and folders. The main page is index.html and there are folders for img, css, and js.

To customize your app, and remove the default content by Cordova, edit index.html and index.css to suit your style and interface needs. If needed, edit index.js for advanced javascript functions.

If you are building a multi-page site, rather than a simple forwarding page, use index.html as your homepage and include other .html pages in the same directory.

4.    Acquire Developer Accounts

Although you will not need to use these accounts until later in the process, it is worthwhile to begin the acquisition process early in order to avoid delays. Identify which accounts you will require to distribute for each platform. Note that most developer accounts will require payment of a one-time or yearly fee.

  • Android: $25 one-time registration
  • iOS: $99 per year subscription
  • Windows Phone only: $19 one-time registration
  • Windows 8 and Phone: $99 one-time registration
  • BlackBerry: free

5.    Install Software Development Kits

Although Cordova can do much of the work to build for each platform, it requires you to install the SDK for each platform. This can be the most complicated part of the process.

Cordova’s Platform Guides provide most of the instruction for installing the different software packages. In this section, we address some of the issues you may encounter.

a.    Android

  • The Android team has recently packaged their SDK into a larger suite of development tools called Eclipse ADT. Cordova does not require Eclipse; it only needs command-line access to the Android SDK. In order to emulate Android devices, you can use the Android SDK to set up a device and testing parameters. In essence, you can download Eclipse along with the SDK, but you probably won’t use the other parts of Eclipse.
  • Another option is to click “Get the SDK for an Existing IDE” and download the SDK by itself. That will meet the needs of Cordova and emulation without the added hassle of Eclipse. (In this case, Cordova is serving as your Integrated Development Environment (IDE) rather than Eclipse.)
  • In order to allow Cordova to access the Android commands, you will need to add android to your path, using the procedure outlined in step 1.
  • By default, the Android SDK only downloads the most recent API kit. Unfortunately, Cordova requires version 19. To solve this issue, run android from the command line, and check the boxes next to API version 19 of the kit to download. The Cordova screenshot shows only up to API v17, but 19 should appear as an option.
  • Once you have solved the above issues, you should be able to follow the Cordova guide for any further development.

b.    iOS

  • The Cordova documentation for iOS is the most straightforward of the platforms guides, and you should be able to install the SDK and build for iOS without significant issues.

 c.    Windows Phone and Windows 8

  • The primary downside to development for the Windows platforms is that you will need a fairly high-performance PC in order to emulate or test your app. Although it is possible to use a virtual machine on a Mac, performance issues make the job more difficult.
  • In order to emulate Windows Phone apps, your PC will need an Intel processor that supports specific virtualization. Check the requirements to see if your machine can support emulation. Otherwise, you will be able to build the app, but not emulate it.
  • Emulation is not the only option for testing, however, because you can still use a Windows Phone to test the app before distribution. If you have fewer resources, and cannot afford an upgraded PC, skip the emulation and go straight to testing on a device.

6.    Build for Each Platform

Once you have installed each SDK that you plan to use, Cordova will be able to access the SDKs in order to build a native app for each platform. The Cordova interface is very straightforward.

  1. Follow the instructions to add each platform you need.
  2. Follow the instructions for building the app.

    7.    Emulate the App for Each Platform

For iOS and Android, the process for emulation is very easy, and most hardware should be able to handle the emulation. BlackBerry and Windows are more complicated because they require higher hardware and software capabilities.

  1. Use the Cordova commands to emulate the app for each platform that your machine can handle.
  2. If your machine is not capable of emulating for platforms such as BlackBerry and Windows, simply skip emulation and use a device for testing.

8.    Test the App on Devices

9.    Sign and Distribute the App

Previous | Next