Developing apps with Apache Cordova
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).
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.
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).
Functional and Productive
The smartphone is accessed on the app via the relevant JavaScript functions. For example, the following command will make the phone vibrate for one second:
navigator.vibrate(1000);
Cordova provides this JavaScript function.
Additionally, the framework triggers a JavaScript event in certain situations. For example, the menubutton
event occurs if you press the menu button on your smartphone, which you intercept with a suitable event listener:
document.addEventListener("menubutton", onMenuKeyDown, false);function onMenuKeyDown() { // Button pressed! }
In this example, the code calls onMenuKeyDown()
as soon as the smartphone user presses the menu button. Some events, however, occur only on specific operating systems. The menubutton
event is absent from iOS and Windows Phone, for instance. All the Cordova events and functions are listed in the Cordova documentation [8].
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.
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.
« Previous 1 2 3 Next »
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
Linux Servers Targeted by Akira Ransomware
A group of bad actors who have already extorted $42 million have their sights set on the Linux platform.
-
TUXEDO Computers Unveils Linux Laptop Featuring AMD Ryzen CPU
This latest release is the first laptop to include the new CPU from Ryzen and Linux preinstalled.
-
XZ Gets the All-Clear
The back door xz vulnerability has been officially reverted for Fedora 40 and versions 38 and 39 were never affected.
-
Canonical Collaborates with Qualcomm on New Venture
This new joint effort is geared toward bringing Ubuntu and Ubuntu Core to Qualcomm-powered devices.
-
Kodi 21.0 Open-Source Entertainment Hub Released
After a year of development, the award-winning Kodi cross-platform, media center software is now available with many new additions and improvements.
-
Linux Usage Increases in Two Key Areas
If market share is your thing, you'll be happy to know that Linux is on the rise in two areas that, if they keep climbing, could have serious meaning for Linux's future.
-
Vulnerability Discovered in xz Libraries
An urgent alert for Fedora 40 has been posted and users should pay attention.
-
Canonical Bumps LTS Support to 12 years
If you're worried that your Ubuntu LTS release won't be supported long enough to last, Canonical has a surprise for you in the form of 12 years of security coverage.
-
Fedora 40 Beta Released Soon
With the official release of Fedora 40 coming in April, it's almost time to download the beta and see what's new.
-
New Pentesting Distribution to Compete with Kali Linux
SnoopGod is now available for your testing needs