介绍

Truffle 是一个在以太坊进行 DApp 开发的世界级开发环境、测试框架。

安装truffle

在安装truffle之前需要安装nodejs，安装后通过如下命令安装truffle: npm install truffle -g

安装完成之后通过truffle version 检查安装是否完成

然后通过 truffle ubox webpack 创建一个初始化实例

新建文件，编写智能合约

修改migrations/_deploy_contracts.js如下：

编译合约

truffle compile

部署合约启动ganache-cli：

ganache-cli//如果报错则重新安装下npm install -g ganache-cli 1 修改truffle-config.js如下：

部署：

truffle migrate

部署完成在build里面会生成一个json文件，

至此，合约部署完成修改前端的页面修改app/src/index.html如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Vote Demo</title>
  </head>
  <body>
    <h1>Voting App</h1>
    <p>Alice: <strong id="alice">loading...</strong> votes </p>
    <p>Bob: <strong id="bob">loading...</strong> votes </p>
    <label for="vote">VoteFor:</label>
    <input type="text" id="candidate"/>
    <button onclick="App.voteForCandidate()">vote</button>
    <script src="index.js"></script>
  </body>
</html>

修改app/src/index.js如下：

// 导入web3
import Web3 from 'web3';
import votingArtifact from '../../build/contracts/Voting.json'  //引入刚刚部署成功的只能合约
const aInBytes32 = "0x4100000000000000000000000000000000000000000000000000000000000000";
const bInBytes32 = "0x4200000000000000000000000000000000000000000000000000000000000000";

const App = {
  web3: null,
  account: null,
  voting: null, 
  
  start: async function() {
    const { web3 } = this;

    try {
      // get contract instance
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = votingArtifact.networks[networkId];
      // 链接上智能合约
      this.voting = new web3.eth.Contract(
        votingArtifact.abi,
        deployedNetwork.address,
      );

      // get accounts
      const accounts = await web3.eth.getAccounts();
      // 获取ganache的第一个账号
      this.account = accounts[0];
      // console.log("will ready +++++++ ");
      this.ready();
    } catch (error) {
      console.error("Could not connect to contract or chain.");
    }
  },
  
  refresh: async function(id, nameInBytes32) {
    const { totalVotesFor } = this.voting.methods;
    const tickets = await totalVotesFor(nameInBytes32).call();
    const element = document.getElementById(id);
    element.innerHTML = tickets.toString();
  },
  
  ready: async function() {
    try {
      this.refresh("alice", aInBytes32);
      this.refresh("bob", bInBytes32);
    } catch (err) {
      console.log(err);
    }
  },
  
  voteForCandidate: async function() {
    try {
      const { voteForCandidate } = this.voting.methods;
    
      const candidateName = document.getElementById("candidate").value;
      if (candidateName == "Alice") {
        await voteForCandidate(aInBytes32).send({ from: this.account });;  
        this.refresh("alice", aInBytes32);
      } else if (candidateName == "Bob") {
        await voteForCandidate(bInBytes32).send({ from: this.account });;
        this.refresh("bob", bInBytes32);
      }
    } catch (err) {
      console.log(err);
    }
  },
}

window.App = App;

window.addEventListener("load", function() {
  // console.log("load+++++");
  if (window.ethereum) {
    // use MetaMask's provider
    App.web3 = new Web3(window.ethereum);
    window.ethereum.enable(); // get permission to access accounts
  } else {
    console.warn(
      "No web3 detected. Falling back to http://127.0.0.1:8545. You should remove this fallback when you deploy live",
    );
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    App.web3 = new Web3(
      new Web3.providers.HttpProvider("http://127.0.0.1:8545"),
    );
  }

  App.start();
});

运行 npm run dev

打开浏览器，输入127.0.0.1:8080, 成功调用智能合约

使用truffle开发Dapp

介绍

安装truffle

编译合约