mbedからpelionからenebularがめっちゃよかった

#データソースを作る
各種、データベースと連携可能みたいですが、僕はFirebaseに慣れ親しんでいるのでFirebaseを使います！

Databaseカテゴリを押し、Real Time Databaseを作成します。今回はテストなのでテスト環境で作成しました。　Cloud Firestoreはまだ対応してないようです。対応してくれー！


次にFirebaseでWEBアプリを作成し
<img width="459" alt="スクリーンショット 2019-12-16 13.03.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/16f0cb45-780b-879f-d11e-eab98c430d10.png">

このあたりをメモリます
<img width="227" alt="スクリーンショット 2019-12-16 13.04.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/f58710bd-d005-d418-9f00-69e307794d27.png">

enebularに戻りダッシュボードからDataSorceを選択し、右下のプラスボタンを押します。先ほどメモった内容が必要なのでそれらを
<img width="516" alt="スクリーンショット 2019-12-16 12.59.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/ba67b333-79a1-a3b6-dc65-c3a6a50652b7.png">

最後のrefはflowで残りはenebularのflowで用いる Child path を入力するそうです。とりあえず/testとしました

<img width="531" alt="スクリーンショット 2019-12-16 13.22.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/515ea5b7-ae72-9f1b-2320-1f0038849ae7.png">


#PelionからFirebaseに送るflowを作ります
ダッシュボードのFlowsから右下の＋ボタンを押します

PelionのNotificationをhttpで送り、それをset()でfirebaseに送るFlowになってます。
pelionからのデータはbase64形式で送られてくるので、adminタブから
**node-red-contrib-admin**をinstallしてbase64ノードを入れています。
#<img width="879" alt="スクリーンショット 2019-12-16 18.32.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/1faca624-4d50-51ab-b9f8-c7b668da1feb.png">



http  in の内容です PUTで飛んでくるのでPUTにしてます
**この画像間違えてます　/test　にしてください**
 <img width="513" alt="スクリーンショット 2019-12-16 13.45.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/9c87ccf0-6638-97dc-6496-269a0e2c525e.png">

functionの中身です。Pelionから送られてくる値を整形しています。
<img width="448" alt="スクリーンショット 2019-12-16 18.02.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/f7b97a72-e62b-5a89-dd61-9f129f3d8102.png">



firebase modifyノードはこちらになります
<img width="513" alt="スクリーンショット 2019-12-16 13.44.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/ee331976-0dad-681f-2319-81ce90366c87.png">
Firebaseの編集ボタンを押してAuth TypeをNoneとします
<img width="513" alt="スクリーンショット 2019-12-16 13.44.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/5d6f1f7c-971c-c03f-4573-e62fbf2273bf.png">

右上の i にカーソルをかざすとCallbackを受け取れるURLが見れます！コピーしておきましょう
<img width="344" alt="スクリーンショット 2019-12-16 17.28.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/2258756e-6184-a778-2f88-c3c19bbe3a2e.png">

#Pelionからenebularにデータを送る
mbedからPelionにデータを送る方法は以下を参照してください
[mbedとPelionで最速IoT！！！](https://qiita.com/notitle420/items/26380fffc5a5fb1568e7)

pelionの画面からアクセス管理→APIキーでAPIキーを発行します

あとはデータを取りたいデバイスのIDとリソースパスを調べます
<img width="394" alt="スクリーンショット 2019-12-16 17.38.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/24c25861-4c62-b3fc-b34e-895e3f8431bb.png">
<img width="394" alt="スクリーンショット 2019-12-16 17.38.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/ae3a27e3-cb4f-b02c-a014-6e357d77379e.png">

Postmanかなにかを使って /v2/subscriptionsにこんな感じの内容を送ってあげて
<img width="1013" alt="スクリーンショット 2019-12-16 17.40.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/667a917c-c98d-1b26-e3a6-64be1b03147b.png">

こんな感じの内容で送信先（iにカーソルをあわせたときのURLとhttp inで記載したパス）を記述してあげます。
<img width="1013" alt="スクリーンショット 2019-12-16 17.45.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/a1b66a66-9808-9c76-00f8-73a2f190a23f.png">

ボタンを押すとenebularで取得することができました！
<img width="286" alt="スクリーンショット 2019-12-16 18.44.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/0d9c7eb8-23fc-c4e0-355e-443a3611cf86.png">


#可視化する
かしかするためには時系列化する必要があるので
Base64ノードのあとにこのようなfunctionを追加します
<img width="331" alt="スクリーンショット 2019-12-17 10.44.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/65f9877e-ad7c-e99c-c418-372088586bf3.png">

firebaseに時系列でデータが保管されました！
<img width="297" alt="スクリーンショット 2019-12-17 10.46.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/12845810-d1ad-fafd-a9cd-de57c2d162c0.png">

enebularのダッシュボードからinfoMotionを選択、右下のプラスボタンを押して
こんな感じのアセットを作ります、今回はラインチャートを選択
<img width="601" alt="スクリーンショット 2019-12-17 10.48.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/c8a5c60a-20a7-7d19-e068-3c7c56bee650.png">

Manage graphから実際にgraphを作るときにデータソースを一番最初に作ったものにします！
<img width="324" alt="スクリーンショット 2019-12-17 10.48.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/2ac8361d-a0aa-f165-321f-0b32e5ce7232.png">

可視化できました！めっちゃ簡単！
<img width="608" alt="スクリーンショット 2019-12-17 10.50.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/6257eff9-0d70-0a50-fc6d-82569ed37687.png">





#まとめ
Herokuと連携して簡易サーバーになってくれるのがすごいいいですenebular
そのおかげでAPI連携が爆速でできる。Firebaseとかにデプロイする必要ない
pelionのクライアントをノード形式で作ったりデバイスのアップデートとかもできるそうなのでぜひやってみたい