Hello Worlds!

To create a new project, use the Cordova tools in a working directory, which I here dubbed LinuxMagazin:

cordova create LinuxMagazin

When first called, Cordova asks whether it can transmit telemetry data to its developers. You say no in this dialog by pressing n. For the next step, switch to the project directory created by Cordova and add the platform on which the app will run. In this example, I began with the browser:

cd LinuxMagazin
cordova platform add browser

You can add more platforms with the same command, such as Android (cordova platform add android). The cordova platform command spits out a list of all possible platform names. The configuration file config.xml collects all the project's basic settings. It is located in the project directory and, among other things, contains the name and a (short) description of the app.

If the project has been set up, the developer should still use cordova requirements to check whether the computer really fulfills all the necessary SDKs and software requirements (Figure 1).

Figure 1: Cordova recognizes that the developer has the Android SDK installed; however, the libraries for Android 6.0 (API level 23) are missing.

Old Friends

The cordova create command automatically creates a simple sample app, which can be seen in the image for Figure 2. Like any Cordova app, this consists of a normal website that bears the index.html name by default and is found in the www subdirectory of the project directory – in this example, under LinuxMagazin/www/index.html. You can adapt and expand this at will. The cordova create command also creates the css directories for all style sheets, as well as img for pictures and js for JavaScript code. You can change this directory structure as you like, as long as all the app content remains in the www directory.

Figure 2: The Cordova app also runs on request as a web application in a web browser.

An HTML rendering engine supplied by Cordova (Figure 3) displays finished websites on the smartphone. WebView offers several special JavaScript functions that allow developers to access the smartphone hardware, as well as other items (see the "Functional and Productive" box).

navigator.vibrate(1000);

document.addEventListener("menubutton", onMenuKeyDown, false);function onMenuKeyDown() {
    // Button pressed!
}

Figure 3: The web application runs a WebView, which can be extended with plugins. In turn, the plugins access the hardware or operating system functions directly.

The WebView provides only a few core functions, which plugins can then expand (Figure 4). A plugin makes it possible, for instance, to query contacts, whereas another allows access to the camera. Thanks to the plugin option, you can flexibly add further functions and address new hardware, but the app only carries programming code for the functions it really requires. The Cordova project itself is developing some plugins for the most important functions, including access to the camera, contacts, or the geolocation API.

Figure 4: Some plugins can handle in-app sales. Before installing a plugin of this sort, however, you should find out the platform on which it runs.

In a newly created Cordova project, the programmer's first step must be to activate the required plugins individually:

cordova plugin add cordova-plugin-vibration

In this example, Cordova added the plugin for a vibrating alarm. The Apache Foundation has a directory of available plugins on its site [9], all of which can be added with the cordova plugin add command. Technically speaking, it runs npm in the background on the hard drive.

If you attach the --save parameter to the command, Cordova enters information, including the version number of the plugin, in the config.xml file. To return to a known state with precisely the plugin versions originally used, you enter the cordova prepare command.

Test Run

The cordova run <browser> command starts the finished app. In place of <browser>, you use the name of the platform on which the app is intended to run. If browser is used, Cordova automatically boots a minimalistic web server in the background that awaits requests by default on localhost port 8000. You then access your app by typing http://localhost:8000/index.html into the URL bar of the browser.

When the web server runs, Cordova starts the Chrome browser (Figure 2), unless it is not installed, in which case Cordova does not run the app, and the web server is promptly stopped. As a result, your only option as an app developer is to install Chrome or do without the browser as a possible platform. If you close Chrome, you must then force the web server to shut down by pressing Ctrl+C.

If the browser is not the target, Cordova starts the app on the appropriate platform, which runs on either a plugged-in device or an emulator. Running

cordova run --list

lists all the existing devices and emulators. You can explicitly choose one of the devices with --target; in the following case, this would be MyAndroidVM:

cordova run android --target=MyAndroidVM

To start it on an emulator, a shortcut boots a virtual Android platform,

cordova emulate android

This command also works for other platforms, with a --list displaying their respective version numbers in detail.