Raspberry Pi をThingWorx につなげる（後編その１）

#後編その１： ThingWorx でIoT アプリを開発します

[前編はこちら](https://qiita.com/akiranishi/items/55182da6e5f9be300bd8)
[中編はこちら](https://qiita.com/akiranishi/items/98dfb380815df64f3edd)
ThingWorx にアップされたデータを可視化するIoT アプリを作成します。

##手順
1. 事前準備
2. Thing 作成とエージェントアプリと接続
3. マッシュアップ画面作成

##1. サンプル用ファイルの読み込み
1. ソースコードのあるgithub の[こちら](https://github.com/akiranishi/thingworx_sample/tree/master/raspdemo01) からraspHOW_entity.xml を入手します。
2. ThingWorx Composer 画面上部の“Import/Export”をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/a65be80a-7ef0-23ab-ca25-283bf3343b84.png)

3. raspHOW_entity.xmlをFile Nameに設定して“Import”をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/62d3951b-d035-3ab6-d982-a0c565aa3c17.png)


##2. Thing 作成とエージェントアプリと接続 
###Thing の作成
1. Thingを作成します<br>
フォルダアイコンをクリックしMODELINGメニュー → Thingsの右にある”+”をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/c19f8a24-5150-ea42-cc8e-c3fd69995a5b.png)

2. 名前は” raspPiThing_1”とします<br>※大文字小文字も合わせてください
3. Base Thing Template は“RemoteThing”を指定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/c0cd9d0c-4530-3cc4-d8c6-e017250735e4.png)

4. “Save”をクリック

###エージェントアプリと接続
1. Raspberry Pi 上のエージェントアプリが動作していることを確認
2. 先の手順で作成した"raspPiThing_1" Thing の編集画面で“Properties and Alerts” に切り替えます
3. “Manage Bindings” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/b875289e-cb18-5622-9ac9-77fbae3701a8.png)

4. “Add all properties”をクリック３つの変数が右側のリストに追加されたことを確認
5. “Done” -> ”Save”
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/991eb682-e8ec-2cf9-2f75-6c73e627738c.png)

6. Refresh ボタンをクリックするとProp_Humidity （湿度）とProp_Temperature （温度）の値が更新されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/39c66595-a880-b58a-68a3-dac54c68a372.png)

##3. マッシュアップ画面の作成
###マッシュアップ画面の新規作成
1. フォルダアイコンをクリックVISUALIZATIONメニューから“Mashups” の右の”+” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/2b514b38-b0e9-8981-2ad3-8dcb7bab4362.png)

2. デフォルトのまま”OK”をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/1dc14f5f-e715-58ac-39b5-17a8342fcdea.png)

参考情報

- “Responsive”はブラウザの画面サイズにあわせて表示
- “Static”は設定した画面サイズで固定して表示

3. 名前を”raspPi_Mashup” に設定して”Save” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/c6f136e3-f7a1-9702-b986-d0e36f4b86c8.png)

4.“Design” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/52e5d061-ebe5-4a9f-f306-4621dee04c08.png)

5. 画面左側の仕切りにある「左矢印」をクリックして作業スペースを広げます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/b3abd989-1785-1c05-00a9-db38933dd768.png)

###Layout ウィジットを配置
1. Layout ウィジットを配置します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/0d10b339-b88a-1e3c-34ff-cc67fc91baa9.png)

2.“Vertical” を選択しRows は２のままで”Done” をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/e9b5b5dc-105f-271c-92de-9d6984da69ac.png)

###各種ウィジットを配置
1. 以下のウィジットを上段に配置します

* Auto Refresh
* LED Display x 2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/0a8242e2-d529-adb8-3ef1-a61efcb0d041.png)

2. 配置の際に以下の表示が出たら“Yes”をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/910ee360-f62e-901f-cafc-0c6b044116ea.png)

###作成したThing を登録
1. 画面右側の”+” をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/59ffd620-c02b-c846-ac76-15e7bf32e94c.png)

2. 右上セレクタ”All” を”Things” にして”raspPiThing_1“ を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/5743e6d8-c7a7-316a-f5ab-84bd3945710a.png)

3. “GetProperties” を選択し“→” をクリック
4. Mashup Loaded？ をチェックして”Done” をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/2724174f-a05b-818e-8084-ccb474e58cdc.png)

###サービスとウィジットを紐付け
1. GetPropertiesの左にある”+”をクリック
2. “Prop_Temperature”をドラッグしたまま左側のLED Displayでドロップ
3. “Select Binding Target”は”Data”を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/d7dbc3cc-812a-d32b-bbb6-594c473da4fe.png)

4. 同じように”Prop_Humidity” をもう一つのLED Display に紐付け
5. GetProperties のバー（赤色）をクリックすると下図のようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/d507a617-53c1-924d-4b89-9eace053108b.png)

###Auto Refresh ウィジットの紐付け
1. Auto Refresh ウィジットの左上にカーソルを当てます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/a9621759-560d-1023-b89a-92561db74c3f.png)

2. Refresh イベントをドラッグしたままGetProperties のバーか変数リストの上にドラッグ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/0a5c9712-5e4e-f192-9563-4f7f170915bc.png)

3. GetProperties のバー（赤色）をクリックすると右図のようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/16e0b3a7-8e62-536b-3e2a-006d9090bbd1.png)

###各ウィジットの調整
1．Auto Refresh ウィジットを選択し、左下のProperty リストからRefreshInterval を5に変更してEnter を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/a7996703-d6f6-149f-7599-f3e02079fa5d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/5492543f-dabb-8916-cdc9-125844323b2d.png)

２． 同様にLED DisplayのLabel をそれぞれ「おんど」「しつど」にしてみましょう
※もちろん、漢字でもOKですが、画面上で「温度」と「湿度」の区別がつきにくいです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/6754bc8a-6990-d039-037e-e0007e088a9b.png)

###マッシュアップの実行
1. “Save” をクリック
2. “View Mashup” をクリック<br>※ブラウザで表示されない場合はポップアップブロックを解除してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/18416478-d171-0ba2-a7d4-ad8308f413d6.png)

3. 以下のように表示されればOK です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111405/d9d821ba-c158-e909-e94c-2076ce30c627.png)



長くなってしまいましたので、[後編その2](https://qiita.com/akiranishi/items/38941d685c97bbb62db4) に続きます。