UIFlowでM5Stackはじめーる 

# はじめに
積まれていたM5Stackをすぐに始めるための備忘録です。

# 開発環境
- M5Stack
- Windows 10 PC

# 導入
1．[UIFlow Quick Start](https://docs.m5stack.com/#/en/quick_start/m5core/m5stack_core_get_started_MicroPython)を参考にします

2．ドライバーをインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/620173ce-bef9-c2d1-a971-ce5874fc5494.png)

3．M5Burnerを起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/2ec80c98-8223-e011-b892-e8a714e5ad71.png)

4．UIFLOW（CORE）のファームウェアをBurnします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/94450703-ff36-142c-7dbf-d173c7091df2.png)

5．自宅のWiFiを設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/7508427a-6614-8b5b-2238-70872bd9b0cf.png)

6．Burn成功です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/dac80dc3-8ef1-2fec-dff3-a183caaec91c.png)

7．PCをm5stackのwifiに接続します
![135469618_3532264253536108_1543019981921277739_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/34dca9e0-63ba-6658-be98-f0c6e3b6baf2.jpeg)

8．PCのブラウザからm5stackに表示されているIPアドレスを開きます

9．自宅のWiFiを選択し、パスワードを入力します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/a3a0e41e-2ba9-381a-b665-194b46068301.png)

10．WiFi接続成功です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/5e2e8ffa-f9ad-19c8-0a7a-43278b285422.png)

11．M5Stackをinternet modeにし、RebootするとAPIキーが表示されます

| | | |
|:--|:--|:--|
|![135785161_410380863347290_5696834582156569851_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/5d292cd2-2bf2-4ab0-12d9-8fd0a11a587f.jpeg)|![136170033_413584493296557_8498401346143771138_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/85bc6bbb-20ae-1aa4-7172-9d1548947260.jpeg)|![135680348_752292602040364_1826208189531975638_n (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/c1fe94f6-d45a-d754-ae40-2401eb2505af.jpeg)|

12．[M5Flow](https://flow.m5stack.com/)を開き、APIキーを入力します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/56502182-7290-0989-7619-be67c7fcdfc9.png)

13．作ったAWS LambdaのAPIを叩いてみましょう。レスポンスはJSONで {"results":値}となっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d8f96b49-d2b6-1fea-5a9d-7adbf2a10228.png)

14．結果です。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">いつものバス停にあと何分でバスが到着するか表示するやつ作った。超便利なやつができた！がバスがもうないw <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/m5stack?src=hash&amp;ref_src=twsrc%5Etfw">#m5stack</a> <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <a href="https://twitter.com/hashtag/AWS?src=hash&amp;ref_src=twsrc%5Etfw">#AWS</a> <a href="https://twitter.com/hashtag/Lambda?src=hash&amp;ref_src=twsrc%5Etfw">#Lambda</a> <a href="https://twitter.com/hashtag/API?src=hash&amp;ref_src=twsrc%5Etfw">#API</a> <a href="https://t.co/Rl2hnTnIRn">pic.twitter.com/Rl2hnTnIRn</a></p>&mdash; がちもとさん@あけおめことよろ (@sotongshi) <a href="https://twitter.com/sotongshi/status/1346098771483004929?ref_src=twsrc%5Etfw">January 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これは良いものだ！ <a href="https://twitter.com/hashtag/m5stack?src=hash&amp;ref_src=twsrc%5Etfw">#m5stack</a> <a href="https://t.co/Iol4fAoicT">pic.twitter.com/Iol4fAoicT</a></p>&mdash; がちもとさん@あけおめことよろ (@sotongshi) <a href="https://twitter.com/sotongshi/status/1346384872139444224?ref_src=twsrc%5Etfw">January 5, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

お疲れ様でした。