LoginSignup
22
5

More than 1 year has passed since last update.

着XYM通知botをM5Stack ビジュアルプログラミングのみで作ってみた

Last updated at Posted at 2021-12-18

はじめに

マイコンモジュール「M5Stack」とビジュアルプログラミング環境である「UIFlow」を使って、
Symbol のトランザクションを検知し、知らせてくれるbotを作成してみました。

このbotは、予め設定しておいたSymbolアドレスへのトランザクションを検知し、画面とビープ音でお知らせしてくれます。
プログラマーでない方でも簡単に作れるんだ!ということを実感頂ければ幸いです。

今回は、Symbolアドベントカレンダーということで、M5StackのUI部分は触れずに、Symbolの情報取得までの部分を記事にします。

image0.jpeg

それぞれの紹介

M5Stack とは

M5Stack とは、IoT機器開発などで現在注目を集めているマイコンモジュールです。
従来のArduino などと比べて、液晶画面や、ボタン、マイクやスピーカー、その他周辺部品がひとつにまとまっており、
取り合えずマイコンを触ってみたい!を叶えるにはぴったりのモジュールだと思います。

詳しくは、下記の記事などを参考下さい。

UIFlow とは

UIFlowはM5Stack社が開発した、ブロック/micropythonの開発環境です。
Scratchのようにブロックを組み合わせることで、直感的にプログラミングが出来ます。

Symbol とは

すべてのエンタープライズを拡張するNEMの次世代ブロックチェーンです。
RESTAPIから、容易に利用可能なことが特徴です。

完成イメージ

このようなものを作成します。
tmp 1.GIF

必要な物

・M5Stack本体
・Wi-Fi環境
・Webブラウザ

0.M5Stackを準備しよう!

まずはM5Stackを用意しましょう。
お持ちでない方は、スイッチサイエンスやAmazonさん等でご購入下さい。

また、M5StackでUIFlow を利用するところまでの手順は本記事では割愛いたします。
下記のリンクなどをご参考に、セットアップを完了させてください。

1.M5StackでHello World!してみよう!

まずは、M5Stack上で『Hello World!』をしてみましょう。

中断の「グラフィック」から、図のブロックを配置して、『Hello World!』と入力してみましょう。
出来たら、右上のRUNボタン(再生ボタンみたいなやつ)から実行しましょう!
image.png
image0 (1).jpeg

上記が表示されたら完了です。

Symbolのトランザクション情報を取得しましょう。

Symbolノードにアクセスし、特定アカウントの直近のトランザクション情報を取得しましょう。
「高度なブロック」→Http→HttpRequest を選択し、下記のように設定します。
なお、URLは適宜環境に合わせて変更してください。

https://"Symbolノードホスト名":3001/transactions/confirmed?recipientAddress="Symbolアドレス"&pageSize=10&order=desc

image.png
image2.jpeg

取得したデータを成形し、必要なデータのみを表示させましょう

上で取得したデータはjson形式と呼ばれるデータ構造になっており、人間には読みづらく、不要なデータも多い状態です。
取得したデータから必要情報のみを取得して表示するようにしましょう。

image.png
image3.jpeg

その後について

Symbol との接続部分は以上になります。
これ以降は取得したデータを使って、分岐させたり、UIを整えれば完成です。
その他部分については、需要があれば記載したいと思います。

22
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
5