Hi 游客

更多精彩,请登录!

比特池塘 区块链技术 正文

开发基于以太坊智能合约的DApp

星火车品
118 0 0
web3.js与以太坊通信是通过rpc的方式实现的。! q) [6 V4 P3 W9 f
以太坊节点本来提供了rpc的访问方式,但是因为以太坊节点的地址不确定,并且DApp需要访问钱包,所以用web3.js直接访问以太坊节点的rpc服务是不现实的。
, \) C7 v$ I' E: D/ s) aganache-cli模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子里经常说的http://localhost:7545或者http://localhost:8545)。同时在其中内置了M个以太坊帐号,用于测试。
2 }0 o! e6 k: a$ |, L+ I9 w' z9 d0 V& zMetaMask是一个以太坊的网络钱包插件,它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件,所以解决了DApp中的支付问题。所以现在的DApp都依赖它。" \& z( \" ~, ?" r$ r- l
有一个以太坊教程,是在线学习的,大家可以去看看,如果自己本机上搞,开发DApp的基本过程都是一样的如下:
8 Y0 \7 E4 v& v( A" a. E) c1、安装NodeJS9 j/ B4 {4 i9 s1 m
2、安装truffle:一个开发DApp的开发框架
/ @* M  X1 M2 j: Onmp install -g truffle
7 a- N. j* Q' H! @+ G3、安装Ganache(原来用testrpc):在内存中模拟以太坊运行并对外提供rpc服务。+ {+ H6 a" _" E6 t  @
npm install -g ganache-cli8 x8 m1 G8 K; o9 u" z9 _: h9 L
4、运行ganache-cli
! C- d* K" p2 r2 Dganache-cli3 B7 a. C& a. |% o3 K; X
5、生成一个DApp的项目
$ V# f0 B8 _! N1 t( umkdir project1
6 v1 f2 I* w& ^# @/ P2 Jtruffle init
9 D& e( A' R  M8 u  `如果想用truffle中的某个例子,可以用) d3 C$ s# y: C4 ~5 e
truffle unbox pet-shop
8 u2 s5 e1 Q: Y4 m“pet-shop”是例子名称2 V6 C4 |6 x$ q$ R5 P7 d
6、编写智能合约
) Z% l$ m+ X6 \' d/ }2 \具体如何用solidity编写智能合约可参考各种文章,这里不再重复。( {, t; q2 V5 l7 b+ C' a
编写好的智能合约的Project1.sol文件放到contracts目录下  O5 j1 T0 V( \9 R
7、编译和部署智能合约/ k3 m, A0 c9 k/ f
在migrations目录下创建文件2_deploy_contracts.js:
! R: f. W' V5 Svar Project1 = artifacts.require("Project1");
- c0 N3 d$ }2 g  w0 Xmodule.exports = function(deployer) {
5 U. Z+ z+ s8 T: \1 E2 I  deployer.deploy(Project1);
" h" F3 v6 m/ E};
/ K2 P1 W. D+ d* E之后执行:
! K& A: e0 L  p8 |' ptruffle compile
/ h% I$ }: b: Z! btruffle migrate; ]. L. V9 c1 n- t3 H+ \* P+ q
如果你的智能合约没有问题的话,现在你的以太坊智能合约应该已经部署到你用来测试的ganache中去了。9 x% C/ K/ z" r$ f5 `# Z; H$ ^
这里可能遇到的问题是:默认的truffle生成的项目,测试用的ganache的地址和端口会被设置成http://localhost:7545,而实际上执行ganache-cli之后的服务端口是http://localhost:8545,需要在truffle.js中修改一下:
: D' p/ k4 L9 @! M) omodule.exports = {
4 i& J, u. U/ l// See # V+ \4 A4 ]2 K
// for more about customizing your Truffle configuration!7 u% _8 f8 g2 m3 I
networks: {/ S- l8 u+ j% W7 a* X6 b
development: {
- g/ U" G7 R) A) m* Rhost: “127.0.0.1”,
: g, E. k, Z- T( Q* _port: 7545,   //改成8545
: _* A$ M' U/ ?) dnetwork_id: “*” // Match any network id( F' o  d5 W" ~: @0 i
}; `+ ~7 V. R5 I
}
( E4 O  I5 h" P* j" w  G};* d! U, ]+ l; ?3 a: n* U' p& y
8、编写前端的js代码跟以太坊交互$ o3 ], }! |" r* ?( g) Y( c9 N
通常需要如下的辅助js库:) C8 _8 W0 O0 l. G8 j
2 F) w* r  N: R" ]

4 c. G5 _! i0 w% C% v" I9 l在此基础上,编辑你自己业务逻辑的js,通常命名为app.js,app.js的框架如下:; q3 b% w. F. ]1 _. ~% W4 h& b' J
App = {
) n7 C$ F" q, n" K8 \3 zweb3Provider: null,+ b; a7 n3 J  A3 t# d0 V
contracts: {},5 y$ m3 c% L% z! o' z
init: function() {
2 @9 V' |7 |5 b; Y; j( W//初始化你自己的页面、变量等# u. _" b! X3 l2 J$ |
return App.initWeb3();0 Y/ s4 C0 A! C0 R1 a6 b" S/ D3 C6 Q
},: X: R( _7 `$ T# ~& w9 D7 j
initWeb3: function() {
' Z' e* ~% E& b/ q! \: P/*
$ T2 ]0 G6 F* H# @* 初始化web3:3 @, d' S, h. L0 p: c  T# }
*/3 y: ]$ v- \  `2 r
if (typeof web3 !== ‘undefined’){
6 k8 W$ {9 M, n: ^//如果你的浏览器安装了MetaMask的钱包插件,那么插件会赋值web3.currentProvider* Q# u7 z5 ?3 S2 j0 u, l
App.web3Provider = web3.currentProvider;
: N# \1 l: a4 o- x& a- N) J}4 V: ?' ?/ P3 x9 S5 F6 b: ?8 D4 D9 K
else
8 _% P5 n9 u3 x6 `0 J; [{5 K/ P6 N2 g& c2 }
//如果没装插件,那么创建一个基于Http的provider,这里用到的就是用ganache-cli启动所提供的rpc服务,因为ganache-cli启动的时候绑定的是localhost,所以测试所使用的浏览器也要在本机。(如何让ganache-cli绑定其他地址我还没找到)
5 D2 ]; p8 }  @* `% J, U. l" xApp.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);
5 _( ~! U+ }6 ^) k3 S}
4 d9 @; h( T6 V* N9 B( `5 a; Nweb3 = new Web3(App.web3Provider);
1 ]2 j, A  H# \* ~# c7 r" Oreturn App.initContract();
$ b$ x" y' T- P: \. u  E6 j},
" \# c* Q( B% F0 @( L1 u- _initContract: function() {
( l# `) D0 m9 |& c/*# M, \; s  P; [/ m% W
* 初始化智能合约,实际上就是为你的智能合约创建一个对应的js对象,方便后续调用% u9 c! Z  s6 r. T
*/4 l# i2 {2 Q# x  U8 i
//通常的做法是使用你的智能合约编译之后生成的abi的json文件,该文件在用truffle compile之后,生成在build/contracts/目录下,因为我用了一个Division.sol,所以用Division.json,你可以根据你的实际情况来写。
/ v* _" M% @; _9 g: f) k$.getJSON(‘Division.json‘, function(data) {
2 p( `9 Z. N# X0 `' C& ivar DivisionArtifact = data;
+ j# h! ^4 \  q% m, \App.contracts.Division = TruffleContract(DivisionArtifact);; D# o1 G% D' z# s! ]  G# Q
App.contracts.Division.setProvider(App.web3Provider);7 T1 W2 D8 [9 o' Y+ [/ f
//用智能合约中的信息来更新你的web应用,App.refreshPlots()是我例子中获取智能合约中信息并更新UI的函数
* l+ v. B3 u$ F$ Nreturn App.refreshPlots();
5 `0 H' B$ i- S0 D: _9 {});
3 s; o# V2 W$ [return App.bindEvents();* B3 _" f3 @5 X4 W( F
},
- S1 H/ Q4 P# s" \* X# }bindEvents: function() {
! \2 [% Q7 W- B  C* T% C/*6 x7 E0 G6 D# L7 H2 }" ]4 g
* 事件绑定,这个可以根据你的UI来设置,例子中就是绑定一个button的点击操作$ X3 _' @$ @( g. j; C
*/" ^. _! V; @7 R$ U
$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);5 Q- B5 H: E5 d4 [" G+ R1 u  h7 I
},0 ?5 Y% R) {" B  x  y  }' G9 \$ G
refreshPlots: function(plots, account) {
3 x( k; S" V- S: e6 J9 }/*
; R0 T/ v5 O1 g: R% q' ]4 V3 p) Q. _* 这个函数就是上面initContract中调用的用智能合约更新页面
6 |% ~' X& i( Z0 K% F  c7 L*/' l5 Z( _' S( p) m! u
        //继续使用division这个智能合约做例子; P- a9 k; h+ y. z1 u% K, ~9 e
         var divisionInstance;
& F6 {- L" @0 N" [         App.contracts.Division.deployed().then(function(instance){, D) y, R3 B* r
                 divisionInstance = instance;
) A5 M& A+ t8 K6 {* p; B0 i+ v                 //getGenPlots是Division的这个智能合约的一个查询函数(不需要gas),需要3个参数! Z# c8 z+ }* ]0 p
                 return divisionInstance.getGenPlots(0,0,2);( R" |3 d; [( b* U
         }).then(function(results){( }" X7 d7 w* C, _" _' }. A
                 //注意:这个地方有点意思,我原先理解也有问题,后来打印输出才搞明白
. ?1 w& D# d0 |" @  v                 //智能合约返回的多个结果变量在这里就是一个results数组" x" k- q$ p! Q' w( v/ s7 I. @9 t
                 //数组的每个成员就是智能合约返回的每个结果变量# `. y; w$ T5 D- ?
                 //以getGenPlots为例,Division.json中定义如下:; l7 S# X! L3 _8 H
                 /*"name": "getGenPlots",, ~8 [$ S( I8 B
                     "outputs": [
. a4 v5 s. u" z% c) B  W                     {
7 m4 L+ @0 p! W' e! k( y6 ?- }                         "name": "",. n& G0 \+ x: w. U
                         "type": "uint64[]"  d5 y8 J3 N" U. p2 }$ D& r
                     },
7 p- Z& S) c% C) O                     {
9 p3 ~; |) O$ Q! B' _  k                         "name": "",
4 z/ K9 a% L. ^2 V                         "type": "address[]"% W  a3 U8 `2 `1 _0 [1 b7 \
                     },* }' d1 Y' D1 `( S( |: W4 g
                     {  V8 ~- Y2 o* y
                         "name": "",# U# R) F  U5 m" f
                         "type": "uint256[]"
! d% k* o+ g7 q5 r. U                     },: ]5 \4 A- c/ f; N& v# J
                     {
. F. I5 F' @2 D! E                         "name": "",+ s  W6 l" c/ A+ @( F
                         "type": "uint8[]"
4 N: R9 C' o4 P# u                     }
) V$ K4 H7 N  R                     ],
. X0 ^3 {  C0 H6 D; y                     "payable": false,3 s( N. y! x7 I  ^
                     "stateMutability": "view",
/ U. a: x7 [  f$ F7 C! W1 ]                     "type": "function"
# d% z- V+ e3 p. m% ?1 p                  */* B$ ~3 C1 t* Q( R* L8 w- E5 U+ U
                  //那么:results[0]是uint64[]5 F$ k- n6 ^8 p" e+ z, B3 p
                  //      results[1]是address[]...! F% u3 S* O8 _% a; S
                 console.log(results[0].length);9 ?: k8 E; x8 R3 x* Y) K, Q
         }).catch(function(err){' s2 C: |' u& N- D. j' s
                 console.log(err.message);
  a# r' a. S$ q& d* o: z0 f         });
* n4 x5 O) {* ?9 O$ i( G# @ },
( R( G, ?% w3 H: F8 \/ z$ b( F% h$ whandlePlot: function(event) {
3 n2 r1 z- K5 P6 G/*
! M2 ^; G) ~, y) ^* R+ j * 这个函数就是上面bindEvents中调用的响应函数,演示要花eth的函数调用5 u  U' F' _" `- l3 |. ~
*/
* r, }/ H$ J* J) ^8 g2 X6 z    event.preventDefault();- @; ?- h$ M; D, I$ R5 H6 ^. R+ }
    //从event中获取参数,这是jquery的东西,跟web3无关& a6 o# Z' G( I8 v
    var plotId = parseInt($(event.target).data('id'));+ X& L% Z, |) b1 ^4 Z
    var divisionInstance;
* c& x0 J9 B6 P* s, T' i; U& _' u     //获取以太坊帐号信息& p5 V+ H6 |8 Q' N4 b7 O
     web3.eth.getAccounts(function(error,accounts){
1 i- c5 V3 X% a4 a4 s: V3 E  c         if(error)$ g/ N) H0 ~7 |6 H
         {
) A. e7 z0 D2 R6 |/ o7 L             console.log(error);, R- o; o3 A+ W/ G  ]  G
         }
, p2 }5 j, h, K         //我随便取帐号列表里的第3个帐号。; M$ I2 x0 ]4 Z+ D
         //因为我们连的是ganache-cli的rpc模拟服务,& l$ w6 A% L' R+ w$ r: o! Q$ b
         //其中给我们预制了几个有eth的帐号
9 t; T4 M: \2 B) E; E/ Y         //如果安装了MetaMask插件,应该获得的就是MetaMask里的帐号
3 e* o3 m# g5 M; m0 m         var account = accounts[2];% e' x2 P1 }- [" ^
         App.contracts.Division.deployed().then(function(instance){. |* f5 {! O6 R; i8 r1 L
             divisionInstance = instance;9 p. e& _/ F8 {- O
             //调用智能合约的buyPlot函数,该函数需要2个参数,
# r1 a4 J1 V, N4 D- ?- z             //后面的{}中的内容跟发起以太坊交易的时候所带的默认值。0 A: @/ s. f; f6 d0 n
             //from: 使用哪个以太坊帐号
/ m+ M* q, p2 H: f5 Z! P             //value: 要使用的eth数量,以wei为单位(1eth=10^18wei)3 C1 v0 I2 k9 f2 h
             //gas: 矿工费,以wei为单位
4 f; c# D; R/ T. v& R3 m             return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});( z2 U( A; T7 {1 X4 u. ]
        }).then(function(result){
; U7 \7 x7 w8 S7 g6 {( ?            //返回结果后重新更新UI
# [5 H" A/ N( N% \2 }1 W& r0 q            return App.refreshPlots();- E2 ]0 n! \- r
        }).catch(function(error){
4 w( L, Z6 A: p) ]% u+ z5 n            console.log(error.message);. |1 a1 q* t- `8 C3 }& V( p
        });
2 b& @' L/ _6 P( A! ]6 y     });
! l( u9 z! M- |# ~ }( s* A9 X9 ]; r# d) H
};' g; h/ w6 G6 ^! v" L6 P
测试你的基于Web的DApp是否正常,可以使用nodejs里面提供的lite-server模块来当简单的webserver来用。
) s" x$ ~4 K6 z; g  m安装lite-server,在你的truffle项目目录下,执行:
1 e/ b7 T$ B( x( I9 v/ tnpm install lite-server9 U% {4 g" M) y2 d% q
安装完之后会在项目目录下声称node_modules目录,lite-server以及依赖的模块都在该目录下了。* \: p$ C( C" C. j7 S2 b
要运行lite-server,还需要编写项目目录下的package.json文件:
3 F2 o: M% W  Z* u{
' F( r& A' i& v+ ^5 g     "name": "项目名称",
) _' u6 ]! A2 r- f9 G5 X+ B     "version": "1.0.0",7 X- G( a" P9 j2 ^5 Q
     "description": "",3 c/ p7 p) _; O/ [
     "main": "truffle.js",& d* c7 n1 Q: ~; _; m& R. v
     "directories": {
1 y& w; l- T* x) R* d4 a         "test": "test"
6 J( K. J' h! z( C     },
5 @! Q9 Y- w; L7 b& G0 i     "scripts": {/ c4 o  Z& `' f9 }# V8 e$ t# O
         "dev": "lite-server",' ]8 ]; P3 L: J& ]% N
         "test": "echo \"Error: no test specified\" && exit 1", o& D8 S  z) B# P
     },$ G& L7 Z% a4 r0 ^& D0 E  f
     "author": "",' W+ z. p  u% V' X
     "license": "ISC",
& C! H7 Q5 O$ P     "devDependencies": {) r! l6 B! V7 D& t- W
         "lite-server": "^2.3.0". b. M' M' q4 U, j7 p5 p8 D1 w1 z, V, i
     },
* Y6 S0 D9 m( h* D% [4 P     "dependencies": {
* z8 L) M. {/ x$ h8 _4 W  E         "liteserver": "^0.3.0"8 M0 U, |: Z/ _) t0 W
     }
" z/ M. |% M- |; a1 g}4 _9 V3 w9 H' h1 e; q9 |& r7 z
还需要编写bs-config.json来配置一下lite-server5 c7 r9 ~: w0 [6 |
{
7 W" O8 z! ~+ R& I% [ "server": {7 H9 p* r% G4 A7 L* `5 c
"baseDir": ["./src", "./build/contracts"]0 n# ?) ]3 d1 ^0 t7 P, [' S, m+ x1 H5 e
}
& O7 x+ G8 ~9 E}
6 u. F! |( H5 L+ c3 w7 G8 Q! `! MbaseDir是用来设置lite-server所提供的web服务的文件路径的。这个设置表明你可以把你上面写的app.js,依赖的各种js放到./src目录下,然后写index.html,把app.js等集成进去,就大功告成了。0 Y/ }1 E8 S8 h+ ?( z" T0 e
启动lite-server,执行:" R$ C% u$ [& f( u. _$ \; H
npm run dev; y, x: o5 \/ C& v  {
不仅启动了lite-server,而且会启动一个浏览器去打开页面。
6 h. ^$ [4 p- r, o' k5 ^6 y( C本文的目的是为了澄清一下写DApp的各项工具之间的架构关系,帮助技术人员更快的理解和实现自己的项目。
0 E3 ?+ a( T2 A$ W) N3 }具体的例子网上多如牛毛,就不去写业务的具体代码了。
BitMere.com 比特池塘系信息发布平台,比特池塘仅提供信息存储空间服务。
声明:该文观点仅代表作者本人,本文不代表比特池塘立场,且不构成建议,请谨慎对待。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

成为第一个吐槽的人

星火车品 初中生
  • 粉丝

    0

  • 关注

    0

  • 主题

    12