1. HOME
  2. ブログ
  3. IT技術
  4. 【後編】Ethereum Pet Shop DAppの作成とテスト~UI 作成編~

【後編】Ethereum Pet Shop DAppの作成とテスト~UI 作成編~

後編~Ethereum Pet ShopでDApp作成とテスト~

前回に引き続き「Ethereum Pet Shopを使って DAppの作成からテスト」まで行ってみたいと思います!

中編では、実際にコントラクトを作成し、テストまで行っていきました。

今回は、UI の作成を行っていきたいと思います!

制作工程

  1. 環境設定
  2. Truffle Box を使って Truffle プロジェクトを作成
  3. コントラクト作成
  4. コントラクトをコンパイルしてデプロイ
  5. コントラクトのテスト
  6. UI 作成
  7. ブラウザ上の DApp でログインする

こちらの記事もオススメ!

UI の作成

pet shop の Truffle Box には、アプリのフロントエンドファイルが src ディレクトリに内包されています。

仕様は以下の通りです。

  1. Lite Server を起動
  2. 購入画面で選んだペットの「Adopt」ボタンをクリック
  3. 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 ファイルを、以下のコードに修正します。

コントラクトのインスタンス化

上記コードの 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 をインストールします。

ベースディレクトリーの設定

「bs-config.json」をテキストエディタで開きます。

以下のコマンドの場合、 Webサイトファイル用の「./srcディレクトリー」と、contract artifacts用の「./build/contractsディレクトリー」を追加します。

dev コマンドを追加

プロジェクトのルートディレクトリーに、「package.json」ファイルがあります。

このファイルに、「dev コマンド」を追加します。

スクリプトオブジェクトを使用すると、コンソールコマンドを単一の npm コマンドに変換できます。

実行

Lite-Server を実行しましょう。

以下のコマンドで、MetaMask が起動します。

必ず、Web3 で設定したコンパイル設定のポート上「http://127.0.0.1:7545」でログインしてください。

app.js ファイルで設定したアカウントで開くと、認証後に「Adopt」ボタンが「Success」に変更されます。

さいごに

「Ethereum Pet Shop」は、Ethereum ブロックチェーンのトレーニング用プロジェクトです。

コントラクトの作成」から「デプロイの仕方」「MetaMask への連携」「Ganache でのテスト」まで制作手順が分かります。

このプロジェクトを通して、プライベートブロックチェーン「Ethereum」の可能性を感じました。

「Ethereum」は、決済手段だけではなく、認証手段として使用することで DApp の活用方法も広がります

新たな Web3 の世界がインターネットに変革を起こしそうですね!

おすすめの本

マスタリング・イーサリアム ―スマートコントラクトとDAppの構築
マスタリング・イーサリアム ―スマートコントラクトとDAppの構築

 

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い、「好きを仕事にするエンジニア集団」です。
ブロックチェーンでのシステム開発依頼・お見積もりはこちらまでお願いします。
また、ブロックチェーンエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

こちらの記事もオススメ!

関連記事

書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡本社、東京オフィスの2拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア