开发基于以太坊智能合约的DApp
星火车品
发表于 2022-12-18 02:06:40
76
0
0
以太坊节点本来提供了rpc的访问方式,但是因为以太坊节点的地址不确定,并且DApp需要访问钱包,所以用web3.js直接访问以太坊节点的rpc服务是不现实的。# ]) u: K0 x: b
ganache-cli模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子里经常说的http://localhost:7545或者http://localhost:8545)。同时在其中内置了M个以太坊帐号,用于测试。& R. l$ q5 R6 H# S! D L$ ?& G
MetaMask是一个以太坊的网络钱包插件,它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件,所以解决了DApp中的支付问题。所以现在的DApp都依赖它。" i) P" C/ k! X
有一个以太坊教程,是在线学习的,大家可以去看看,如果自己本机上搞,开发DApp的基本过程都是一样的如下:
1、安装NodeJS
2、安装truffle:一个开发DApp的开发框架* R8 o; d. D" j/ a& ~/ h" f
nmp install -g truffle
3、安装Ganache(原来用testrpc):在内存中模拟以太坊运行并对外提供rpc服务。) @6 m2 o: _, U9 J+ T7 L
npm install -g ganache-cli
4、运行ganache-cli! R D( g6 x$ @$ j6 U& R. E
ganache-cli3 r. ?6 M& d" ]! Z% V: R
5、生成一个DApp的项目; v8 v+ c2 P# A* K$ e4 ~# Q9 \
mkdir project1% Y: r7 l" l- C0 ` P
truffle init4 c( ^$ U+ d3 o% k
如果想用truffle中的某个例子,可以用0 }& [: r' m1 W
truffle unbox pet-shop
“pet-shop”是例子名称; x0 E0 k2 T5 ^: j1 x
6、编写智能合约& b5 Q8 ^9 R; |2 H. R+ M6 s5 G
具体如何用solidity编写智能合约可参考各种文章,这里不再重复。# A! u& m( `7 y1 r
编写好的智能合约的Project1.sol文件放到contracts目录下8 J+ h; ^/ }) F4 x J! y3 e
7、编译和部署智能合约$ g& U: S$ g+ _8 w
在migrations目录下创建文件2_deploy_contracts.js:# e8 n8 ]5 p# ` t
var Project1 = artifacts.require("Project1");3 w# ^# d i9 j# Q; l' Z
module.exports = function(deployer) {' @. }5 I' y7 o6 i
deployer.deploy(Project1);
};+ I$ v9 h+ z% y0 S i/ a2 v+ |
之后执行:
truffle compile a$ |( j; w# Z6 a: v4 _( k$ G
truffle migrate
如果你的智能合约没有问题的话,现在你的以太坊智能合约应该已经部署到你用来测试的ganache中去了。
这里可能遇到的问题是:默认的truffle生成的项目,测试用的ganache的地址和端口会被设置成http://localhost:7545,而实际上执行ganache-cli之后的服务端口是http://localhost:8545,需要在truffle.js中修改一下:
module.exports = {0 W# I$ z& G* o) H7 U
// See
// for more about customizing your Truffle configuration!
networks: {
development: {
host: “127.0.0.1”,8 b- I$ t. c# D: r" O# R
port: 7545, //改成85457 s5 n- M+ w5 O9 I3 ~
network_id: “*” // Match any network id
}
}
};
8、编写前端的js代码跟以太坊交互* \: g. d) U2 ]% V
通常需要如下的辅助js库:
在此基础上,编辑你自己业务逻辑的js,通常命名为app.js,app.js的框架如下:
App = {
web3Provider: null,* w7 m) r4 i+ {0 [( V6 Q& p
contracts: {},
init: function() {
//初始化你自己的页面、变量等
return App.initWeb3();
},
initWeb3: function() {- w/ T1 ~& P; X% m G+ @- b
/*: g- u+ W5 E7 \" h8 L
* 初始化web3:
*/
if (typeof web3 !== ‘undefined’){
//如果你的浏览器安装了MetaMask的钱包插件,那么插件会赋值web3.currentProvider
App.web3Provider = web3.currentProvider;8 H4 x R* K. H) Y6 c+ ]
}
else( r# E8 v- E0 q
{# i) Q- N4 @; H* I- e
//如果没装插件,那么创建一个基于Http的provider,这里用到的就是用ganache-cli启动所提供的rpc服务,因为ganache-cli启动的时候绑定的是localhost,所以测试所使用的浏览器也要在本机。(如何让ganache-cli绑定其他地址我还没找到)
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);9 H/ A8 N5 w0 f' J; e/ `* B6 N
}
web3 = new Web3(App.web3Provider);
return App.initContract();* Q. N4 Z$ E( ?
},
initContract: function() {- J1 d, a( G$ y/ w- _5 m, R4 `% y
/*/ s6 ]5 P6 G7 ^2 I. `9 ^" T N( _, Q
* 初始化智能合约,实际上就是为你的智能合约创建一个对应的js对象,方便后续调用9 v* z: q( g/ }& }
*/( j5 H4 f, S4 g6 t* e/ Y
//通常的做法是使用你的智能合约编译之后生成的abi的json文件,该文件在用truffle compile之后,生成在build/contracts/目录下,因为我用了一个Division.sol,所以用Division.json,你可以根据你的实际情况来写。
$.getJSON(‘Division.json‘, function(data) {
var DivisionArtifact = data;
App.contracts.Division = TruffleContract(DivisionArtifact);/ Y, \7 x9 T1 W/ _8 S8 Z+ Z3 p
App.contracts.Division.setProvider(App.web3Provider);
//用智能合约中的信息来更新你的web应用,App.refreshPlots()是我例子中获取智能合约中信息并更新UI的函数
return App.refreshPlots();
});
return App.bindEvents();% z) k4 ^2 p4 `/ p2 c6 R+ h! [
},7 r: y, I7 a2 p' e5 M
bindEvents: function() {
/*
* 事件绑定,这个可以根据你的UI来设置,例子中就是绑定一个button的点击操作0 `( G2 X: b0 U1 ]
*/7 E. x8 Y9 u: P% X
$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);
}, j6 F! a$ P% a1 j, d' T# g
refreshPlots: function(plots, account) {, n) [; [. H! u y
/*9 L. N7 F8 ]! D1 U+ H9 O1 }
* 这个函数就是上面initContract中调用的用智能合约更新页面/ @3 s$ S- Z" _9 o
*/
//继续使用division这个智能合约做例子
var divisionInstance;
App.contracts.Division.deployed().then(function(instance){
divisionInstance = instance;
//getGenPlots是Division的这个智能合约的一个查询函数(不需要gas),需要3个参数
return divisionInstance.getGenPlots(0,0,2);: N! B( X: Z+ K1 ]& X3 V+ j
}).then(function(results){" d' D0 A+ a; S. l J6 [" n4 `
//注意:这个地方有点意思,我原先理解也有问题,后来打印输出才搞明白) g' T' w( A6 R( H
//智能合约返回的多个结果变量在这里就是一个results数组
//数组的每个成员就是智能合约返回的每个结果变量
//以getGenPlots为例,Division.json中定义如下:
/*"name": "getGenPlots",
"outputs": [9 O4 ~2 K, ]3 a7 ^6 b w9 S5 x. O
{
"name": "",/ M+ o0 y4 e9 j0 c( O+ p) t. g
"type": "uint64[]"
},% D1 J" f" X# f! k4 f
{
"name": "",3 P. f( R# i) W3 K
"type": "address[]"
},
{; D0 [* V* J2 `3 A& A
"name": "",
"type": "uint256[]"% n6 R- n5 Z( {# U" S8 I( R/ C
},6 C& F2 s- o. m/ z, w0 U# a% k
{. u0 `; M/ K1 A5 {1 d. @
"name": "",
"type": "uint8[]"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
*/
//那么:results[0]是uint64[]
// results[1]是address[]...
console.log(results[0].length);
}).catch(function(err){
console.log(err.message);
});5 |/ j& I; @0 N# f$ r5 \1 s
},
handlePlot: function(event) {) Q- D+ U. \% S7 j& h0 F& I
/*( s" Y V6 _) m) Y2 b
* 这个函数就是上面bindEvents中调用的响应函数,演示要花eth的函数调用9 A. d$ s7 K6 O/ c
*/
event.preventDefault();0 n5 I' [; [, g3 H9 Q+ q0 I
//从event中获取参数,这是jquery的东西,跟web3无关' f6 @/ W0 h1 r, W; u# \
var plotId = parseInt($(event.target).data('id'));# G. t; R7 d' w9 B5 D
var divisionInstance;
//获取以太坊帐号信息# k% _# d) D- `/ ~8 H) t' s
web3.eth.getAccounts(function(error,accounts){
if(error)
{$ q ]* ]' V& v% Z: m
console.log(error);
}
//我随便取帐号列表里的第3个帐号。
//因为我们连的是ganache-cli的rpc模拟服务,
//其中给我们预制了几个有eth的帐号* y" l9 o* T* M
//如果安装了MetaMask插件,应该获得的就是MetaMask里的帐号: m* M1 ~% v5 {4 O. M8 }
var account = accounts[2];. s' I' j0 @ y% \. j2 ~
App.contracts.Division.deployed().then(function(instance){
divisionInstance = instance;
//调用智能合约的buyPlot函数,该函数需要2个参数,
//后面的{}中的内容跟发起以太坊交易的时候所带的默认值。1 d/ d: O' q, P8 T3 N
//from: 使用哪个以太坊帐号
//value: 要使用的eth数量,以wei为单位(1eth=10^18wei)4 e- i) N U, K7 M: C @$ I
//gas: 矿工费,以wei为单位7 R3 \4 e, r4 X0 A
return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});1 V$ ~ _2 H2 R% L1 k, L' `
}).then(function(result){
//返回结果后重新更新UI9 q9 x+ J3 e+ d, g8 {
return App.refreshPlots();
}).catch(function(error){
console.log(error.message);$ M$ P7 D2 a8 G/ k* S
});
});: X" O6 [# b# E& A+ G8 |# b& `
}
};
测试你的基于Web的DApp是否正常,可以使用nodejs里面提供的lite-server模块来当简单的webserver来用。
安装lite-server,在你的truffle项目目录下,执行:( e5 D& a, [' s
npm install lite-server
安装完之后会在项目目录下声称node_modules目录,lite-server以及依赖的模块都在该目录下了。
要运行lite-server,还需要编写项目目录下的package.json文件:
{5 n# T/ ^, G; n+ N2 b+ ]
"name": "项目名称",
"version": "1.0.0",# o. m8 d7 q2 S, A
"description": "",
"main": "truffle.js",
"directories": {, ?& M8 ?# k. y
"test": "test"7 K# a. F. \2 ~7 H, c
},4 b0 x4 O( J# p0 E7 d6 j* v9 g
"scripts": {5 J Z/ G' i( w0 R- S1 j
"dev": "lite-server",) N1 B1 v! ~) T$ v
"test": "echo \"Error: no test specified\" && exit 1"' Y# M7 C" E3 q8 v! n3 ~
},% t1 K$ u$ I+ ~, R
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.3.0"
},
"dependencies": {
"liteserver": "^0.3.0"
}; k1 O; `: b1 h% F/ T
}
还需要编写bs-config.json来配置一下lite-server
{
"server": {
"baseDir": ["./src", "./build/contracts"]9 p- E) }# e& X0 R* F. I
}
}
baseDir是用来设置lite-server所提供的web服务的文件路径的。这个设置表明你可以把你上面写的app.js,依赖的各种js放到./src目录下,然后写index.html,把app.js等集成进去,就大功告成了。
启动lite-server,执行:. [; b6 X4 O0 y. {9 [- k
npm run dev
不仅启动了lite-server,而且会启动一个浏览器去打开页面。# [# g$ B% [) z4 ^8 A+ y
本文的目的是为了澄清一下写DApp的各项工具之间的架构关系,帮助技术人员更快的理解和实现自己的项目。
具体的例子网上多如牛毛,就不去写业务的具体代码了。
成为第一个吐槽的人