最近要找个H5的前端写个简单的DApp,聊过几个H5的工程师,都被跟以太坊交互的部分吓住了。虽然网上有N多的教程,但是对于H5工程师来说,还是有些困难。分析其原因,在于不了解ganache-cli(原来叫testrpc)/web3/以太坊节点/metamask之间的架构关系。
梳理一下架构关系:
web3.js与以太坊通信是通过rpc的方式实现的。
以太坊节点本来提供了rpc的访问方式,但是因为以太坊节点的地址不确定,并且DApp需要访问钱包,所以用web3.js直接访问以太坊节点的rpc服务是不现实的。
ganache-cli模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子里经常说的http://localhost:7545或者http://localhost:8545)。同时在其中内置了M个以太坊帐号,用于测试。
MetaMask是一个以太坊的网络钱包插件,它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件,所以解决了DApp中的支付问题。所以现在的DApp都依赖它。
有一个以太坊教程,是在线学习的,大家可以去看看,如果自己本机上搞,开发DApp的基本过程都是一样的如下:
1、安装NodeJS
2、安装truffle:一个开发DApp的开发框架
nmp install -g truffle
3、安装Ganache(原来用testrpc):在内存中模拟以太坊运行并对外提供rpc服务。
npm install -g ganache-cli
4、运行ganache-cli
ganache-cli
5、生成一个DApp的项目
mkdir project1
truffle init
如果想用truffle中的某个例子,可以用
truffle unbox pet-shop
“pet-shop”是例子名称
6、编写智能合约
具体如何用solidity编写智能合约可参考各种文章,这里不再重复。
编写好的智能合约的Project1.sol文件放到contracts目录下
7、编译和部署智能合约
在migrations目录下创建文件2_deploy_contracts.js:
var Project1 = artifacts.require("Project1");
module.exports = function(deployer) {
deployer.deploy(Project1);
};
之后执行:
truffle compile
truffle migrate
如果你的智能合约没有问题的话,现在你的以太坊智能合约应该已经部署到你用来测试的ganache中去了。
这里可能遇到的问题是:默认的truffle生成的项目,测试用的ganache的地址和端口会被设置成http://localhost:7545,而实际上执行ganache-cli之后的服务端口是http://localhost:8545,需要在truffle.js中修改一下:
module.exports = {
// See <http://truffleframework.com/docs/advanced/configuration>
// for more about customizing your Truffle configuration!
networks: {
development: {
host: “127.0.0.1”,
port: 7545, //改成8545
network_id: “*” // Match any network id
}
}
};
8、编写前端的js代码跟以太坊交互
通常需要如下的辅助js库:
<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”js/jquery.min.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”></script>
<script src=”js/web3.min.js”></script>
<script src=”js/truffle-contract.js”></script>
在此基础上,编辑你自己业务逻辑的js,通常命名为app.js,app.js的框架如下:
App = {
web3Provider: null,
contracts: {},
init: function() {
//初始化你自己的页面、变量等
return App.initWeb3();
},
initWeb3: function() {
/*
* 初始化web3:
*/
if (typeof web3 !== ‘undefined’){
//如果你的浏览器安装了MetaMask的钱包插件,那么插件会赋值web3.currentProvider
App.web3Provider = web3.currentProvider;
}
else
{
//如果没装插件,那么创建一个基于Http的provider,这里用到的就是用ganache-cli启动所提供的rpc服务,因为ganache-cli启动的时候绑定的是localhost,所以测试所使用的浏览器也要在本机。(如何让ganache-cli绑定其他地址我还没找到)
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);
}
web3 = new Web3(App.web3Provider);
return App.initContract();
},
initContract: function() {
/*
* 初始化智能合约,实际上就是为你的智能合约创建一个对应的js对象,方便后续调用
*/
//通常的做法是使用你的智能合约编译之后生成的abi的json文件,该文件在用truffle compile之后,生成在build/contracts/目录下,因为我用了一个Division.sol,所以用Division.json,你可以根据你的实际情况来写。
$.getJSON(‘Division.json‘, function(data) {
var DivisionArtifact = data;
App.contracts.Division = TruffleContract(DivisionArtifact);
App.contracts.Division.setProvider(App.web3Provider);
//用智能合约中的信息来更新你的web应用,App.refreshPlots()是我例子中获取智能合约中信息并更新UI的函数
return App.refreshPlots();
});
return App.bindEvents();
},
bindEvents: function() {
/*
* 事件绑定,这个可以根据你的UI来设置,例子中就是绑定一个button的点击操作
*/
$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);
},
refreshPlots: function(plots, account) {
/*
* 这个函数就是上面initContract中调用的用智能合约更新页面
*/
//继续使用division这个智能合约做例子
var divisionInstance;
App.contracts.Division.deployed().then(function(instance){
divisionInstance = instance;
//getGenPlots是Division的这个智能合约的一个查询函数(不需要gas),需要3个参数
return divisionInstance.getGenPlots(0,0,2);
}).then(function(results){
//注意:这个地方有点意思,我原先理解也有问题,后来打印输出才搞明白
//智能合约返回的多个结果变量在这里就是一个results数组
//数组的每个成员就是智能合约返回的每个结果变量
//以getGenPlots为例,Division.json中定义如下:
/*"name": "getGenPlots",
"outputs": [
{
"name": "",
"type": "uint64[]"
},
{
"name": "",
"type": "address[]"
},
{
"name": "",
"type": "uint256[]"
},
{
"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);
});
},
handlePlot: function(event) {
/*
* 这个函数就是上面bindEvents中调用的响应函数,演示要花eth的函数调用
*/
event.preventDefault();
//从event中获取参数,这是jquery的东西,跟web3无关
var plotId = parseInt($(event.target).data('id'));
var divisionInstance;
//获取以太坊帐号信息
web3.eth.getAccounts(function(error,accounts){
if(error)
{
console.log(error);
}
//我随便取帐号列表里的第3个帐号。
//因为我们连的是ganache-cli的rpc模拟服务,
//其中给我们预制了几个有eth的帐号
//如果安装了MetaMask插件,应该获得的就是MetaMask里的帐号
var account = accounts[2];
App.contracts.Division.deployed().then(function(instance){
divisionInstance = instance;
//调用智能合约的buyPlot函数,该函数需要2个参数,
//后面的{}中的内容跟发起以太坊交易的时候所带的默认值。
//from: 使用哪个以太坊帐号
//value: 要使用的eth数量,以wei为单位(1eth=10^18wei)
//gas: 矿工费,以wei为单位
return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});
}).then(function(result){
//返回结果后重新更新UI
return App.refreshPlots();
}).catch(function(error){
console.log(error.message);
});
});
}
};
测试你的基于Web的DApp是否正常,可以使用nodejs里面提供的lite-server模块来当简单的webserver来用。
安装lite-server,在你的truffle项目目录下,执行:
npm install lite-server
安装完之后会在项目目录下声称node_modules目录,lite-server以及依赖的模块都在该目录下了。
要运行lite-server,还需要编写项目目录下的package.json文件:
{
"name": "项目名称",
"version": "1.0.0",
"description": "",
"main": "truffle.js",
"directories": {
"test": "test"
},
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.3.0"
},
"dependencies": {
"liteserver": "^0.3.0"
}
}
还需要编写bs-config.json来配置一下lite-server
{
"server": {
"baseDir": ["./src", "./build/contracts"]
}
}
baseDir是用来设置lite-server所提供的web服务的文件路径的。这个设置表明你可以把你上面写的app.js,依赖的各种js放到./src目录下,然后写index.html,把app.js等集成进去,就大功告成了。
启动lite-server,执行:
npm run dev
不仅启动了lite-server,而且会启动一个浏览器去打开页面。
本文的目的是为了澄清一下写DApp的各项工具之间的架构关系,帮助技术人员更快的理解和实现自己的项目。
具体的例子网上多如牛毛,就不去写业务的具体代码了。
原文发表在 fastkernel.com/?p=72
分享些教程:
- 以太坊入门教程,主要介绍智能合约与dapp应用开发,适合入门。
- 以太坊开发进阶教程,主要是介绍使用node.js、mongodb、区块链、ipfs实现去中心化电商DApp实战,适合进阶。
- java以太坊开发教程,主要是针对java和android程序员进行区块链以太坊开发的web3j详解。
- python以太坊,主要是针对python工程师使用web3.py进行区块链以太坊开发的详解。
- php以太坊,主要是介绍使用php进行智能合约开发交互,进行账号创建、交易、转账、代币开发以及过滤器和交易等内容。
- C#以太坊,主要讲解如何使用C#开发基于.Net的以太坊应用,包括账户管理、状态与交易、智能合约开发与交互、过滤器和交易等。
- php比特币开发教程,本课程面向初学者,内容即涵盖比特币的核心概念,例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等,同时也详细讲解如何在Php代码中集成比特币支持功能,例如创建地址、管理钱包、构造裸交易等,是Php工程师不可多得的比特币开发学习课程。
- java比特币开发教程,本课程面向初学者,内容即涵盖比特币的核心概念,例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等,同时也详细讲解如何在Java代码中集成比特币支持功能,例如创建地址、管理钱包、构造裸交易等,是Java工程师不可多得的比特币开发学习课程。
- EOS入门教程,本课程帮助你快速入门EOS区块链去中心化应用的开发,内容涵盖EOS工具链、账户与钱包、发行代币、智能合约开发与部署、使用代码与智能合约交互等核心知识点,最后综合运用各知识点完成一个便签DApp的开发。