AppSyncとDynamodbとkinesisVideoStreamとリクガメモニタリング

さて、[この記事](https://qiita.com/ikegam1/items/0785b1723f2ae6ea310b)の続編的なやつです。raspberryPiからawsに動画ぶん投げて閲覧するとこまでやりました。それとは別にarduinoで温度/湿度データをDynamoDbに投げてます。

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

やることはおおよそこちらの内容です。
[AWS AppSync + Amplify + Vue.jsでGraphQLをやってみた](https://medium.com/@takeshiamano/aws-appsync-amplify-vuejs%E3%81%A7graphql%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F-eb91ba02d6cd)

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というのを選択して進む。
<img src="https://qiita-image-store.s3.amazonaws.com/0/308709/075c8134-5447-1d4b-473e-99d8013614bf.png" width=50%>

なんかスキーマの画面になるので自分的に必須なカラムを書いておく。Jsonのデータはどうとれるのかな。
<img src="https://qiita-image-store.s3.amazonaws.com/0/308709/e6bec1e0-7350-ac91-8e57-419c014424c7.png" width=50%>

デモ画面。なんか認証にcognitoを使うオプションがあったからそれにしてみると、デモ画面で認証ができるようになった。そこでリストを表示してみる。ちゃんと値とれてます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/308709/3d27a6bf-8279-eb59-82ed-dac8344d85bb.png" width=50%>

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周りは[ここ](https://qiita.com/ikegam1/items/a6a01d3c1475d06ed956)ですでにやっているので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>
```

と追記してみました。

![47.png](https://qiita-image-store.s3.amazonaws.com/0/308709/c00a9a91-6fc8-62b7-c5b6-a07860a97e4e.png)

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

## GraphQLやってみる

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

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/308709/25b3e82a-45a3-cd72-fc81-a9cdd9049354.png" width=50% />

いじったのは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ってやつを使ってみます。

https://www.npmjs.com/package/vue-c3

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

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

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

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


......


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

![50.png](https://qiita-image-store.s3.amazonaws.com/0/308709/37411dae-fbf8-fe72-0967-7b7094eec6dd.png)

ソースっす

https://github.com/ikegam1/raspi-kvs-amplify-lambda-frontend