Creating Mobile Applications with Apache Cordova

Apache Cordova is a tool which converts web applications to cross-platform mobile applications. Cordova is mostly used to create apps for Android and iOS platforms, however, it's also possible to develop Windows, macOS, and Linux applications. The tool is completely free, easy-to-use and allows for advanced customizations with JavaScript (if you need it).

Preliminary Considerations

Before you start working with Cordova, make sure you have the following:

The good part, you don't need to be an Android or iOS developer to create apps for these platforms. Once you have your development system up and running, creating mobile versions of your Verge3D apps would be really easy!

Getting Started with Apache Cordova

To work with Cordova, you'll need the npm utility which is part of the Node.js runtime. You can install it by following these instructions.

For Linux you better get npm via the package manager. See here for details.

Once npm installed, Cordova binaries can be installed with the following command.

On macOS/Linux:

sudo npm install -g cordova

On Windows:

npm install -g cordova

Creating Application Template

You can create your mobile app manually or with Cordova command-line utility. However, to simplify things up, we integrated a Cordova template builder right in the App Manager.

By using it you can create a Cordova app template right from your Verge3D app.

Once your template is ready, download it and then unpack the zip archive to some directory.

Creating Android App

Go to some directory where your Cordova app template located then add the Android platform:

cordova platform add android

Now the hardest part. To be able to build and test your app in the Android emulator or real devices, you're gonna need to install and configure additional software.

First, you need to install Android Studio, get it from here.

Once Android Studio is installed, you need to specify path to it in the ANDROID_SDK_ROOT environment variable. On Windows you'll also need to set the JAVA_HOME variable with the path to the Java directory.

See here on how to setup these variables.

The last thing you will require is the Gradle build tool. See here for instructions.

To check if you satisfy the requirements for building, execute the following command in your apps directory:

cordova requirements

To build your app, exec:

cordova build android

To run it in the Android emulator, exec:

cordova emulate android

To run your app on the real phone connected to your system run:

cordova run android

Creating iOS App

Go to some directory where your Cordova app template located then add the iOS platform:

cordova platform add ios

Now the hardest part. To be able to build and test your app in the iOS emulator or real devices, you're gonna need to install and configure additional software.

First, you need to install XCode, get it from from the Mac App Store.

Then install the Homebrew package manager:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

After that you'll need ios-deploy tools.

brew install ios-deploy

Then you're gonna need CocoaPods dependency manager:

sudo gem install cocoapods

To check if you satisfy the requirements for building, execute the following command in your apps directory:

cordova requirements

It's time to run your app, exec:

cordova emulate ios

to build and run it in the iOS emulator.

To run your app on the real phone connected to your system exec:

cordova run ios

To run on a real device your app must be signed via XCode. See here for instructions.

Beautifying Things

Modifying Application Name and Icon

See the official Cordova guide on how to assign custom icon to your application.

Cordova-Specific Events

There are 3 Cordova-specific events available via JavaScript or Puzzles which you can use to make your apps more mobile-friendly:

Make sure you register these events on the document element. Also, use the in parent doc option in case if your app runs in the iframe (see more info about this setup here).

Creating Native UI Dialogs

Use the cordova-plugin-dialogs plugin.

More Features

You can create full-featured app with access to camera, battery info, device file system, geolocation etc. See the appropriate plugin in the Cordova documentation.

Publishing your App

See here for instructions.

Got Questions?

Feel free to ask on the forums!