瞭解以太坊區塊鏈智慧合約開發從零構建和部署去中心化投票
阿新 • • 發佈：2019-01-26
區塊鏈愛好者（QQ：53016353）
編輯器選擇
理論上講任何編輯器都可以編寫Solidity合約程式碼，比如：WebStorm，VSCode，Sublime，等等。我選擇的是Atom，沒有任何理由，因為Atom輕量並且介面漂亮。移步https://atom.io/地址，下載安裝Atom。
autocomplete-solidity程式碼自動補齊
p2
linter-solium、linter-solidity程式碼錯誤檢查
language-ethereum支援Solidity程式碼高亮以及Solidity程式碼片段
p3
安裝所需工具
首先開發機上必須裝好Node.js，再使用以下命令安裝所需的工具：
$ npm install -g ethereumjs-testrpc truffle
liyuechun:~ yuechunli$ npm install -g ethereumjs-testrpc truffle
/usr/local/bin/testrpc -> /usr/local/lib/node_modules/ethereumjs-testrpc/build/cli.node.js
/usr/local/bin/truffle -> /usr/local/lib/node_modules/truffle/build/cli.bundled.js
+
+ [email protected]
added 1 package and updated 7 packages in 76.132s
liyuechun:~ yuechunli$
建立專案
/Users/liyuechun/Desktop/1012/Voting
liyuechun:Voting yuechunli$ ls
liyuechun:Voting yuechunli$ pwd
/Users/liyuechun/Desktop/1012/Voting
liyuechun:Voting yuechunli$ truffle unbox react-box
Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!
Commands:
Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Test dapp: npm test
Run dev server: npm run start
Build for production: npm run build
liyuechun:Voting yuechunli$
專案結構
p4
contracts：編寫智慧合約的資料夾，所有的智慧合約檔案都放置在這裡
migrations：部署合約配置的資料夾
src：基於React的Web端原始碼
test：智慧合約測試用例資料夾
編寫投票Dapp智慧合約
在contracts資料夾下建立Voting.sol檔案，將下面的程式碼拷貝到檔案中。
pragma solidity ^0.4.4;
contract Voting {
// liyuechun -> 10
// xietingfeng -> 5
// liudehua -> 20
mapping (bytes32 => uint8) public votesReceived;
// 儲存候選人名字的陣列
bytes32[] public candidateList;
// 建構函式 初始化候選人名單
function Voting(bytes32[] candidateNames) {
candidateList = candidateNames;
}
// 查詢某個候選人的總票數
function totalVotesFor(bytes32 candidate) constant returns (uint8) {
require(validCandidate(candidate) == true);
// 或者
// assert(validCandidate(candidate) == true);
return votesReceived[candidate];
}
// 為某個候選人投票
function voteForCandidate(bytes32 candidate) {
assert(validCandidate(candidate) == true);
votesReceived[candidate] += 1;
}
// 檢索投票的姓名是不是候選人的名字
function validCandidate(bytes32 candidate) constant returns (bool) {
for(uint i = 0; i < candidateList.length; i++) {
if (candidateList[i] == candidate) {
return true;
}
}
return false;
}
}
通過remix + metamask部署合約到Kovan Test Net
在Google瀏覽器裡面安裝MetaMask外掛
p5
開啟https://remix.ethereum.org將合約程式碼拷貝到裡面
p6
確保MetaMask賬號處於等於狀態，並且有一定的以太幣支付給礦工。
確保Environment是Injected Web3，如果切換不過來，關掉瀏覽器重新啟動
在create函式中輸入一個數組，數組裡面的內容為候選人名單
點選create按鈕，會彈出MetaMask介面讓你確認，確認提交，過一會兒，合約就部署成功
可以測試給某個候選人投票，查詢某個候選人的票數
拷貝合約地址
p7
0xd3f33a2e553b363b432d7f81f721a2a6202ecc67
編譯合約
liyuechun:Voting yuechunli$ truffle compile
Compiling ./contracts/Migrations.sol...
Compiling ./contracts/SimpleStorage.sol...
Compiling ./contracts/Voting.sol...
Writing artifacts to ./build/contracts
liyuechun:Voting yuechunli$
編譯完合約以後在build/contracts資料夾下面會有一個Voting.json的abi檔案。
檢視Voting.json檔案內容
{
"contract_name": "Voting",
"abi": [
{
"constant": true,
"inputs": [
{
"name": "candidate",
"type": "bytes32"
}
],
"name": "totalVotesFor",
"outputs": [
{
"name": "",
"type": "uint8"
}
],
"payable": false,
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "candidate",
"type": "bytes32"
}
],
"name": "validCandidate",
"outputs": [
{
"name": "",
"type": "bool"
}
],
"payable": false,
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "",
"type": "bytes32"
}
],
"name": "votesReceived",
"outputs": [
{
"name": "",
"type": "uint8"
}
],
"payable": false,
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "",
"type": "uint256"
}
],
"name": "candidateList",
"outputs": [
{
"name": "",
"type": "bytes32"
}
],
"payable": false,
"type": "function"
},
{
"constant": false,
"inputs": [
{
"name": "candidate",
"type": "bytes32"
}
],
"name": "voteForCandidate",
"outputs": [],
"payable": false,
"type": "function"
},
{
"inputs": [
{
"name": "candidateNames",
"type": "bytes32[]"
}
],
"payable": false,
"type": "constructor"
}
],
"unlinked_binary": "0x6060604052341561000f57600080fd5b6040516103113803806103118339810160405280805190910190505b600181805161003e929160200190610046565b505b506100b5565b828054828255906000526020600020908101928215610083579160200282015b828111156100835782518255602090920191600190910190610066565b5b50610090929150610094565b5090565b6100b291905b80821115610090576000815560010161009a565b5090565b90565b61024d806100c46000396000f300606060405263ffffffff7c01000000000000000000000000000000000000000000000000000000006000350416632f265cf78114610069578063392e6678146100955780637021939f146100bf578063b13c744b146100eb578063cc9ab26714610113575b600080fd5b341561007457600080fd5b61007f60043561012b565b60405160ff909116815260200160405180910390f35b34156100a057600080fd5b6100ab60043561015d565b604051901515815260200160405180910390f35b34156100ca57600080fd5b61007f6004356101af565b60405160ff909116815260200160405180910390f35b34156100f657600080fd5b6101016004356101c4565b60405190815260200160405180910390f35b341561011e57600080fd5b6101296004356101e7565b005b60006101368261015d565b151560011461014457600080fd5b5060008181526020819052604090205460ff165b919050565b6000805b6001548110156101a457600180548491908390811061017c57fe5b906000526020600020900160005b5054141561019b57600191506101a9565b5b600101610161565b600091505b50919050565b60006020819052908152604090205460ff1681565b60018054829081106101d257fe5b906000526020600020900160005b5054905081565b6101f08161015d565b15156001146101fb57fe5b6000818152602081905260409020805460ff8082166001011660ff199091161790555b505600a165627a7a723058206783a7ff47eae16f18011a9db2a3cc983350b779bf3181b7623c18d4bce363180029",
"networks": {},
"schema_version": "0.0.5",
"updated_at": 1507806214330
}
這個檔案是編譯後的abi檔案，待會兒需要將這個檔案的json匯入到App.json中。
檢視src/utils/getWeb3.js檔案內容
import Web3 from 'web3'
let getWeb3 = new Promise(function(resolve, reject) {
// Wait for loading completion to avoid race conditions with web3 injection timing.
window.addEventListener('load', function() {
var results
var web3 = window.web3
// Checking if Web3 has been injected by the browser (Mist/MetaMask)
if (typeof web3 !== 'undefined') {
// Use Mist/MetaMask's provider.
web3 = new Web3(web3.currentProvider)
results = {
web3: web3
}
console.log('Injected web3 detected.');
resolve(results)
} else {
// Fallback to localhost if no web3 injection.
var provider = new Web3.providers.HttpProvider('http://localhost:8545')
web3 = new Web3(provider)
results = {
web3: web3
}
console.log('No web3 instance injected, using Local web3.');
resolve(results)
}
})
})
export default getWeb3
這個檔案主要是封裝了一個getWeb3的promiss供我們直接使用，可以從getWeb3直接獲取到web3物件供App.js檔案中使用。
修改app.js前端程式碼和合約進行互動
import React, { Component } from 'react'
import VotingContract from '../build/contracts/Voting.json'
import getWeb3 from './utils/getWeb3'
import './css/oswald.css'
import './css/open-sans.css'
import './css/pure-min.css'
import './App.css'
const contractAddress = "0xd3f33a2e553b363b432d7f81f721a2a6202ecc67";
var votingContractInstance;
var _modifyVotingCount = (candidates,i,votingCount) => {
console.log("---------");
console.log(candidates);
console.log(i);
console.log(votingCount);
let obj = candidates[i];
obj.votingCount = votingCount;
return candidates;
}
class App extends Component {
constructor(props) {
super(props)
this.state = {
candidates: [
{
"name": "Rama",
"id": 100,
"votingCount": 0
},
{
"name": "Nick",
"id": 101,
"votingCount": 0
},
{
"name": "Jose",
"id": 102,
"votingCount": 0
},
{
"name": "liyuechun",
"id": 103,
"votingCount": 0
}
],
candidatesVoteCount: ["0","0","0","0"],
web3: null
}
}
componentWillMount() {
// Get network provider and web3 instance.
// See utils/getWeb3 for more info.
getWeb3
.then(results => {
this.setState({
web3: results.web3
})
// Instantiate contract once web3 provided.
this.instantiateContract()
})
.catch(() => {
console.log('Error finding web3.')
})
}
instantiateContract() {
/*
* SMART CONTRACT EXAMPLE
*
* Normally these functions would be called in the context of a
* state management library, but for convenience I've placed them here.
*/
const contract = require('truffle-contract')
const votingContract = contract(VotingContract)
votingContract.setProvider(this.state.web3.currentProvider)
// Declaring this for later so we can chain functions on SimpleStorage.
// Get accounts.
this.state.web3.eth.getAccounts((error, accounts) => {
votingContract.at(contractAddress).then((instance) => {
votingContractInstance = instance;
for (let i = 0; i < this.state.candidates.length; i++) {
let object = this.state.candidates[i];
console.log(accounts[0]);
console.log(votingContractInstance);
console.log(votingContractInstance.totalVotesFor(object.name));
votingContractInstance.totalVotesFor(object.name).then(result => {
console.log(i);
console.log(result.c[0]);
this.setState({
candidates: _modifyVotingCount(this.state.candidates,i,result.c[0])
});
});
}
})
})
}
render() {
return (
<div className="App">
<ul>
{
this.state.candidates.map((object) => {
console.log(object);
return (
<li key={object.id}>候選人：{object.name} 支援票數：{object.votingCount}</li>
)
})
}
</ul>
<input
style=
placeholder="請輸入候選人姓名..."
ref="candidateInput"
/>
<button style= onClick={() => {
console.log(this.refs.candidateInput);
console.log(this.refs.candidateInput.value);
let candidateName = this.refs.candidateInput.value;
console.log(this.state.web3.eth.accounts[0]);
votingContractInstance.voteForCandidate(candidateName).then((result => {
console.log(result);
console.log(candidateName);
let number = 0;
for(let i = 0; i < this.state.candidates.length; i++) {
let object = this.state.candidates[i];
if (object.name === candidateName) {
number = i;
break;
}
}
votingContractInstance.totalVotesFor(candidateName).then(result => {
this.setState({
candidates: _modifyVotingCount(this.state.candidates,number,result.c[0])
});
});
}));
}}>Voting</button>
</div>
);
}
}
export default App