開發實戰|3步教你在以太坊上開一家寵物店（附流程+代碼）

DApp是區塊鏈技術落地應用的主要體現方式，經過將友好的交互設計與其背後的智能合約相結合，就能產生一個個區塊鏈應用。

開發一個DApp須要哪些技能？須要幾我的配合？其實，1我的分3步就能夠完成一個DApp！

• 首先準備並部署開發環境

• 其次編寫並部署智能合約

• 最後測試合約並建立交互

HiBlock區塊鏈社區Bob在本身的摸索與實踐中開發了一款基於以太坊的寵物店，開發成功後，總結本身的經驗與心得，經過一次線上分享的活動，與區塊鏈愛好者交流探討。

如下是Bob根據開發過程整理的流程文檔。

1

開發環境的準備

本地環境Mac

這個教程會用到的環境：

• 開發環境：node.js, npm (本文用到的node version, v9.11.1 npm version v5.6.0)

• 編譯部署環境：truffle (version 4.1.5, solidity 0.4.21)

• 以太坊私鏈：ganache (version 1.1.0)

問題：

這裏碰到第一個坑，之前安裝過老版本node.js，提示必須升級新版本，但總提示：brew link error 沒法找到：/usr/local/Cellar/

解決方案：

uninstall, install, link 最終解決

安裝開發環境

BobJianglocal:pet-shop-tutorial bobjiang$ brew uninstall node --force

BobJianglocal:pet-shop-tutorial bobjiang$ brew uninstall npm --force BobJianglocal:pet-shop-tutorial bobjiang$ brew link node BobJianglocal:pet-shop-tutorial bobjiang$ brew install node BobJianglocal:pet-shop-tutorial bobjiang$ 

安裝truffle

BobJianglocal:pet-shop-tutorial bobjiang$ npm install -g truffle

安裝ganache

下載ganache（地址：http://truffleframework.com/ganache/）

2

從Truffle box建立項目

BobJianglocal:pet-shop-tutorial bobjiang$ mkdir pet-shop-tutorial BobJianglocal:pet-shop-tutorial bobjiang$ cd pet-shop-tutorial/ BobJianglocal:pet-shop-tutorial bobjiang$ truffle unbox pet-shop

truffle框架目錄介紹：

• contracts/ ： 智能合約文件存在這裏，後綴.sol （solidity）

• migrations/ ： 部署腳本

• test/ ： 測試腳本

• truffle.js ：truffle的配置文件

3

編寫智能合約

在 contracts/ 目錄下建立 Adoption.sol 文件，內容以下：

pragma solidity ^0.4.17;

contract Adoption {    address[16] public adopters;

   //adopting a pet    function adopt(uint petId) public returns (uint) {      require(petId >= 0 && petId <= 15);      adopters[petId] = msg.sender;      return petId;    }

   //retrieve the adopters    function getAdopters() public view returns (address[16]) {      return adopters;    } }

4

編譯部署合約

編譯合約

BobJianglocal:pet-shop-tutorial bobjiang$ truffle compile Compiling ./contracts/Adoption.sol... Compiling ./contracts/Migrations.sol...

Compilation warnings encountered:

/Users/bobjiang/Documents/hiblock.net/truffle/pet-shop-tutorial/contracts/Migrations.sol:11:3: Warning: No visibility specified. Defaulting to "public".  function Migrations() {  ^ (Relevant source part starts here and spans across multiple lines). ,/Users/bobjiang/Documents/hiblock.net/truffle/pet-shop-tutorial/contracts/Migrations.sol:15:3: Warning: No visibility specified. Defaulting to "public".  function setCompleted(uint completed) restricted {  ^ (Relevant source part starts here and spans across multiple lines). ,/Users/bobjiang/Documents/hiblock.net/truffle/pet-shop-tutorial/contracts/Migrations.sol:19:3: Warning: No visibility specified. Defaulting to "public".  function upgrade(address new_address) restricted {  ^ (Relevant source part starts here and spans across multiple lines).

Writing artifacts to ./build/contracts

上面有警告的地方，能夠忽略。（原來給的文件裏面沒有指定函數的可見性）

部署合約

一、在 migratios/ 目錄內建立新文件 2_deploy_contracts.js 內容以下：

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

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

二、確保安裝好了 ganache

安裝好後第一次啓動的界面以下(借用的源文檔圖片)

三、智能合約部署到以太坊（私鏈）上

BobJianglocal:pet-shop-tutorial bobjiang$ truffle migrate Using network 'development'.

Running migration: 1_initial_migration.js  Deploying Migrations...  ... 0x579459f9d2e89ed07356c7565056e082b540c5f441ffcdc1e4676f42536451d5  Migrations: 0x651ee6754b509e0f3413fcb6c88c6c20dc8c9d28 Saving successful migration to network...  ... 0xfafeb069ba502196abeabef2c097bdd9e4db9ab02c98a9b98d8db47f7d205a9b Saving artifacts... Running migration: 2_deploy_contracts.js  Deploying Adoption...  ... 0xaee412f76fe2ed3853f8e138f009cd8fca23835547a39e23188affef55665460  Adoption: 0x104ba492f5d8f4e0df6971ae09ca0c9b496ff15b Saving successful migration to network...  ... 0x9219eeba1a1eb945d4fe1fb1bf6cdb2b70218c22b264134cfd97e2f4dfe026ef Saving artifacts...

部署完成後，能夠看到有四筆交易(四個區塊)：

5

測試智能合約

智能合約能夠也能夠用測試類來進行斷言（assert）驗證。例如在 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());

   //test adopt() function    function testUserCanAdoptPet() public {      uint returnedId = adoption.adopt(8);

     uint expected = 8;

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

   //test retrieve of a single pet owner    function testGetAdopterAddressByPetId() public {      //expected owner is this contract      address expected = this;      address adopter = adoption.adopters(8);      Assert.equal(adopter, expected, "owner of pet id 8 should be recorded.");    }

   //test retrive of all pet owners    function testGetAdopterAddressByPetIdInArray() public {      //expected owner is this contract      address expected = this;      address[16] memory adopters = adoption.getAdopters();

     Assert.equal(adopters[8], expected, "owner of pet id 8 should be recorded.");    } }

運行測試，結果以下：

BobJianglocal:pet-shop-tutorial bobjiang$ pwd /hiblock.net/truffle/pet-shop-tutorial BobJianglocal:pet-shop-tutorial bobjiang$ truffle test Using network 'development'.

Compiling ./contracts/Adoption.sol... Compiling ./test/TestAdoption.sol... Compiling truffle/Assert.sol... Compiling truffle/DeployedAddresses.sol...

Compilation warnings encountered:

truffle/Assert.sol:1563:9: Warning: Use of the "var" keyword is deprecated.        var nstr = _itoa(value, 10);        ^------^ ,truffle/Assert.sol:1580:9: Warning: Use of the "var" keyword is deprecated.        var nstr = _utoa(value, 10);        ^------^ ,truffle/Assert.sol:1597:9: Warning: Use of the "var" keyword is deprecated.        var nstr = _ltoa(value);        ^------^ ,truffle/Assert.sol:1347:13: Warning: Invoking events without "emit" prefix is deprecated.            TestEvent(true, "");            ^-----------------^ ,truffle/Assert.sol:1349:13: Warning: Invoking events without "emit" prefix is deprecated.            TestEvent(false, message);            ^-----------------------^

 TestAdoption    ✓ testUserCanAdoptPet (113ms)    ✓ testGetAdopterAddressByPetId (103ms)    ✓ testGetAdopterAddressByPetIdInArray (132ms)

 3 passing (1s)

上面Assert.sol裏面有警告，var關鍵詞已經不建議使用。忽略掉。

6

開始用戶界面的工做

用戶界面（UI）是前端工做，這裏用的javascript。主要文件是app.js，存在目錄 /src/js/app.js 中。文件內容以下：

App = {  web3Provider: null,  contracts: {},

 init: function() {    // Load pets.    $.getJSON('../pets.json', function(data) {      var petsRow = $('#petsRow');      var petTemplate = $('#petTemplate');

     for (i = 0; i < data.length; i ++) {        petTemplate.find('.panel-title').text(data[i].name);        petTemplate.find('img').attr('src', data[i].picture);        petTemplate.find('.pet-breed').text(data[i].breed);        petTemplate.find('.pet-age').text(data[i].age);        petTemplate.find('.pet-location').text(data[i].location);        petTemplate.find('.btn-adopt').attr('data-id', data[i].id);

       petsRow.append(petTemplate.html());      }    });

   return App.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();  },

 initContract: function() {    $.getJSON('Adoption.json', function(data) {  // Get the necessary contract artifact file and instantiate it with truffle-contract  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();  },

 bindEvents: function() {    $(document).on('click', '.btn-adopt', App.handleAdopt);  },

 markAdopted: function(adopters, account) {    var adoptionInstance;

App.contracts.Adoption.deployed().then(function(instance) {  adoptionInstance = instance;

 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: 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;

   // Execute adopt as a transaction by sending account    return adoptionInstance.adopt(petId, {from: account});  }).then(function(result) {    return App.markAdopted();  }).catch(function(err) {    console.log(err.message);  }); });  }

};

$(function() {  $(window).load(function() {    App.init();  }); });

安裝配置MetaMask

與Dapp互動的最容易的方式是經過 MetaMask

（地址：https://metamask.io/）

• 一、在瀏覽器內安裝MetaMask

• 二、裝好後，以Chrome瀏覽器插件形式存在

• 三、贊成，接受條款

• 四、以下圖，點擊"Import Existing DEN" 

• 五、返回 ganache 的主界面，在 Accounts 下有一行12個單詞的助記詞，以下圖

• 六、複製助記詞，粘貼到 MetaMask 界面中的 Wallet Seed 文本框中

• 七、設置一個密碼，點擊 OK

• 八、點擊 MetaMask 左上角的 Main Network ，點擊 Custom RPC

• 九、在 New RPC URL 中輸入 「http://127.0.0.1:7545」

• 十、返回 MetaMask 主界面，能夠看到帳戶信息

上面的第六步碰到第二個坑，這裏的助記詞必定用你的 ganache 私鏈上的，不然 MetaMask 錢包沒法連接到本地的私鏈，所以沒法顯示餘額

安裝配置 lite-server

在解開的目錄內，有 bs-config.jscon 和 package.json 兩個配置文件，沒必要要修改。（這裏定義了lite server，一下子瀏覽器訪問dapp用）

命令行啓動lite-server

BobJianglocal:pet-shop-tutorial bobjiang$ npm run dev

pet-shop@1.0.0 dev /Users/bobjiang/Documents/hiblock.net/truffle/pet-shop-tutorial lite-server

** browser-sync config ** { injectChanges: false,  files: [ './**/*.{html,htm,css,js}' ],  watchOptions: { ignored: 'node_modules' },  server:   { baseDir: [ './src', './build/contracts' ],     middleware: [ [Function], [Function] ] } } [Browsersync] Access URLs:

      Local: http://localhost:3000    External: http://192.168.199.126:3000

         UI: http://localhost:3001 UI External: http://192.168.199.126:3001

[Browsersync] Serving files from: ./src [Browsersync] Serving files from: ./build/contracts [Browsersync] Watching files... 18.04.08 15:20:02 200 GET /index.html

打開寵物店： http://localhost:3000

選擇一個你喜歡的狗狗，點擊 Adopt（領養）

MetaMask會自動提示，有一筆交易須要你贊成

點擊 Submit 返回寵物店

可能須要刷新頁面 http://localhost:3000，就能夠看到剛纔你領養的那隻狗，已經領養成功了。（其餘人沒法領養）

返回 MetaMask 錢包能夠看到剛纔的領養的交易

返回 ganache 也能夠看到剛纔的這筆交易被打包了

恭喜你，第一個 dapp 搞定啦！

7

參考文檔

truffle pet shop

地址：http://truffleframework.com/tutorials/pet-shop

---

如下是咱們的社區介紹，歡迎各類合做、交流、學習：）