摘要：本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)原文鏈接一步步教你開(kāi)發(fā)部署第一個(gè)去中心化應(yīng)用寵物商店原文已更新，請(qǐng)讀者前往原文閱讀今天我們來(lái)編寫(xiě)一個(gè)完整的去中心化區(qū)塊鏈應(yīng)用本文可以和編寫(xiě)智能合約結(jié)合起來(lái)看。

本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)
原文鏈接:一步步教你開(kāi)發(fā)、部署第一個(gè)去中心化應(yīng)用(Dapp) - 寵物商店原文已更新，請(qǐng)讀者前往原文閱讀

今天我們來(lái)編寫(xiě)一個(gè)完整的去中心化（區(qū)塊鏈）應(yīng)用（Dapps）, 本文可以和編寫(xiě)智能合約結(jié)合起來(lái)看。

閱讀本文前，你應(yīng)該對(duì)以太坊、智能合約有所了解，如果你還不了解，建議你先看以太坊是什么
除此之外，你最好還了解一些HTML及JavaScript知識(shí)。

本文通過(guò)實(shí)例教大家來(lái)開(kāi)發(fā)去中心化應(yīng)用，應(yīng)用效果如圖：

從本文，你可以學(xué)習(xí)到：

搭建智能合約開(kāi)發(fā)環(huán)境

創(chuàng)建Truffle項(xiàng)目

編寫(xiě)智能合約

編譯和部署智能合約到區(qū)塊鏈

如何通過(guò)Web3和智能合約交互

MetaMask 的使用

小專欄用戶在教程結(jié)尾處可以下載完整的Dapp代碼。

Pete有一個(gè)寵物店，有16只寵物，他想開(kāi)發(fā)一個(gè)去中心化應(yīng)用，讓大家來(lái)領(lǐng)養(yǎng)寵物。
在truffle box中，已經(jīng)提供了pet-shop的網(wǎng)站部分的代碼，我們只需要編寫(xiě)合約及交互部分。

安裝Node

安裝 Truffle ：npm install -g truffle

安裝Ganache

Ganache（或Ganache CLI）已經(jīng)取代了 testrpc。

1、 建立項(xiàng)目目錄并進(jìn)入

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

2、 使用truffle unbox 創(chuàng)建項(xiàng)目

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

Commands:

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

這一步需要等待一會(huì)

也可以使用truffle init 來(lái)創(chuàng)建一個(gè)全新的項(xiàng)目。

contracts/ 智能合約的文件夾，所有的智能合約文件都放置在這里，里面包含一個(gè)重要的合約Migrations.sol（稍后再講）
migrations/ 用來(lái)處理部署（遷移）智能合約 ，遷移是一個(gè)額外特別的合約用來(lái)保存合約的變化。
test/ 智能合約測(cè)試用例文件夾
truffle.js/ 配置文件

其他代碼可以暫時(shí)不用管

智能合約承擔(dān)著分布式應(yīng)用的后臺(tái)邏輯和存儲(chǔ)。智能合約使用solidity編寫(xiě)，可閱讀
solidity系列文章

在contracts目錄下，添加合約文件Adoption.sol

pragma solidity ^0.4.17;

contract Adoption {

  address[16] public adopters;  // 保存領(lǐng)養(yǎng)者的地址

    // 領(lǐng)養(yǎng)寵物
  function adopt(uint petId) public returns (uint) {
    require(petId >= 0 && petId <= 15);  // 確保id在數(shù)組長(zhǎng)度內(nèi)

    adopters[petId] = msg.sender;        // 保存調(diào)用這地址 
    return petId;
  }

  // 返回領(lǐng)養(yǎng)者
  function getAdopters() public view returns (address[16]) {
    return adopters;
  }

}

Truffle集成了一個(gè)開(kāi)發(fā)者控制臺(tái)，可用來(lái)生成一個(gè)開(kāi)發(fā)鏈用來(lái)測(cè)試和部署智能合約。

Solidity是編譯型語(yǔ)言，需要把可讀的Solidity代碼編譯為EVM字節(jié)碼才能運(yùn)行。
dapp的根目錄pet-shop-tutorial下，

> truffle compile

輸出

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

編譯之后，就可以部署到區(qū)塊鏈上。
在migrations文件夾下已經(jīng)有一個(gè)1_initial_migration.js部署腳本，用來(lái)部署Migrations.sol合約。
Migrations.sol 用來(lái)確保不會(huì)部署相同的合約。

現(xiàn)在我們來(lái)創(chuàng)建一個(gè)自己的部署腳本2_deploy_contracts.js

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

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

在執(zhí)行部署之前，需要確保有一個(gè)區(qū)塊鏈運(yùn)行, 可以使用
Ganache來(lái)開(kāi)啟一個(gè)私鏈來(lái)進(jìn)行開(kāi)發(fā)測(cè)試，默認(rèn)會(huì)在7545端口上運(yùn)行一個(gè)開(kāi)發(fā)鏈。
Ganache 啟動(dòng)之后是這樣：

接下來(lái)執(zhí)行部署命令:

> truffle  migrate

執(zhí)行后，有一下類(lèi)似的輸出，

Using network "develop".

Running migration: 1_initial_migration.js
  Deploying Migrations...
  ... 0x3076b7dac65afc44ec51508bf6f2b6894f833f0f9560ecad2d6d41ed98a4679f
  Migrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0
Saving successful migration to network...
  ... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956
Saving artifacts...
Running migration: 2_deploy_contracts.js
  Deploying Adoption...
  ... 0x2c6ab4471c225b5473f2079ee42ca1356007e51d5bb57eb80bfeb406acc35cd4
  Adoption: 0x345ca3e014aaf5dca488057592ee47305d9b3e10
Saving successful migration to network...
  ... 0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0
Saving artifacts...

在打開(kāi)的Ganache里可以看到區(qū)塊鏈狀態(tài)的變化，現(xiàn)在產(chǎn)生了4個(gè)區(qū)塊。

這時(shí)說(shuō)明已經(jīng)智能合約已經(jīng)部署好了。

現(xiàn)在我們來(lái)測(cè)試一下智能合約，測(cè)試用例可以用 JavaScript or Solidity來(lái)編寫(xiě)，這里使用Solidity。

在test目錄下新建一個(gè)TestAdoption.sol，編寫(xiě)測(cè)試合約

pragma solidity ^0.4.17;

import "truffle/Assert.sol";   // 引入的斷言
import "truffle/DeployedAddresses.sol";  // 用來(lái)獲取被測(cè)試合約的地址
import "../contracts/Adoption.sol";      // 被測(cè)試合約

contract TestAdoption {
  Adoption adoption = Adoption(DeployedAddresses.Adoption());

  // 領(lǐng)養(yǎng)測(cè)試用例
  function testUserCanAdoptPet() public {
    uint returnedId = adoption.adopt(8);

    uint expected = 8;
    Assert.equal(returnedId, expected, "Adoption of pet ID 8 should be recorded.");
  }

  // 寵物所有者測(cè)試用例
  function testGetAdopterAddressByPetId() public {
    // 期望領(lǐng)養(yǎng)者的地址就是本合約地址，因?yàn)榻灰资怯蓽y(cè)試合約發(fā)起交易，
    address expected = this;
    address adopter = adoption.adopters(8);
    Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded.");
  }

    // 測(cè)試所有領(lǐng)養(yǎng)者
  function testGetAdopterAddressByPetIdInArray() public {
  // 領(lǐng)養(yǎng)者的地址就是本合約地址
    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的測(cè)試用例

在終端中，執(zhí)行

truffle test

如果測(cè)試通過(guò)，則終端輸出：

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)

我們已經(jīng)編寫(xiě)和部署及測(cè)試好了我們的合約，接下我們?yōu)楹霞s編寫(xiě)UI，讓合約真正可以用起來(lái)。

在Truffle Box pet-shop里，已經(jīng)包含了應(yīng)用的前端代碼，代碼在src/文件夾下。

在編輯器中打開(kāi)src/js/app.js
可以看到用來(lái)管理整個(gè)應(yīng)用的App對(duì)象，init函數(shù)加載寵物信息，就初始化web3.
web3是一個(gè)實(shí)現(xiàn)了與以太坊節(jié)點(diǎn)通信的庫(kù)，我們利用web3來(lái)和合約進(jìn)行交互。

接下來(lái)，我們來(lái)編輯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();
  }

代碼中優(yōu)先使用Mist 或 MetaMask提供的web3實(shí)例，如果沒(méi)有則從本地環(huán)境創(chuàng)建一個(gè)。

使用truffle-contract會(huì)幫我們保存合約部署的信息，就不需要我們手動(dòng)修改合約地址，修改initContract()代碼如下：

initContract: function() {
  // 加載Adoption.json，保存了Adoption的ABI（接口說(shuō)明）信息及部署后的網(wǎng)絡(luò)(地址)信息，它在編譯合約的時(shí)候生成ABI，在部署的時(shí)候追加網(wǎng)絡(luò)信息
  $.getJSON("Adoption.json", function(data) {
    // 用Adoption.json數(shù)據(jù)創(chuàng)建一個(gè)可交互的TruffleContract合約實(shí)例。
    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;

      // 調(diào)用合約的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;

    // 獲取用戶賬號(hào)
    web3.eth.getAccounts(function(error, accounts) {
      if (error) {
        console.log(error);
      }
    
      var account = accounts[0];
    
      App.contracts.Adoption.deployed().then(function(instance) {
        adoptionInstance = instance;
    
        // 發(fā)送交易領(lǐng)養(yǎng)寵物
        return adoptionInstance.adopt(petId, {from: account});
      }).then(function(result) {
        return App.markAdopted();
      }).catch(function(err) {
        console.log(err.message);
      });
    });
  }

MetaMask 是一款插件形式的以太坊輕客戶端，開(kāi)發(fā)過(guò)程中使用MetaMask和我們的dapp進(jìn)行交互是個(gè)很好的選擇，通過(guò)此鏈接安裝，安裝完成后，瀏覽器工具條會(huì)顯示一個(gè)小狐貍圖標(biāo)。

在接受隱私說(shuō)明后，會(huì)出現(xiàn)頁(yè)面如下：

這里我們通過(guò)還原一個(gè)Ganache為我們創(chuàng)建好的錢(qián)包，作為我們的開(kāi)發(fā)測(cè)試錢(qián)包。點(diǎn)擊頁(yè)面的 Import Existing DEN，輸入Ganache顯示的助記詞。

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

然后自己想要的密碼，點(diǎn)擊OK。
如圖：

默認(rèn)連接的是以太坊主網(wǎng)（左上角顯示），選擇Custom RPC，添加一個(gè)網(wǎng)絡(luò)：http://127.0.0.1:7545，點(diǎn)返回后，顯示如下：

這是左上角顯示為Private Network，賬號(hào)是Ganache中默認(rèn)的第一個(gè)賬號(hào)。

至此MetaMask的安裝，配置已經(jīng)完成。

接下來(lái)需要本地的web 服務(wù)器提供服務(wù)的訪問(wèn)， Truffle Box pet-shop里提供了一個(gè)lite-server可以直接使用，我們看看它是如何工作的。
bs-config.json指示了lite-server的工作目錄。

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

./src 是網(wǎng)站文件目錄
./build/contracts 是合約輸出目錄

以此同時(shí)，在package.json文件的scripts中添加了dev命令：

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

當(dāng)運(yùn)行npm run dev的時(shí)候，就會(huì)啟動(dòng)lite-server

> npm run dev

會(huì)自動(dòng)打開(kāi)瀏覽器顯示我們的dapp，如本文的第一張圖。
現(xiàn)在領(lǐng)養(yǎng)一直寵物看看，當(dāng)我們點(diǎn)擊Adopt時(shí)，MetaMask會(huì)提示我們交易的確認(rèn)，如圖：

點(diǎn)擊Submit確認(rèn)后，就可以看到成功領(lǐng)養(yǎng)了這次寵物。

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

好了，恭喜你，即將成為一名去中心化式應(yīng)用開(kāi)發(fā)者的你已經(jīng)成為邁出了堅(jiān)實(shí)的一步。
如果學(xué)習(xí)中遇到問(wèn)題，歡迎來(lái)我的知識(shí)星球交流。

Truffle手冊(cè)

? 深入淺出區(qū)塊鏈 - 系統(tǒng)學(xué)習(xí)區(qū)塊鏈，打造最好的區(qū)塊鏈技術(shù)博客。

? 我的知識(shí)星球為各位解答區(qū)塊鏈技術(shù)問(wèn)題，歡迎加入討論。

? 關(guān)注公眾號(hào)“深入淺出區(qū)塊鏈技術(shù)”第一時(shí)間獲取區(qū)塊鏈技術(shù)信息。