全国咨询热线

400-123-4567

您的位置: 主页 > 应用案例

使用 Embark 开发投票 DApp【优德88】

发布时间:2024-09-19人气:
本文摘要:前面我们基于Embark Demo[1] 讲解了 Embark 框架,今天用于 Embark 来实实在在研发一个 DApp:从零研发研发一个投票DApp。

前面我们基于Embark Demo[1] 讲解了 Embark 框架,今天用于 Embark 来实实在在研发一个 DApp:从零研发研发一个投票DApp。之前我们也用于Truffle 研发过投票DApp[2],大家可以自行对比两个框架的好坏。

通过本文可以自学到:1.用于 Embark 创立项目2.利用 EmbarkJS 与合约交互3.Embark 如果部署合约到主网(利用Infura节点)本文用于的 Embark 版本是 5.2.3创立Embark项目 embark new embark-election不会在当前目录下分解一个 embark-election 目录,并创立好了适当的项目框架文件:如: app/、contracts/、config/、embark.json等。我们必须在对应的目录中,加到适当的构建。撰写合约在contracts/中加到合约Election.sol:pragma solidity ^0.6.0;contract Election {// Model a Candidatestruct Candidate {uint id;string name;uint voteCount;}mapping(address = bool) public voters;mapping(uint = Candidate) public candidates;// Store Candidates Countuint public candidatesCount;// voted eventevent votedEvent (uint indexed _candidateId);constructor () public {addCandidate("Tiny 熊");addCandidate("LearnBlockChain.cn");}function addCandidate (string memory _name) private {candidatesCount ++;candidates[candidatesCount] = Candidate(candidatesCount, _name, 0);}function vote (uint _candidateId) public {// require that they haven't voted beforerequire(!voters[msg.sender]);// require a valid candidaterequire(_candidateId0_candidateId = candidatesCount);// record that voter has votedvoters[msg.sender] = true;// update candidate vote Countcandidates[_candidateId].voteCount ++;// trigger voted eventemit votedEvent(_candidateId);}}之前有用于过Truffle研发过投票DApp[3],合约的代码几乎一样,就不出说明。Embark 合约编译器部署Embark 合约部署的配备在 config/contracts.js, 在 deploy 字段重新加入 Election 合约:deploy: { Election: { }}现在运营 embark run , Embark 不会自动编译器及部署Election.sol到 config/blockchain.js 配备的 development 网络。

embark run 等价 embark run development。blockchain.js 中 development 网络是用于 ganache-cli 启动的网络,其配备如下: development: {client: 'ganache-cli',clientConfig: { miningMode: 'dev'} }embark启动后,我们可以在 COCKPIT 或 DashBoard 看见Election.sol合约的部署日志,大约类似于下面:deploying Election with 351122 gas at the price of 1 Wei, estimated cost: 351122 Wei (txHash: 0x9da4dfb951149...d5c306dcabf300a4)Election deployed at 0x10C257c76Cd3Dc35cA2618c6137658bFD1fFCcfA using 346374 gas (txHash: 0x9da4dfb951149ea4...d5c306dcabf300a4)finished deploying contracts撰写前端代码Embark ArtifactsEmbark获取了一个 EmbarkJS的JavaScript库,来协助开发者和合约展开交互。在用于web3.js 时,和合约交互必须告诉合约的ABI及地址来创立JS环境中对应的合约对象,一般代码是这样的:// 必须ABI及地址创建对象var myContract = new web3.eth.Contract([...ABI...], '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe');Embark 在编译器部署后,每个合约不会分解一个对应的构件Artifact(可以在embarkArtifacts/contracts/ 目录下找的这些文件),我们可以必要用于 Artifact 分解的合约对象调用合约。

一个构件一般来说不会包括:合约的ABI、部署地址、启动代码及其他的配备数据。查阅一下Election.sol 对应的构件Election.js 代码就更容易解读:import EmbarkJS from '../embarkjs';let ElectionJSONConfig = {"contract_name":"Election","address":"0x10C257c76Cd3Dc35cA2618c6137658bFD1fFCcfA","code":"...", ... ,"abiDefinition":[...]};let Election = new EmbarkJS.Blockchain.Contract(ElectionJSONConfig);export default Election;Election.js 最后一行给定了一个与合约同名的JavaScript 对象,下面想到怎么用于这个对象。改动前端index.html在用于embark new embark-election创立项目时, 前端目录app/下分解了一个 index.html:html headtitleEmbark/titlelink href="http://www.qukuaiwang.com.cn/news/css/app.css"script src="http://www.qukuaiwang.com.cn/news/js/app.js"/script /head bodyh3Welcome to Embark!/h3 /body/html这里有一个地方必须留意一下,第5 6行引进了 css/app.css, js/app.js,而只不过app/下并没这两个文件,这两个文件只不过是按照 embark.json 配备的规程分解的。embark.json 关于前端的配备如下: "app": {"http://www.qukuaiwang.com.cn/news/css/app.css": ["app/css/**"],"http://www.qukuaiwang.com.cn/news/js/app.js": ["app/js/index.js"],"images/": ["app/images/**"],"index.html": "app/index.html" },"http://www.qukuaiwang.com.cn/news/css/app.css": ["app/css/**"] 回应所有在app/css/目录下的文件不会被传输到 dist目录的 css/app.css ,app/js/index.js则不会编译器为js/app.js,其他的配备类似于。

我猜测embark 这样统一 css 及 js代码,有可能是为了在IPFS之类的去中心化存储上采访一起更加便利,在IPFS上载整个目录时,不能以相对路径去采访资源。青睐facebook和我交流。接下来改动前端部分的代码,主要是在index.html的body重新加入一个table表明候选人,以及重新加入一个投票板,代码如下(摘录):table theadtr th scope="col"#/th th scope="col"候选人/th th scope="col"得票数/th/tr /thead tbody /tbody/tabledivlabel for="candidatesSelect"自由选择候选人/labelselect/select/div前端,我们用于了 bootstrap css ,网卓新闻网,把文件拷贝到app/css目录下,接下来,想到关键的一步:前端如何与与合约交互。

用于 Artifacts与合约交互EmbarkJS 相连 Web3创立项目时分解的app/js/index.js 分解了如下代码:import EmbarkJS from 'Embark/EmbarkJS';EmbarkJS.onReady((err) = { // You can execute contract calls after the connection});这段代码里,EmbarkJS为我们打算了一个onReady消息传递函数,这是因为EmbarkJS不会自动老大我们已完成与web3节点的相连与初始化,当这些准备就绪后(调用onReady),前端就可以和链展开交互了。大家或许不会奇怪EmbarkJS怎么告诉我们必须相连那个节点呢?只不过在config/contracts.js 有一个 dappConnection 配备项:dappConnection: [ "$EMBARK", "$WEB3", // 用于浏览器流经的web3, 如MetaMask等 "ws://localhost:8546", "http://localhost:8545"],$EMBARK : 是Embark在DApp和节点之前构建的一个代理,用于$EMBARK有几个益处:1.可以在config/blockchain.js 配备于DApp交互的账号 accounts。

2.可以更加友好关系的的看见交易记录。EmbarkJS 不会从上到下,依序尝试 dappConnection获取的相连,如果有一个可以相连上,就不会暂停尝试。提供合约数据图形界面当 EmbarkJS 环境打算 onReady后,就可以用于构件Election.js提供合约数据,如提供调用合约提供候选人数量:import EmbarkJS from 'Embark/EmbarkJS';import Election from '../../embarkArtifacts/contracts/Election.js';EmbarkJS.onReady((err) = {Election.methods.candidatesCount().call().then(count = console.log(" candidatesCount: " + count););});代码中必要用于构件给定的Election对象,调用合约方法 Election.methods.candidatesCount().call(), 调用合约方法与web3.js 完全一致。

理解了如何与合约交互,接下来图形界面就非常简单了,我们把代码整理下,分别定义3个函数: App.getAccount()、App.render()、App.onVote() 来提供当前账号(必须用来辨别哪些账号投过票)、界面图形、处置页面投标。EmbarkJS.onReady((err) = { App.getAccount(); App.render(); App.onVote();});App.getAccount() 的构建如下:import "./jquery.min.js"var App = { account: null, getAccount: function() {web3.eth.getCoinbase(function(err, account) { if (err === null) {App.account = account;console.log(account);$("#accountAddress").html("Your Account: " + account); }}) },}在代码中,我们必要用于了web3对象,就是因为EmbarkJS老大我们展开了web3的初始化。

另外,我们引进jquery.min.js 来展开UI界面的图形。App.render() 的构建(主干)如下:render: function () {Election.methods.candidatesCount().call().then( candidatesCount = {var candidatesResults = $("#candidatesResults");var candidatesSelect = $('#candidatesSelect');for (var i = 1; i = candidatesCount; i++) { Election.methods.candidates(i).call().then(function(candidate) {var id = candidate[0];var name = candidate[1];var voteCount = candidate[2];// Render candidate Resultvar candidateTemplate = "trth" + id + "/thtd" + name + "/tdtd" + voteCount + "/td/tr";candidatesResults.append(candidateTemplate);// Render candidate ballot optionvar candidateOption = "option value='" + id + "' " + name + "/ option";candidatesSelect.append(candidateOption); });} }); }App.onVote() 的构建(主干)如下: onVote: function() {$("#vote").click(function(e){ var candidateId = $('#candidatesSelect').val(); Election.methods.vote(candidateId).send() .then(function(result) {App.render(); }).catch(function(err) {console.。


本文关键词:优德88

本文来源:优德88-www.billsphotoblog.com

推荐资讯

400-123-4567