麻吉卡的部落格

區塊鏈淺談9 - 實作Meteor架設Ethereum私有鏈DAPP

2017/10/26 區塊鏈系列 BlockChain

DAPP與Meteor

DAPP

去中心化應用程式(Decentralized App)，簡稱DAPP，是基於區塊鏈智能合約所做出的應用程序。DAPP建立於智能合約之上，讓智能合約有良好的使用者互動介面。常見的DAPP是用Javascript連結網頁與智能合約。DAPP與一般的網站不同，它需要一個可以進入區塊鏈的節點，實現應用程序在區塊鏈所做的交易與觸發智能合約。

Meteor

Meteor是一個非常適合用於測試開發的網頁平台，其構建於Node.js之上，一切前端與後端皆以Javascript去編寫，最重要的一點是它是一個即時變動的網站，任何修改皆不需要重新部署就會反映在頁面上。

利用Meteor架設Ethereum DAPP

架設Metoer環境

首先去官網https://www.meteor.com/install下載安裝Metoer，完成後開啟CommandLine並進入你想要建立Metoer的資料夾，下指令

# create後面的名字可以自己取，之後自己代換
meteor create dapp

他會自己下載相關元件與工具，並幫你生成預設檔案

這樣我們一個簡單的網站已經做好了，再來加入乙太坊web3的package

cd dapp
meteor add ethereum::web3

如上圖代表web3添加成功，我們另外再加上兩個Meteor實用的package:template-var跟persistent-minimongo

meteor add frozeman:template-var
meteor add frozeman:persistent-minimongo

template-var是簡單的範本套用，minimongo是客戶端的儲存，到這裡我們以後會用到的Package都裝好了。輸入指令meteor測試，出現如下圖代表成功

進入http://localhost:3000查看網頁

這是Meteor的預設頁面，點選”Click me”數字就會加1

Meteor串接乙太坊私有鏈

首先在dapp/client裡新增一個lib資料夾，並新增一個lib.js，複製以下程式碼貼上

#your_ip替換成你的乙太坊私有鏈節點電腦的ip
if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider);
} else {
  // set the provider you want from Web3.providers
  web3 = new Web3(new Web3.providers.HttpProvider("http://your_ip:8545"));
}

這邊新建並設定Web3物件的HttpProvider，為Ethereum節點的rpc端口。

智能合約功能界接

上一篇我們有寫一個智能合約ValueIO.sol，以下就利用Meteor來自己做一個ValueIO.sol寫值與讀值的介面。

首先修改dapp/client裡面的main.js，複製以下代碼貼上

# main.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';

ContractAddress = "0xa8f0EA3E839748bb8042a93BF9F0762eb8B98660"
myContract = web3.eth.contract([{"constant":true,"inputs":[],"name":"Output","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"x","type":"uint256"}],"name":"Input","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}]);
Contract = myContract.at(ContractAddress); 

Template.demo1.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
});

Template.demo1.helpers({
  counter() {
    var template = Template.instance();
    Contract.Output(function(error,result){if(!error)template.counter.set(result);});
    return template.counter.get();
  },
});

Template.demo1.events({
  'click button.setvalue'(event, instance) {
    var x = document.getElementById("value_x");
    Contract.Input(x.elements[0].value,function(error,result){});
  },
});

前三行是定義必要的功能，從第四行開始解釋

ContractAddress = “0xa8f0EA3E839748bb8042a93BF9F0762eb8B98660”

這邊的Adress為智能合約ValueIO.sol部署在私有鏈上的地址，可以查看私有鏈的console介面，”contract=XXXXXX”後面的就是地址

myContract = web3.eth.contract(…..)

定義智能合約的功能Interface。裡面的內容可以在Remix編輯器裡取得，回到Remix編輯器，並在右上大欄選取”Compile”，點選”detail”，開啟以下視窗

往下滾動，直到”WEB3DEPLOY”方塊出現

複製第一行貼上並把等號前面改成myContract即可

Contract = myContract. at(ContractAddress)

新增一個物件，用ContractAddress地址的智能合約當觸發對象，介面為剛剛定義的myContract

Template.demo1.onCreated(…..)

demo1模板會在main.html定義，OnCreated是在demo1生成時會執行，這邊把變數counter初始為0

Template.demo1.helpers(…..)

這裡定義會及時更動的變數counter，裡面最重要的是

Contract.Output(function(error,result){
    if(!error)
    template.counter.set(result);
});

這是web3如何觸發智能合約的方法，因為之前已經建構了物件，可以直接拿來使用。通用範例如下

Contract.yourFunction(function(error,result){
    # callback funciton
    if(!error){
        # 執行成功做...
    }else{
        # 執行失敗做...
    }
});

Template.demo1.events(…..)

這邊定義demo1的事件，跟上面一樣，在裡面觸發智能合約的Input寫值，寫入智能合約的value與模板變數counter裡面。

客製化智能合約網頁介面

資料夾dapp/client中的main.html，複製以下代碼貼上，請把裡面的\{\{\}\}換成{{}}

# main.html
<head>
  <title>dapp</title>
</head>

<body>
  <h1>Demo1</h1>
  \{\{> demo1\}\}
</body>

<template name="demo1">
  <form id="value_x">
	Value x : <input type="text" name="v_x"><br>
  </form>
  <button class="setvalue">Set Value of x</button>
  <p>Value of x is \{\{counter\}\} .</p>
</template>

說明

  • {{> demo1}}會載入 {template name = “demo1”}這塊tag的html程式碼
  • template name會跟main.js的template.XXX….連結，必須名字一樣

測試

進入dapp資料夾並執行指令meteor，再進入http://localhost:3000，可以看到如下圖

因為我們要觸發智能合約的功能，需要發起交易並給手續費，MetaMask必須要是開啟並登入的，輸入隨意數字後，按下”set value of x”，會跳出MetaMask Notification

按下”Submit”後，並等待生成幾個區塊之後

就可以看到網頁上的數字變化了。

數字修改成了394，測試成功

總結

這篇利用Meteor + Metamask + Ethereum成功做出了一個很簡易的DAPP，除了MetaMask之外的功能都可以依照個人需求去做客製化，當然如果想要實現不需要MetaMask也能實行的DAPP也是可以，但更複雜了許多，可能之後會再寫一篇。





Search

    Post Directory