[幣嚴區塊鏈]以太坊（ETH）Dapp開發入門教程之寵物商店領養遊戲

閱讀本文前，你應該對以太坊、智能合約有所瞭解，若是你還不瞭解，建議你先看以太坊是什麼 除此以外，你最好還了解一些HTML及JavaScript知識。 本文經過實例教你們來開發去中心化應用，應用效果如圖: 

項目背景

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

> 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: 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的測試用例

 

運行測試用例

在終端中，執行

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

接下來須要本地的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

 

啓動服務

> npm run dev

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

點擊Submit確認後，就能夠看到成功領養了這個寵物。 
在MetaMask中，也能夠看到交易的清單： 

 

 

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

 

 

BIZZAN(幣嚴) 數字貨幣交易所官方網址：

www.bizzan.com