开发基于以太坊智能合约的DApp
星火车品
发表于 2022-12-18 02:06:40
74
0
0
以太坊节点本来提供了rpc的访问方式,但是因为以太坊节点的地址不确定,并且DApp需要访问钱包,所以用web3.js直接访问以太坊节点的rpc服务是不现实的。
ganache-cli模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子里经常说的http://localhost:7545或者http://localhost:8545)。同时在其中内置了M个以太坊帐号,用于测试。, L) A5 f7 O! J% L! a
MetaMask是一个以太坊的网络钱包插件,它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件,所以解决了DApp中的支付问题。所以现在的DApp都依赖它。
有一个以太坊教程,是在线学习的,大家可以去看看,如果自己本机上搞,开发DApp的基本过程都是一样的如下:' x1 |8 O }1 a
1、安装NodeJS0 V% T: E6 q7 P5 i2 ~
2、安装truffle:一个开发DApp的开发框架5 t* Y% r" f. r2 i6 R; i/ T
nmp install -g truffle1 r) [, ~6 `0 x1 d
3、安装Ganache(原来用testrpc):在内存中模拟以太坊运行并对外提供rpc服务。& Z4 e8 y! w+ ~9 K+ H; G/ l. `0 a
npm install -g ganache-cli& W3 M+ J/ I/ z9 C) _( ]
4、运行ganache-cli8 i8 ~8 Y: t- g% z, I" R
ganache-cli; o4 q0 ^8 f4 t# o3 K. g; ~
5、生成一个DApp的项目
mkdir project1: D( N, _0 v$ L+ H$ d9 |6 f
truffle init
如果想用truffle中的某个例子,可以用& t" |. A$ y* X$ s, V; D
truffle unbox pet-shop
“pet-shop”是例子名称
6、编写智能合约
具体如何用solidity编写智能合约可参考各种文章,这里不再重复。1 z# _+ H! |& K
编写好的智能合约的Project1.sol文件放到contracts目录下. i! X" P% \4 m- H, E. Q$ m
7、编译和部署智能合约
在migrations目录下创建文件2_deploy_contracts.js:6 o! Y' E1 G; h& O& x5 v% L
var Project1 = artifacts.require("Project1");
module.exports = function(deployer) {
deployer.deploy(Project1);: K0 _) j0 x3 U% l0 [
};& H; @; p" \$ w6 f e, z
之后执行:
truffle compile; L! ?/ v5 D) k* s4 g5 D
truffle migrate ^ w) f1 }& t3 x- T. {- ?
如果你的智能合约没有问题的话,现在你的以太坊智能合约应该已经部署到你用来测试的ganache中去了。
这里可能遇到的问题是:默认的truffle生成的项目,测试用的ganache的地址和端口会被设置成http://localhost:7545,而实际上执行ganache-cli之后的服务端口是http://localhost:8545,需要在truffle.js中修改一下:
module.exports = {
// See
// for more about customizing your Truffle configuration!$ q9 H4 o; v+ S( T! O
networks: {
development: {
host: “127.0.0.1”,
port: 7545, //改成8545
network_id: “*” // Match any network id% U! c3 R$ b, e; I/ E! [4 L
}
}4 a; {, z7 D( e; q/ ~
};" W5 Q; M$ ~& c6 X1 T
8、编写前端的js代码跟以太坊交互
通常需要如下的辅助js库:* y' z' y( ?2 e% ?/ h3 A9 n. C; e
( a' e, c0 k0 Q& U# G
在此基础上,编辑你自己业务逻辑的js,通常命名为app.js,app.js的框架如下:% c+ Y" l, C$ ^9 u0 P
App = {
web3Provider: null,
contracts: {},
init: function() {9 Y2 N) B, ]* t+ [: y& {% |
//初始化你自己的页面、变量等7 G' @- }: j' P/ a
return App.initWeb3();+ F/ ?/ T5 K( p2 y1 H7 E+ C7 L
},, x; H9 b& J; d) I* e2 `
initWeb3: function() {
/*
* 初始化web3:$ r* B1 t) V+ W2 C$ M( x) ~
*/% y) C9 F! g- i7 d
if (typeof web3 !== ‘undefined’){
//如果你的浏览器安装了MetaMask的钱包插件,那么插件会赋值web3.currentProvider2 M; M& z3 X: w' x( f m
App.web3Provider = web3.currentProvider;, i8 z1 C4 H" o5 z. k, p+ \. l
}* j8 R$ a. m# T6 W! O5 C5 W. N& k
else
{5 ~8 a6 {9 h. l9 w0 L6 q8 K( f
//如果没装插件,那么创建一个基于Http的provider,这里用到的就是用ganache-cli启动所提供的rpc服务,因为ganache-cli启动的时候绑定的是localhost,所以测试所使用的浏览器也要在本机。(如何让ganache-cli绑定其他地址我还没找到)9 C9 C( a0 Q5 j( ?- A
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);
}1 `! T; O4 Z' C, g8 u5 {
web3 = new Web3(App.web3Provider);: f& E! o8 m2 x( d8 q+ B
return App.initContract();0 Z3 {3 S) i! @* c$ S' @
},
initContract: function() {
/*
* 初始化智能合约,实际上就是为你的智能合约创建一个对应的js对象,方便后续调用
*/8 f& i% l6 t5 y$ S/ Q" Y
//通常的做法是使用你的智能合约编译之后生成的abi的json文件,该文件在用truffle compile之后,生成在build/contracts/目录下,因为我用了一个Division.sol,所以用Division.json,你可以根据你的实际情况来写。
$.getJSON(‘Division.json‘, function(data) {8 p* g4 ^- t! w( t1 H& J% i
var DivisionArtifact = data;0 e' s1 ?- P4 c, y( [
App.contracts.Division = TruffleContract(DivisionArtifact);' b$ q6 [# j1 Z3 L& ?* U: f, y0 _. S$ [
App.contracts.Division.setProvider(App.web3Provider);2 M3 }0 n4 F- Y9 j) o/ A
//用智能合约中的信息来更新你的web应用,App.refreshPlots()是我例子中获取智能合约中信息并更新UI的函数# s: e! D( ~8 [( Z5 t I C
return App.refreshPlots();
});
return App.bindEvents();
},6 ^- J: g4 w1 ~- j: i# W" [
bindEvents: function() {
/*
* 事件绑定,这个可以根据你的UI来设置,例子中就是绑定一个button的点击操作' F; v% Z: v2 X! s, b |( r! F
*/
$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);5 Y3 w! s1 _7 J' Z; k5 c$ i! ~9 A p
}, S0 D( @5 e! B& z( g, E. q6 r
refreshPlots: function(plots, account) {5 ]# Y0 ~& y2 o! a
/*# o2 b5 C& g* ]+ I0 w
* 这个函数就是上面initContract中调用的用智能合约更新页面 w+ ~- ?8 t' C- g; N4 o3 Q, J
*// Y1 l) H8 p# `
//继续使用division这个智能合约做例子9 ]2 o* T% q/ F. P
var divisionInstance;, h) m1 R( i4 ^( h, a# S
App.contracts.Division.deployed().then(function(instance){) `' d1 u$ i/ \! g# d. E
divisionInstance = instance;
//getGenPlots是Division的这个智能合约的一个查询函数(不需要gas),需要3个参数
return divisionInstance.getGenPlots(0,0,2);* k( o3 l0 c u5 x$ A/ k
}).then(function(results){- C+ S8 o: M: X
//注意:这个地方有点意思,我原先理解也有问题,后来打印输出才搞明白
//智能合约返回的多个结果变量在这里就是一个results数组( D2 M# D' H2 d, z! d. W9 `3 m
//数组的每个成员就是智能合约返回的每个结果变量" h7 B' L" G; E5 t
//以getGenPlots为例,Division.json中定义如下:5 {. g- P; N: |, A9 k
/*"name": "getGenPlots",
"outputs": [0 b+ L) d; K8 h. M! E# Z1 o: q6 |
{5 Z& V, R1 f4 R1 t$ C( C
"name": "",4 _& y" I! G* W5 _* d
"type": "uint64[]"
},
{8 m- z( m/ g% M3 h) E6 j8 }
"name": "",& G3 q* S, v; I7 u" d# }; T) X
"type": "address[]"
},
{: v. i7 q/ r% F: U' f3 n7 Q
"name": "",; M+ n9 s' d' ^# J. G6 }/ M
"type": "uint256[]"
},
{
"name": "",- q: a; D) N1 O/ s7 @
"type": "uint8[]"% V. Y/ o( ^6 t' c& V, ]8 S: D
}4 j7 M1 K+ k x8 x; {
],+ q2 f, T9 e5 l& U8 G7 Q4 J
"payable": false,- ^8 f+ v& v! ]! W1 L! T. K1 p
"stateMutability": "view",
"type": "function") L9 q9 F4 f# K. f
*/
//那么:results[0]是uint64[]* A8 {" T3 U! W6 J2 q4 M
// results[1]是address[]...; Y" }4 O1 |2 y
console.log(results[0].length);
}).catch(function(err){+ n! p+ @( `& R2 O! m# Q
console.log(err.message);( }6 R0 _1 Y1 y
});6 ^& w J; p" p9 @6 n- ?# E3 _4 ]
},- y; U3 P0 u/ u6 u' ]
handlePlot: function(event) {4 E5 o/ L: \; _$ b
/*4 E# L- k- E$ G8 m
* 这个函数就是上面bindEvents中调用的响应函数,演示要花eth的函数调用! G4 R' E& G2 p4 U* {2 W
*/1 p" }. Z3 k3 p$ O+ e/ o( i/ ~, P
event.preventDefault();1 c1 U! e4 \+ h) T* R
//从event中获取参数,这是jquery的东西,跟web3无关 P7 d/ `1 N$ U- ]3 ^
var plotId = parseInt($(event.target).data('id'));7 {/ w( W2 F& D) j0 s& P
var divisionInstance;. n* | c+ F$ c1 n8 G6 a1 }
//获取以太坊帐号信息9 [$ X- i0 j0 k4 q5 l, z) E2 v: ?
web3.eth.getAccounts(function(error,accounts){
if(error)1 E# \! _, x5 D1 l1 V+ F
{
console.log(error);
}* x4 w6 d2 {. a* N" U, K, c
//我随便取帐号列表里的第3个帐号。' q( F) ~/ p4 l6 C P. x2 ~( c6 b4 L
//因为我们连的是ganache-cli的rpc模拟服务,
//其中给我们预制了几个有eth的帐号- n* _1 c( d& O; M3 x8 q. H
//如果安装了MetaMask插件,应该获得的就是MetaMask里的帐号% O; K" O1 S) V" z8 U( T
var account = accounts[2];
App.contracts.Division.deployed().then(function(instance){4 M1 a0 N* }/ U* {; O
divisionInstance = instance;& c7 @0 H: K0 K4 @7 Y
//调用智能合约的buyPlot函数,该函数需要2个参数,
//后面的{}中的内容跟发起以太坊交易的时候所带的默认值。
//from: 使用哪个以太坊帐号
//value: 要使用的eth数量,以wei为单位(1eth=10^18wei)5 ?+ U% h) J/ {
//gas: 矿工费,以wei为单位
return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});
}).then(function(result){+ X4 ]4 v, j0 [8 ^. b( [8 I1 ]3 b
//返回结果后重新更新UI
return App.refreshPlots();
}).catch(function(error){" @, T$ U' B4 @0 X( O0 B
console.log(error.message);$ ~$ Q2 t4 e4 T5 A; h5 [
});- K: x4 @4 v- `5 L D
});
}
};
测试你的基于Web的DApp是否正常,可以使用nodejs里面提供的lite-server模块来当简单的webserver来用。
安装lite-server,在你的truffle项目目录下,执行:
npm install lite-server
安装完之后会在项目目录下声称node_modules目录,lite-server以及依赖的模块都在该目录下了。
要运行lite-server,还需要编写项目目录下的package.json文件:: [5 B, N$ R1 Z5 X
{
"name": "项目名称",% h: \8 e+ I5 N5 u
"version": "1.0.0",, U* u' ~( V& l2 c9 j6 G
"description": "",
"main": "truffle.js",
"directories": {& U/ j9 ]: S+ C% S$ o9 K! d
"test": "test"
},
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1"
},6 V3 e! V5 K o) [% f) e7 K+ L
"author": "",( _! ?) M3 P8 N0 D3 J1 [
"license": "ISC",( B$ l# n B: c, S# l; u; Z4 d2 ?. p) k
"devDependencies": {0 Z+ {& P9 k! l* a
"lite-server": "^2.3.0": s' l. M6 G( d5 t
},
"dependencies": {, }9 y/ V" f8 e# a
"liteserver": "^0.3.0"+ x) r) \( P# U6 U( q1 K8 N4 a/ r+ T" q
}3 I# j# t2 V* n9 v7 k- Q
}+ c' ~1 L8 O0 F8 x' l5 n& a0 T
还需要编写bs-config.json来配置一下lite-server4 a$ b" V, K4 Y
{
"server": { v# s8 I4 ~$ s" w6 U- W8 n
"baseDir": ["./src", "./build/contracts"]
}7 f$ q7 W3 z9 q
}
baseDir是用来设置lite-server所提供的web服务的文件路径的。这个设置表明你可以把你上面写的app.js,依赖的各种js放到./src目录下,然后写index.html,把app.js等集成进去,就大功告成了。
启动lite-server,执行:
npm run dev- X8 |- B* x' E1 z. i
不仅启动了lite-server,而且会启动一个浏览器去打开页面。9 W. O$ l& U: H5 r3 [
本文的目的是为了澄清一下写DApp的各项工具之间的架构关系,帮助技术人员更快的理解和实现自己的项目。
具体的例子网上多如牛毛,就不去写业务的具体代码了。
成为第一个吐槽的人