【後編】Ethereum Pet Shop DAppの作成とテスト～UI 作成編～
2020.07.27
後編～Ethereum Pet ShopでDApp作成とテスト～
前回に引き続き「Ethereum Pet Shopを使って DAppの作成からテスト」まで行ってみたいと思います！
中編では、実際にコントラクトを作成し、テストまで行っていきました。
今回は、UI の作成を行っていきたいと思います！
制作工程
- 環境設定
- Truffle Box を使って Truffle プロジェクトを作成
- コントラクト作成
- コントラクトをコンパイルしてデプロイ
- コントラクトのテスト
- UI 作成
- ブラウザ上の DApp でログインする
関連記事
UI の作成
pet shop の Truffle Box には、アプリのフロントエンドファイルが src ディレクトリに内包されています。
仕様は以下の通りです。
- Lite Server を起動
- 購入画面で選んだペットの「Adopt」ボタンをクリック
- MetaMask に登録した Ethereum アドレスで承認
このコントラクトから、MetaMask 経由で対話できる UI が「web3」です。
web3 のインスタンス化
アプリはグローバルオブジェクトで、int( ) 内にペットのデータがロードされ、intWeb3( )関数で読み込みます。
また、Ethereum Blockchainとの対話に必要なデータがパッケージ化されている「Web3JavascriptLibrary」も使えます。
これにより、「ユーザーアカウントの取得」「トランザクションの送金」「コントラクトとの対話」などが出来ます。
【Web3JavascriptLibrary】
https://github.com/ethereum/web3.js/
app.js ファイルを修正
まず、src/js/app.js ファイルをテキストエディタで開きます。
app.js ファイルを、以下のコードに修正します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | App = { web3Provider: null, contracts: {}, init: async function() { // ペットの情報をロードします。 $.getJSON('../pets.json', function(data) { var petsRow = $('#petsRow'); var petTemplate = $('#petTemplate'); for (i = 0; i < data.length; i ++) { petTemplate.find('.panel-title').text(data[i].name); petTemplate.find('img').attr('src', data[i].picture); petTemplate.find('.pet-breed').text(data[i].breed); petTemplate.find('.pet-age').text(data[i].age); petTemplate.find('.pet-location').text(data[i].location); petTemplate.find('.btn-adopt').attr('data-id', data[i].id); petsRow.append(petTemplate.html()); } }); return await App.initWeb3(); }, initWeb3: async function() { // DAppを使用できるブラウザーか確認する if (window.ethereum) { App.web3Provider = window.ethereum; try { // アカウントへのアクセス要求 await window.ethereum.enable(); } catch (error) { // ユーザーがアカウントのアクセスを拒否しました console.error("User denied account access") } } // Web3プロバイダーのウィンドウを開く else if (window.web3) { App.web3Provider = window.web3.currentProvider; } // もし挿入されたWeb3インスタンスが検出されない場合は、Ganacheに戻します else { App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545'); } web3 = new Web3(App.web3Provider); return App.initContract(); }, <span style="color: rgb(255, 0, 0);" data-mce-style="color: #ff0000;"> initContract: function() { $.getJSON('Adoption.json', function(data) { //必要なContract Artifactファイルを取得し、@truffle/contractでインスタンス化します var AdoptionArtifact = data; App.contracts.Adoption = TruffleContract(AdoptionArtifact); // コントラクトの為にプロバーダーを設定します App.contracts.Adoption.setProvider(App.web3Provider); // データ取得と受け取ったペットをマーキングする為にコントラクトを使用します return App.markAdopted(); }); </span> return App.bindEvents(); }, bindEvents: function() { $(document).on('click', '.btn-adopt', App.handleAdopt); }, markAdopted: function(adopters, account) { var adoptionInstance; App.contracts.Adoption.deployed().then(function(instance) { adoptionInstance = instance; return adoptionInstance.getAdopters.call(); }).then(function(adopters) { for (i = 0; i < adopters.length; i++) { if (adopters[i] !== '0x0000000000000000000000000000000000000000') { $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true); } } }).catch(function(err) { console.log(err.message); }); }, handleAdopt: function(event) { event.preventDefault(); var petId = parseInt($(event.target).data('id')); var adoptionInstance; web3.eth.getAccounts(function(error, accounts) { if (error) { console.log(error); } var account = accounts[0]; App.contracts.Adoption.deployed().then(function(instance) { adoptionInstance = instance; // アカウントを送信してデータ取得としてのトランザクションを実行します return adoptionInstance.adopt(petId, {from: account}); }).then(function(result) { return App.markAdopted(); }).catch(function(err) { console.log(err.message); }); }); } }; $(function() { $(window).load(function() { App.init(); }); }); |
コントラクトのインスタンス化
上記コードの Artifact は、展開されたアドレスや ABI などのコントラクトに関する情報です。
| ABI | 「変数」「関数」「そのパラメーターを含むコントラクトとの対話方法」を定義するJavaScriptオブジェクト |
| TruffleContract( )関数 | TruffleContract( )関数を通過すると、対話可能なコントラクトのインスタンスが作成されます |
| App.web3Provider変数 | web3 に最初に設定する時に格納した値が入ります |
| markAdpted( )関数 | 既に受け入れが決まったペットを読み込みます |
確認
UI のアップデート
Adoption.sol コントラクトをデプロイすると、「getAdopters( )関数」を呼び込みます。
「adoptionInstance 変数」でデータを呼び出し、コントラクト外で宣言した後、インスタンスにアクセスできるようにします。
loop でデータを検索し、Ethereum アドレスが格納されている petId を見つけ出すと「Success」ボタンに変わります。
確認
adopt()関数の処理
「ペットの ID」と「アカウントに格納したアドレスを含むオブジェクト」を使用して、adopt( )関数を実行することにより、トランザクションを送信します。
エラーがない場合は、「markAdopted( )関数」を呼び出して、UI を新しく保存されたデータと同期します。
MetaMask の設定
ブラウザアプリをインストール
まず、MetaMask のブラウザアプリをインストールします。
ログインする
インストール後に、デプロイでターミナル上に表示された Mnemonic を使用し、ログインします。
ネットワークから「カスタムRPC」を選択し、「http://127.0.0.1:7545」を入力しましょう。
すると、各アカウントにテスト用の「100ETH」が表示されます。
ただし、コントラクトのデプロイ時や Ganache でテストに使った場合は、「Gas」 が差し引かれている場合があります。
「コントラクト」「Ganache」「MetaMask」が連携されたことを確認してください。
Lite-Server のインストールと構成
まず、Lite-Server をインストールします。
1 2 3 4 5 | //lite-serverの起動 $ npm install -g lite-server //******プロジェクトルート $ pet-shop-tutorial pet-shop > lite-server //******プロジェクトルート |
ベースディレクトリーの設定
「bs-config.json」をテキストエディタで開きます。
以下のコマンドの場合、 Webサイトファイル用の「./srcディレクトリー」と、contract artifacts用の「./build/contractsディレクトリー」を追加します。
1 | { "server": { "baseDir": ["./src", "./build/contracts"] } } |
dev コマンドを追加
プロジェクトのルートディレクトリーに、「package.json」ファイルがあります。
このファイルに、「dev コマンド」を追加します。
スクリプトオブジェクトを使用すると、コンソールコマンドを単一の npm コマンドに変換できます。
1 2 3 4 | "scripts": { "dev": "lite-server", "test": "echo \"Error: no test specified\" && exit 1" }, |
実行
Lite-Server を実行しましょう。
以下のコマンドで、MetaMask が起動します。
1 | npm run dev |
必ず、Web3 で設定したコンパイル設定のポート上「http://127.0.0.1:7545」でログインしてください。
app.js ファイルで設定したアカウントで開くと、認証後に「Adopt」ボタンが「Success」に変更されます。
さいごに
「Ethereum Pet Shop」は、Ethereum ブロックチェーンのトレーニング用プロジェクトです。
「コントラクトの作成」から「デプロイの仕方」「MetaMask への連携」「Ganache でのテスト」まで制作手順が分かります。
このプロジェクトを通して、プライベートブロックチェーン「Ethereum」の可能性を感じました。
「Ethereum」は、決済手段だけではなく、認証手段として使用することで DApp の活用方法も広がります。
新たな Web3 の世界がインターネットに変革を起こしそうですね！
おすすめの本
関連記事
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
