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の構築

 

関連記事

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事