以太坊Truffle框架構建Dapp

1.安裝環境

通過node安裝truffle,推薦在ubuntu 14.04下進行開發,window下可能會遇到各種問題。

$ npm install -g truffle  

我的node版本是

npm版本是

下載之後輸入

$ truffle -v  我的版本是:

2.開始構建專案

首先準備一個目錄存放專案

$ mkdir  “你的目錄名”

$cd “你的目錄名”       —進入目錄

接下來我們需要使用truffle框架來初始化一個專案

$truffle unbox webpack —構建一個基於webpack的專案

這裡要注意的是truffle為了增加開發的靈活性,不再初始化專案成web應用,如果你使用的是我這個版本,使用原來的truffle init指令生成的專案會缺少web相關檔案,對於新手而言,為了更直觀的看到開發效果建議選擇webpack。

執行完上面的步驟,我們的專案就已經構建完成了

這裡系統提示了相關指令,後面的步驟中我們也會用到。

3.專案解析

我的專案放在剛剛建立的zhao目錄下,你的目錄的名字是你先前取的。

  • app/   —這也就是我們的專案的入口檔案了,裡面包括了用於合約互動的javascript,和用於顯示前端的css等靜態檔案,合約互動後面會具體細說。
  • contracts/  —看名字也知道是用來放合約程式碼的,預設會有三個合約,其中有一個叫metacoin的合約。
  • migrations/  — 合約部署配置資訊
  • node_modules/ —專案需要的相關模組
  • test/ —測試檔案,暫時用不到這個

4.專案部署

接下來我們開始正式部署我們的應用

$truffle migrate  —這個指令會編譯並部署合約

可以看到報錯了,這是因為我們還沒有一個可以被部署的平臺,其他老一點的教程裡可能會要你用testrpc,但是這裡我們只需要用truffle內建的測試平臺就行了。

$truffle develop

輸入指令後可以看到在終端執行了一個可以被部署的服務網路,預設埠號是9545,和testrpc一樣會自動生成地址以供測試,接下來另開一個終端,cd進入專案目錄,再次執行

$truffle migrate

發現還是連線不上,這是為什麼呢?

原因是專案預設配置連線網路埠是7545,我們開啟truffle.js修改配置即可

port埠改成9545,你應該還記得我們的測試服務就在9545,儲存再次在終端輸入

$truffle migrate

這次我們終於成功部署了合約。

5.專案開發

我們可以先試一試執行初始準備好了的專案,輸入指令

$npm run dev

開啟連結 http://localhost:8080,可以看到

你可能會發現在You have META這裡我的沒有顯示餘額,為什麼沒有呢?f12開啟控制檯

會發現有這麼一段話,這是說已經使用瀏覽器內建的web3介面,當你下載了metamask錢包外掛的時候會自動使用外掛的介面,這就是不顯示餘額的原因,metamask用來部署合約很便捷,下面說明怎麼解決這個問題。

順便一提,web3是幹什麼用的呢?

web3.js是以太坊提供的一個Javascript庫,它封裝了以太坊的JSON RPC API,提供了一系列與區塊鏈互動的Javascript物件和函式,包括檢視網路狀態,檢視本地賬戶、檢視交易和區塊、傳送交易、編譯/部署智慧合約、呼叫智慧合約等,其中最重要的就是與智慧合約互動的API。

開啟app/avascripts/app.js,直接移到最下面

這一段就是web3介面的引入部分,上面做了一個判斷,如果檢測到瀏覽器內建的web3介面就使用,否則在9545埠自行初始化一個,還記得9585埠上的服務嗎?裡面生成的地址可以供給web3呼叫,當你沒有使用從自己的服務埠(9545)上生成的web3介面時,你的dapp獲取的是錢包裡地址的代幣餘額,然而你的合約並沒有部署在真實的鏈上所以是獲取不到餘額的,這也就是顯示不了餘額的原因,那麼顯然只要使用自己的服務埠上的web3就可以解決這個問題

這裡我們只需要將一些程式碼註釋掉,留下

window.web3 = new Web3(new Web3.providers.HttpProvider(“http://127.0.0.1:9545”));

這一句話就行了。

看到這裡我們終於明白了這個web版的dapp是怎麼和合約聯絡的了,所以要定製一個自己的web-dapp就可以通過這個物件作橋樑,搭建屬於自己的dapp。

關於學習dapp的開發推薦看下這篇文章:點選開啟連結

另外附上truffle demo

———–今天先到這裡,以後有時間再更新