Platioで簡単に作れるセンサー活用モバイルアプリ 第二回



こんにちは、インフォテリア株式会社の吉谷です!

第一回に引き続きまして、Platioの記事を書かせていただきます!

ウフル竹之下さんからHTTP RequestによるAPI連携の話も投げていただきましたが、尺の都合?で今回はFlowのテンプレートで進めたいと思います。すみません😅

わかりにくい部分などありましたら、現地やコメントなどでご質問ください!
  • 第一回: まずはPlatioでアプリを作ってみよう
  • 第二回: センサーデータをPlatioで表示してみよう ← 今回はこちら
  • 第三回: センサーデータを使ってPlatioで様々な表現をしてみよう
今回はハッカソンのシステムをベースに見据えつつ、
第一回「まずはPlatioでアプリを作ってみよう」で準備したアプリにセンサーデータを送り、
モバイルビューワーとしてモニタリングに活用出来るところまでを解説します。

また、PCでデータを確認・活用に繋げる部分もご紹介します。

ハッカソン全体の構成については竹之下さんの書いた以下の記事を是非参考にしてください!
技術情報その1:ハッカソンのベースシステム
技術情報その2:enebularによるLoRaWANデータの処理

IoTの構築は様々な技術が相互に必要になり、複雑に感じるかもしれませんが、一つ一つを分解して考えれば難しくはありません。
まずは作ってみましょう😉

以下の流れで解説します!


それでは早速やってみましょう!

1.「Platio Webアプリ」を開く

まずはPlatioのAPIを使う準備の為に、「Platio Webアプリ」と呼ばれるページを開きます。

プレート一覧から前回作成したプレートを選び、デプロイボタンの横にある、三本線のメニューから「プレートを使う」をクリックします。

URLとバーコードの表示されたページに飛びますので、URLをクリックします。


飛んだ先のサイトは選択したプレートの情報が載っている、
「Platio Webアプリ」ページと言われるページで、
ここではデータビューワーと開発者の情報を閲覧・操作する事が出来ます。

Platioアプリでプレートにログインしたユーザー(前回作成したユーザー)でログインします。
 

ここでミニアプリ名をクリックすると、ミニアプリに登録されたデータを確認する事が出来ます。

第一回で作ったアプリで入力したデータが登録されていますね。
(撮った写真はアプリのカスタマイズで項目ごと消えています)

ここではデータの閲覧・削除などの他、ExcelやCSVでのエクスポートも可能です!
つまり、簡単にモバイルアプリを作成し、クラウドに蓄積されたデータをスムーズに活用する事が出来ますね。

2.Platio開発者ページで必要な情報を確認

さて、左上のホームボタンを押してビューワーのログイン後の画面に戻りましょう。
右上のユーザー名をクリックすると、開発者というメニューが出ますので、これをクリックします。

開発者ページへ飛びました。
ここにAPI開発に必要な情報が記載されています。
 

まず、APIトークンの項目にある更新ボタンを押してトークンを生成します。
 

生成されたトークン一覧が出てきます。
セキュリティ保護の為、このタイミングでしか表示されないので、安全なところにしっかり控えておいてくださいね。
右の方にある青いクリップボードアイコンを押すとクリップボードに簡単にコピー出来ます。

今回のセンサー表示の開発に必要な情報は7つあります。

プレートへの接続に使う基本情報

  • アプリケーション(プレート)のID
  • APIトークンのトークンID
  • APIトークンの秘密トークン


利用するミニアプリの情報
  • コレクションのID
  • 日時のID
  • 名前のID
  • 温度のID


この7項目を控えておいてください。

これでPlatio側で必要な情報が揃いました。
ここからはenebularと連携していきましょう。

3.enebularでPlatio APIの連携設定

enebularへのサインアップはお済みでしょうか?
Platio以外にも色々なサービスと連携出来る便利なツールなので、
まだの方は是非この機会に使ってみてください!

enebularのサインアップはこちら:enebular

enebularへログインするとまずプロジェクト画面が出ます。
この画面ではまだProjectがないので作りましょう。

「+New Project」ボタンをクリックして、任意のプロジェクト名を付け、「Create Project」を押してプロジェクトを作成します。

作成したプロジェクト名をクリックしてプロジェクトを開きましょう。

プロジェクト画面が開きます。

左上の方にある緑色の「New Flow」をクリックします。
Loadingが完了すると、まっさらなenebularの画面が出てきます。


こちらのデータを全て選択し、「Ctrl+C」などでクリップボードにコピーしてください。



enebularの右上の三本線のメニューから、
Import>Clipboardを選択します。



先程コピーしたデータをペーストしてください。


OKを押すとenebularのフローが作られます。
マウスに付いてくる場合はクリックして配置してください。


ここからはPlatioの開発者ページで控えた情報を入れていきます。

まずは「Platio接続情報の初期設定」にPlatioの設定を書き込みます。
オレンジ色のノードの「set global vars」をダブルクリックして設定を開きましょう。


ここに記載された各種情報を入れていきます。
シングルクォート「'」を消さないように気をつけつつ、情報を入れたらOKを押して確定してください。

次に
温度データのミニアプリへデータを送信にある、オレンジ色のノード「collection settings」をダブルクリックして開きます。


ここにも各種情報を埋め込んでいきます。

これで各種設定は完了です!👍

4.想定データを流して確認

では、いよいよセンサーからのデータを表示してみましょう。
と言ってもLoRaWANのセンサーやゲートウェイが手元にないので、
今回はダミーデータを使用します。

前回の竹之下さんの記事から、以下のようなデータを想定して流してみます。 (16進数データはダミーを作りづらいかと思いますので今回は素の数値で作成しています。この辺りの変換などはご質問ください!)

{
   "data": "26.00",
   "date": "2017-04-27T02:27:31.278724",
   "deveui": "xxxxxxxxxxxxxxx",
   "gatewayData": [
       {
           "channel": 926400000,
           "date": "2017-04-27T02:27:31.278724",
           "gwid": "000b78fffeb000a1",
           "rssi": -53,
           "snr": 8.5
       }
     ]
}

dataに入っている26.00というのが温度データの想定ですね。
また、dateがセンサーのデータ取得日時、deveuiが名前の想定です。

これを青いノード「POST records」で設定します。
POST recordsをダブルクリックして設定を開きます。


今回はペーストしたFlowで、既に上記のデータを入れてあるので、
温度や名前などを自由に書き換えてみてください。

ではいよいよセンサーデータ(ダミー)を入れてみましょう。
右上にある赤い「Deploy」ボタンを押します。


Deployに成功すると、各ノードに付いていた青い●が消えて、使える状態になります。

確認の為、Platioアプリの画面を開いておいてください。


enebularの画面にある、POST recordsの左の出っ張りにあるボタンを押すと、データを送信します。
押してみましょう。


アプリの方では流したデータがすぐに入ってきていると思います。
タップして開くと名前、温度のデータが入っていますね😄
 

また、PCブラウザのデータビューワーの方でもデータを確認する事が出来ます。


値を変えてどんどん送ってみましょう😆

まとめ

このように、Platioで作ったアプリにenebularで繋げるだけで簡単にセンサーデータをモニタリングするアプリを作る事が出来ます。

今回記事を短くまとめる為にenebularのFlowはこちらで用意しましたが、自分で作るのも難しくはないと思います。

もしenebular(Node-RED)、Javascript、APIに慣れている方は、
PlatioのAPIドキュメントを参考に色々試してみてください!

今回はデータをそのまま表示するだけでしたが、
第三回では、より実践的にデータ表現の幅が広がる色々なTIPSをご紹介します!
お楽しみに😉

コメント

このブログの人気の投稿

LoRaWANの下り通信

遅ればせながら・・・第2回のレポート前編

enebuler X MotionBoard による、IoT リアルタイムモニタリング