さて、この記事の続編的なやつです。raspberryPiからawsに動画ぶん投げて閲覧するとこまでやりました。それとは別にarduinoで温度/湿度データをDynamoDbに投げてます。

今回はそれを一緒のページで見ましょうというお話になります。見た目もちゃんとしたいですね。自分で見るだけだけど。

やることはおおよそこちらの内容です。
AWS AppSync + Amplify + Vue.jsでGraphQLをやってみた

cssフレームワークをBuefyにしたいのと、センサーデータをグラフ表示したい。フロントエンド寄りの内容になります。

ここまでのあらすじ

とまあ、他の記事と絡みすぎててこの記事だけ読んでも完結しないので、これまでのあらすじを簡単に書いておきます。

raspberryPiからkinesis video stream

RaspberryPiのUSBカメラでリクガメハウスを撮りつつ、kinesis video streamに垂れ流しています。で、垂れ流した動画をフロントのvue.js+amplify+cognito+labmda+api gatewayみたいなサーバーレス構成で閲覧できるようにしてます。
無駄にいろいろ使ってるけど、サーバーレスで完結したかったので。cognitoの認証後にkinesis video streamのURLをlambdaから引っ張ってきてフロントのvideo.jsにって感じです。
今回はこのフロントにセンサーデータを加えます。

arduinoで温度/湿度データをDynamoDbに投げてます

arduino+DHT22ってセンサーでリクガメハウスの温度とかを図って、aws iotに対してデータを垂れ流してます。iotに入ったデータはdynamodbに連携されてるのでデータはどんどんたまっていきます。(ただTTLは設定してるので2日間以降のデータは消える)

用語解説

あと雑な一言用語解説を。

用語	一言
GraphQL	Rest APIが進化したやつ。webapiなのにsql的な問い合わせができる
aws appSync	awsのマネージドなGraphQL。dynamodbと密につながる
aws amplify	awsのリソースをガシガシつかえるjsライブラリ。CLIもあって便利
vue.js	今時のjsの簡単な方のやつ
Buefy	bootstrapみたいなやつ
arduino	デバイスというか言語というかもはやIDE
dynamodb	自由で不自由なDB
cognito	マネージドなユーザー管理のやつ。便利すぎて怖い
リクガメ	超かわいい

AWS AppSyncセットアップ

AppSyncのコンソールです。すでに設定済でデータが入っているDynamoがあるのでimport DynamoDbというのを選択して進む。

なんかスキーマの画面になるので自分的に必須なカラムを書いておく。Jsonのデータはどうとれるのかな。

デモ画面。なんか認証にcognitoを使うオプションがあったからそれにしてみると、デモ画面で認証ができるようになった。そこでリストを表示してみる。ちゃんと値とれてます。

query:

# After running createKamekusaDht22, try running the listKamekusaDht22S query.
query listKamekusaDht22S {
  listKamekusaDht22S {
    items {
      expire
      id
      payload
    }
  }
}

result:

{
  "data": {
    "listKamekusaDht22S": {
      "items": [
        {
          "expire": 1546484885,
          "id": "id1546312085",
          "payload": "{\"expire\":1546484885,\"id\":\"id1546312085\",\"d1\":\"25.40\",\"d2\":\"16.80\"}"
        },
        {
          "expire": 1546431904,
          "id": "id1546259104",
...

おそらく設定完了。

buefyとamplify

cognitoとvue.js周りはここですでにやっているのでbuefyを入れる。
buefyのインストールドキュメント見ながらやっていきます。
https://buefy.github.io/documentation/start

まずWebfont(ICON)のCDNのlinkをindex.htmlのhead内に書く。
次は

$ npm install buefy

次にmain.jsに追記。細かい事はわからないからFull Bundleにしました。

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

試しに少しApp.vueをいじってみる。

    <div class="container">
      <div class="notification">
        <span class="icon"><i class="fas fa-home"></i></span>
        <strong>リクガメ</strong>を<em>モニター</em>する<code>仕組み</code> on desktop.
      </div>
    </div>

と追記してみました。

詳しい書き方はまだわからないけどとりあえずいけてる。

GraphQLやってみる

amplifyは入れてあるので、そんなに手間じゃないはず。
このあたりを見つつ。https://aws-amplify.github.io/docs/js/api

なんかlambda叩いてる、API.getの併用が難しかったんだけどなんとか動くようにはできました。

いじったのはsrc/awsmobile.js追加とcomponents/VideoStream.vueとsrc/graphql/queries.js、とけっこう少ない。今回はselectに相当するqueryしかいらないからシンプルだというのもあります。

現時点のソースの一部はざっくりこんな感じです。

src/awsmobile.js

const awsmobile =  {
    "aws_project_region": "ap-northeast-1",
    "aws_appsync_graphqlEndpoint": 'https://xxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql',
    "aws_appsync_region": "ap-northeast-1",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_appsync_apiKey": null,
};

export default awsmobile;

components/VideoStream.vue

(templateに)
      <li v-for="item in res" v-bind:key="item.id">
        {{ item.payload }}
      </li>

......
(methodsに)
    measurements: async function() {
      const self = this
      let _res = await API.graphql(graphqlOperation(queries.scanMeasurements))
      self.res = _res.data.listKamekusaDht22S.items
    }

......
(<script>直下に)
import Amplify, { Auth, Storage, Logger, API, graphqlOperation } from 'aws-amplify'
import aws_exports from '../aws-exports';
import awsmobile from '../awsmobile';
Amplify.configure(awsmobile);
Auth.configure(aws_exports);
API.configure(aws_exports);
import * as queries from '../graphql/queries';

ちょっと苦労したのがAmplifyのconfigureの部分で既存のAPI用のconfigとgraphql用のconfigの両方を生かす事ができなかった。なので試しに全体用の設定をして、AuthとAPIは設定を上書きみたいな感じでやったらちゃんと動いた。
あんまキレイじゃないけど。

C3.js？

グラフはさっくりとライブラリで解決したい。でも何使うのがいいのかわかりません。いや、なんでもいいや。簡単そうなのでC3.jsってやつを使ってみます。

readmeの通りにやってみます。

npm install --save vue-c3
npm install --save c3

おー。すごい簡単。5分で表示できた。

あとはソートとか時間軸とかレイアウトで完了ですかね。

......

そういうわけでひとまずできました。

ソースっす