Rainbow开发 step2

Rainbow的web SDK 是一个纯净的Angular JavaScript库，可以工作在多种浏览器下，包括IE11、Chrome、Firefox、Safari和Edge。它可以使你更好的建立Angular的应用去连接Rainbow 云服务。

首先先通过npm先把Rainbow的web SDK安装到你本地

$ npm install rainbow-web-sdk --save

在该sdk中，你可以找到两个js库（vendors-sdk.min.js、rainbow-sdk.min.js），记住这两个js的位置，接下来的项目中我们会用到。

接下来我们用WebStorm创建一个AngularJS的项目,这里我们把项目命名为AngularTest

在该项目的components下新建一个rainbow的文件夹，把我们上边提到的vendors-sdk.min.js、rainbow-sdk.min.js两个JS拷贝到rainbow的文件夹下，接下来在index.html里添加如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My First Rainbow Application</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-shim.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.5/es6-promise.min.js"></script>
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//cdn.jsdelivr.net/momentjs/2.15.1/moment-with-locales.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    <script src="components/rainbow/vendors-sdk.min.js"></script>
    <script src="components/rainbow/rainbow-sdk.min.js"></script>
    <script src="components/rainbow/index.js"></script>
</head>
<body>
</body>
</html>

然后在rainbow的文件夹下新建一个index.js，在该文件下写入如下code：

/* Wait for the page is completely loaded */
$(function() {

    console.log("[DEMO] :: Rainbow Application started!");

    var applicationID = "",
        applicationSecret = "";

    /* Bootstrap the SDK */
    angular.bootstrap(document, ["sdk"]).get("rainbowSDK");

    /* Callback for handling the event 'RAINBOW_ONREADY' */
    var onReady = function onReady() {
        console.log("[DEMO] :: On SDK Ready !");
        // do something when the SDK is ready
    };

    /* Callback for handling the event 'RAINBOW_ONCONNECTIONSTATECHANGED' */
    var onLoaded = function onLoaded() {
        console.log("[DEMO] :: On SDK Loaded !");

        rainbowSDK.initialize(applicationID, applicationSecret).then(function() {
            console.log("[DEMO] :: Rainbow SDK is initialized!");
        }).catch(function(err) {
            console.log("[DEMO] :: Something went wrong with the SDK...", err);
        });
    };

    /* Listen to the SDK event RAINBOW_ONREADY */
    $(document).on(rainbowSDK.RAINBOW_ONREADY, onReady);

    /* Listen to the SDK event RAINBOW_ONLOADED */
    $(document).on(rainbowSDK.RAINBOW_ONLOADED, onLoaded);

    /* Load the SDK */
    rainbowSDK.load();
});

我们通过webstorm打开chrome浏览器进行测试，如果浏览器的开发工具下显示如下信息，证明我们以上代码已经成功连接上了rainbow的云服务

猜你喜欢