开发基于以太坊智能合约的DApp
星火车品
发表于 2022-12-18 02:06:40
72
0
0
以太坊节点本来提供了rpc的访问方式,但是因为以太坊节点的地址不确定,并且DApp需要访问钱包,所以用web3.js直接访问以太坊节点的rpc服务是不现实的。
ganache-cli模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子里经常说的http://localhost:7545或者http://localhost:8545)。同时在其中内置了M个以太坊帐号,用于测试。
MetaMask是一个以太坊的网络钱包插件,它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件,所以解决了DApp中的支付问题。所以现在的DApp都依赖它。" _) P* z( J; r. r8 K h0 U
有一个以太坊教程,是在线学习的,大家可以去看看,如果自己本机上搞,开发DApp的基本过程都是一样的如下:
1、安装NodeJS2 O* |& a4 T' ]8 P
2、安装truffle:一个开发DApp的开发框架- r( Q! K% Y9 V
nmp install -g truffle
3、安装Ganache(原来用testrpc):在内存中模拟以太坊运行并对外提供rpc服务。
npm install -g ganache-cli
4、运行ganache-cli
ganache-cli
5、生成一个DApp的项目# ^- X% O. C9 \% n+ k
mkdir project18 j' r* N1 p$ m# J6 A+ Z, Z6 T. y
truffle init
如果想用truffle中的某个例子,可以用
truffle unbox pet-shop( o1 q& b" T" J
“pet-shop”是例子名称
6、编写智能合约7 d; ? \, z0 Q. g# [
具体如何用solidity编写智能合约可参考各种文章,这里不再重复。
编写好的智能合约的Project1.sol文件放到contracts目录下
7、编译和部署智能合约6 h' J: c9 b$ |* Y8 v) N
在migrations目录下创建文件2_deploy_contracts.js:4 J+ v4 C! ^2 E0 R' @4 v; d) t
var Project1 = artifacts.require("Project1");/ \8 d" W3 w; [% X) H# r/ _3 J
module.exports = function(deployer) {
deployer.deploy(Project1);
};
之后执行:
truffle compile
truffle migrate( H: L) t0 z3 k
如果你的智能合约没有问题的话,现在你的以太坊智能合约应该已经部署到你用来测试的ganache中去了。
这里可能遇到的问题是:默认的truffle生成的项目,测试用的ganache的地址和端口会被设置成http://localhost:7545,而实际上执行ganache-cli之后的服务端口是http://localhost:8545,需要在truffle.js中修改一下:/ r6 K2 S) E8 Y' v' j& J1 L8 ?% L
module.exports = {* t2 O+ [+ W) Q! K2 c- Z
// See
// for more about customizing your Truffle configuration!9 p m n1 N: }( e( h5 E
networks: {
development: {
host: “127.0.0.1”,
port: 7545, //改成8545
network_id: “*” // Match any network id, \2 ]1 I1 w7 C% ~ g
}! O2 T. `; U) R9 L4 K' |; }9 d
}! A, f# k! |1 P
};/ K( f( C1 o' z3 n, }; w5 N
8、编写前端的js代码跟以太坊交互
通常需要如下的辅助js库:2 W9 m; W/ [7 j/ j. b d$ Z4 [: i8 Y
5 q' [; ^% t6 j7 W) W8 Z
在此基础上,编辑你自己业务逻辑的js,通常命名为app.js,app.js的框架如下:
App = {
web3Provider: null,
contracts: {},5 ]6 T- u/ O6 y0 _& r2 r+ ?- F
init: function() {
//初始化你自己的页面、变量等
return App.initWeb3();
},
initWeb3: function() {
/*0 Q; K0 U" E/ t: `" v
* 初始化web3:
*/
if (typeof web3 !== ‘undefined’){. U9 T; [- ~: c5 N3 M$ u- E
//如果你的浏览器安装了MetaMask的钱包插件,那么插件会赋值web3.currentProvider8 C: e3 \& r* [# V
App.web3Provider = web3.currentProvider;
}# k$ K, m) a6 z! O: q; Q# A
else
{1 E9 u# R$ O- F' l4 l/ e
//如果没装插件,那么创建一个基于Http的provider,这里用到的就是用ganache-cli启动所提供的rpc服务,因为ganache-cli启动的时候绑定的是localhost,所以测试所使用的浏览器也要在本机。(如何让ganache-cli绑定其他地址我还没找到)
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);. \# g, b% r' G6 B$ z
}$ S3 l E3 e1 y
web3 = new Web3(App.web3Provider);6 O" B9 t; @: }& g q
return App.initContract();
},9 k7 B C2 @! H- V: M" B. |+ G2 e) l
initContract: function() {* y) N1 t0 T0 J* U4 K
/*
* 初始化智能合约,实际上就是为你的智能合约创建一个对应的js对象,方便后续调用& ~: p9 C* Q0 X$ D. g
*/* w6 C4 X3 K' {
//通常的做法是使用你的智能合约编译之后生成的abi的json文件,该文件在用truffle compile之后,生成在build/contracts/目录下,因为我用了一个Division.sol,所以用Division.json,你可以根据你的实际情况来写。' l L8 x- h6 k g( E
$.getJSON(‘Division.json‘, function(data) {
var DivisionArtifact = data;9 Q2 h% B2 }2 {0 O9 {
App.contracts.Division = TruffleContract(DivisionArtifact);
App.contracts.Division.setProvider(App.web3Provider);! d; {$ t' {# ]3 f: v6 O8 w
//用智能合约中的信息来更新你的web应用,App.refreshPlots()是我例子中获取智能合约中信息并更新UI的函数
return App.refreshPlots();
});
return App.bindEvents();
},
bindEvents: function() {& x7 D* }. {6 A5 H6 T
/*
* 事件绑定,这个可以根据你的UI来设置,例子中就是绑定一个button的点击操作- r" ~3 C& {2 }' P8 K
*/0 j4 b% d( i2 L* [7 S0 S/ I( I
$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);
},* g5 h( ^8 ]) |8 p% m
refreshPlots: function(plots, account) {1 M Q5 z0 o; S9 k) |% B# j$ c4 T+ @$ E
/*, W5 P P# D% W: H( |7 h
* 这个函数就是上面initContract中调用的用智能合约更新页面
*/
//继续使用division这个智能合约做例子% g9 I3 K( |9 `6 T
var divisionInstance;- k* G4 G9 x/ V& W# {- y
App.contracts.Division.deployed().then(function(instance){2 M0 @' |% M( ~* n* [! n
divisionInstance = instance;2 R! D9 u2 J. R+ L7 }" n! R
//getGenPlots是Division的这个智能合约的一个查询函数(不需要gas),需要3个参数* y) F- o/ A) F5 z5 g1 g, k2 M; @
return divisionInstance.getGenPlots(0,0,2);
}).then(function(results){
//注意:这个地方有点意思,我原先理解也有问题,后来打印输出才搞明白
//智能合约返回的多个结果变量在这里就是一个results数组0 X" ^& e6 b. I; z9 |" {; |
//数组的每个成员就是智能合约返回的每个结果变量
//以getGenPlots为例,Division.json中定义如下:/ @. z. i; x/ p: `6 U4 @
/*"name": "getGenPlots",' g2 \. q2 L8 S5 E T& D+ n: o! x# S
"outputs": [
{
"name": "",3 i" I0 o( a3 n% Q% j) B
"type": "uint64[]"
},& ~2 \# G+ A c. U O3 X. _2 d2 m
{
"name": "",
"type": "address[]"
},
{. Q; v7 ^* g0 f0 Y3 d3 i
"name": "",
"type": "uint256[]"
},4 T& M5 L) R' A: n( {" P7 s4 `
{4 P0 n- a! m7 j6 r# c9 c2 |
"name": "",
"type": "uint8[]"
}
],
"payable": false,/ N$ P% ]# X, [8 m
"stateMutability": "view",6 P, ~: P5 a a' R( |' f8 H T
"type": "function"% e$ ~0 W6 Z- G
*/
//那么:results[0]是uint64[]
// results[1]是address[]...
console.log(results[0].length);. ? b' l* O: D6 [
}).catch(function(err){% y: H( H$ R; x
console.log(err.message);
}); C" V0 ]# E) H+ w) x
},6 `& y- _9 f" m _
handlePlot: function(event) {
/*. {% {$ t5 K& T% g5 ^5 u, x
* 这个函数就是上面bindEvents中调用的响应函数,演示要花eth的函数调用
*/; N# V2 `, K$ P) ^
event.preventDefault();
//从event中获取参数,这是jquery的东西,跟web3无关
var plotId = parseInt($(event.target).data('id'));# z3 t* E0 H* T& d7 M d7 g7 H" q
var divisionInstance;
//获取以太坊帐号信息! i/ n6 }' j1 M( z& J' M
web3.eth.getAccounts(function(error,accounts){/ r, E2 V4 U2 n2 F7 x' g3 U
if(error)
{
console.log(error);7 a* D9 q" z( r" J) C3 Z! P# y% K
}0 U4 u2 B4 Q1 z5 x4 D. i3 X* `0 x
//我随便取帐号列表里的第3个帐号。( t! w' _8 B: @
//因为我们连的是ganache-cli的rpc模拟服务,/ R% v3 J$ Z- y( W
//其中给我们预制了几个有eth的帐号0 _: e2 s7 D4 D6 I! s& D
//如果安装了MetaMask插件,应该获得的就是MetaMask里的帐号
var account = accounts[2];
App.contracts.Division.deployed().then(function(instance){
divisionInstance = instance;. T+ B" c! m+ A2 y4 @
//调用智能合约的buyPlot函数,该函数需要2个参数,- ?, K3 q3 \0 ]- x$ _
//后面的{}中的内容跟发起以太坊交易的时候所带的默认值。
//from: 使用哪个以太坊帐号$ s" Y( U' r9 M! G/ y3 y |
//value: 要使用的eth数量,以wei为单位(1eth=10^18wei)3 ~3 _5 a( S/ a3 |
//gas: 矿工费,以wei为单位7 x( L) f! W0 ?( h, S6 c) u2 m
return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});6 @1 |+ Z8 ]2 s7 b l; d
}).then(function(result){# ]7 J% X. J9 N6 O$ [( b; M
//返回结果后重新更新UI
return App.refreshPlots();$ J, P3 t* Z& X) d! Q
}).catch(function(error){5 J$ _8 Z: r9 ?4 r
console.log(error.message);2 I, Y( e) B( A% Y8 w* o- A
});% k8 B3 F o( ^0 L2 u. Y! Q5 e% |& q6 i
});
}
};
测试你的基于Web的DApp是否正常,可以使用nodejs里面提供的lite-server模块来当简单的webserver来用。
安装lite-server,在你的truffle项目目录下,执行:
npm install lite-server
安装完之后会在项目目录下声称node_modules目录,lite-server以及依赖的模块都在该目录下了。6 [# F0 A4 P8 ]' E5 ?1 o5 [& D, B
要运行lite-server,还需要编写项目目录下的package.json文件:3 k9 X4 C$ u6 i2 B, G
{
"name": "项目名称",5 j+ r* j* @- x9 o( K; F5 d
"version": "1.0.0",
"description": "",
"main": "truffle.js",& g! h: t- w" V' [7 W L8 P
"directories": {
"test": "test"6 G" q; t0 Q1 M b+ e4 ~- |
},
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1": e8 |2 d: G$ Q4 m5 y8 e6 w7 m6 v
},
"author": "",
"license": "ISC",) V9 V! D# C; f' ]7 I
"devDependencies": {7 t: P- H% r+ x
"lite-server": "^2.3.0"9 C. n& D( }. j* D
}, c$ L0 w0 ^ W1 h( A6 c( H
"dependencies": {4 }9 [; i% P) X, F
"liteserver": "^0.3.0"
}8 `; H, a8 Q. U( I% c! I
}0 a! p r. I! [4 _) ]7 h' {
还需要编写bs-config.json来配置一下lite-server
{$ F5 z" R3 S& ]
"server": {
"baseDir": ["./src", "./build/contracts"]
}3 t6 y9 p2 k) C. X8 F& |
}( M' C( W: Q6 N0 ]/ ^* n2 P, Z
baseDir是用来设置lite-server所提供的web服务的文件路径的。这个设置表明你可以把你上面写的app.js,依赖的各种js放到./src目录下,然后写index.html,把app.js等集成进去,就大功告成了。5 V& J! A: r' A+ a; E# w6 H
启动lite-server,执行:. d1 K- v8 m0 W9 O0 q7 u
npm run dev
不仅启动了lite-server,而且会启动一个浏览器去打开页面。
本文的目的是为了澄清一下写DApp的各项工具之间的架构关系,帮助技术人员更快的理解和实现自己的项目。4 v5 m. o2 }9 [5 d1 A
具体的例子网上多如牛毛,就不去写业务的具体代码了。
成为第一个吐槽的人