UIFlow2 を使用するための準備はすでに終わり、M5Stack にはファームウエアが書き込まれている前提で説明を続けます。まだの場合は ここ を見て準備を済ませてください。
UIFlow2 はブラウザ上で動作します。次のページを開いてください。
UIFlow1 ならこちらです。
プロジェクトの作成・選択
“Welcome to UIFlow2.0!” の画面が表示されます。Start ボタンをクリックすると使い方の簡単なサマリーが表示されますので初めての人は確認してください。Welcome 画面を閉じるとプロジェクト画面になり、新しいプロジェクトを作ったり、プログラミングを再開したりできます。
すでに存在するプロジェクトで引き続き作業をする場合はそれが表示されるので選択してください。
初めて作業するときには次のような画面になっています。
「＋」ボタンを2回クリックすると新しいプロジェクトを作成できます。
Name はプロジェクトの名前です。初めてなら仮に test で構いません。
Device は使用するデバイスを選択してください。
その他の項目はオプションですので必要に応じて設定してください。Cover Image に画像データを登録しておくとプログラム一覧に表示されるので識別しやすくなります。
[Confirm] ボタンを押します。
プログラミング
[Confirm] ボタンを押すとプログラミングの編集画面になります。画面上のナットのアイコンに言語設定があり、日本語に変更できます。
この画面でプログラムを作成するのですが、その使い方をこと細かに説明するとキリがありませんので大幅に手抜きをさせていただきます。ちょうど良さそうな「Hello World」を表示するプログラムを作る解説記事を見つけましたので紹介します。
この記事では M5Stack ではなく AtomS3 を使っており、事前準備の手順も異なりますので記事の前後の部分は見る必要ありません。（見ると混乱します）記事の中程の「Hello World」のところだけを見てください。手順のとおり実行して、[Run] ボタンを押して正しいシリアルポートを選択し、WebTerminal の上部の▷ボタンを押すとこうなります。
WebTwerminal の [Run] ボタンの右横にプログラムをデバイスにダウンロードしておくボタンがあります。これをクリックすると UIFlow2 の中だけでなく、M5Stack の中にもプログラムが転送されます。
最後にウインドウを閉じる前に [Save] ボタンで編集内容を保存してください。データはクラウドに保存されます。
MicroPython
UIFlow2 は MicroPython の上で動いています。UIFlow2 上部のアイコンで Python を選択してください。Python 言語でのプログラムが表示されます。
このプログラムを MicroPython で動作させれば全く同じように動くはずです（未確認）
ブロック編集でのプログラム開発に限界を感じた場合は Python に移行することも可能でしょう。ただし、Pythonのソースコードを編集してもブロック画面には反映されないようです。詳しくは調査できていません。