Bunzz ×bubbleでノーコードDapps開発してみた
Bunzzでスマートコントラクトのバックエンドを作成し、bubbleでフロントエンドを作るテストをしてみたのでまとめておきます。
今回試してみたこと
ERC20で「sake」トークンを発行して、bubbleで作成したapp上でテスト送金するまでを試してみました。
Bunzz、bubbleのアカウント作成
まずBunzzとbubbleのアカウントを作成します。
・Bunzz（https://www.bunzz.dev/）
Bunzzのアカウント作成
ユーザー名、メールアドレスなどを入力してBunzzへ登録します。
bubbleアカウント作成
Google連携でのサインアップも可能です。
BunzzでDappをデプロイするまで
Bunzzのホーム画面左メニューから「DApps」を選択すると、自分のDAppsが一覧になっています。
「Create Dapp」から新規のDappを作成します。
次の画面でDappに名前をつけます。今回は「test」としました。
次に、今回作成するDappの種類を選びます。
BunzzがDapp用のテンプレートを用意してくれているので、目的に合わせて選択する形です。
今回は「Simple Token」を選択しました。これはERC20トークンを作成する種類のDappです。
「Simple Token」を選択すると、次のページで作成するトークンの名前とシンボルを決めます。今回はどちらも「sake」にしました。
「Import to Dashboard」で、今回のモジュールがDAppのダッシュボード画面に追加されます。
今回作成したDApp「test」のダッシュボード画面です。
先ほど作成した「Token (ERC20)」がダッシュボードに追加されているので、「Deploy」をクリックするとデプロイされます。（ガス代が発生します）
bubbleでフロントエンドを作成してBunzzと連携するまで
bubbleの新規app作成
bubbleのホーム画面から、右の「New app」ボタンを押して新規appを作成します。
名前やappの種類、目的を入力（または選択）します。
今回は以下の様に入力しました。「Create a new app」を押して作成します。
appの編集画面が開きます。UIはあらかじめ用意されたテンプレートで作成されます。
bubbleでUIを作り始める
appの要素としては、以下４つのみで構成するシンプルなものを作成してみます。
- 「Connect Wallet」ボタン
- 「Address」（トークン送付先アドレス）入力欄
- 「Amount」（トークン送付量）入力欄
- 「Send」（トークン送付の確定）ボタン
今回は一旦ファーストビュー中央にあったコンテンツを削除し、ここにAppの要素を置いていく形にします。
Bunzz連携
bubbleにBunzz SDKのプラグインを追加します。
左メニューの「Visual elements」から「Install more...」を選択します。
プラグインの検索画面になるので、"Bunzz"で検索すると、「Bunzz SDK」が出てきます。
「Install」を押してインストールし、「DONE」をクリックしてUI編集画面に戻ります。
戻ると左メニューの「Visual elements」内に「Bunzz SDK」が追加されているので、これを選択してapp内の適当な場所に配置します。
Bunzzの「Dapp ID」と「API Key」が必要になるので、Bunzz側の画面を見にいきます。
Bunzzの管理画面左メニューから「Client SDK」を選択すると、今回作成したDappのIDとAPI Keyを確認できるので、これをbubble側、先ほどの「Dapp ID」「API Key」にそれぞれ入力します。
UIを作っていきます。左メニューの「Visual element」から、ボタンや入力ボックスを選択して追加していきます。
まずはボタンを追加し、「Connect Wallet」としました。
ポチポチ追加していくだけなので非常に簡単です。入力ボックスも追加し、以下の様になりました。
UI上のアクションとBunzz SDKの繋ぎ込み
ユーザーがボタンをクリックした際にウォレットを接続したり、送金を行ったりといった、アクションの部分を実装していきます。
「Workflow」ページでの設定
左メニューの「Workflow」タブをクリックします。
Workflowページではapp上での様々なイベントを設定していきます。
イベント設定は、①イベント発生のトリガーを設定した上で、②それによってどんなアクションを実行するのか、という２段階で設定していきます。
まずはウォレット接続を実装してみましょう。
①「Connect Wallet」ボタンのクリック」をトリガーにして②ウォレットの接続を実行する、というイメージですね。
まずは「Clickhere to add an event...」をクリックします。
まずはイベントのトリガーとしてボタンのクリックを設定したいので「An element is clicked」を選択します。
次に、どのelementか、を選択するので、「Connect Wallet」ボタンを選択します。
これで「Connect Wallet」ボタンがトリガーになったため、次にアクションの部分を設定します。
イベントとしては、「Bunzz SDK」のセットアップと、ウォレットの接続を設定します。
「Click here to add an action...」をクリックし、実行するアクションを選択します。
まずは「Setup a Bunzz SDK」を選択します。
次に、もう一つアクションを追加し「Get Signer Address a Bunzz SDK」を選択します。
このアクションで、接続したユーザーのウォレットアドレスを取得し、この後のアクションで利用することができます。
次にトークンの送付を実装してみましょう。次は「Send」ボタンをトリガーにします。
「Update Action a Bunzz SDK」を選択します。
「Module Name」にはBunzzで作成したモジュール名の「Token (ERC20)」を入力します。
「Function Name」は「transfer」、「Arguments」の部分でさらにkeyとvalueを追加して、「recipient」は入力ボックス「Input Address」の値、「amount」は入力ボックス「Input Amount」の値をそれぞれ取得する様にします。
補足：「Function name」と、追加するkey、valueの確認方法
Bunzzの管理画面から、Appのダッシュボードにいき、上部の「Go to Smart Contract Dashboard」で、スマートコントラクトのダッシュボードに移ります。
こちらのダッシュボードでは、このモジュールで利用可能なFunctionが一覧で確認でき、実際に操作することも可能になっています。
Functionの色が青色のものは、スマートコントラクトに対して「読み取り」だけを行うもの、黄色は「更新」を必要とするもの（ガス代が発生するトランザクション）です。
「transfer」の項目を見にいくと、「recipient」と「amount」が必要であることがわかります。
また、この画面上では実際にトランザクションを発生させられるので、少しsakeトークンをmintしてみましょう。
「mint」の項目へ行き、walletアドレスとamountを入力、「mint」ボタンを押すだけでmintが完了します。今回はsakeトークンを100枚mintしてみました。
appのプレビューとテスト
Workflow側の設定を終えたので、appをプレビューしてテスト実行してみたいと思います。
bubble編集画面の右上「Preview」からプレビューが可能です。
「Connect Wallet」でウォレットを接続後、送り先のアドレスと枚数を入力し、「Send」ボタンを押してみます。
メタマスクが起動し、送金確認されます。
送付を完了後、あらためてBunzz側の「balanceOf」Functionから今回の送付先アカウントでのトークン数を確認してみると、無事10枚送付されていることが確認できました。
