Blynk 2.0 HowTo

IoTツールのBlynkが2021年11月に2.0になりました。
ESP8266,ESP32などで気軽にIoTが試せて良かったのですが、2.0になった事でサービスプランやトークンの設定などが変わり、今までのコードやアプリは動かないので、簡単にご紹介。

##○ログイン　https://blynk.io/ 
去年まで使っていたアカウントは引き継いでないらしく、新しくアカウント作りました。フリーで作成可能なのはテンプレート2つまでですが、フリーでもある程度は作成可能。それ以上作りたければ有料プランでどうぞ、となっています。

##【開発の流れ】
今まではスマホとArduinoだけで何とかなっていたのが、ビジネスとして環境を整備したよ、という事なんでしょう。
デバイスやテンプレートの管理/作成をWeb側で行います。

詳しくは https://docs.blynk.io/en/ にあります。
クイックスタート　https://docs.blynk.io/en/getting-started/what-do-i-need-to-blynk/how-quickstart-device-was-made

クイックスタートの大きな流れは；
    1. Developer Modeになると自動的にテンプレートがセットされる
    2. Quickstart Template からQuickstart Deviceを作成
    3. デバイスに必要なパラメーターがセットされたskechが生成される
    4. 開発ボードにskechをアップロード、これを使って接続する。

となります。
ボードの開発がArduinoなら、Arduinoの更新（記事作成時点で1.8.19）とBlynkライブラリ（記事作成時点で1.01）への更新も必要です。
★トークンやテンプレート識別のため、ヘッダが増えています。

##【実際に作って見る】
　私の場合は去年まで動かしていたESP8266の温室コントローラー（ヒーターやファンを温度と昼夜でコントロール）を、Blynk2.0へ対応させました。

###■新しいプロジェクトの作成
　ここからはQuickstartではなく、実際に自分のテンプレートを作る所からご紹介します。

　https://blynk.cloud/dashboard/login からログイン
○画面左のドットマークをクリック＝＞「＋New Template」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/3740b2e1-3081-a172-cbd2-c933d1f325b3.png)

Nameをセット		後でアプリから検索します
Hardwareセット		ESP8266
WiFiをセット
Doneをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/83bb37c1-ac0b-b913-b97f-d6c467ef0c35.png)

###○DataStreamをセットする
　以前はスマホの画面から決めていたと思いますが、ここで決定しておきます。

　Virtual Pinを決めていく	　Datatype, Min,Maxなど	Createで作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/21580e75-a6ba-b2d8-28ea-f87d29aad7aa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/33efe02b-1899-2df1-176a-28a3e5a23ea9.png)

こうやってVirtual Pinの数だけDataStreamを作っておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/373d2652-1408-2676-1dab-2586b3e83dee.png)


###○WebDashboardで配置
　ここでアプリの部品と、そこへ送る・そこから受けるVirtual Pinとの結合をしてゆきます。
　・左側の部品を右画面へ配置する。
　・配置した部品をクリックし、どのVirtual Pinと結合するか決める。
　・歯車アイコンから設定へ移り、Min/MaxやTitleを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/2a55578e-50f5-bf30-b63a-8ffa8020c2a8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/cca2f2b2-3196-6d33-1608-dbf76b1c3d5c.png)

　ちなみに、ChartはフリープランではDatastream１本のみ表示可能でした
　昔は2本行けたのですが。。部品配置終えたら「Save」忘れずに。

###○テンプレートコードの入手
　ここでプログラムに付与するヘッダを入手します。
　この3行が無いとエラーになるし、そもそも通信出来ません。

・左側の虫めがねをクリックする。
「All of your devices will be here」から「＋New Device」をクリック
「From template」をクリック「New Device」から下の欄に表示された、作成済みテンプレートを選択すると、右側にヘッダー付きのコードが表示されるのでコピー。Arduinoなどの開発環境へペーストします。

★#includeの前に置かないとエラーになるのでご注意。

```
#define BLYNK_TEMPLATE_ID     "xxxxxxxxx"
#define BLYNK_DEVICE_NAME     "xxxxxxxxx"
#define BLYNK_AUTH_TOKEN     "xxxxxxxxx"
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/a0b0c02d-8eb8-42a3-5890-42aa87a73753.png)

ここまで来たら、実際のコード開発になります。
私はArduinoでESP8266なので；

###□Arduinoで先の3行ヘッダをコピー
以前のBlynkソースの修正は、Get, Writeなどの関数の呼び出し規約を昔と比較すればOK。私はほんの僅かな修正で済みました。ボードへの書込みが終わったらアプリ側の設定になります。

```
旧
Blynk.virtualWrite(0, round(temp));    // virtual pin 0 測定温度

新
Blynk.virtualWrite(V0, round(temp));    // virtual pin 0 測定温度
```


###□スマホのアプリ
　昔のアプリは仕様が違うので、新しい「Blynk IoT」を使います。
　・アプリから、作成済みのプロジェクトが表示されるので選択、
　・「Setup Dashboard 」をクリック
　・右上ボタンからWidgetsを配置する。
　・配置したWidgetsをクリックし、「Select Data Stream」から作成済みのものを選ぶ。
　・Titleに適当な名前を入れる。

以上となります。

###去年までのアプリ画面
![旧温室アプリ写真.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/17c3a0e8-f91d-f668-ceb3-5458825f4f76.jpeg)

Blynk2.0でのアプリ画面　ちなみにDarkModeはもうすぐだよ、との事です(^^;;
![2022.2blynkスマホ画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/a309065b-bc6a-0ae6-5b73-589df2e74f57.jpeg)

![2022.2Blynkマイコン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485449/168fd1a8-5867-60f9-9c8d-3e66928bd3e1.jpeg)