DB読み取り要求を送付する画面を準備する

初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
[Watson IoT Platformを使ってみる](http://qiita.com/egplnt/items/af867711a7191923b2ff)でIoTアプリを準備しました。
[IoTダッシュボードを作ってみる](http://qiita.com/egplnt/items/141bd5d9b17ba02e526b)でIoTデータを可視化するダッシュボードを作っていきます。

# DB読み取り要求を送付する画面を用意します
下記のフローをコピペします
![スクリーンショット 2017-02-15 13.17.41.png](https://qiita-image-store.s3.amazonaws.com/0/125842/15fa4d2c-5a5a-ece3-6430-7b7e666fd4eb.png)


```lang: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アプリ名に変更します



こんな感じになりました。
![スクリーンショット 2017-02-15 13.18.08.png](https://qiita-image-store.s3.amazonaws.com/0/125842/ef82d145-c99d-5a22-27df-403e3d6a33e4.png)