以太坊智能合約的DApp怎么實現(xiàn)

本篇內(nèi)容介紹了“以太坊智能合約的DApp怎么實現(xiàn)”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

梳理一下架構(gòu)關(guān)系：

web3.js與以太坊通信是通過rpc的方式實現(xiàn)的。

以太坊節(jié)點本來提供了rpc的訪問方式，但是因為以太坊節(jié)點的地址不確定，并且DApp需要訪問錢包，所以用web3.js直接訪問以太坊節(jié)點的rpc服務(wù)是不現(xiàn)實的。

ganache-cli模擬了一個以太坊的測試節(jié)點并提供對外的rpc訪問方式（就是例子里經(jīng)常說的http://localhost:7545或者http://localhost:8545）。同時在其中內(nèi)置了M個以太坊帳號，用于測試。

MetaMask是一個以太坊的網(wǎng)絡(luò)錢包插件，它也提供了web3的訪問方式。而且可以通過這個插件指定后面的以太坊節(jié)點是什么。因為MetaMask是個錢包插件，所以解決了DApp中的支付問題。所以現(xiàn)在的DApp都依賴它。

有一個以太坊教程，是在線學(xué)習(xí)的，大家可以去看看，如果自己本機上搞，開發(fā)DApp的基本過程都是一樣的如下：

1、安裝NodeJS

2、安裝truffle:一個開發(fā)DApp的開發(fā)框架

nmp install -g truffle

3、安裝Ganache（原來用testrpc）:在內(nèi)存中模擬以太坊運行并對外提供rpc服務(wù)。

npm install -g ganache-cli

4、運行g(shù)anache-cli

ganache-cli

5、生成一個DApp的項目

mkdir project1

truffle init

如果想用truffle中的某個例子，可以用

truffle unbox pet-shop

“pet-shop”是例子名稱

6、編寫智能合約

具體如何用solidity編寫智能合約可參考各種文章，這里不再重復(fù)。

編寫好的智能合約的Project1.sol文件放到contracts目錄下

7、編譯和部署智能合約

在migrations目錄下創(chuàng)建文件2_deploy_contracts.js：

var Project1 = artifacts.require("Project1");

module.exports = function(deployer) {
  deployer.deploy(Project1);
};

之后執(zhí)行：

truffle compile

truffle migrate

如果你的智能合約沒有問題的話，現(xiàn)在你的以太坊智能合約應(yīng)該已經(jīng)部署到你用來測試的ganache中去了。

這里可能遇到的問題是：默認的truffle生成的項目，測試用的ganache的地址和端口會被設(shè)置成http://localhost:7545，而實際上執(zhí)行g(shù)anache-cli之后的服務(wù)端口是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>

在此基礎(chǔ)上，編輯你自己業(yè)務(wù)邏輯的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
{

//如果沒裝插件，那么創(chuàng)建一個基于Http的provider，這里用到的就是用ganache-cli啟動所提供的rpc服務(wù)，因為ganache-cli啟動的時候綁定的是localhost，所以測試所使用的瀏覽器也要在本機。（如何讓ganache-cli綁定其他地址我還沒找到）
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);

}
web3 = new Web3(App.web3Provider);

return App.initContract();
},

initContract: function() {
/*
* 初始化智能合約，實際上就是為你的智能合約創(chuàng)建一個對應(yīng)的js對象，方便后續(xù)調(diào)用
*/

//通常的做法是使用你的智能合約編譯之后生成的abi的json文件，該文件在用truffle compile之后，生成在build/contracts/目錄下，因為我用了一個Division.sol，所以用Division.json，你可以根據(jù)你的實際情況來寫。
$.getJSON(‘Division.json‘, function(data) {
var DivisionArtifact = data;
App.contracts.Division = TruffleContract(DivisionArtifact);
App.contracts.Division.setProvider(App.web3Provider);
//用智能合約中的信息來更新你的web應(yīng)用，App.refreshPlots()是我例子中獲取智能合約中信息并更新UI的函數(shù)

return App.refreshPlots();
});

return App.bindEvents();
},

bindEvents: function() {

/*
* 事件綁定，這個可以根據(jù)你的UI來設(shè)置，例子中就是綁定一個button的點擊操作
*/

$(document).on(‘click’, ‘.btn-adopt’, App.handlePlot);
},

refreshPlots: function(plots, account) {
/*
* 這個函數(shù)就是上面initContract中調(diào)用的用智能合約更新頁面
*/

        //繼續(xù)使用division這個智能合約做例子
         var divisionInstance;
         App.contracts.Division.deployed().then(function(instance){
                 divisionInstance = instance;
                 //getGenPlots是Division的這個智能合約的一個查詢函數(shù)（不需要gas)，需要3個參數(shù)
                 return divisionInstance.getGenPlots(0,0,2);
         }).then(function(results){
                 //注意：這個地方有點意思，我原先理解也有問題，后來打印輸出才搞明白
                 //智能合約返回的多個結(jié)果變量在這里就是一個results數(shù)組
                 //數(shù)組的每個成員就是智能合約返回的每個結(jié)果變量
                 //以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) {

/*
 * 這個函數(shù)就是上面bindEvents中調(diào)用的響應(yīng)函數(shù),演示要花eth的函數(shù)調(diào)用
 */
    event.preventDefault();
    //從event中獲取參數(shù)，這是jquery的東西，跟web3無關(guān)
    var plotId = parseInt($(event.target).data('id'));

    var divisionInstance;
     //獲取以太坊帳號信息
     web3.eth.getAccounts(function(error,accounts){
         if(error)
         {
             console.log(error);
         }
         //我隨便取帳號列表里的第3個帳號。
         //因為我們連的是ganache-cli的rpc模擬服務(wù)，
         //其中給我們預(yù)制了幾個有eth的帳號
         //如果安裝了MetaMask插件，應(yīng)該獲得的就是MetaMask里的帳號
         var account = accounts[2];
         App.contracts.Division.deployed().then(function(instance){
             divisionInstance = instance;
             //調(diào)用智能合約的buyPlot函數(shù)，該函數(shù)需要2個參數(shù)，
             //后面的{}中的內(nèi)容跟發(fā)起以太坊交易的時候所帶的默認值。
             //from: 使用哪個以太坊帳號
             //value: 要使用的eth數(shù)量，以wei為單位（1eth=10^18wei)
             //gas: 礦工費，以wei為單位
             return divisionInstance.buyPlot(plotId, 3, {from: account, value: 100000000000000000, gas:6000000});
        }).then(function(result){
            //返回結(jié)果后重新更新UI
            return App.refreshPlots();
        }).catch(function(error){
            console.log(error.message);
        });
     });
 }

};

測試你的基于Web的DApp是否正常，可以使用nodejs里面提供的lite-server模塊來當簡單的webserver來用。

安裝lite-server，在你的truffle項目目錄下，執(zhí)行：

npm install lite-server

安裝完之后會在項目目錄下聲稱node_modules目錄，lite-server以及依賴的模塊都在該目錄下了。

要運行l(wèi)ite-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是用來設(shè)置lite-server所提供的web服務(wù)的文件路徑的。這個設(shè)置表明你可以把你上面寫的app.js，依賴的各種js放到./src目錄下，然后寫index.html，把app.js等集成進去，就大功告成了。

啟動lite-server,執(zhí)行：

npm run dev

不僅啟動了lite-server，而且會啟動一個瀏覽器去打開頁面。

“以太坊智能合約的DApp怎么實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！