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.
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:
The Cordova documentation explains and points to guides about how to accomplish these first three steps.
- Install Node.js
- Install a git client
- 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
- On Windows,
npmcan usually be found at:
- On OS X and Linux it can usually be found at:
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
To customize your app, and remove the default content by Cordova, edit
index.css to suit your style and interface needs. If needed, edit
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.
- 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.
- 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.
- Follow the instructions to add each platform you need.
- 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.
- Use the Cordova commands to emulate the app for each platform that your machine can handle.
- 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
- The Cordova documentation provides guidance for deploying your app to different devices for testing.
9. Sign and Distribute the App
- Once you have emulated and tested your app on a device, the final step is to sign (authorize the version for release) and then distribute your app through the appropriate vendor. Each platform has a different procedure for reviewing and approving apps.