# web3_truffle

**Repository Path**: cheerlee/web3_truffle

## Basic Information

- **Project Name**: web3_truffle
- **Description**: web3_truffle
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-06-27
- **Last Updated**: 2022-10-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: web3

## README

### 使用Truffle

Truffle是一个以太坊进行DApp开发的框架

```bash
sudo npm i -g truffle
# 安装过程出错可能解决方案
sudo npm -g n
sudo n stable

# 查看truffle版本
truffle version 
```

solidity IDE中文版 http://remix.hubwiz.com/

Truffle文档 https://learnblockchain.cn/docs/truffle/getting-started/creating-a-project.html

#### 编写合约

```js
pragma solidity >=0.4.22 <0.8.0;

contract Voting {
  bytes32[] public candidateList;
  mapping(bytes32 => uint8) public votesReceived;

  constructor(bytes32[] memory candidateListName) public {
    candidateList = candidateListName;
  }

  function validCandidate(bytes32 candidateName) internal view returns (bool) {
    for(uint8 i=0; i<candidateList.length; i++) {
      if(candidateName == candidateList[i]) {
        return true;
      }
    }
    return false;
  }

  function voteForCandidate(bytes32 candidateName) public {
    require(validCandidate(candidateName));
    votesReceived[candidateName] += 1;
  }

  function totalVotesFor(bytes32 candidateName) view public returns(uint8) {
    require(validCandidate(candidateName));
    return votesReceived[candidateName];
  }
}
```

#### 创建工程

```bash
mkdir Vote
cd Vote
truffle unbox webpack	# 使用webpack模板
```

创建合约

```bash
cd contracts
rm meta.sol Lib.sol
vim Voting.sol
```

将合约代码拷贝到Voting.sol中

修改migrations/2_deploy_contracts.js



#### 编译合约

```bash
truffle compile
```

#### 部署合约

启动ganache-cli

```bash
ganache-cli
# 如果报错执行npm install -g ganache-cli
```

打开truffle-config.js网路配置

```js
networks: {
    ...
    development: {
     host: "127.0.0.1",     // Localhost (default: none)
     port: 8545,            // Standard Ethereum port (default: none)
     network_id: "*",       // Any network (default: none)
    },
    
    develop: {
      port: 8545
    },
      
 // 本地测试网络
```

部署

```bash
truffle migrate
```

部署完成后用truffle console测试

```bash
truffle console	# 打开truffle控制台
let instance = await Voting.deployed()
instance
```

#### 修改前端页面

```html
<!-- app/src/index.html -->
<h1>Voting</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.voteForCandidata()">vote</button>

<script src="./index.js"></script>
```

```js
// app/src/index.js

import Web3 from "web3";
import votingArtifact from "../../build/contracts/Voting.json";
const aInBytes32 = "0x41000000000000000000000000000000000000000000000000000000000000";
const bInBytes32 = "0x42000000000000000000000000000000000000000000000000000000000000";
const App = {
  web3: null,
  account: null,
  meta: 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();
      this.account = accounts[0];

      // this.refreshBalance();
      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);
    }
  },
  // 投票逻辑
  voteForCandidata: async function() {
    try {
      const { voteForCandidate } = this.voting.methods;
      const candidateName = document.getElementById('candidate').value;
      console.log(candidateName);
      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);
    }
  }
};

...
```

#### 运行

```bash
# app目录
npm run dev
# 浏览器打开127.0.0.1:8080
```