ペットストアをガナッシュに配備する

あるペットショップペットショップの場合    にトリュフの公式ウェブサイトが。一部が、この場合に構築された反応します。次のように私たちは、スマート契約を書いて、環境を構成する必要があります。

1.環境を構築する

• ノードのダウンロードとインストール（JavaScriptランタイム環境）
• コマンドを使用してTruffle（スマートコントラクトコンパイルおよび展開ツール）をインストールします

npm install truffle -g

• Ganache（軽量Ethereumプライベートチェーンテストノード）をダウンロードしてインストールします

2.ペットショップのソースコードをダウンロードします

• トリュフの公式ウェブサイトのボックスシリーズでペットショップをダウンロードするか、トリュフGitHubからペットショップをダウンロードできます。
  トリュフペットショップリンク：https：//github.com/truffle-box/pet-shop-box/archive/master.zip
  トリュフGitHubリンク：https：//github.com/truffle-box/pet-shop-box
• ダウンロード後、解凍してpet-shop-box-masterの名前をpet-shop-boxに変更します

3.ペット用の新しいスマート契約を作成します

    pet-shop-box \
Contractsディレクトリに、Adoption.sol // Adoption.solという名前の契約ファイルを作成します。

// SPDX-License-Identifier: MIT
pragma solidity ^0.5.0;

contract Adoption {
    
    
  address[16] public adopters; //address of adopters
  
  //func adopt
  function adopt(uint petId) public returns (uint) {
    
    
	require(petId >= 0 && petId <= 15);
	
	adopters[petId] = msg.sender;
	return petId;
  }
  
  //return adopters
  function getAdopters() public view returns (address[16] memory) {
    
    
	return adopters;
  }
  
}

4.新しい* .jsスクリプトを作成して、Adoption.solコントラクトを展開します

    pet-shop-box \ migrationsディレクトリに
2_deploy_Adoption.js // 2_deploy_Adoption.jsという名前のファイルを作成します

var Adoption = artifacts.require("./Adoption.sol");

module.exports = function(deployer) {
    
    
  deployer.deploy(Adoption);
};

5.依存パッケージをインストールします

    管理者権限でCMDを開き、pet-shop-boxが配置されているディレクトリを入力して、次のコマンドを入力します。

npm install

6.truffle-config.jsでGanacheアドレスとポートを構成します

• 最初にGanacheを起動し、ギアボタンをクリックしてGanacheの設定インターフェイスに入ります
• 図（1）に示すように、SERVER列を見つけます。

図（1）truffle-config.jsで開発パラメーターを構成する

    Ganacheの[サーバー]ページのホストとポートのパラメーターを、truffle-config.jsの対応する開発フィールド{}にコピーします。

7. pet-shop-box \ src関連のスクリプトを変更します

    7.1 pet-shop-box \ src \ js \ App.jsを変更します。主に、initWeb3 function（）、initContract functioin（）、markAdopted fuction（）、handleAdopt funtion（）を変更します。これらは、それぞれweb3の初期化、契約のインスタンス化、採用の処理を行います。 、最初にこれら4つの関数の{}コードをクリアしてから、関連するビジネスロジックコードを入力します。

    a）App.jsで、
initWeb3 function（）// initWeb3 function（）関数のビジネスロジックコードを入力します

  initWeb3: async function() {
    
    
    // Modern dapp browsers...
    if (window.ethereum) {
    
    
      App.web3Provider = window.ethereum;
      try {
    
    
        // Request account access
        await window.ethereum.enable();
      } catch (error) {
    
    
        // User denied account access...
        console.error("User denied account access")
      }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
    
    
      App.web3Provider = window.web3.currentProvider;
    }
    // If no injected web3 instance is detected, fall back to Ganache
    else {
    
    
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545');
    }
    web3 = new Web3(App.web3Provider);

    return App.initContract();
  }

    b）App.jsで、initContract function（）
// initContract function（）関数のビジネスロジックコードを入力します

  initContract: function() {
    
    
    $.getJSON('Adoption.json', function(data) {
    
    
      // Get the necessary contract artifact file and instantiate it with truffle-contract
      var AdoptionArtifact = data;
      App.contracts.Adoption = TruffleContract(AdoptionArtifact);
    
      // Set the provider for our contract
      App.contracts.Adoption.setProvider(App.web3Provider);
    
      // Use our contract to retrieve and mark the adopted pets
      return App.markAdopted();
    });

    return App.bindEvents();
  },

    c）App.jsで、
markAdopted function（）// markAdopted function（）関数のビジネスロジックコードを入力します

  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);
    });
  },

    d）App.jsで、
handleAdopt function（）// handleAdopt function（）関数のビジネスロジックコードを入力します

  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;
    
        // Execute adopt as a transaction by sending account
        return adoptionInstance.adopt(petId, {
    
    from: account});
      }).then(function(result) {
    
    
        return App.markAdopted();
      }).catch(function(err) {
    
    
        console.log(err.message);
      });
    });
  }

    7.2 pet-shop-box \ srcディレクトリに、jquery.min.jsファイル
jquery.min.js v1.12.4抽出コードを追加します：eqe5

    7.3図（2）に示すように、pet-shop-box \ src \ index.htmlのjquery.min.jsのパスを変更します。

図（2）jquery.min.jsパスを変更する

8.プロジェクトをコンパイルし、Ganacheにデプロイします

    CMDブラックボックスで、pet-shop-boxディレクトリに切り替え、次のコマンドを順番に入力します。

truffle console
compile
migrate

    図3に示すように：

図（3）プロジェクトのコンパイルとデプロイ

9.GanacheテストノードをMetaMaskに接続します

    図（4）に示すように、MetaMaskプラグイン-> LocalHost 8545-> GanacheにMNEMONICパスフレーズを入力->復元をクリックします。

図（4）GanacheでMNEMNOICパスフレーズを使用してMetaMaskにログインする

10.ペットショップボックスプロジェクトを開始します

    CMDブラックボックスに戻り、Ctrl + Cを2回押して開発モードを終了し、次のコマンドを入力します。

npm run dev

    ペットストアのウェブインターフェースがポップアップし、ペットを選択し、下の[採用]ボタンをクリックし、MetaMaskに接続して確認すると、採用が成功します。

図（5）[採用]をクリックしてペットを採用

11.参考記事

    ペットショップ公式サイト