区块链 Hello World -- 基于以太坊的投票Dap
admin
2023-01-20 02:00:06
0

指路牌

  • 以太坊
  • 区块链
  • Dapp
  • 以太坊hello world

环境

windows 10 64bit

参考博客

youclavier -- 以太坊投票Dapp教程

背景

准备接手一个IPFS+Ethereum的项目,先学习一下Ethereum,并尝试完成一个Hello World。

步骤

  1. 参考我另一片blog, 安装nvm
  2. 安装node 9.11.1 并切换环境
    nvm install 9.11.1
    nvm use 9.11.1
  3. 创建一个新的工作目录,并在命令行索引到该路径
  4. 安装ganche-cli、web3、solc
    npm install ganache-cli
    npm install web3@0.20.1
    npm install solc@0.4.21       //此处原博客没有版本,会安装高于0.4的版本,会导致后续编译smart contract编译失败 

    在安装了ganache-cli与web3时,由于教程版本问题会出现报错,但是不影响。

  5. 启动ganache-cli
    node_modules\.bin\ganache-cli

    区块链 Hello World -- 基于以太坊的投票Dap

  6. 使用Solidity创建Smart Contract,命名为:Voting.sol
    
    pragma solidity ^0.4.18; 

contract Voting {

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

function Voting(bytes32[] candidateNames) public {
candidateList = candidateNames;
}

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

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

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

7. 启动node交互控制台,依次输入以下命令

Web3 = require('web3')
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
web3.eth.accounts


 输入以上最后一条命令后会获取Ganache创建的10个帐号,如下

区块链 Hello World -- 基于以太坊的投票Dap

> code = fs.readFileSync('Voting.sol').toString()
> solc = require('solc')
> compiledCode = solc.compile(code)

全部完成会得到如下截图的输出,表示smart contract编译成功
区块链 Hello World -- 基于以太坊的投票Dap
8.部署smart contract

> abi = JSON.parse(compiledCode.contracts[':Voting'].interface)
> VotingContract = web3.eth.contract(abi)
> byteCode = compiledCode.contracts[':Voting'].bytecode
> deployedContract = VotingContract.new(['James', 'Norah', 'Jones'],{data: byteCode, from: web3.eth.accounts[0], gas: 4700000})
> deployedContract.address

此时会获取address,记下来后续会用到

contractInstance = VotingContract.at(deployedContract.address)
  1. 下载web3.js文件,下载后放在工作根目录下。
    由cdn不知什么原因不可用,所以直接下载源文件,链接如下
    web3.js 0.20.6
  2. 在根目录下创建index.html文件,并粘贴以下代码,需要在截图标出处,更换成第8步自己部署的smart contract的address
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>DApp</title>
    <link href='https://fonts.googleapis.com/css?family=Open Sans:400,700' rel='stylesheet' type='text/css'>
    <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
    </head>
    <body class="container">
    <h2>Voting Application</h2>
    <div class="table-responsive">
    <table class="table table-bordered">
    <thead>
    <tr>
    <th>Candidate</th>
    <th>Votes</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>James</td>
    <td id="candidate-1"></td>
    </tr>
    <tr>
    <td>Norah</td>
    <td id="candidate-2"></td>
    </tr>
    <tr>
    <td>Jones</td>
    <td id="candidate-3"></td>
    </tr>
    </tbody>
    </table>
    </div>
    <input type="text" id="candidate" />
    <a href="#" onclick="voteForCandidate()" class="btn btn-primary">Vote</a>
    </body>



![更换address](https://user-images.githubusercontent.com/37465243/64078738-f976e400-cd10-11e9-82ef-20468a8e6ba5.png)

11. 在浏览器打开index.html,输入Candidate中的人名后,点击Vote即可投票,投票后效果如下
![](https://user-images.githubusercontent.com/37465243/64078736-f8de4d80-cd10-11e9-9e1a-173c812f2264.png)
每次点击投票,也都会生成一个新的区块,效果如下。
![](https://user-images.githubusercontent.com/37465243/64078737-f8de4d80-cd10-11e9-874c-d3e8570432fb.png)

## 后记
以上步骤就完成了一个基于Ethereum的投票Dapp的完整搭建流程,整合个补全后步骤应该不会有坑的可以顺利搭建完成。

就像“hello world”的字面意思一样,0-1的过程是最艰难的,但是开了头,剩下的1-n也就会顺畅不少。

####
***要获取更多Haytham原创文章,请关注公众号"许聚龙":***
![我的微信公众号](https://user-images.githubusercontent.com/37465243/63688227-5b2ede00-c839-11e9-9aa9-2b461444f463.png)

相关内容

热门资讯

也门胡塞武装:停靠沙特港口船只... 新华社科威特城7月21日电(记者尹炣)萨那消息:也门胡塞武装20日警告国际航运公司称,与沙特港口开展...
特朗普:胡塞武装若封锁红海,美... 新华社华盛顿7月21日电(记者黄强 徐剑梅)美国总统特朗普21日在白宫会见到访的黎巴嫩总统奥恩时表示...
AI第一城|GOAI世界人工智... 7月21日上午,GOAI世界人工智能开源大赛(Global Open-source AI Chall...
刀闸阀行业解读:申奥阀门的技术... 在工业流体控制领域,高粘度介质、强腐蚀环境以及含固体颗粒的复杂工况,长期是制约管路系统安全运行的关键...
原创 华... 现在的手机屏幕做得是越来越大了,iPhone17 Pro Max也做了6.9英寸大屏,国产自然不能输...
WAIC2026:没有花架子,... 齐鲁晚报·齐鲁壹点 记者 任磊磊 “逛不完,根本逛不完!”在世界人工智能大会展馆现场,不少观众一边逛...
欧洲议会外委会首次派团访华,王... 2026年7月21日,中共中央政治局委员、外交部长王毅在北京会见欧洲议会外事委员会主席麦克阿里斯特率...
大熊猫“福虎”嘴角生疮,官方回... 7月21日,南京紫清湖野生动物世界发布通告,称“福虎”自嘴角边长疮至今,园区一直在中国大熊猫保护研究...
“生产车间没有一颗真水果”,这... 文|张宁燊你家楼下便利店的冷柜里,一定躺着几瓶印着“NFC”3个字母的果汁。透明瓶身中,颜色鲜艳的果...
福建宁德一鞋厂起火,两小时后被... 网络截图。7月21日,福建宁德霞浦县,网友反映有一鞋厂起火,视频显示,起火建筑中冒出阵阵黑烟。9时许...