目次


「モノのインターネット」を使用して節水する: パート 3

クライアントからの照会のため Cloudant センサー・データをカスタマイズし、データをグラフ表示する HTML5 アプリケーションを作成する

Comments

3 部構成のチュートリアル・シリーズのこの 3 番目では、「モノのインターネット」で実行される節水ソリューション — 室内用鉢植え植物の土壌水分モニター — の構造と構成を説明します。パート 1では、ハードウェアをセットアップし、IBM Bluemix™ で Internet of Things Foundation Starter を使用して、着信するセンサー・データを Cloudant データベースに保管し、そこから Twitter に送信する Node-RED アプリケーションを作成しました。パート 2では、Node-RED アプリケーションを保護し、DevOps Services コード・リポジトリーから Bluemix への自動デプロイメントをセットアップしました。

この最後のチュートリアルでは、オープン・データ API を作成し、Cloudant データ・ストアからデータを利用できるようにします。次に、Data-Driven Documents (D3.js) JavaScript ライブラリーを使用して、HTML5 アプリケーションを作成し、デスクトップおよびモバイル・デバイス用にセンサー・データをビジュアライズします。

クライアント・アプリケーションがグラフを作成するためにデータを使用できるようにし、特定のセンサーについて最近 x 日分の温度、湿度、および気圧の読み取り値を表示します。

ソリューションの構築に必要なもの

  • Bluemix のアカウントと DevOps Services のアカウント。どちらも IBM ID にリンクします。
  • このチュートリアル・シリーズのパート 1パート 2のステップの完了。
  • HTML および JavaScript の経験

アプリケーションを実行するコードを入手する

ステップ 1. Cloudant データ・ストアを準備する

このステップでは、クライアントから使用できる形式で、Poseidon Cloudant データベースのセンサー読み取り値を利用できるようにします。もっと具体的には、クライアント・アプリケーションがグラフを作成するためにデータを使用できるようにし、特定のセンサーについて最近 x 日分の温度、湿度、および気圧の読み取り値をそのグラフに表示します。

このデータベースに保管されるどのセンサー読み取り値にも、次の形式があります。

{"_id":"f15b90c35ac432034b7d08d628f204f9","_rev":"2-9d58792b0ad4e39116572ac811a2d509",
"temperature":21.74,"timestamp":"2014-09-11T20:49:03.950070",
"altitude":167703.6,"clientID":"ExamplePlantSensor",
"pressure":1021.52,"longitude":4.8,"moisture":699,"latitude":50.2}

デフォルトでは、すべての読み取り値はその ID (_id) でソートされます。最初の作業は、センサー名とタイム・スタンプを組み合わせたキーを使用して、データをソートする新しいビューを Cloudant で作成することです。その後、特定のセンサーおよび時刻範囲の範囲検索を行うことができます。

  1. Cloudant インスタンスのホスト名、ユーザー名、およびパスワードを検索します。
    1. Bluemix にログインします。
    2. ダッシュボードで、このチュートリアル・シリーズのパート 1で作成したアプリケーションのアイコンをクリックします。
    3. (左側にある)「SDK for Node.js」を選択します。
    4. Bluemix インスタンスのサービスの環境変数が表示されます。(ロードには少し時間がかかる場合があります。)これらの変数には、このチュートリアルで必要な Cloudant ホスト名、ユーザー ID、およびパスワードが含まれます。
      {
         "name": "MyPoseidon3:cloudantNoSQLDB",
         "label": "cloudantNoSQLDB",
         "plan": "Shared",
         "credentials": {
            "username": "f8fe0075-9b65-49c5-bffd-b67c1fe16260-bluemix",
            "password": "11111111111111111111111111111b456b35bd2e609740ae54f83602",
            "host": "f8fe0075-9b65-49c5-bffd-b67c1fe16260-bluemix.cloudant.com",
            "port": 443,
            "url": "https://f8fe0075-9b65-49c5-bffd-b67c1fe16260-bluemix:
            801e32c10276a103abb374284d34a9bdfad91b456b35bd2e609740ae54f83602@f8fe0075-9b65-
            49c5-bffd-b67c1fe16260-bluemix.cloudant.com"
         }
      }

      コピー・アンド・ペーストのために簡単にアクセスできるファイルにこのコードを保存します。
  2. Cloudant で履歴ビューを作成します。
    1. Bluemix インスタンスのダッシュボードで、Cloudant サービスを選択します。
    2. Launch」をクリックして、Cloudant インスタンスの管理ユーザー・インターフェースをロードします。
    3. poseidonsensors をクリックします。
    4. 「All Design Docs」の横にある + をクリックし、「New View」を選択します。Screenshot of a graph that plots monitor results
      Screenshot of a graph that plots monitor results
  3. 「New View」のフォームに入力します。
    • 「Save to Design Document」で、「New document」を選択します。
    • _/design フィールドに、sensors と入力します。
    • 「Index name」に、history と入力します。
    • オプションの「Reduce」フィールドで、「None」を選択します。
    • 「Map function」フィールドに、次のように入力します。
      function(doc) {
         if(doc.clientID && doc.timestamp) {
            sensor_values = [0, 0, 0];
            if (doc.temperature) {
                  sensor_values[0] = doc.temperature;
            }
            if (doc.moisture) {
                  sensor_values[1] = doc.moisture;
            }
            if (doc.pressure) {
                  sensor_values[2] = doc.pressure;
            }
            emit([doc.clientID, doc.timestamp], sensor_values);
        }
      }
  4. Save & Build index」をクリックします。Screenshot of the Save & Build Index dialog box
    Screenshot of the Save & Build Index dialog box
  5. 以下のリンクを表示して、新しいビューをテストします。

    https://host/poseidonsensors/_design/sensors/_view/history

    例: https://f8fe0075-9b65-49c5-bffd-b67c1fe16260-bluemix.cloudant.com/poseidonsensors/_design/sensors/_view/history).

    サブステップ 1d のユーザー名とパスワードを指定する必要があります。(ステップ 2 で、このデータをユーザー名とパスワードなしでオープン・データとして使用できるようにします。)

    この要求によりすべての文書が戻されます。

    Screenshot of the list of returned documents
    Screenshot of the list of returned documents
  6. startkey パラメーターと endkey パラメーターを使用して開始時刻と終了時刻を指定することによって、リストを制限することができます。URL 構造は次のようになります。

    https://host/poseidonsensors/_design/sensors/_view/history?startkey=[sensor_id, datetime]&endkey=[sensor_id,datetime]

    例: https://f8fe0075-9b65-49c5-bffd-b67c1fe16260-bluemix.cloudant.com/poseidonsensors/_design/sensors/_view/history?startkey=["BramPlantSensor", "2014-10-10T00:00:00.000000"]&endkey=["BramPlantSensor", "2014-11-10T00:00:00.000000"]
  7. Cloudant からいったんログアウトしてから、再びログインして Cloudant 管理 UI を最新表示します。これで、「Views」リストに新しい history ビューが表示されます。 Screenshot of the Views list
    Screenshot of the Views list
  8. history ビューは、グラフの作成に必要なすべてのデータを戻しますが、(CouchDB list functions を使用して) データを CSV 形式に変換することによって、よりコンパクトにすることができます。
    1. Cloudant 管理インターフェースで「All Design Docs」をクリックします。
    2. Edit」をクリックして、このステップで作成した設計文書を編集します。
    3. history ビューのコードのすぐ下で、設計文書に以下のコードを追加します。
      "lists" : {
         "csv" : "function(head, req){ start({ 'headers': { 'Content-Type': 'text/csv' } });
      send('timestamp,temperature,moisture,pressure\\u000A'); while(row = getRow()){
      send(row.key[1] + ',' + row.value[0] + ',' + row.value[1] + ',' + row.value[2] +
      '\\u000A'); } }"
        }
  9. 次の URL 構造を持つ新しい lists ビューをブラウザーでテストします。
    https://host/poseidonsensors/_design/sensors/_list/csv/history?startkey=[sensor_id, datetime]&endkey=[sensor_id,datetime]

    例: https://f8fe0075-9b65-49c5-bffd-b67c1fe16260-bluemix.cloudant.com/poseidonsensors/_design/sensors/_list/csv/history?startkey=["BramPlantSensor", "2014-10-10T00:00:00.000000"]&endkey=["BramPlantSensor", "2014-11-10T00:00:00.000000"]

    この URL は、センサー読み取り値を含む CSV ファイルを戻します。 Screenshot of the CSV file contents
    Screenshot of the CSV file contents

これで、このステップは完了しました。データ・ストアの準備が整いました。

ステップ 2. API を作成する

次に、ビジュアライゼーション・アプリがデータを取得できるようにする 2 つの API を設計します。最初の API は、使用可能なセンサーのリストを取得し、2 つ目の API は、特定のセンサーからデータを取得します。次の表は、これらの API の仕様を示しています。

URLパラメーター説明
/sensors パラメーターなし すべてのセンサーの JSON リストを戻します。例:
[
{"name":"BramPlantSensor"},
{"name":"KaiPlantSensor"},
{"name":"KaisGrove"},
{"name":"TheGruPi"},
{"name":"TheGruSensor"}
]
/sensors/{sensor}/history指定された {sensor} のセンサー読み取り値が記載されている CSV リストを戻します。結果は、デフォルトで最近の 14 日に制限されますが、上書きできます。
履歴 API が戻す CSV リストには、タイム・スタンプ、温度、湿度、および気圧のレベルと一緒にセンサー読み取り値の履歴が記載されています。
例:
timestamp,temperature,moisture,pressure
2014-10-26T22:14:42.733658,21.14,304,1022.69
2014-10-26T23:44:47.624428,20.74,372,1022.16
2014-10-27T00:44:50.906463,20.63,380,1021.98
2014-10-27T01:14:52.528547,20.5,335,1022.1
2014-10-27T02:14:55.786745,20.39,343,1022.29
2014-10-27T04:45:03.834080,20.1,271,1022.58
2014-10-27T05:45:07.169473,20.87,323,1022.74
sensorセンサーの名前 (ユニーク ID)
daysオプション。センサー読み取り値が戻される日数

Node-RED を使用してこれらの API を実装します。

  1. PoseidonProject DevOps Services リポジトリーを開いて、/Tutorial3/Node-red/API_cloudant_proxy_flow.json ファイルの内容をクリップボードにコピーします。
  2. Bluemix アプリケーションの公開ページを表示して、「Go to your Node-RED flow editor」をクリックします。
  3. + をクリックして新しいワークシートを作成し、タブをダブルクリックしてワークシートの名前を REST API に変更します。
  4. メニューから「Import」>「Clipboard」を選択し、コードを貼り付けて、「Ok」をクリックし、ワークシート上のどこかにプロキシー・フローを置きます。
  5. 各「HTTP in」ノード (Sensor HistorySensor List) をクリックして、その構成を「info」タブに表示します。
  6. 2 つの Convert To Cloudant URL 機能ノードをそれぞれ編集し (ノードをダブルクリック)、Cloudant インスタンスと一致するように cloudantHost 変数を変更します。
  7. 基本認証を使用するために Cloudant GET ノードを更新します。
    • URL」フィールドを空のままにします (URL は直前のノードで指定されます)。
    • Use basic authentication?」チェック・ボックスを選択します。
    • Username」に、Cloudant インスタンスのユーザー名を入力します。
    • Password」に、Cloudant インスタンスのパスワードを入力します。
  8. Add CORS Header 機能ノードおよび HTTP Response ノードのプロパティーを確認します。
  9. Deploy」をクリックして、このプロキシー・フローをアクティブにします。
  10. http://poseidon_host/sensors (例: http://poseidon.mybluemix.net/sensors) までブラウズして、センサー・リスト API をテストします。センサーの JSON リストが表示されます。
  11. http://poseidon_host/sensors/sensor_id/history (例: http://poseidon.mybluemix.net/sensors/BramPlantSensor/history) までブラウズして、履歴検索 API をテストします。センサー値の CSV リストが表示されます。

オープン・データ API が、認証なしにいつでも使用できるようになりました。

ステップ 3. D3.js を使用して HTML5 アプリケーションを作成する

  1. HTML5 コードをローカル PC にエクスポートします。
    1. PoseidonProject DevOps Services リポジトリーに移動します。
    2. EDIT CODE」をクリックします。(必要に応じてログインします。)
    3. Tutorial3/node-app/public に移動し、プロジェクト・ツリー内の公開フォルダーを右クリックして、「Export」>「Zip」を選択します。
  2. 実行中の Bluemix 環境にコードをインポートします。
    1. 実行中の Bluemix インスタンスの DevOps Services リポジトリーに移動します。名前を忘れた場合は、Bluemix ダッシュボードに進み、「EDIT CODE」をクリックします。 Screenshot of the app instance in the Bluemix dashboard
      Screenshot of the app instance in the Bluemix dashboard
    2. //public に移動します。public を右クリックして、「Import File or Zip archive」を選択します。(デフォルトでインポート・アクションはファイルを上書きしないで、エラー・メッセージが表示されます。ファイルの追加のみが必要なので、このメッセージを無視できます。)
  3. ファイルを Git にコミットして、自動デプロイメント・プロセスをトリガーします。
    1. DevOps Services プロジェクトのコード・エディターで、Git アイコン (左上から 2 番目) をクリックします。
    2. 変更をすべて選択します。
    3. コミット・メッセージ (new html5 app など) を入力して、「COMMIT」をクリックします。
    4. SYNC」をクリックして、コミットをプッシュして同期化します。このアクションにより、自動デプロイがトリガーされます。
    5. プロジェクトの概要ページで「BUILD & DEPLOY」をクリックして、デプロイメント状況を確認します。
  4. http://poseidon_host/sensors.html (例: http://poseidon.mybluemix.net/sensors.html) を表示して、アプリケーションをテストします。センサー読み取り値をすでに送信したセンサーのリストが表示されます。 Screenshot of the list of sensors
  5. いずれかのセンサーをクリックして、D3.js で作成されたグラフを表示します。

このシリーズのまとめ

この最後のチュートリアルでは、Cloudant でカスタマイズされたビューを作成する方法、および Node-RED を使用して API プロキシーを作成する方法を学びました。API を使用し、センサー・データのグラフを表示するアプリケーションを作成しました。

このシリーズの Poseidon チュートリアルを楽しんでいただけたと思います。コードを改良して、変更点を投稿していただくのを待っています。例えば、植物に水やりが必要なときに通知を送信できるなどです。始めるのに適したチュートリアルは、「Node-RED と IBM Bluemix の Push サービスを利用してプッシュ通知を自動送信する」です。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development, Open source
ArticleID=997105
ArticleTitle=「モノのインターネット」を使用して節水する: パート 3
publish-date=03122015