开发基于以太坊智能合约的DApp
星火车品
发表于 2022-12-18 02:06:40
77
0
0
以太坊节点本来提供了rpc的访问方式,但是因为以太坊节点的地址不确定,并且DApp需要访问钱包,所以用web3.js直接访问以太坊节点的rpc服务是不现实的。, ?* o) H' E) }
ganache-cli模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子里经常说的http://localhost:7545或者http://localhost:8545)。同时在其中内置了M个以太坊帐号,用于测试。! J- T/ {6 f, J G" f
MetaMask是一个以太坊的网络钱包插件,它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件,所以解决了DApp中的支付问题。所以现在的DApp都依赖它。- y; s5 ]9 \, I7 }. f
有一个以太坊教程,是在线学习的,大家可以去看看,如果自己本机上搞,开发DApp的基本过程都是一样的如下:
1、安装NodeJS. j& d6 I- n& l9 J. i% K- x
2、安装truffle:一个开发DApp的开发框架% Z9 W5 Q/ p) D7 L x) J" V& o
nmp install -g truffle3 _, ]4 j2 k9 Z' T
3、安装Ganache(原来用testrpc):在内存中模拟以太坊运行并对外提供rpc服务。* j/ o. I8 w% l9 {" D6 N' c
npm install -g ganache-cli9 k$ O, \" I2 z4 Y! r' j# m; K
4、运行ganache-cli
ganache-cli
5、生成一个DApp的项目; _' w2 v V) {$ E# ^; x
mkdir project1
truffle init5 `' j! p p- I# h" ^
如果想用truffle中的某个例子,可以用
truffle unbox pet-shop8 g( |5 Z" @6 v
“pet-shop”是例子名称( y1 J- y; Q; g- E/ B" K! ]4 x
6、编写智能合约
具体如何用solidity编写智能合约可参考各种文章,这里不再重复。/ L. T8 J) a$ Q
编写好的智能合约的Project1.sol文件放到contracts目录下, k. D% x- g2 F* E
7、编译和部署智能合约
在migrations目录下创建文件2_deploy_contracts.js:7 {% b# [6 Z- w! N9 b6 y
var Project1 = artifacts.require("Project1");$ Z5 l8 U$ U6 m% u
module.exports = function(deployer) {
deployer.deploy(Project1);
};: o7 a1 E5 d& L8 J
之后执行:
truffle compile4 w. Q6 ?2 @9 `7 B$ m- P
truffle migrate
如果你的智能合约没有问题的话,现在你的以太坊智能合约应该已经部署到你用来测试的ganache中去了。2 V# A, j, H7 L: k
这里可能遇到的问题是:默认的truffle生成的项目,测试用的ganache的地址和端口会被设置成http://localhost:7545,而实际上执行ganache-cli之后的服务端口是http://localhost:8545,需要在truffle.js中修改一下:
module.exports = {
// See + O. R9 x, K! i3 Z9 i& Q3 y
// for more about customizing your Truffle configuration!7 n/ t+ f4 G5 R" w
networks: {3 b$ ?1 A/ o8 J7 c7 y5 o
development: {
host: “127.0.0.1”,
port: 7545, //改成8545- P9 G7 i c z1 g9 s1 `9 J
network_id: “*” // Match any network id
}8 F- K O- ^, B8 v6 [
} G$ P" V1 s" P6 M
};* j( @& H' l6 m( s
8、编写前端的js代码跟以太坊交互( i- M ]# [9 H* J+ x( s
通常需要如下的辅助js库:) M: o4 n5 B% q
1 ^6 S. w% l7 Q1 b
在此基础上,编辑你自己业务逻辑的js,通常命名为app.js,app.js的框架如下:
App = {
web3Provider: null,
contracts: {},
init: function() {# R3 V9 t! @+ Q. [4 S
//初始化你自己的页面、变量等) f- w! E3 z0 Q, C' m2 q f
return App.initWeb3();+ N3 w( [+ w5 k2 m+ Y% F
}," \" k+ {: W5 u3 L+ m9 j2 P
initWeb3: function() {
/*
* 初始化web3:
*/+ e% A5 i c' P
if (typeof web3 !== ‘undefined’){4 ~. |6 o) c: n
//如果你的浏览器安装了MetaMask的钱包插件,那么插件会赋值web3.currentProvider
App.web3Provider = web3.currentProvider;, W5 t6 W) C% ~" Z% D1 `& w; j
}
else* A* N9 j1 e7 J) B) \ c0 J/ K
{9 Y2 G, X2 c' H+ w# [* C
//如果没装插件,那么创建一个基于Http的provider,这里用到的就是用ganache-cli启动所提供的rpc服务,因为ganache-cli启动的时候绑定的是localhost,所以测试所使用的浏览器也要在本机。(如何让ganache-cli绑定其他地址我还没找到)
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);+ V5 ~5 `3 v3 V) ]
}
web3 = new Web3(App.web3Provider);$ y7 U0 M: S! v
return App.initContract();% |- f9 _; t5 g \+ U9 Z# P6 N& T+ O
},% d* C; F8 J2 I7 f' D7 O
initContract: function() {
/*6 k* p% _2 C: X" j9 q9 h( d3 a
* 初始化智能合约,实际上就是为你的智能合约创建一个对应的js对象,方便后续调用. A- Q; J: a+ c9 Q. p' }. ~
*/' c& V6 S5 s; w6 S
//通常的做法是使用你的智能合约编译之后生成的abi的json文件,该文件在用truffle compile之后,生成在build/contracts/目录下,因为我用了一个Division.sol,所以用Division.json,你可以根据你的实际情况来写。3 R9 B4 ^* o; Z/ C7 {
$.getJSON(‘Division.json‘, function(data) {
var DivisionArtifact = data;
App.contracts.Division = TruffleContract(DivisionArtifact);* Q! Q. ?# t( R$ r# _% k8 ^" u
App.contracts.Division.setProvider(App.web3Provider);
//用智能合约中的信息来更新你的web应用,App.refreshPlots()是我例子中获取智能合约中信息并更新UI的函数
return App.refreshPlots();
});' @- Y& S2 K2 {4 }
return App.bindEvents();
}, B- A a$ g( C3 Q' n2 _) ?
bindEvents: function() {
/*
* 事件绑定,这个可以根据你的UI来设置,例子中就是绑定一个button的点击操作
*/
$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);
},
refreshPlots: function(plots, account) {( w* {) s! T" m
/* d9 P# L* E9 L. ?$ r" v; u J( x
* 这个函数就是上面initContract中调用的用智能合约更新页面2 m7 f+ }* o0 {
*/; z' P6 K% q. Y+ ~
//继续使用division这个智能合约做例子' C' b/ b* j0 w4 n: W
var divisionInstance;
App.contracts.Division.deployed().then(function(instance){
divisionInstance = instance;
//getGenPlots是Division的这个智能合约的一个查询函数(不需要gas),需要3个参数* \1 O% V% S5 q" X4 D
return divisionInstance.getGenPlots(0,0,2);
}).then(function(results){$ c2 b3 r! Y/ ^# l1 _# ^+ {8 t
//注意:这个地方有点意思,我原先理解也有问题,后来打印输出才搞明白
//智能合约返回的多个结果变量在这里就是一个results数组; h; }1 Q& b; Q* ]6 A1 k% h! O
//数组的每个成员就是智能合约返回的每个结果变量4 d9 [7 K* `& J; y+ E* t ]
//以getGenPlots为例,Division.json中定义如下:
/*"name": "getGenPlots",- ], P+ o7 @" R- f
"outputs": [5 v( ?! r! r! y3 s" h; `
{
"name": "",
"type": "uint64[]"; e/ {4 Q, K7 f* f- p' J" }. X& Y$ t
},
{
"name": "",5 r( y# C. S$ D" Q x$ r6 Q2 Y
"type": "address[]"
},
{
"name": "",
"type": "uint256[]"
},! d8 j1 ]9 B7 x9 l- \4 [3 A) ?
{1 K( \8 M/ @" x* F
"name": "",7 O0 \! m( e* Y' K3 y* g
"type": "uint8[]"9 ]3 D7 G* e* y7 K3 X# H8 P
}" M6 d. b. R: C0 ^5 Y. p/ w! ^
],
"payable": false, i- S7 u2 ^/ j
"stateMutability": "view",
"type": "function"& W; r8 G6 O7 f! @
*/
//那么:results[0]是uint64[]6 B& b* D/ M/ S
// results[1]是address[]..., }' ~- q) j4 }
console.log(results[0].length);- A; K3 {! r0 c
}).catch(function(err){, ^6 r5 H& N: L) T2 x' R8 ?0 N
console.log(err.message);
});
},
handlePlot: function(event) {+ U% B+ c/ {3 a9 Q& R
/*/ \ U5 T/ q* d3 ^/ S
* 这个函数就是上面bindEvents中调用的响应函数,演示要花eth的函数调用
*/) P2 u ?8 s7 L% Q$ h
event.preventDefault();6 b. Q7 j2 N9 X8 u7 c9 @; j1 \
//从event中获取参数,这是jquery的东西,跟web3无关- w0 l" J# I' W: I" }- ^! ~
var plotId = parseInt($(event.target).data('id'));( V( N3 v/ |; L. w1 J g0 v0 C
var divisionInstance;
//获取以太坊帐号信息. e3 N! A1 T6 K% u
web3.eth.getAccounts(function(error,accounts){$ s4 n* `" h" y3 c3 H( N c% e
if(error)
{
console.log(error);4 e8 }/ g k/ H! @8 L: _
}
//我随便取帐号列表里的第3个帐号。1 E; b" L' [3 a% ?! u3 r/ ]" x
//因为我们连的是ganache-cli的rpc模拟服务,
//其中给我们预制了几个有eth的帐号" ? `0 B) B/ t v. a
//如果安装了MetaMask插件,应该获得的就是MetaMask里的帐号
var account = accounts[2];/ B. n$ y- b( D8 C
App.contracts.Division.deployed().then(function(instance){2 ]+ h2 L- u1 I/ l. b* x7 y
divisionInstance = instance;
//调用智能合约的buyPlot函数,该函数需要2个参数,
//后面的{}中的内容跟发起以太坊交易的时候所带的默认值。+ n7 g* |. ~& A7 A$ m5 W/ K3 L( B p
//from: 使用哪个以太坊帐号1 B% A' L \$ N7 R' n
//value: 要使用的eth数量,以wei为单位(1eth=10^18wei)3 V7 K8 a) I3 G. B3 Y
//gas: 矿工费,以wei为单位
return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});
}).then(function(result){; y. ?( D d! S& c7 p1 x; Z i
//返回结果后重新更新UI
return App.refreshPlots();( b$ a9 p c; x/ \( c
}).catch(function(error){
console.log(error.message);$ _' E1 Q4 J5 x# s; y0 W
});2 d1 k7 R/ i- c, A% K
});% b, y* f! y- F& q6 C, U- B
}
};
测试你的基于Web的DApp是否正常,可以使用nodejs里面提供的lite-server模块来当简单的webserver来用。2 g8 s: z2 w0 ?3 M% f7 z
安装lite-server,在你的truffle项目目录下,执行:; s$ [8 V9 z5 K( \
npm install lite-server9 c Z& }. U' G6 V# o0 z4 y$ h
安装完之后会在项目目录下声称node_modules目录,lite-server以及依赖的模块都在该目录下了。
要运行lite-server,还需要编写项目目录下的package.json文件:) ]$ t" ^: G7 Z5 s$ S' p. ~
{
"name": "项目名称",
"version": "1.0.0",
"description": "",6 ] X( F g& a- ?
"main": "truffle.js"," {) o- ^8 M0 Y3 G6 j d
"directories": {2 ?/ b! x, k7 m0 r) v" ]
"test": "test"
},
"scripts": {
"dev": "lite-server", K! r( Q- M1 _
"test": "echo \"Error: no test specified\" && exit 1"
},% T3 O' z" V/ M& l
"author": "",, u+ X1 k2 M8 L1 d! q
"license": "ISC",& c$ \% c3 O+ ^0 }- T
"devDependencies": {1 U2 T' |# i0 O0 ?& C0 p" ?
"lite-server": "^2.3.0"
},
"dependencies": {
"liteserver": "^0.3.0"
}7 t: j! @7 r: I9 M+ z- V# h3 e
}
还需要编写bs-config.json来配置一下lite-server, _6 b$ V1 U2 l1 }; r3 [9 v
{8 K" @( k. `3 C3 X& C) n3 h/ y
"server": {! g# `# L) r' R3 t
"baseDir": ["./src", "./build/contracts"]
}! @! J# }6 z) f y
}
baseDir是用来设置lite-server所提供的web服务的文件路径的。这个设置表明你可以把你上面写的app.js,依赖的各种js放到./src目录下,然后写index.html,把app.js等集成进去,就大功告成了。% A8 h& r+ C: t( K& P q! ~' u
启动lite-server,执行:
npm run dev1 o: x6 J* U) j* V P" F
不仅启动了lite-server,而且会启动一个浏览器去打开页面。
本文的目的是为了澄清一下写DApp的各项工具之间的架构关系,帮助技术人员更快的理解和实现自己的项目。
具体的例子网上多如牛毛,就不去写业务的具体代码了。
成为第一个吐槽的人