Mobile App Development

If you followed the previous article, you may note that we haven't used any Cordova plugins or APIs yet. These plugins allow us to use mobile device features that we normally wouldn't be able to use using a browser.
IMPORTANT: We want our engine to work on a browser and as a native app. Hence we must create a browser fallback for any Cordova API we use.

Cordova Plugins

There are plenty of plugins available, from the mundane such as splashscreen to the essentials such as media. We'll install the plugins via the Cordova CLI.
```
  
cordova plugin add <pluginid>
								
```

When you use the command line, it automatically adds the plugin to the project, so all you have to do is use it. (Not entirely sure about this, but older versions require permissions to be added as well, so these should be added to config.xml if needed.)

From the official Cordova plugin list, the following are of particular interest (though these may or may not be actually needed). You may choose to add more plugins if you wish.

  
Basic device API: cordova-plugin-device
Network connection: cordova-plugin-network-information
Accelerometer: cordova-plugin-device-motion
Compass: cordova-plugin-device-orientation
Media: cordova-plugin-media
File access: cordova-plugin-file
Dialog box: cordova-plugin-dialogs
Vibration: cordova-plugin-vibration
Splashscreen: cordova-plugin-splashscreen
Debug console: cordova-plugin-console
Status bar: cordova-plugin-statusbar

Integration with vn-canvas

Supposing we wanted to add the dialogs plugin. We'd add it as below.
```
  
cordova plugin add cordova-plugin-dialogs
								
```

We have one function at vncanvas-cmds.js that uses the alert() function call. We're going to make sure that if we have Cordova, we're going to use the navigator.notification.alert() call instead.

First let's add a flag inside Stage at vn-canvas.js to indicate we are using Cordova.

  
var Stage = { 
    ...
    isCordova: false,
    ...

Then we'll set it to true if we're using Cordova inside init.js

  
    if (isCordova) {
        ...
        /* vn-canvas initialization */
        Stage.isCordova = true;
        ...
    }
    else {
        // Not cordova, just initialize vn-canvas normally
        ...
    }

Note that this will be our main Cordova flag for all plugins we want to add.

Finally, we'll modify message function to support the Cordova plugin.

  
function message(param) {
    if (Stage.isCordova)
        navigator.notification.alert(param, function(){}, "vnCanvas Alert");
    else
        alert(param); 
}

And that's it for dialogs. Now repeat for all plugins we'd like to add.

vn-canvas with Cordova

As of version 0.6.x (Elsa), the following Cordova plugins were tested and/or inherently supported.

  
Basic device API: cordova-plugin-device	
Media: cordova-plugin-media
File access: cordova-plugin-file						
Dialog box: cordova-plugin-dialogs
Splashscreen: cordova-plugin-splashscreen
Debug console: cordova-plugin-console
Status bar: cordova-plugin-statusbar

The following template/boilerplate files should help you get started:

  
VN-Canvas HTML Template
VN-Canvas Init Template
VN-Canvas Mobile App Template