Cordova™ Starter Guide - Building Native Apps with Apache Cordova

On this page we have collected information about using the Apache Cordova build system with Evothings Studio. This enables you to build native mobile applications for the Internet of Things (IoT).

Quick introduction to Cordova

Cordova is used to create a native app from an app developed in JavaScript/HTML.

A very useful part of Cordova is the plugin system. Plugins provide access to native device functionality from JavaScript. There are many ready-to-use plugins available. You can also write your own plugins.

Plugins have two parts, a native code implementation (usually written in Objective-C or Swift on iOS and in Java on Android) and a JavaScript library (shared between platforms).

You can use Evothings Studio without Cordova, but if you want to create native apps it is what you want to use.

What you need to get started

To build apps with Cordova you need to install Cordova itself and also the mobile SDKs (Software Development Kits) for the mobile platforms you wish to deploy your app on. The main platforms used by Evothings are iOS and Android.

Installing Cordova and the SDKs can be a bit time consuming and requires that you can use command line tools. Once installed Cordova is easy to use, so don’t give up.

To help you in installing and using Cordova the Evothings documentation contains a Cordova Build Guide.

The highlights of this guide are:

Installing Cordova (note that there are separate guides for Windows, OS X, and Linux)
Using Cordova (this is similar for all desktop operating systems)

To summarize, you need to install Cordova on your desktop/laptop machine, and you also need to install the mobile SDKs for the platforms you wish to build apps for. On OS X you can build apps for both iOS and Android. On Windows and Linux you can build apps for Android, but not for iOS (there is no iOS SDK for Windows/Linux).

Useful background knowledge

If you are new to Evothings Studio, read the Introduction in the documentation to get a basic understanding of the development tools used.

Evothings Viewer is a Cordova app

It can be useful to know that Evothings Viewer is itself an app built with Cordova.

Evothings Viewer has a number of plugins included, see the plugin listing in the documentation.

When you build your own Cordova app, you should keep track of which plugins are used by your app so you can add them to the Cordova project (if you are not sure, just ask on the Evothings Forum).

To build Evothings Viewer is easy. Just get the get the source code and follow the instructions given in the GitHub repositort.

Strategies for app development using Evothings Studio and Cordova

The two main tools in Evothings Studio are Evothings Workbench and Evothings Viewer. The Workbench provides the live reload workflow used with Evothings Viewer. You can also use Evothings Workbench and live reload with any Cordova application.

When developing an app with Evothings Studio, you have two options:

Use Evothings Workbench and Evothings Viewer. Very quick to get started, just install Evothings Workbench and Evothings Viewer and you are up and running (no need to install Cordova, SDKs and build a native app). You can readily create a Cordova project when needed and place your JavaScript/HTML files there.

Use Evothings Workbench with your custom Cordova app. This is useful when you want to add Cordova plugins that are not included with Evothings Viewer. If you plan to make a final build and publish your app on the app stores, it can be convenient to create a Cordova project and keep your JavaScript/HTML files in the www folder of the project. Then it is easy to build a native app at any point during the development process. Note that if you use only plugins supported by Evothings Viewer, you can still use Evothings Viewer during development.

How to create a Cordova app from an Evothings project

An Evothings project is just a folder with HTML/JavaScript files (and other content such as CSS files and images). The minimal project is just one HTML file.

These are the steps to create a Cordova project from an Evothings app, for example one of the example apps that comes with the Evothings Studio download:

Create a Cordova project (using the command line tools)
Delete the files in the www folder of the newly created Cordova project
Copy (or move) your HTML/JavaScript files to the www folder in the Cordova project
Add any plugins needed by your app

Read on in the Cordova Guide to learn the details and see actual command tool examples.

Developing a Cordova app using Evothings Workbench

You can use the live reload mechanism and JavaScript tools available in Evothings with your Cordova app.

There are two options:

Develop the app using Evothings Viewer. This works great given that your app does not depend on any additional plugins besides the ones that are included with Evothings Viewer. Just drag index.html into the Workbench and click RUN. When you are ready to test/ship the app, you build it like any Cordova app.

Build a custom version of Evothings Viewer. This is the solution when your app needs a custom set of plugin. Get the source code for Evothings Viewer on GitHub and and follow the instructions given in the repository. Update the file package.json with the plugins you wish to use (you can also remove plugins you don't want to have). Then build and install your custom Viewer and connect to the Workbench. Drag index.html of the Cordova app you are developing into the Workbench, click RUN, and you are up and running. (Yes, it is fully possible to run Evothings Viewer inside Evothings Viewer, that is how we develop the Viewer app!)

Evothings projects vs. Cordova projects

An Evothings project is just a folder with HTML/JavaScript files and other web content.

A Cordova project has a special folder structure, and the JavaScript/web files goes into the "www" folder.

Here is an overview of the Cordova directory structure.

Plugins and JavaScript files

The JavaScript files for Cordova plugins are bundled with the app by the Cordova build system. These files should not be copied to the www folder, and they should not be included into the HTML file using a script tag.

You only need to include the "cordova.js" file in a script tag. Including "cordova.js" in turn will include the JavaScript files for all the plugins installed in the app.

However, any JavaScript files or libraries that reference a plugin must be present in the www folder (or subfolder) and be included using a script tag.

This can sometimes be confusing and is good to keep in mind. If you want to read the JavaScript source code for a plugin, you can either look in the plugin folder in your Cordova project or browse the source for the plugin online (usually on GitHub).