Amplify から、 LED マトリクスを 光らせたい! SC4Y ('22#4) IT・情 報系 北海道まったりLT 大会 (ナイトセッション) 2023/01/12 木原卓也 / @tacck 1 SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会

SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会 2 木原 卓也 Kihara, Takuya / tacck 生活協同組合コープさっぽろ ゆるWeb勉強会@札幌 AWS Community Builder デジタル推進本部システム部 主催 Amplify Japan User Group 運営メンバー Q2 2021, 2022 / Category: Front-end Web and Mobile 好きなフィギュアスケートの技 スプレッド・イーグル

Amplify から、 LED マトリクスを光らせたい! 3 SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会

ざっくりアーキテクチャ • ブラウザから Amplify で作った UI を操作。 • UI から PubSub Library を使い、 AWS IoT Core へ MQTT で通信。 • IoT Core 経由し、 Raspberry Pi で受信。 • 受信結果を使い LED マトリクスを点灯。 4 SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会

LEDマトリクス • Unicorn HAT HD (スイッチサイエンスさんで購入) • https://www.switch-science.com/products/3336?variant=42381968638150 5 SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会

AWS IoT Core と接続 • Raspberry Pi を AWS IoT Core と 接続し、LED マトリクスをコントロール できるようにする。 6 SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会

UI 実装 • Amplify UI でエディタ実装。 • カラーピッカーは React Color を利用。 https://casesandberg.github.io/react-color/ 7 SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会

完成 • フロントエンドから、 AWS IoT Core の メッセージ送信を実装し、 LED マトリクスを操作!! 8 SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会

終 9 SC4Y ('22#4) IT・情報系 北海道まったりLT大会 (ナイトセッション) / #北海道まったりLT大会