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

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

寫在前面

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

本文通過實例教大家來開發去中心化應用，應用效果如圖：

從本文，你可以學習到：

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

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

項目背景

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

環境搭建

安裝Node
安裝 Truffle ：npm install -g truffle
安裝Ganache

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

創建項目

建立項目目錄並進入

1 2	> mkdir pet-shop-tutorial > cd pet-shop-tutorial

使用truffle unbox 創建項目

 > 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

這一步需要等待一會

也可以使用truffle init 來創建一個全新的項目。

項目目錄結構

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

其他代碼可以暫時不用管

編寫智能合約

智能合約承擔着分佈式應用的後臺邏輯和存儲。智能合約使用solidity編寫，可閱讀
solidity系列文章

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

pragma 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下，

1	> truffle compile

輸出

1 2	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 啓動之後是這樣：

接下來執行部署命令:

1	> truffle migrate

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

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...

在打開的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的測試用例

運行測試用例

在終端中，執行

1	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顯示的助記詞。

1	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

接下來需要本地的web 服務器提供服務的訪問， 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

啓動服務

1	> npm run dev

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

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

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

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

參考文檔

Truffle手冊
- 本文作者： Tiny熊
- 本文鏈接： https://learnblockchain.cn/2018/01/12/first-dapp/
- 版權聲明： 本文采用 CC BY-NC-SA 3.0 許可協議。轉載請註明出處！

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

寫在前面

項目背景

環境搭建

創建項目

項目目錄結構

編寫智能合約

編譯部署智能合約

編譯

部署

測試

運行測試用例

創建用戶接口和智能合約交互

初始化web3

實例化合約

處理領養

在瀏覽器中運行

安裝 MetaMask

配置錢包

連接開發區塊鏈網絡

安裝和配置lite-server

啓動服務

參考文檔

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

Gitlab服務器部署、漢化、數據遷移

OSSEC主要功能及原理+詳細配置+日誌文件分析

電子證據利用Kali進行wifi釣魚實戰詳細教程

“指針的愛情故事”（指針\多級指針詳解，常量指針\指針常量\常量指針常量，數組指針\指針數組，函數指針\指針函數）

Java入門教程之圖書管理系統（由簡入繁）(三)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結