在以太坊Dapp终极教程——如何构建一个完整的全栈去中心化应用(一)中,我们已经完成了一切所需的设置;在以太坊Dapp终极教程——如何构建一个完整的全栈去中心化应用(二)中,让我们通过列出将在选举中运行的候选人来继续构建智能合约并完成客户端程序。下面我们来完成投票部分,现在让我们添加在选举中投票的能力。
让我们定义一个选民voters
映射到智能合约,以跟踪在选举中投票的账户,如下所示:
contract Election {
// ...
// Store accounts that have voted
mapping(address => bool) public voters;
// ...
}
现在让我们添加一个投票vote
函数:
contract Election {
// ...
// Store accounts that have voted
mapping(address => bool) public voters;
// ...
function vote (uint _candidateId) public {
// require that they haven't voted before
require(!voters[msg.sender]);
// require a valid candidate
require(_candidateId > 0 && _candidateId <= candidatesCount);
// record that voter has voted
voters[msg.sender] = true;
// update candidate vote Count
candidates[_candidateId].voteCount ++;
}
}
此函数的核心功能是通过从候选candidates
映射中读取候选结构并使用递增运算符(++)将voteCount
增加1来增加候选者的投票计数。让我们看看它做的其他一些事情:
msg.sender
访问调用此函数的帐户。msg.sender
的帐户地址来完成此操作。如果它在那里,该帐户已经投票。接下来,它要求候选ID有效。候选id必须大于零且小于或等于总候选计数。现在,你的完整合约代码应如下所示:
pragma solidity ^0.4.2;
contract Election {
// Model a Candidate
struct Candidate {
uint id;
string name;
uint voteCount;
}
// Store accounts that have voted
mapping(address => bool) public voters;
// Read/write candidates
mapping(uint => Candidate) public candidates;
// Store Candidates Count
uint public candidatesCount;
function Election () public {
addCandidate("Candidate 1");
addCandidate("Candidate 2");
}
function addCandidate (string _name) private {
candidatesCount ++;
candidates[candidatesCount] = Candidate(candidatesCount, _name, 0);
}
function vote (uint _candidateId) public {
// require that they haven't voted before
require(!voters[msg.sender]);
// require a valid candidate
require(_candidateId > 0 && _candidateId <= candidatesCount);
// record that voter has voted
voters[msg.sender] = true;
// update candidate vote Count
candidates[_candidateId].voteCount ++;
}
}
现在让我们为election.js
测试文件添加一个测试:
it("allows a voter to cast a vote", function() {
return Election.deployed().then(function(instance) {
electionInstance = instance;
candidateId = 1;
return electionInstance.vote(candidateId, { from: accounts[0] });
}).then(function(receipt) {
return electionInstance.voters(accounts[0]);
}).then(function(voted) {
assert(voted, "the voter was marked as voted");
return electionInstance.candidates(candidateId);
}).then(function(candidate) {
var voteCount = candidate[2];
assert.equal(voteCount, 1, "increments the candidate's vote count");
})
});
我们想在这里测试两件事:
接下来,我们可以为函数的要求编写一些测试。让我们编写一个测试来确保我们的投票函数抛出双重投票的异常:
it("throws an exception for invalid candidates", function() {
return Election.deployed().then(function(instance) {
electionInstance = instance;
return electionInstance.vote(99, { from: accounts[1] })
}).then(assert.fail).catch(function(error) {
assert(error.message.indexOf('revert') >= 0, "error message must contain revert");
return electionInstance.candidates(1);
}).then(function(candidate1) {
var voteCount = candidate1[2];
assert.equal(voteCount, 1, "candidate 1 did not receive any votes");
return electionInstance.candidates(2);
}).then(function(candidate2) {
var voteCount = candidate2[2];
assert.equal(voteCount, 0, "candidate 2 did not receive any votes");
});
});
我们可以声明交易失败并返回错误消息。我们可以深入研究此错误消息,以确保错误消息包含revert
子字符串。然后我们可以通过确保候选人没有得到任何投票来确保我们的合约状态不变。
现在让我们编写一个测试来确保我们防止双重投票:
it("throws an exception for double voting", function() {
return Election.deployed().then(function(instance) {
electionInstance = instance;
candidateId = 2;
electionInstance.vote(candidateId, { from: accounts[1] });
return electionInstance.candidates(candidateId);
}).then(function(candidate) {
var voteCount = candidate[2];
assert.equal(voteCount, 1, "accepts first vote");
// Try to vote again
return electionInstance.vote(candidateId, { from: accounts[1] });
}).then(assert.fail).catch(function(error) {
assert(error.message.indexOf('revert') >= 0, "error message must contain revert");
return electionInstance.candidates(1);
}).then(function(candidate1) {
var voteCount = candidate1[2];
assert.equal(voteCount, 1, "candidate 1 did not receive any votes");
return electionInstance.candidates(2);
}).then(function(candidate2) {
var voteCount = candidate2[2];
assert.equal(voteCount, 1, "candidate 2 did not receive any votes");
});
});
首先,我们将使用尚未投票的新帐户设置测试方案。然后我们将代表他们投票。然后我们会再次尝试投票。我们断言这里发生了一个错误。我们可以检查错误消息,并确保没有候选人收到投票,就像之前的测试一样。
现在让我们运行我们的测试:
$ truffle test
是的,他们通过了!
让我们添加一个表单,允许帐户在我们的index.html
文件中的表格下方投票:
<form onSubmit="App.castVote(); return false;">
<div class="form-group">
<label for="candidatesSelect">Select Candidate</label>
<select class="form-control" id="candidatesSelect">
</select>
</div>
<button type="submit" class="btn btn-primary">Vote</button>
<hr />
</form>
让我们来看看这个形式的一些事情:
app.js
文件中提供的候选项填充选择选项。onSubmit
处理程序,它将调用castVote
函数。 我们将在app.js
文件中定义它。现在让我们更新我们的app.js文件来处理这两件事。首先,我们在表单的select元素中列出智能合约中的所有候选项。然后,一旦帐户投票,我们将隐藏页面上的表单。我们将渲染函数更新为如下所示:
render: function() {
var electionInstance;
var loader = $("#loader");
var content = $("#content");
loader.show();
content.hide();
// Load account data
web3.eth.getCoinbase(function(err, account) {
if (err === null) {
App.account = account;
$("#accountAddress").html("Your Account: " + account);
}
});
// Load contract data
App.contracts.Election.deployed().then(function(instance) {
electionInstance = instance;
return electionInstance.candidatesCount();
}).then(function(candidatesCount) {
var candidatesResults = $("#candidatesResults");
candidatesResults.empty();
var candidatesSelect = $('#candidatesSelect');
candidatesSelect.empty();
for (var i = 1; i <= candidatesCount; i++) {
electionInstance.candidates(i).then(function(candidate) {
var id = candidate[0];
var name = candidate[1];
var voteCount = candidate[2];
// Render candidate Result
var candidateTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + voteCount + "</td></tr>"
candidatesResults.append(candidateTemplate);
// Render candidate ballot option
var candidateOption = "<option value='" + id + "' >" + name + "</ option>"
candidatesSelect.append(candidateOption);
});
}
return electionInstance.voters(App.account);
}).then(function(hasVoted) {
// Do not allow a user to vote
if(hasVoted) {
$('form').hide();
}
loader.hide();
content.show();
}).catch(function(error) {
console.warn(error);
});
}
接下来,我们想要编写一个在提交表单时调用的函数:
castVote: function() {
var candidateId = $('#candidatesSelect').val();
App.contracts.Election.deployed().then(function(instance) {
return instance.vote(candidateId, { from: App.account });
}).then(function(result) {
// Wait for votes to update
$("#content").hide();
$("#loader").show();
}).catch(function(err) {
console.error(err);
});
}
首先,我们在表单中查询candidateId
。当我们从智能合约中调用投票功能时,我们会传入此ID,并为当前帐户提供功能的来自from
元数据。这将是异步调用。完成后,我们将显示加载程序并隐藏页面内容。无论何时记录投票,我们都会做相反的事情,再次向用户显示内容。
现在你的前端应用程序应如下所示:
继续尝试投票功能。一旦你这样做,你应该会看到一个Metamask确认弹出如下:
点击提交后,你已成功投票!你仍然会看到一个加载屏幕。现在,你必须刷新页面才能看到记录的投票。我们将在下一节中自动更新加载程序。如果你遇到困难,可以在此处的教程中引用完整的客户端代码。
本教程的最后一步是在投票时触发事件。这将允许我们在帐户投票时更新我们的客户端应用程序。幸运的是,这很容易。让我们首先在合约中声明一个事件,如下所示:
contract Election {
// ...
event votedEvent (
uint indexed _candidateId
);
// ...
}
现在我们可以在我们的投票功能voted
中触发这个投票事件vote
,如下所示:
function vote (uint _candidateId) public {
// require that they haven't voted before
require(!voters[msg.sender]);
// require a valid candidate
require(_candidateId > 0 && _candidateId <= candidatesCount);
// record that voter has voted
voters[msg.sender] = true;
// update candidate vote Count
candidates[_candidateId].voteCount ++;
// trigger voted event
votedEvent(_candidateId);
}
现在我们已经更新了合约,我们必须运行迁移:
$ truffle migrate --reset
我们还可以更新我们的测试以检查此投票事件,如下所示:
it("allows a voter to cast a vote", function() {
return Election.deployed().then(function(instance) {
electionInstance = instance;
candidateId = 1;
return electionInstance.vote(candidateId, { from: accounts[0] });
}).then(function(receipt) {
assert.equal(receipt.logs.length, 1, "an event was triggered");
assert.equal(receipt.logs[0].event, "votedEvent", "the event type is correct");
assert.equal(receipt.logs[0].args._candidateId.toNumber(), candidateId, "the candidate id is correct");
return electionInstance.voters(accounts[0]);
}).then(function(voted) {
assert(voted, "the voter was marked as voted");
return electionInstance.candidates(candidateId);
}).then(function(candidate) {
var voteCount = candidate[2];
assert.equal(voteCount, 1, "increments the candidate's vote count");
})
});
此测试检查投票函数vote
返回的交易收据,以确保其具有日志。这些日志包含已触发的事件。我们检查事件是否是正确的类型,并且它具有正确的候选ID。
现在让我们更新客户端应用程序以监听投票事件,并在触发任何时候触发页面刷新。我们可以使用这样的listenForEvents
函数来做到这一点:
listenForEvents: function() {
App.contracts.Election.deployed().then(function(instance) {
instance.votedEvent({}, {
fromBlock: 0,
toBlock: 'latest'
}).watch(function(error, event) {
console.log("event triggered", event)
// Reload when a new vote is recorded
App.render();
});
});
}
这个函数功能做了一些事情。首先,我们通过调用votedEvent
函数订阅投票事件。我们传递了一些元数据,告诉我们要听区块链上的所有事件。然后我们观察watch
这个事件。在这里,我们会在触发votedEvent
时随时登录控制台。我们还重新呈现页面上的所有内容。这将在记录投票完成后不再需要loader,并在表格上显示更新的投票计数。
最后,我们可以在初始化合约时调用此函数:
initContract: function() {
$.getJSON("Election.json", function(election) {
// Instantiate a new truffle contract from the artifact
App.contracts.Election = TruffleContract(election);
// Connect provider to interact with contract
App.contracts.Election.setProvider(App.web3Provider);
App.listenForEvents();
return App.render();
});
}
现在,你可以对你的客户端应用程序进行投票,并实时观看所记录的投票!请耐心等待,事件可能需要几秒钟才能触发。如果你没有看到事件,请尝试重新启动Chrome。Metamask事件存在一个已知问题。重新启动Chrome总是可以为我们修复它。
恭喜!你已经在以太坊区块链上成功构建了一个完整的去中心化应用程序!
=====================================================================
汇智网原创翻译,转载请标明出处。
(adsbygoogle = window.adsbygoogle || []).push({});