The example project is a simple project containing one Client App and one Cloud App.

Use the following steps to create a new Ionic Hello World Project.

You now have a new Project containing an Ionic Client App and a Cloud Code App that it will communicate with.

To Preview the app:

This section will highlight the code necessary for the example solution to work correctly.

{
    msg: "Hello <<hello parameter sent by the client app>>"
}

You can use Cordova plug-ins with all platforms supported by RHMAP. However, not all Cordova plug-ins support all platforms. Platforms supported by a plug-in are specified in a plug-in’s package.json file in the cordova.platforms object, or on the Cordova Plug-ins search page.

When developing Cordova applications, plug-ins are added using cordova plugin add, which downloads the plug-in from the repository, creates the necessary folder structure, and adds an entry in the config.xml file. See Platforms and Plugins Version Management in the official Cordova documentation for more information.

In RHMAP, however, plug-ins can also be declared in an RHMAP-specific JSON file config.json and makes the apps future-proof in case the plug-in specification format changes.

{
  "plugins": [
    {
      "id": "cordova-plugin-device",
      "version": "latest"
    },
    {
      "id": "cordova-plugin-geolocation",
      "version": "1.0.1"
    },
    {
      "id": "cordova-labs-local-webserver",
      "url": "https://github.com/apache/cordova-plugins#master:local-webserver",
      "version": "2.3.1",
      "preferences": {
          "CordovaLocalWebServerStartOnSimulator": "false"
      }
    }
  ]
}

Three plug-ins are specified in the above example: the Device plug-in and Geolocation plug-in, which are available through npm, and the Local WebServer plug-in which is available only from the indicated Github repository.

If a plug-in is specified in the config.json file, the JavaScript object of the plug-in won’t be available until it is built and installed on the device. So if you reference the plug-in’s JavaScript object in your app, and try to load your app in App Preview in the Studio, you may get object undefined errors.

To solve this, use defensive checking when calling the plug-in APIs. For example, the following call to the Cordova camera API would result in an "object undefined" error:

navigator.camera.getPicture(success, fail, opts);

However, checking whether the API is defined lets you handle the error gracefully:

if(typeof navigator.camera !== "undefined"){
  navigator.camera.getPicture(success, fail, opts);
} else {
  //fail gracefully
  fail();
}

Both the CUID and app id are sent by the client SDK in every $fh.act request. They are accessible via a special JSON object called __fh. The CUID is unique for each device and remain unchanged even if the app is deleted and re-installed. The app id is generated when the app is created on the platform and remain unchanged. You can use the following code to access them in the cloud code:

getKeyId = function(params){
  var cuid = params.__fh.cuid;
  var appid = params.__fh.appid;
  var keyid = cuid + "_" + appid;
  return keyid;
}

exports.getKey = function(params, callback){
  var keyid = getKeyId(params);
  //get a key using this keyid
  ....
}

You can use whatever persistent mechanism you like to save the keys in the cloud. One recommended approach is to use $fh.db. Here is some example code to show how to save and retrieve keys using $fh.db:

//read a key using $fh.db
var getKey = function(params, cb){
  if(typeof $fh !== "undefined" && $fh.db){
    $fh.db({
      act:'list',
      'type': 'securityKeys',
      eq: {
        "id": getKeyId(params),  //The id is generated using the above example code
        "keyType": params.type
      }
    }, function(err, data){
      if(err) return cb(err);
      if(data.count > 0){
        return cb(undefined, data.list[0].fields.keyValue);
      } else {
        return cb(undefined, undefined);
      }
    });
  } else {
    console.log("$fh.db not defined");
    cb("$fh.db not defined");
  }
}

//save a key using $fh.db
var saveKey = function(params, cb){
  if(typeof $fh !== "undefined" && $fh.db){
    //first check if a key with the same id and type already exsists
    $fh.db({
      act:'list',
      'type': 'securityKeys',
      eq: {
        "id": getKeyId(params),
        "keyType": params.type
      }
    }, function(err, data){
      if(err) return cb(err);
      //a key with the same id and type already exists, update it
      if(data.count > 0){
        $fh.db({
          'act':'update',
          'type': 'securityKeys',
          'guid': data.list[0].guid,
          'fields' : {
            'id': getKeyId(params),
            'keyType': params.type,
            'keyValue' : params.value
          }
        }, function(err, result){
          if(err) return cb(err);
          return cb(undefined, result);
        })
      } else {
        //a key with the same id and type is not found, create it
        $fh.db({
          'act': 'create',
          'type': 'securityKeys',
          'fields': {
            'id' : getKeyId(params),
            'keyType': params.type,
            'keyValue': params.value
          }
        }, function(err, result){
          if(err) return cb(err);
          return cb(undefined, result);
        });
      }
    });
  } else {
    console.log("$fh.db not defined");
    cb("$fh.db not defined");
  }
}

A reference application has been created which fully demonstrates how to use $fh.sec APIs. The code for this application is available on GitHub: https://github.com/feedhenry-training/fh-security-demo-app.

Most browsers support the console logger. Various log levels can be called with a message for example,

console.log(message);
console.error(message);

To debug this console output, you will need to open the relevant web debugging tools in your browser.

For debugging cloud code, simply use console.log() and console.error(). The corresponding log files can be viewed in the Studio under the 'Logs' section, or using FHC.

console.log('this goes to stdout.log');
console.error('this goes to stderr.log');

If your browser of choice for development is Firefox, the Firebug tool makes debugging very easy. Firebug is an add-on for Firefox that is quite active and has many updates to it. Here are some of the things that can be done using Firebug:

Using these features, debugging an app is made very easy. Getting an app working without Firebug showing any errors or problems gives the app a good chance of working cross platform.

Web Inspector is very similar to Firebug. It offers more or less the same features as Firebug, but has the advantage of being included with WebKit browsers out of the box. This means the Web Inspector can be used with Google Chrome and Safari. The tool is enabled by default with Chrome and can be started by context clicking any object on a web page, and selecting Inspect Element.

Debugging on device is still in an early stage compared to debugging in a desktop browser. Some platforms, such as iOS, make the console available and show any javascript errors when Developer mode is enabled, but it is nowhere near as fully featured as Firebug or Web Inspector.