M5STICK CPlusにENV.III(温度センサー)をセットして室内の温度・湿度を測定

ターミナルから下記コマンドでM5Burnerに入ります。
```
/Applications/M5Burner.app/Contents/MacOS/electron-m5burner-v2-eletron
```
M5Stickに書き込むのにファームウェア一覧が出てこないという問題が生じ、アプリフォルダをアプリケーション内に入れ忘れていた事がいけなかったのだと判明しましたが、これには数時間悩まされました。
![スクリーンショット 2022-06-11 14.29.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/77ca468c-2a21-b1a2-952f-8be6baf585e4.png)
ファームウェアを書き込むときに、Arduinoで以前書き込んだデータが入ったままで上書きできなかったのでジャンパーワイヤーをGNDとG0に繋いで強制的に書き込みモードでダウンロード。USBシリアルポートを設定して書き込み速度750000bpsで書き込み開始。
![スクリーンショット 2022-06-11 14.43.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/2f95b168-077e-0798-4739-b22282095567.png)
無事に書き込み出来てAPIKEYが画面に出てきました。
![スクリーンショット 2022-06-11 15.06.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/7fdd823c-36a3-7134-2816-005f3f565594.png)
[UIFlow-Desktop-IDE](https://shop.m5stack.com/pages/download)をダウンロードして設定でAPIKEY接続したら、気圧・温度・湿度を表示してみる。
![スクリーンショット 2022-06-11 15.12.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/80a99de1-610c-f47e-4d1e-2ca53f63a08d.png)
![スクリーンショット 2022-06-11 15.19.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/189a2c0c-c9b5-b6ce-3414-0ea8e382fe8e.png)
こんな感じで表示されました。今度はこのデータをサーバーにPOST送信してみます。送るのは温度と湿度のみとします。
![スクリーンショット 2022-06-30 12.52.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/22b28fc7-6ef7-9c09-1d31-c380bb46f9e1.png)

サクセス時に5000ミリ秒の待ち時間を入れることで動作させたときに一瞬出てくるFailのエラーを回避できます。
![スクリーンショット 2022-06-11 15.36.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/c2008b65-6c49-dec5-b09c-8e2d1eccfe22.png)
またPOST送信が成功すると下記のような感じになります。
![スクリーンショット 2022-06-30 13.02.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/3f0c25d2-3175-3791-def0-2ea1c42405b9.png)
POSTを受け取ってデータベースへ流し入れます。
```api/m5s/index.ts
import { Request, Response } from 'express'
import { M5, M5Log } from '../../lib/db'

export const post = async (req: Request, res: Response) => { 
  const { temperature, humidity } = req.body
  res.json(await M5.create({ 
  temperature: temperature, humidity: humidity
  }))
  await M5Log.create({ temperature: temperature,
  humidity: humidity })
}
```
Vueで表示してみました。
```pages/index.vue
<template>
  <div>
    <div id="app" style="width:600px"> 
      <table class="table-fixed m-2 p-4 w-full">
      <thead class="bg-gray-50">
       <tr>
          <th class="px-4 py-2 border">温度(&deg;C)</th>
          <th class="px-4 py-2 border">湿度(%)</th>
          <th class="px-4 py-2 border">更新日時</th>
       </tr>
      </thead>
      <tbody>        
        <tr v-for="r in m5" :key="r.id">
          <td class="border px-4 py-2">{{ r.temperature }}</td>
          <td class="border px-4 py-2">{{ r.humidity }}</td>
          <td class="border px-4 py-2">{{ $dateFns.format(r.updatedAt, 'MMMdo(E) HH:mm', { locale: 'ja' }) }}</td>
          </tr>
      </tbody>
    </table>
    </div>
      </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { M5 } from '~/models'

@Component
export default class sesame extends Vue {
m5: M5[] = []

  async mounted() { 
    this.m5 = await this.$axios.$get('api/m5Stick')
    setInterval(async () => {
      this.m5 = await this.$axios.$get('api/m5Stick')
    }, 30000)
  }
}
</script>
```
ちゃんとデータが取れていました。
![スクリーンショット 2022-06-11 16.06.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/32fefc47-75fe-7192-aa84-6039e6bd0c09.png)