Full Stack Hello World Voting Ethereum Dapp Tutorial — Part 1

原文地址

上一篇文章中,整体介绍了Ethereum platform和web application的对比。作为程序员,最好的学习方法便是在新的框架下写一个Hello World工程,来熟悉整个框架的开发,测试,部署环境及方法。本篇文章将通过一个投票的应用,介绍基于web的Dapp开发流程。

这个应用很简单,会初始化几个候选人,所有人都可以给他们投票,并将每个人的总票数显示出来。在开发过程中,不会细说语法问题,只是初步熟悉一下Ethereum Dapp的逻辑编写,打包编译,及部署流程。

在目前阶段,我尽量不用成熟的框架,只用最原始的语言逻辑来呈现开发过程。在你使用框架之前,请尽可能深的解读框架内容。

目的

  • 创建一个开发环境
  • 了解编写一个contract,编译和部署在开发环境的流程
  • 在node环境下使用部署好的contract与blockchain交互
  • 基于部署好的contract,在网页中完成投票进度的展示和投票动作

投票应用的结构图如下:

voting app

1. 创建开发环境

开发环境下,我们使用ganache创建的虚拟链上开发和部署,下篇文章将介绍以太坊上真正的blockchain。下面是安装和使用方法:

npm install ganache-cli web3@0.20.2
node_modules/.bin/ganache-cli
[图片上传中...(image-721dc3-1523189167231)]

通过上图可以看出,ganache-cli帮我们创建了10个账户,每个账户下都有100个eth

2. voting contract

我将使用Solidity语言编写contract,它是一个面向对象的编程语言,语法类似于javascript。我们将编写一个contract叫做Voting,它会包含一个构造函数,输入是候选人的数组。还有两个方法,一个是返回输入候选人的得票数,另一个是投票的动作。

注意:当你将代码部署到区块链上以后,构造函数会被执行,且只执行一次。和web应用不同的是,重新部署的代码会覆盖旧的的代码,在blockchain上的部署是不可逆的。例如你更新了contract,并重新部署,旧的contract任然会存在于blockchain中,和起绑定的数据将无法修改。新部署的contract会由构造函数生成新的实例。

代码如下:

pragma solidity ^0.4.18;
// 指定solidity版本

contract Voting {
  // mapping 方法生成一个字典,key为bytes32类型,value为uint8类型
  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;
  }
}

将上面的代码复制后,保存到文件”Voting.sol“中,接下来我们将代码编译,并部署到ganache blockchain上。

为了编译上面的代码,需要先安装solc:

npm install solc

部署过程在node concole中进行,下篇文章会介绍使用truffle framework管理和部署代码。在此阶段,尽量去理解每一步执行的作用。上篇文章介绍到使用web3.js可以通过RPC跟blockchain进行交互,接下来将介绍如何使用web3.js实现部署和交互的过程。

首先切换到node环境,解释实例化solc和web3:

node
> Web3 = require('web3')
> web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

为保证通讯正常,web3 object可以正常跟blockchain通信,输入下面的指令查看blockchain上的所有账户信息,你会看到以下信息:

> web3.eth.accounts

['0x9c02f5c68e02390a3ab81f63341edc1ba5dbb39e',
'0x7d920be073e92a590dc47e4ccea2f28db3f218cc',
'0xf8a9c7c65c4d1c0c21b06c06ee5da80bd8f074a9',
'0x9d8ee8c3d4f8b1e08803da274bdaff80c2204fc6',
'0x26bb5d139aa7bdb1380af0e1e8f98147ef4c406a',
'0x622e557aad13c36459fac83240f25ae91882127c',
'0xbf8b1630d5640e272f33653e83092ce33d302fd2',
'0xe37a3157cb3081ea7a96ba9f9e942c72cf7ad87b',
'0x175dae81345f36775db285d368f0b1d49f61b2f8',
'0xc26bda5f3370bdd46e7c84bdb909aead4d8f35f3']

读取Voting.sol的内容,使用solc编译代码:

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

编译成功后,将contract打印出来(在console中输入compiledCode),有两个字段比较重要,需要重点理解:

  • compileCode.contracts[':Voting'].bytecode
    这是我们将Voting.sol中的内容编译后的bytecode文本,也是将要部署到blockchain上的内容。

  • compileCode.contracts[':Voting'].interface
    这里返回的是合约的接口说明abi,Application Binary Interface。它是合约的二进制接口,可以通俗的理解为合约的接口说明。当合约被编译后,那么它的api也就确定了。

以下代码完成了代码的部署,首先创建一个contract object(下面的VotingContract),它将用于在blockchain上实例化合约和部署:

> abiDefinition = JSON.parse(compiledCode.contracts[':Voting'].interface)
> VotingContract = web3.eth.contract(abiDefinition)
> byteCode = compiledCode.contracts[':Voting'].bytecode
> deployedContract = VotingContract.new(['Rama','Nick','Jose'],{data: byteCode, from: web3.eth.accounts[0], gas: 4700000})
> deployedContract.address
> contractInstance = VotingContract.at(deployedContract.address)

VotingCongtract.new 方法实现了部署动作,第一个参数是候选人名单,来看一下其他参数:

  • data
    data对应的内容是合约的二进制编码

  • from
    部署到区块链上时,需要指定是谁在部署,这里使用了我们ganache blockchain为我们创建的第一个地址,这里地址表示用户的身份,即hash后的公钥(详细信息请查阅钱包相关信息)。

  • gas
    旷工费用,即在跟blockchain交互时(记录数据),需要支付给旷工一定的费用来完成区块的创建。如果你想将合约部署到现实的以太坊区块链上时,你需要指定gas费用,这个费用将从你指定的账户里扣除。

现在我们已经将合约部署到了ganache blockchain上,并获取了合约的实例(contractInstance)。以太坊上部署了成千上万个合约,哪个才是你的合约呢?答案是deployedContract.address。 当你要通过合约执行操作时,你需要先获取合约的部署地址以及合约abi,然后实例化合约进行方法调用。

3. 在node console中使用contract

> contractInstance.totalVotesFor.call('Rama')
{ [String: '0'] s: 1, e: 0, c: [ 0 ] }
> contractInstance.voteForCandidate('Rama', {from: web3.eth.accounts[0]})
'0xdedc7ae544c3dde74ab5a0b07422c5a51b5240603d31074f5b75c0ebc786bf53'
> contractInstance.voteForCandidate('Rama', {from: web3.eth.accounts[0]})
'0x02c054d238038d68b65d55770fabfca592a5cf6590229ab91bbe7cd72da46de9'
> contractInstance.voteForCandidate('Rama', {from: web3.eth.accounts[0]})
'0x3da069a09577514f2baaa11bc3015a16edf26aad28dffbcd126bde2e71f2b76f'
> contractInstance.totalVotesFor.call('Rama').toLocaleString()
'3'

试着执行上面的代码,给Rama投票。每完成一次投票,都会返回一个地址信息,这个地址信息是blockchain中的transaction id,它证明了刚才的投票过程,你可以在任何事件,任何地点,根据这个id在以太坊中查新这次transaction信息。注意,这条transaction是不可修改的,这也是区块链技术的一个重要特点。

4. 在网页中进行投票

到此,part1的内容已经讲述过半,现在需要编写一个简单的web页面,使得在页面上进行投票和查看票数的操作。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Hello World 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>A Simple Hello World 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>Rama</td>
          <td id="candidate-1"></td>
        </tr>
        <tr>
          <td>Nick</td>
          <td id="candidate-2"></td>
        </tr>
        <tr>
          <td>Jose</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="https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="./index.js"></script>
</html>

index.js

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('0x2a9c1d265d06d47e8f7b00ffa987c9185aecf672');
candidates = {"Rama": "candidate-1", "Nick": "candidate-2", "Jose": "candidate-3"}

function voteForCandidate() {
  candidateName = $("#candidate").val();
  contractInstance.voteForCandidate(candidateName, {from: web3.eth.accounts[0]}, function() {
    let div_id = candidates[candidateName];
    $("#" + div_id).html(contractInstance.totalVotesFor.call(candidateName).toString());
  });
}

$(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);
  }
});

index.js中通过abi和合约地址实例化了一个VotingContract,变可以使用合约中的方法,打开index.html,你可以看到以下内容:

image.png

去体验一下投票吧。。。

下一节,在part2中,我将把合约部署到以太坊公共的测试网络中,这样全世界的人在测试网络下变可以使用你的Voting Dapp。同时,下一节将使用truffle framework进行合约的开发,不再使用node console一步步的执行,敬请期待。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 142,680评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,177评论 1 256
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,249评论 0 212
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,981评论 0 175
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,746评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,763评论 1 176
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,362评论 2 268
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,151评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,964评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,501评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,285评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,614评论 1 229
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,232评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,117评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,498评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,615评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,012评论 0 167
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,512评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,594评论 2 231

推荐阅读更多精彩内容