初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
Watson IoT Platformを使ってみるでIoTアプリを準備しました。
IoTダッシュボードを作ってみるでIoTデータを可視化するダッシュボードを作っていきます。
DB読み取り要求を送付する画面を用意します
下記のフローをコピペします
DB読み取り要求を送付する画面を準備
[{"id":"d88648bb.e3ae8","type":"template","z":"52c5924.ec4fbec","name":"test502.htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n<head>\n <title>IoT Quick Dashboard</title>\n <meta charset=\"utf-8\" />\n <style type=\"text/css\">\n #basic {\n }\n\n #a1 {\n background-color: #98d98e;\n height: 120px;\n padding: 20px;\n }\n #b1 {\n background-color: #e4de8a;\n padding-left: 20px;\n height: 40px;\n text-align:left;\n font-size: 18pt\n }\n #c1 {\n background-color: #cee4ae;\n height: 300px;\n text-align:left;\n font-size: 18pt;\n padding: 20px;\n font-family: Meiryo;\n }\n\n #y1 {\n background-color: #e4dc8a;\n padding-left: 10px;\n height: 250px;\n }\n #z1 {\n height: 25px;\n background-color: #8f8667;\n font-size: 18px;\n text-align: center;\n }\n </style>\n</head>\n<body>\n <div id='basic'>\n <div id='a1'>\n <h2>IoT Sample Dashboard</h2><br>\n データベースに保存されたIoTデータを可視化します\n </div>\n\n <div id='b1'>\n b1\n </div>\n\n <div id='c1'>\n <b>入力！</b>\n <P>表示する期間を指定します。</P>\n <form action=\"http://このIoTアプリ名.mybluemix.net/test503\" method=\"get\">\n この日時から <input type=\"datetime-local\" name=\"starttime\" value=\"2017-02-15T10:00\" step=\"60\" style=\"font-size:18px\"><br>\n この日時まで <input type=\"datetime-local\" name=\"endtime\" value=\"2017-02-15T16:00\" step=\"60\" style=\"font-size:18px \"><br><br>\n <button type=\"submit\" name=\"submit\" value=\"送信\">\n <font size=\"2\">表示要求を</font><font size=\"5\" color=\"red\">送信！</font>\n </button>\n <INPUT type=\"reset\" value=\"リセット\"><BR><BR>\n </FORM>\n\n </div>\n <div id=\"y1\">\n 参考URL\n <ul>\n <li><a href=\"http://qiita.com/egplnt/items/af867711a7191923b2ff\">Watson IoT Platformを使ってみる</a></li>\n <li><a href=\"https://internetofthings.ibmcloud.com/#/\">Watson IoT Platform</a></li>\n <li><a href=\"https://developer.ibm.com/recipes/tutorials/use-the-simulated-device-to-experience-the-iot-foundation/\">Recipe - Simulator</a></li>\n </ul>\n マニュアル\n <ul>\n <li><a href=\"http://ibm.com/iot\">IBM IoT</a></li>\n <li><a href=\"https://docs.internetofthings.ibmcloud.com/ja/\">Watson IoT Platform資料ページ</a></li>\n <li><a href=\"https://developer.ibm.com/recipes/\">Recipe</a></li>\n </ul>\n </div>\n\n <div id=\"z1\">\n copyright (c) abc.com All rights reserved.\n </div>\n </div>\n\n </body>\n</html>\n","x":310,"y":240,"wires":[["b68eb3d3.1597a8"]]},{"id":"a9986297.1600f8","type":"http in","z":"52c5924.ec4fbec","name":"","url":"/test502","method":"get","swaggerDoc":"","x":130,"y":240,"wires":[["d88648bb.e3ae8"]]},{"id":"23e3f4b4.f47f7c","type":"comment","z":"52c5924.ec4fbec","name":"DB読み取り要求送付画面を準備","info":"","x":157,"y":199,"wires":[]},{"id":"b68eb3d3.1597a8","type":"http response","z":"52c5924.ec4fbec","name":"","x":470,"y":240,"wires":[]}]
- 「test502.htmlを返す」テンプレートノードの５８行目の
<form action="http://このIoTアプリ名.mybluemix.net/test503" method="get">をデプロイしたIoTアプリ名に変更します
こんな感じになりました。
