您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Model Center   Code  
会员   
   
 
     
   
 订阅
  捐助
区块链 Hello World -- 基于以太坊的投票Dapp
 
作者:HaythamXu
  1848  次浏览      15
 2020-2-25
 
编辑推荐:
本文讲解以太坊, 区块链, Dapp, 以太坊hello world等希望对您有所帮助
本文来自于腾讯云社区,由火龙果软件Delores编辑、推荐。

指路牌

以太坊

区块链

Dapp

以太坊hello world

环境

windows 10 64bit

背景

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

步骤

安装nvmnvm install 9.11.1

nvm use 9.11.1npm install ganache-cli

npm install web3@0.20.1

npm install solc@0.4.21

安装node 9.11.1 并切换环境

创建一个新的工作目录,并在命令行索引到该路径

安装ganche-cli、web3、solc

启动ganache-clinode_modules\.bin\ganache-cli

ganache-cli启动后输出如下

6. 使用Solidity创建Smart Contract,命名为:Voting.solpragma 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;
}}> Web3 = require('web3')
> web3 = new Web3
(new Web3.providers.HttpProvider
("http://localhost:8545"))
> web3.eth.accounts 输入以上最后一条命令后会
获取Ganache创建的10个帐号,如下

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

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

全部完成会得到如下截图的输出,表示smart contract编译成功

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)下载web3.js文件,下载后放在工作根目录下。

由cdn不知什么原因不可用,所以直接下载源文件

在根目录下创建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">
<h1>Voting Application</h1>
<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><script src="web3.js"></script>
<script src=
"https://code.jquery.com/jquery
-3.1.1.slim.min.js">
</script>
<script language="javascript"
type="text/javascript">
web3 = new Web3
(new Web3.providers.HttpProvider
("http://localhost:8545"));
abi = JSON.parse('[{"constant":false,
"inputs":[{"name":"candidate",
"type":"bytes32"}],
"name":"totalVotesFor",
"outputs":[{"name":"","type":"uint8"}],
"payable":false,
"type":"function"},{"constant":false,
"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":"x","type":"bytes32"}],
"name":"bytes32ToString",
"outputs":[{"name":"","type":"string"}],
"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"},
{"constant":true,"inputs":[],
"name":"contractOwner",
"outputs":[{"name":"","type":"address"}],
"payable":false,"type":"function"},
{"inputs":[{"name":"candidateNames",
"type":"bytes32[]"}],
"payable":false,"type":"constructor"}]')
VotingContract = web3.eth.contract(abi);
contractInstance = VotingContract.at
('0x47f49b300eb86d972f91f103913376fb0a8e52e7');
candidates = {"James": "candidate-1",
"Norah": "candidate-2", "Jones": "candidate-3"}
function voteForCandidate(candidate) {
candidateName = $("#candidate").val();
try {
contractInstance.voteForCandidate
(candidateName,
{from: web3.eth.accounts[0]}, function() {
let div_id = candidates[candidateName];
$("#"+div_id).html
(contractInstance.totalVotesFor.call
(candidateName).toString());
});
} catch (err) {
}
}
$(document).ready(function() {
candidateNames = Object.keys(candidates);
for (var i = 0;
i < candidateNames.length; i++) {
let name = candidateNames[i];
let val = contractInstance.totalVotesFor.
call(name).toString()
$("#"+candidates[name]).html(val);
}
});
</script></html>

在浏览器打开index.html,输入Candidate中的人名后,点击Vote即可投票,投票后效果如下

每次点击投票,也都会生成一个新的区块,效果如下。

后记

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

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

   
1848 次浏览       15
 
相关文章

iOS应用安全开发,你不知道的那些事术
Web安全之SQL注入攻击
移动APP安全在渗透测试中的应用
从Google备份互联网看“数据安全”
 
相关文档

web安全设计与防护
互联网海量内容安全处理技术
黑客攻击与防范技术
WEB黑盒安全检测
 
相关课程

WEB网站与应用安全原理与实践
web应用安全架构设计
创建安全的J2EE Web应用代码
信息安全问题与防范