一步步教你開發、部署第一個去中心化應用(Dapp) - 寵物商店

標籤：區塊鏈

今天我們來編寫一個完整的去中心化（區塊鏈）應用（Dapps）, 本文可以和編寫智能合約結合起來看。

寫在前面

閱讀本文前，你應該對以太坊、智能合約有所瞭解，如果你還不瞭解，建議你先看以太坊是什麼
除此之外，你最好還瞭解一些HTML及JavaScript知識。

本文通過執行個體教大家來開發去中心化應用，應用效果

從本文，你可以學習到：

• 搭建智能合約開發環境
• 建立Truffle項目
• 編寫智能合約
• 編譯和部署智能合約到區塊鏈
• 如何通過Web3和智能合約互動
• MetaMask 的使用

項目背景

Pete有一個寵物店，有16隻寵物，他想開發一個去中心化應用，讓大家來領養寵物。
在truffle box中，已經提供了pet-shop的網站部分的代碼，我們只需要編寫合約及互動部分。

環境搭建

1. 安裝Node
2. 安裝 Truffle ：npm install -g truffle
3. 安裝Ganache

Ganache（或Ganache CLI）已經取代了 testrpc。

建立項目

1. 建立項目目錄並進入

   > mkdir pet-shop-tutorial> cd pet-shop-tutorial

2. 使用truffle unbox 建立項目

   > truffle unbox pet-shopDownloading...Unpacking...Setting up...Unbox successful. Sweet!

Commands:

Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Run dev server: npm run dev

這一步需要等待一會> 也可以使用truffle init 來建立一個全新的項目。## 項目目錄結構`contracts/`  智能合約的檔案夾，所有的智能合約檔案都放置在這裡，裡麵包含一個重要的合約Migrations.sol（稍後再講）`migrations/` 用來處理部署（遷移）智能合約 ，遷移是一個額外特別的合約用來儲存合約的變化。`test/` 智能合約測試案例檔案夾`truffle.js/` 設定檔其他代碼可以暫時不用管## 編寫智能合約智能合約承擔著分布式應用的後台邏輯和儲存。智能合約使用solidity編寫，可閱讀[solidity系列文章](https://learnblockchain.cn/categories/ethereum/Solidity/)在contracts目錄下，添加合約檔案Adoption.sol```jspragma solidity ^0.4.17;contract Adoption {  address[16] public adopters;  // 儲存領養者的地址    // 領養寵物  function adopt(uint petId) public returns (uint) {    require(petId >= 0 && petId <= 15);  // 確保id在數組長度內    adopters[petId] = msg.sender;        // 儲存調用這地址     return petId;  }  // 返回領養者  function getAdopters() public view returns (address[16]) {    return adopters;  }}

編譯部署智能合約

Truffle整合了一個開發人員控制台，可用來產生一個開發鏈用來測試和部署智能合約。

編譯

Solidity是編譯型語言，需要把可讀的Solidity代碼編譯為EVM位元組碼才能運行。
dapp的根目錄pet-shop-tutorial下，

> truffle compile

輸出

Compiling ./contracts/Adoption.sol...Writing artifacts to ./build/contracts

部署

編譯之後，就可以部署到區塊鏈上。
在migrations檔案夾下已經有一個1_initial_migration.js部署指令碼，用來部署Migrations.sol合約。
Migrations.sol 用來確保不會部署相同的合約。

現在我們來建立一個自己的部署指令碼2_deploy_contracts.js

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

在執行部署之前，需要確保有一個區塊鏈運行, 可以使用
Ganache來開啟一個私鏈來進行開發測試，預設會在7545連接埠上運行一個開發鏈。
Ganache 啟動之後是這樣：

接下來執行部署命令:

> truffle  migrate

執行後，有一下類似的輸出，

Using network ‘develop‘.Running migration: 1_initial_migration.js  Deploying Migrations...  ... 0x3076b7dac65afc44ec51508bf6f2b6894f833f0f9560ecad2d6d41ed98a4679f  Migrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0Saving successful migration to network...  ... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956Saving artifacts...Running migration: 2_deploy_contracts.js  Deploying Adoption...  ... 0x2c6ab4471c225b5473f2079ee42ca1356007e51d5bb57eb80bfeb406acc35cd4  Adoption: 0x345ca3e014aaf5dca488057592ee47305d9b3e10Saving successful migration to network...  ... 0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0Saving artifacts...

在開啟的Ganache裡可以看到區塊鏈狀態的變化，現在產生了4個區塊。

這時說明已經智能合約已經部署好了。

測試

現在我們來測試一下智能合約，測試案例可以用 JavaScript or Solidity來編寫，這裡使用Solidity。

在test目錄下建立一個TestAdoption.sol，編寫測試合約

pragma solidity ^0.4.17;import "truffle/Assert.sol";   // 引入的斷言import "truffle/DeployedAddresses.sol";  // 用來擷取被測試合約的地址import "../contracts/Adoption.sol";      // 被測試合約contract TestAdoption {  Adoption adoption = Adoption(DeployedAddresses.Adoption());  // 領養測試案例  function testUserCanAdoptPet() public {    uint returnedId = adoption.adopt(8);    uint expected = 8;    Assert.equal(returnedId, expected, "Adoption of pet ID 8 should be recorded.");  }  // 寵物所有者測試案例  function testGetAdopterAddressByPetId() public {    // 期望領養者的地址就是本合約地址，因為交易是由測試合約發起交易，    address expected = this;    address adopter = adoption.adopters(8);    Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded.");  }    // 測試所有領養者  function testGetAdopterAddressByPetIdInArray() public {  // 領養者的地址就是本合約地址    address expected = this;    address[16] memory adopters = adoption.getAdopters();    Assert.equal(adopters[8], expected, "Owner of pet ID 8 should be recorded.");  }}

Assert.sol 及 DeployedAddresses.sol是Truffle架構提供，在test目錄下並不提供truffle目錄。

TestAdoption合約中添加adopt的測試案例

運行測試案例

在終端中，執行

truffle test

如果測試通過，則終端輸出：

Using network ‘develop‘.Compiling ./contracts/Adoption.sol...Compiling ./test/TestAdoption.sol...Compiling truffle/Assert.sol...Compiling truffle/DeployedAddresses.sol...  TestAdoption    ? testUserCanAdoptPet (62ms)    ? testGetAdopterAddressByPetId (53ms)    ? testGetAdopterAddressByPetIdInArray (73ms)  3 passing (554ms)

建立使用者介面和智能合約互動

我們已經編寫和部署及測試好了我們的合約，接下我們為合約編寫UI，讓合約真正可以用起來。

在Truffle Box pet-shop裡，已經包含了應用的前端代碼，代碼在src/檔案夾下。

在編輯器中開啟src/js/app.js
可以看到用來管理整個應用的App對象，init函數載入寵物資訊，就初始化web3.
web3是一個實現了與以太坊節點通訊的庫，我們利用web3來和合約進行互動。

初始化web3

接下來，我們來編輯app.js修改initWeb3():
刪除注釋，修改為：

  initWeb3: function() {    // Is there an injected web3 instance?    if (typeof web3 !== ‘undefined‘) {      App.web3Provider = web3.currentProvider;    } else {      // If no injected web3 instance is detected, fall back to Ganache      App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:7545‘);    }    web3 = new Web3(App.web3Provider);    return App.initContract();  }

代碼中優先使用Mist 或 MetaMask提供的web3執行個體，如果沒有則從本地環境建立一個。

執行個體化合約

使用truffle-contract會幫我們儲存合約部署的資訊，就不需要我們手動修改合約地址，修改initContract()代碼如下：

initContract: function() {  // 載入Adoption.json，儲存了Adoption的ABI（介面說明）資訊及部署後的網路(地址)資訊，它在編譯合約的時候產生ABI，在部署的時候追加網路資訊  $.getJSON(‘Adoption.json‘, function(data) {    // 用Adoption.json資料建立一個可互動的TruffleContract合約執行個體。    var AdoptionArtifact = data;    App.contracts.Adoption = TruffleContract(AdoptionArtifact);    // Set the provider for our contract    App.contracts.Adoption.setProvider(App.web3Provider);    // Use our contract to retrieve and mark the adopted pets    return App.markAdopted();  });  return App.bindEvents();}

處理領養

修改markAdopted()代碼：

  markAdopted: function(adopters, account) {    var adoptionInstance;    App.contracts.Adoption.deployed().then(function(instance) {      adoptionInstance = instance;      // 調用合約的getAdopters(), 用call讀取資訊不用消耗gas      return adoptionInstance.getAdopters.call();    }).then(function(adopters) {      for (i = 0; i < adopters.length; i++) {        if (adopters[i] !== ‘0x0000000000000000000000000000000000000000‘) {          $(‘.panel-pet‘).eq(i).find(‘button‘).text(‘Success‘).attr(‘disabled‘, true);        }      }    }).catch(function(err) {      console.log(err.message);    });  }

修改handleAdopt()代碼：

  handleAdopt: function(event) {    event.preventDefault();    var petId = parseInt($(event.target).data(‘id‘));    var adoptionInstance;    // 擷取使用者帳號    web3.eth.getAccounts(function(error, accounts) {      if (error) {        console.log(error);      }      var account = accounts[0];      App.contracts.Adoption.deployed().then(function(instance) {        adoptionInstance = instance;        // 發送交易領養寵物        return adoptionInstance.adopt(petId, {from: account});      }).then(function(result) {        return App.markAdopted();      }).catch(function(err) {        console.log(err.message);      });    });  }

在瀏覽器中運行安裝 MetaMask

MetaMask 是一款外掛程式形式的以太坊輕用戶端，開發過程中使用MetaMask和我們的dapp進行互動是個很好的選擇，通過此連結安裝，安裝完成後，瀏覽器工具條會顯示一個小狐狸表徵圖。

配置錢包

在接受隱私說明後，會出現頁面如下：

這裡我們通過還原一個Ganache為我們建立好的錢包，作為我們的開發測試錢包。點擊頁面的 Import Existing DEN，輸入Ganache顯示的助記詞。

candy maple cake sugar pudding cream honey rich smooth crumble sweet treat

然後自己想要的密碼，點擊OK。

串連開發區塊鏈網路

預設串連的是以太坊主網（左上方顯示），選擇Custom RPC，添加一個網路：http://127.0.0.1:7545，點返回後，顯示如下：

這是左上方顯示為Private Network，帳號是Ganache中預設的第一個帳號。

至此MetaMask的安裝，配置已經完成。

安裝和配置lite-server

接下來需要本地的網頁伺服器提供服務的訪問， Truffle Box pet-shop裡提供了一個lite-server可以直接使用，我們看看它是如何工作的。
bs-config.json指示了lite-server的工作目錄。

{  "server": {    "baseDir": ["./src", "./build/contracts"]  }}

./src 是網站檔案目錄
./build/contracts 是合約輸出目錄

以此同時，在package.json檔案的scripts中添加了dev命令：

"scripts": {  "dev": "lite-server",  "test": "echo \"Error: no test specified\" && exit 1"},

當運行npm run dev的時候，就會啟動lite-server

啟動服務

> npm run dev

會自動開啟瀏覽器顯示我們的dapp，如本文的第一張圖。
現在領養一直寵物看看，當我們點擊Adopt時，MetaMask會提示我們交易的確認，

點擊Submit確認後，就可以看到成功領養了這次寵物。

在MetaMask中，也可以看到交易的清單：

好了，恭喜你，即將成為一名去中心化式應用開發人員的你已經成為邁出了堅實的一步。

參考文檔

• Truffle手冊

深入淺出區塊鏈 - 系統學習區塊鏈，打造最好的區塊鏈技術部落格。

一步步教你開發、部署第一個去中心化應用(Dapp) - 寵物商店