Adding Thing-IF SDK

This page describes how to carry out the setting necessary to use Thing-IF.

The setting steps vary depending on the method you choose in Choosing the Development Environment and Language.

In the both methods, you add the Kii Cloud SDK and the Thing-IF SDK.

If You Build TypeScript Code on Node.js

Follow the below steps to set up the project.

  1. Set up the project on Node.js.

    Create a directory for the project on Node.js and generate package.json by npm init in advance. Besides, incorporate frameworks to use for developing the web app and confirm that you can run a "Hello World!" app in the project.

    This guide assumes that you build the web app with a tool such as webpack and Browserify and let HTML files load the generated JavaScript files.

    See web resources for general technical information about web app development as those techniques are not part of the Kii Cloud technology.

  2. Add the libraries to the project.

    Add the two Kii libraires, the Kii Cloud SDK and Thing-IF SDK.

    $ npm install kii-cloud-sdk --save
    $ npm install thing-if-sdk@0.2.6 --save
    

    Specify a version number that is lower than 1.0.0 for the Thing-IF SDK after @. The latest version is 0.2.6. You cannot specify Version 1.0.0 or later because Version 1.0.0 or later is designed for specific solutions and its specification is out of the scope of this documentation.

    The above npm commands add the below two lines to the "dependencies" section of package.json.

    "dependencies": {
      ...
      "kii-cloud-sdk": "^XX.YY.ZZ",
      ...
      "thing-if-sdk": "^0.2.6",
      ...
    }
    
    • kii-cloud-sdk is the Kii Cloud SDK.

      XX.YY.ZZ will be replaced with the latest version. You can also check the latest version on the SDK page on the npm site. See XX.YY.ZZ is the latest of ... at the upper right of the page.

    • thing-if-sdk is the Thing-IF SDK.

      Check that a version that is lower than 1.0.0 is embedded.

    Both have a caret ^ in front of the version number like "^XX.YY.ZZ" so that subsequent executions of npm install or npm update automatically incorporates changes that do not modify the left-most non-zero digit in the version number of the SDK. You can fix the SDK versions to avoid unexpected updates by removing the carets.

  3. Create the type definition file.

    Install typings and create the type definition file, d.ts.

    $ npm install typings -g
    $ typings install npm:thing-if-sdk --save
    

    The output will be saved in the typings directory of the project.

  4. Make reference to the SDKs from the web app.

    Make reference to the Kii Cloud SDK and Thing-IF SDK with require() and import so that you can use them in the web app implementation.

    Execute the below code in all the TypeScript files which use the features of the Kii Cloud SDK.

    declare function require(string): any;
    var kii = require('kii-cloud-sdk').create();
    

    Execute the below code in all the TypeScript files which use the features of the Thing-IF SDK.

    /// <reference path="./typings/modules/thing-if-sdk/index.d.ts" />
    import * as ThingIF from 'thing-if-sdk';
    
  5. Generate JavaScript files for the web browser.

    Build the web app with a tool such as webpack and Browserify after implementation.

    If you build the web app with webpack and get the errors Cannot resolve module 'child_process' and Cannot resolve module 'fs' with XMLHttpRequest.js, add the three lines starting with externals below to webpack.config.js.

    module.exports = [
      {
        ......
        externals:[{
          xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}'
        }],
        ......
      }
    ]
    

    If you cannot compile the Thing-IF SDK, check the version of the TypeScript compiler defined at typescript in devDependencies in package.json. Kii has verified that the SDK can be built with the latest stable version as of the SDK release.

If You Write JavaScript Code Directly

Follow the below steps to set up the project.

  1. Have the Kii Cloud SDK for JavaScript at hand.

    Have the JS file of the Kii Cloud SDK for JavaScript downloaded in Creating a Kii Application at hand.

    If you have not downloaded the SDK, download it from the "Download" link in the developer portal.

  2. Build the Thing-IF SDK for JavaScript.

    Download the Thing-IF SDK for JavaScript source files from GitHub and build them on Node.js.

    First, download the source files with the following command. Specify a version number that is lower than 1.0.0 for the Thing-IF SDK. The latest version is 0.2.6. You cannot specify Version 1.0.0 or later because Version 1.0.0 or later is designed for specific solutions and its specification is out of the scope of this documentation.

    $ git clone -b 0.2.6 https://github.com/KiiPlatform/thing-if-JSSDK/
    

    Build the downloaded Thing-IF SDK with Browserify to generate thing-if-sdk.js.

    $ cd thing-if-JSSDK
    $ npm install
    $ npm install browserify -g
    $ browserify . -s ThingIF > thing-if-sdk.js
    

    If you cannot compile the Thing-IF SDK, check the version of the TypeScript compiler defined at typescript in devDependencies in package.json. Kii has verified that the SDK can be built with the latest stable version as of the SDK release.

    Use a tool like uglifyify to minify thing-if-sdk.js or create thing-if-sdk.min.js for release to production.

  3. Make the JS files available in the web browser.

    Place the JS files of the Kii Cloud SDK and the Thing-IF SDK and HTML files on the web server so that the web browser can load them.

    Include the below scripts in the HTML file.

    <script src="scripts/KiiSDK.js"></script>
    <script src="scripts/thing-if-sdk.js"></script>
    

    Rewrite the path of KiiSDK.js and thing-if-sdk.js according to their location on the web server. You can shorten the time to load them by using minified files such as KiiSDK.min.js for release to production.

    These scripts load the Kii Cloud SDK and Thing-IF SDK to the global space. You can use the features of the SDKs without declaration within the web app code.