Node-RED+UIFlowでノンプログラミングをして、フリーズしたPCを再起動するプログラムを作る

# 初めに
## 環境
- クライアント側
    - Windows 10
    - Atom Lite
    - Unit Relay
- サーバー側
    - Node-REDを実行しているWindows Server
    - UIFlowというサービス

# 手段
## 環境構築
### M5burner
- [M5burner](https://shop.m5stack.com/pages/download)をダウンロードしUIFlowのファームウェアを書き込む
    - 左側のデバイス一覧からATOMを選ぶ
    - 上のCOMポートからatom liteに該当するものを選ぶ
        - 判別にはデバイスマネージャーの`ポート（COMとLPT）`を開いた状態でatom liteを抜き差しし、消えたり現れたりするCOMポートを選ぶ
    - （LEDマトリクスのついていない）Atom Liteの場合はUIFlow(Lite)を書き込む(Burn)
    - WiFiのSSIDとPWを入力
    - 書き込み後、Burnの横のConfigurationを開くとUIFlowからプログラムを書き込むのに必要な`Api Key`が得られる

### UIFlow
- [UIFlow](https://flow.m5stack.com/)にアクセスする
    - ポップアップが出てくるので、Atom Liteとrelayの組み合わせを選ぶ。`Api Key`には先ほど得た値を入れる。
    - 入力を終えると（おそらく）Atom LiteがWiFi経由でM5stackのサーバーにつながり、ブラウザからプログラムを書き込むことが可能になる。

### Node-RED
- インストール手段は[このページ](https://qiita.com/rayan/items/e19775025292e2f1298e)で説明したため、省略する。
- windows serverでMQTTブローカーを開くため、MQTTで用いるポートを開く
    - ファイヤーウォールの詳細設定で可能
    - デフォルトは1883(一応変更推奨)、プロトコル:TCP
- Node-RED上では私の環境では原因不明なエラーによりノードのインストールができないため、サーバーのターミナル上で`node-red-dashboard`と`node-red-contribute-aedes`をインストールする。

```bash
npm i node-red-dashboard node-red-contribute-aedes
```

## プログラム作成
### UIFlow上(Atom Lite)
- MQTTブローカー(Windows ServerのNode-RED内)の設定
    - IPアドレスとポートは適宜設定
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/fe0e5065-189e-90b6-9119-4289fe086226.png)
- デバッグ用のMQTTパケット送信部
    - 再起動するというMQTTパケットを収得し、リレーを正常に作動させることができた場合、successというMQTTパケットを送る
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/4f603863-747b-31dc-2173-fbd13dac5121.png)
- リレーの動作
    - リレーをつなぎ、一定時間がたった後にリレーを切る
    - リレー作動中はRGBを交互に点灯する
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/dfce6631-8d1a-bd30-65e2-805f308408f8.png)
- 再起動のMQTTパケットを受け取る部分
    - もしパケット中の`reboot`要素が`true`の時のみ再起動する
    - 最初にリレーを5秒間作動させてPCを強制終了
    - 1秒待った後、リレーを2秒間作動させて起動する。
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/24f2803e-3f19-86c5-6b63-af03a92bd630.png)
- 実行ボタンはプログラムを揮発性の領域に入れるため、電源を外すと消えてしまう。したがって、最終的にプログラムを書き込む際にはダウンロードのボタンを押す。

#### Atom Liteのデバッグ
- 下の画像に示すような`Remote+`要素を用いることによってブラウザからAtom Lite内の変数の値の確認ができる
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/8dec522a-da2f-c16f-aac8-d492d182bf42.png)
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/e3108fcb-d0b2-3923-ccb1-c56bcad3d20e.png)

### Node-RED上
- 下画像のDashboardをクリックした後　配置で新しいタブを作り、その中に新しいグループを作る。
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/b2c8ef96-1101-017b-5d6d-fd77b0253f80.png)
- 画像を参考にフローを作る
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/a364cae0-f546-eb59-9fa9-1f09612fbb4b.png)
    - 書いてある名称は任意に変更できるので、アイコンを目印に対応するノードを探す。
- 設定内容(デフォルトのままの場合は記載なし)
    - mqtt in
        - サーバー: localhost:1883
        - トピック: pc1_debug
        - 出力: 文字列
    - text
        - Group: 先ほど作ったグループを選択
    - button
        - Group: 先ほど作ったグループを選択
        - payload: {"reboot": "true"}
        - Topic: pc1
    - mqtt out
        - サーバー: localhost:1883

- デプロイするとdashboardにボタンが生成される。下画像の右上のアイコンをクリックして、異なるタブで内容を確認する。
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/a48e5ff8-ea1d-cc97-6ae5-be4dbe21ca8a.png)
- 下画像のようなボタンが現れているはずである。
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299854/6504fcc7-0f94-d8a6-5828-032945ce4754.png)
    - REBOOTを押すと、`{"reboot":"true"}`という文字が表示され、リレーが2回オンオフされる。その後、`success`という文字列が現れる。


#### 動作
- 出力
    - Node-RED dashboardのボタンが押されたとき、再起動を指示するMQTTパケットがNode-RED MQTTブローカーから出される。これをAtom Liteが受け取り、再起動を実行する。
- 入力
    - 再起動後、Atom Liteは`success`という文字の入ったMQTTパケットをNode-RED MQTTブローカーに送る。これがNode-RED dashboardに表示され、ユーザーは再起動が成功したことを確認することができる。


#### MQTTのデバッグ
- スマートフォンのアプリストアでmqttと検索すると、MQTTパケットの送受信ができるアプリが出てくる。これを用いることでMQTTパケットが正常に出されているかを確認することできる。

#### Note
- Atom LiteのLEDがつかなくなることが頻繁にあった
    - 原因はアップロードしたpythonプログラムにバグがあったこと
    - M5BurnerのConfigurationでApp modeからUSB modeに戻すと再びLEDがついた
        - App modeはAtom Liteのフラッシュメモリ中のPythonプログラムを実行する
        - Internet modeはオンラインのUIFlowでプログラミングするモード
            - 起動後、LEDは赤色に点灯する。（おそらく）Wifi接続が完了すると緑色に点灯する
        - USB modeはオフライン(PC)のUIFlowでプログラミングするモード

## 参考リンク
https://qiita.com/youtoy/items/17739b7f4197a8d3fa4d
https://raspberrypi.mongonta.com/howto-use-uiflow-with-m5atom/
https://www.1ft-seabass.jp/memo/2018/05/10/m5stack-meets-nodered-with-mqtt/
https://note.com/ogkt/n/na459421865d6-