您当前的位置:首页 > 学无止境 > 区块链 区块链

DAPP基本的开发流程

caster2019-08-01 21:14:52 区块链 人已围观

简介一、梳理一下架构关系理清ganache-cli(原来叫testrpc)、web3、以太坊节点、metamask之间的架构关系。ganache-cli:模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子

一、梳理一下架构关系

理清ganache-cli(原来叫testrpc)、web3、以太坊节点、metamask之间的架构关系。

ganache-cli:模拟了一个以太坊的测试节点并提供对外的rpc访问方式(就是例子里经常说的http://localhost:7545或者http://localhost:8545)。同时在其中内置了M个以太坊帐号,用于测试。

MetaMask:一个以太坊的网络钱包插件,它也提供了web3的访问方式。而且可以通过这个插件指定后面的以太坊节点是什么。因为MetaMask是个钱包插件,所以解决了DApp中的支付问题。所以现在的DApp都依赖它。

web3.js与以太坊通信是通过rpc的方式实现的。

web3和truffle-console的参考文档:很有用,帮助理解JavaScript

https://github.com/ethereum/wiki/wiki/JavaScript-API#web3ethaccounts

https://www.npmjs.com/package/truffle-contract





 

EVM是用来执行字节码的,在local blockchain copy里面有三棵MPT树:

交易树:最底层是交易;

状态树:包含账户,账户允许有空间和代码(外部账户没有代码,有代码的是合约账户.);

收据树:保存的是交易的收据

合约部署后会创建一个合约账户,合约账户里保存着智能合约的可执行字节码(编译之后的,在EVM里执行),并且有存储空间。因此智能合约是存储在local blockchain copy里面的。

 

二、开发流程

开发DApp的基本过程都是一样的如下:

1、安装NodeJS:在官网下载安装即可,自带npm

2、安装truffle:一个开发DApp的开发框架

nmp install -g truffle

3、安装Ganache(原来用testrpc):在内存中模拟以太坊运行并对外提供rpc服务。

npm install -g ganache-cli

4、运行ganache-cli:在命令行中输入以下命令即可开启以太坊客户端

ganache-cli

5、生成一个DApp的项目:项目在新建的文件夹project1中

mkdir project1
 
truffle init

如果想用truffle中的某个例子,就输入命令unbox下载项目,“pet-shop”是例子名称,建议基于现有的例子写自己的DAPP

truffle unbox pet-shop

6、编写智能合约

具体如何用solidity编写智能合约可参考各种文章,这里不再重复。

可以参考 https://cryptozombies.io/  编写智能合约入门在线教程

编写好的智能合约的 Project1.sol 文件放到contracts目录下

7、编译和部署智能合约

在migrations目录下创建文件  2_deploy_contracts.js:

var Project1 = artifacts.require("Project1");
 
module.exports = function(deployer) {
  deployer.deploy(Project1);
};

之后在命令行中cd到contracts目录下,进行合约编译和部署:

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 Bootstraps 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
{
 
//如果没装插件,那么创建一个基于Httpprovider,这里用到的就是用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对象,方便后续调用
*/
 
//通常的做法是使用你的智能合约编译之后生成的abijson文件,该文件在用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;
                 //getGenPlotsDivision的这个智能合约的一个查询函数(不需要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-clirpc模拟服务,
         //其中给我们预制了几个有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);
        });
     });
 }
 
};

9. 测试你的基于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等集成进去,就大功告成了。

10. 启动lite-server

npm run dev

上述语句执行了package.json里面的scripts的dev命令,就是启动了lite-server,而且会启动一个浏览器去打开页面。

 

本文的目的是为了澄清一下写DApp的各项工具之间的架构关系,帮助技术人员更快的理解和实现自己的项目。

文章评论

打赏

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~