开发基于以太坊智能合约的DApp
星火车品
发表于 2022-12-18 02:06:40
75
0
0
以太坊节点本来提供了rpc的访问方式,但是因为以太坊节点的地址不确定,并且DApp需要访问钱包,所以用web3.js直接访问以太坊节点的rpc服务是不现实的。- r0 p: ~9 {* a
ganache-cli模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子里经常说的http://localhost:7545或者http://localhost:8545)。同时在其中内置了M个以太坊帐号,用于测试。
MetaMask是一个以太坊的网络钱包插件,它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件,所以解决了DApp中的支付问题。所以现在的DApp都依赖它。" X E) K4 d* H: q9 _
有一个以太坊教程,是在线学习的,大家可以去看看,如果自己本机上搞,开发DApp的基本过程都是一样的如下:; s Z: v" K0 m4 @* |! J2 I* E* A: I
1、安装NodeJS
2、安装truffle:一个开发DApp的开发框架
nmp install -g truffle
3、安装Ganache(原来用testrpc):在内存中模拟以太坊运行并对外提供rpc服务。: K3 \0 v" J4 t& _8 D
npm install -g ganache-cli- s! f2 W" c% w% E
4、运行ganache-cli: Z! S K* o6 X. c! a
ganache-cli
5、生成一个DApp的项目
mkdir project1
truffle init
如果想用truffle中的某个例子,可以用
truffle unbox pet-shop( i3 p, k2 G2 ]
“pet-shop”是例子名称/ p3 f8 Q# J2 g' Y* S3 I9 y/ {
6、编写智能合约/ ]2 K, T3 C3 e; N: q# _ A8 y& D
具体如何用solidity编写智能合约可参考各种文章,这里不再重复。2 t4 X8 W6 ?8 c' l* E
编写好的智能合约的Project1.sol文件放到contracts目录下
7、编译和部署智能合约' h4 r9 C; z& D" G' I
在migrations目录下创建文件2_deploy_contracts.js:, {4 _6 I! U3 c$ z7 q. _! |2 J4 _
var Project1 = artifacts.require("Project1");
module.exports = function(deployer) {. E0 w+ n9 e9 r# {6 {7 L! d5 T
deployer.deploy(Project1);
};
之后执行:) z, j; V1 c# B3 u+ }
truffle compile4 r$ P+ I3 p: v% O% n/ D
truffle migrate
如果你的智能合约没有问题的话,现在你的以太坊智能合约应该已经部署到你用来测试的ganache中去了。: `5 W& w( a8 c$ M0 T- o
这里可能遇到的问题是:默认的truffle生成的项目,测试用的ganache的地址和端口会被设置成http://localhost:7545,而实际上执行ganache-cli之后的服务端口是http://localhost:8545,需要在truffle.js中修改一下:
module.exports = {
// See 6 O1 \! W# v4 U+ R+ ?" `( `
// for more about customizing your Truffle configuration!$ t1 ^/ W& t1 P- S E
networks: {
development: {
host: “127.0.0.1”,
port: 7545, //改成8545
network_id: “*” // Match any network id$ B5 G, K7 b1 g# t; v
}
}
};+ r7 [2 s4 P+ L* o) i+ G
8、编写前端的js代码跟以太坊交互
通常需要如下的辅助js库:
2 I! ], P- S W5 E; a% A" _
在此基础上,编辑你自己业务逻辑的js,通常命名为app.js,app.js的框架如下:0 g8 s$ K/ h# A* X3 F
App = {
web3Provider: null,$ N7 O+ C8 y" V' b7 r. U5 y
contracts: {},9 F2 G G9 }6 ?' s1 [
init: function() { [+ H5 V, o2 i; G
//初始化你自己的页面、变量等6 @' F6 C2 Z; ?3 O2 ]
return App.initWeb3();9 F g: N) T7 c! r0 E9 D6 s
},
initWeb3: function() {
/*
* 初始化web3:+ o$ s1 j6 T/ W v6 l$ _
*/- w/ h6 {+ V; T) m) R! b( ]
if (typeof web3 !== ‘undefined’){" E2 u' q" Q0 ?( b; `9 u
//如果你的浏览器安装了MetaMask的钱包插件,那么插件会赋值web3.currentProvider% ]: p+ g S! a
App.web3Provider = web3.currentProvider;5 a7 Y( y! K& m& [5 g" W
}# ~! n5 f; [" Y7 M
else; b2 D: q( W9 L: G% @
{
//如果没装插件,那么创建一个基于Http的provider,这里用到的就是用ganache-cli启动所提供的rpc服务,因为ganache-cli启动的时候绑定的是localhost,所以测试所使用的浏览器也要在本机。(如何让ganache-cli绑定其他地址我还没找到)
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);2 u1 C$ @5 v' i; e
}" h1 q; n6 g6 R; n
web3 = new Web3(App.web3Provider);9 U5 D2 q2 i6 y9 g
return App.initContract();4 {# A7 ^6 t/ C/ ]( L4 Y
},$ z5 m. ?& _ p& E
initContract: function() {7 p& Y4 ]3 x7 c" J) K
/*
* 初始化智能合约,实际上就是为你的智能合约创建一个对应的js对象,方便后续调用
*/% u$ }% @1 s: \0 Y
//通常的做法是使用你的智能合约编译之后生成的abi的json文件,该文件在用truffle compile之后,生成在build/contracts/目录下,因为我用了一个Division.sol,所以用Division.json,你可以根据你的实际情况来写。
$.getJSON(‘Division.json‘, function(data) {
var DivisionArtifact = data;! Q/ k( A8 {6 F1 R- z: N
App.contracts.Division = TruffleContract(DivisionArtifact); [/ H# k2 I/ |# }$ t! Z% d, V: L- D
App.contracts.Division.setProvider(App.web3Provider);8 M6 q+ P5 ^4 y$ S. v& F/ D8 c
//用智能合约中的信息来更新你的web应用,App.refreshPlots()是我例子中获取智能合约中信息并更新UI的函数6 t- Y) g7 m- d' S& n" i* X6 [
return App.refreshPlots();
});; Q8 U8 L0 l" ?! g E0 G1 u$ Y4 V
return App.bindEvents();- r/ E8 t; F' }) J! X
},/ {# J! { U {% q1 y# O+ {7 Q
bindEvents: function() {
/*! f% M/ d( Z* s
* 事件绑定,这个可以根据你的UI来设置,例子中就是绑定一个button的点击操作/ a( a% q+ M0 b0 b# Q
*/! s+ c$ ~- S; s) f v D% O
$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);. E6 y# C- C* f6 }
},2 V( j6 U. {. h' R, v/ `
refreshPlots: function(plots, account) {
/*
* 这个函数就是上面initContract中调用的用智能合约更新页面( ]# B/ w2 g! L. ~2 d* x
*/9 s: q6 }) e2 M! K( ^5 a3 X7 Z- T
//继续使用division这个智能合约做例子+ V4 z9 ~5 E; R- T0 n; j
var divisionInstance;
App.contracts.Division.deployed().then(function(instance){0 X/ } L" [# ^
divisionInstance = instance;# o) ~, J" Z9 \! p; N( H' K
//getGenPlots是Division的这个智能合约的一个查询函数(不需要gas),需要3个参数
return divisionInstance.getGenPlots(0,0,2);$ n* H% q$ l5 p; {& K- z
}).then(function(results){
//注意:这个地方有点意思,我原先理解也有问题,后来打印输出才搞明白 h8 \6 w: ^1 C
//智能合约返回的多个结果变量在这里就是一个results数组( _" ]: _- d' ~3 _7 Z4 C$ t0 c8 t
//数组的每个成员就是智能合约返回的每个结果变量
//以getGenPlots为例,Division.json中定义如下:
/*"name": "getGenPlots",
"outputs": [/ ~9 h* c* B3 ]& @3 x# c
{( H% I( a; C# V, y. y! l8 h
"name": "",. G4 I- M# r" O8 l
"type": "uint64[]"
},9 u1 p t$ m5 f/ K& v7 X6 t
{
"name": "",
"type": "address[]"
},9 m/ \0 }3 u; x' D" ^& E& N2 {( _
{
"name": "",
"type": "uint256[]"7 ^2 t* D% t3 x7 Q) |( {
},
{
"name": "",, b' K- J- k6 O; v6 k* d- j5 ]0 E
"type": "uint8[]"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"0 b; V2 `4 F) v. } z0 `
*/
//那么:results[0]是uint64[]
// results[1]是address[]...0 |2 L) s0 g2 C" |: r4 d2 s
console.log(results[0].length);+ r- @8 M9 V9 Z3 I8 r1 S
}).catch(function(err){
console.log(err.message);4 J8 U; o! N" \
});
},
handlePlot: function(event) {7 o/ ], C; S Z" I. k* q2 t
/*! L% W: [4 W7 t$ Q
* 这个函数就是上面bindEvents中调用的响应函数,演示要花eth的函数调用
*/4 S- y& T3 `: a$ U3 h
event.preventDefault();
//从event中获取参数,这是jquery的东西,跟web3无关
var plotId = parseInt($(event.target).data('id'));
var divisionInstance;5 Z! C. X. t& B
//获取以太坊帐号信息* Q0 C# G: Q V7 [* `
web3.eth.getAccounts(function(error,accounts){
if(error)
{
console.log(error);
}7 v+ E. |. S# u$ N- `. K/ D
//我随便取帐号列表里的第3个帐号。
//因为我们连的是ganache-cli的rpc模拟服务,
//其中给我们预制了几个有eth的帐号( G6 Q0 [. |2 I- A
//如果安装了MetaMask插件,应该获得的就是MetaMask里的帐号# h4 t. b$ z% y" G2 X: R* u" N+ V& J
var account = accounts[2];
App.contracts.Division.deployed().then(function(instance){8 p0 C& g# N; o X2 m
divisionInstance = instance;
//调用智能合约的buyPlot函数,该函数需要2个参数,
//后面的{}中的内容跟发起以太坊交易的时候所带的默认值。
//from: 使用哪个以太坊帐号+ j% T7 e1 s: ~' G: ?
//value: 要使用的eth数量,以wei为单位(1eth=10^18wei)
//gas: 矿工费,以wei为单位
return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});
}).then(function(result){
//返回结果后重新更新UI$ i+ u% V2 W& j5 o* x# {
return App.refreshPlots();
}).catch(function(error){
console.log(error.message);. c6 e9 r% V5 ^! s% A, D1 q: w- o: }
});
});
}
};
测试你的基于Web的DApp是否正常,可以使用nodejs里面提供的lite-server模块来当简单的webserver来用。
安装lite-server,在你的truffle项目目录下,执行:
npm install lite-server3 Z2 H1 `. i* W- Q9 Z7 X! w
安装完之后会在项目目录下声称node_modules目录,lite-server以及依赖的模块都在该目录下了。
要运行lite-server,还需要编写项目目录下的package.json文件: x/ r! i6 J( |- `1 m9 U
{
"name": "项目名称",
"version": "1.0.0",
"description": "",
"main": "truffle.js",
"directories": {
"test": "test"
},/ Y" X3 m4 H; e
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1"4 @+ n3 S+ ~, z. k( \6 K( X0 @
},
"author": "",8 c+ ?+ a K+ B; _8 P8 S) W, N
"license": "ISC",
"devDependencies": {$ N) c( a' R( H& E6 i6 d |
"lite-server": "^2.3.0"+ T( j7 g3 d0 Y6 f
},7 H; g# | p* V6 ?( L' M' u$ m
"dependencies": {& c9 @/ `6 W# _/ y; b/ `7 L5 ]
"liteserver": "^0.3.0"
}: X7 u w6 Y1 J, R4 K7 w1 z0 R0 E
}2 O7 x: q8 U+ \' O2 j! S
还需要编写bs-config.json来配置一下lite-server" W9 Y0 K1 K. @4 W n- t
{9 R& `5 t) r+ u3 y( q x; {
"server": { X0 H- g' H. b+ ^/ j. K4 J
"baseDir": ["./src", "./build/contracts"]. ^: R- l4 f% L' [3 ~5 T; v
}6 j3 X& a3 K( x8 I5 e; C/ @' q
}0 l8 {8 J2 g+ F& O+ ~9 b: v$ S, ^
baseDir是用来设置lite-server所提供的web服务的文件路径的。这个设置表明你可以把你上面写的app.js,依赖的各种js放到./src目录下,然后写index.html,把app.js等集成进去,就大功告成了。* {+ v- `7 `% [
启动lite-server,执行:
npm run dev3 Y2 |: M) p* A" v4 K* t0 K! n+ }
不仅启动了lite-server,而且会启动一个浏览器去打开页面。3 ?5 v. u% P. C$ [
本文的目的是为了澄清一下写DApp的各项工具之间的架构关系,帮助技术人员更快的理解和实现自己的项目。
具体的例子网上多如牛毛,就不去写业务的具体代码了。
成为第一个吐槽的人