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
-
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
-
Juno Computers Launches Another Linux Laptop
If you're looking for a powerhouse laptop that runs Ubuntu, the Juno Computers Neptune 17 v6 should be on your radar.
-
ZorinOS 17.1 Released, Includes Improved Windows App Support
If you need or desire to run Windows applications on Linux, there's one distribution intent on making that easier for you and its new release further improves that feature.
-
Linux Market Share Surpasses 4% for the First Time
Look out Windows and macOS, Linux is on the rise and has even topped ChromeOS to become the fourth most widely used OS around the globe.
-
KDE’s Plasma 6 Officially Available
KDE’s Plasma 6.0 "Megarelease" has happened, and it's brimming with new features, polish, and performance.
-
Latest Version of Tails Unleashed
Tails 6.0 is based on Debian 12 and includes GNOME 43.
-
KDE Announces New Slimbook V with Plenty of Power and KDE’s Plasma 6
If you're a fan of KDE Plasma, you'll be thrilled to hear they've announced a new Slimbook with an AMD CPU and the latest version of KDE Plasma desktop.
-
Monthly Sponsorship Includes Early Access to elementary OS 8
If you want to get a glimpse of what's in the pipeline for elementary OS 8, just set up a monthly sponsorship to help fund its continued existence.