1. 文章摘要

【本文目標(biāo)】

通過逐步的指導(dǎo)和截圖舉證，一步步帶領(lǐng)一個(gè)技術(shù)小白完成一個(gè)寵物商店DAPP應(yīng)用的開發(fā)和部署。

【環(huán)境前置條件】

參考《第一課如何在WINDOWS環(huán)境下搭建以太坊開發(fā)環(huán)境》，已完成Ubuntu的安裝，已完成TRUFFLE，Ganache-cli，lite-server的安裝；
本案例是通過WINDOWS的XSHELL客戶端同本機(jī)的Ubuntu命令操作進(jìn)行的。
已在本地WIDOWS環(huán)境完成MetaMask輕錢包客戶端的安裝。
最好遵循從頭開始的課程學(xué)習(xí)順序。不過如果你想半途插入實(shí)操學(xué)習(xí)，問題也不大，遇到障礙時(shí)反向找對(duì)應(yīng)文章的指導(dǎo)內(nèi)容即可完成。

【技術(shù)收獲】

從本實(shí)踐中，你可以學(xué)習(xí)到：
搭建智能合約開發(fā)環(huán)境
創(chuàng)建Truffle項(xiàng)目
編寫智能合約
編譯和部署智能合約到區(qū)塊鏈
如何通過Web3和智能合約交互
MetaMask 的使用

【實(shí)操課程列表】

第一課如何在WINDOWS環(huán)境下搭建以太坊開發(fā)環(huán)境
 第二課如何實(shí)現(xiàn)以太坊最簡(jiǎn)智能合約“Hello World”的運(yùn)行
 第四課以太坊開發(fā)框架Truffle從入門到實(shí)戰(zhàn)
第六課技術(shù)小白如何開發(fā)一個(gè)DAPP區(qū)塊鏈應(yīng)用(以寵物商店為例)
第七課技術(shù)小白如何在45分鐘內(nèi)發(fā)行通證(TOKEN)并上線交易
 第八課如何調(diào)試以太坊官網(wǎng)的智能合約眾籌案例
【說明】未列出的課程為知識(shí)普及的非實(shí)操類課程，所有區(qū)塊鏈文章參考“區(qū)塊鏈入口”專欄。

2. 下載/編寫TRUFFLE框架的智能合約

項(xiàng)目背景

Pete有一個(gè)寵物店，有16只寵物狗，他想開發(fā)一個(gè)去中心化應(yīng)用，讓大家來領(lǐng)養(yǎng)寵物。
在truffle box中，已經(jīng)提供了pet-shop的網(wǎng)站部分的代碼，我們只需要編寫合約及交互部分。
【官網(wǎng)原始參考】
代碼框架下載：http://truffleframework.com/boxes/pet-shop
開發(fā)指導(dǎo)：http://truffleframework.com/tutorials/pet-shop

環(huán)境搭建

環(huán)境需要NodeJS, Truffle，Ganache-Cli, Lite-Server, Meta-Mask等程序，按照步驟可以參考《第一課如何在WINDOWS環(huán)境下搭建以太坊開發(fā)環(huán)境》搜索對(duì)應(yīng)關(guān)鍵字在已安裝的UBUNTU操作系統(tǒng)完成安裝。

安裝Node:

sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash
sudo apt-get install -y nodejs

安裝 Truffle ：

npm install -g truffle

安裝Ganache

sudo npm install -g ganache-cli

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

4.Lite-Server, Meta-Mask安裝

本文后面章節(jié)描述。

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

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

 mkdir dapp-guide-pet-shop
 cd dapp-guide-pet-shop

使用truffle unbox 創(chuàng)建項(xiàng)目
下載官方程序代碼

truffle unbox pet-shop

輸出成功結(jié)果：

Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!

Commands:

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

項(xiàng)目目錄結(jié)構(gòu)

contracts/ 智能合約的文件夾，所有的智能合約文件都放置在這里，里面包含一個(gè)重要的合約Migrations.sol（稍后再講）
migrations/ 用來處理部署（遷移）智能合約，遷移是一個(gè)額外特別的合約用來保存合約的變化。
test/ 智能合約測(cè)試用例文件夾
truffle.js/ 配置文件
其他代碼可以暫時(shí)不用管
【說明】如果想了解TRUFFLE框架更詳細(xì)的內(nèi)容，可參考文章《第四課以太坊開發(fā)框架Truffle從入門到實(shí)戰(zhàn)》

編寫智能合約

智能合約承擔(dān)著分布式應(yīng)用的后臺(tái)邏輯和存儲(chǔ)。智能合約使用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è)開發(fā)者控制臺(tái)，可用來生成一個(gè)開發(fā)鏈用來測(cè)試和部署智能合約。

編譯

Solidity是編譯型語言，需要把可讀的Solidity代碼編譯為EVM字節(jié)碼才能運(yùn)行。
進(jìn)入dapp的根目錄dapp-guide-pet-shop執(zhí)行命令，

> truffle compile

輸出

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

編寫部署代碼

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

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

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

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

安裝啟動(dòng)Ganache測(cè)試環(huán)境

在執(zhí)行部署之前，需要確保有一個(gè)區(qū)塊鏈運(yùn)行, 可以使用
Ganache來開啟一個(gè)私鏈來進(jìn)行開發(fā)測(cè)試。
參考文章《第一課如何在WINDOWS環(huán)境下搭建以太坊開發(fā)環(huán)境》對(duì)應(yīng)的章節(jié)，完成ganache-cli的安裝。

sudo npm install -g ganache-cli

在新的命令行窗口運(yùn)行g(shù)anache-cli程序：

cd /usr/work/Ganache
ganache-cli >> trace.log

這個(gè)>>目的是把ganache-cli的結(jié)果輸出到文件，便于后面復(fù)制錢包地址用于查看ETH余額。作者實(shí)踐時(shí)把這2行命令合并成一行執(zhí)行。

ganache-cli >> /usr/work/Ganache/trace.log

這個(gè)命令窗口用于運(yùn)行Ganache程序輸出，不可關(guān)閉。需要新開一個(gè)命令窗口用于執(zhí)行TRUFFLE的命令。

輸出截圖

打開trace.log文件，可查看默認(rèn)啟動(dòng)的10個(gè)錢包賬戶和對(duì)應(yīng)的私鑰地址：

Available Accounts
==================
(0) 0x7554cc8c721712adde43e67a5669225bbe8f21f6
(1) 0x3e6ce6a43c1fa565b5b90963bef090625d3edc6c
(2) 0xeb2eb6ed4b325e77f5a597497ec5ffaa2f5c2650
(3) 0x1de061d5f225533f7e3c38a5905a6ca2ecb3e55a
(4) 0x3ec2e1ed3f47fc7ab9cca1fe09afe9fd1feb789b
(5) 0xf27a303880b73a0a287a2e5dc1286098fb49ed63
(6) 0xf3c007932e1de894503166aee3cbf85b4aff0188
(7) 0xe7655733659c14c7c83fb71bd40dc51796592d96
(8) 0x507722000223ca96ac646198709b9ae3f7f49a5a
(9) 0x82b087a83f72cc7dd5ca6ac7787a366b2c3ff143

Private Keys
==================
(0) 629551aa45c594ce822c5b4a378d01cf46fb57c15b69a61eb400a4867ffab002
(1) a90103a95ed805acc52782eaa29eb061f6c2a9431fed3ac18a683ea3143a29b6
(2) c2b13ce370fb235997dc4783ce591a22e5b3909e934dc7c0f61797ce57d5059d
(3) 841d0e1d3dc658ad2f308c7292b4d5c40da158d170cf3ed9001c64b8352cd0c2
(4) 255225aedba340b6ec62e6c86a6202535d7382704b129d022461c69b8341d2dd
(5) c3fd784fc7a46edb5e7cba9e90120e51152a3fbe2d8b97a0c3106791d3bbe87e
(6) f8f90b056c419464d48dcd12ac8e326a31ebe300ea5e245876fe0308c511fbac
(7) 09e20553971b044c1fda8ac88f2ed1dcdff6af0889fc05c2ad4374c52d4f52d7
(8) 142643d0fb6f4a78e0fd291a568b784869927d8f8eee87bf3fbdbf493ec3f425
(9) 8f89d4a05582193cc32f800ecf9419f35b5384abc5db42afd4ec016a54d27716

配置以太坊客戶端本地環(huán)境

ruffle.js是truffle的配置文件,位于dapp-guide-pet-shop目錄下，啟動(dòng)好以太坊本地結(jié)點(diǎn)以后，我們需要讓truffle去識(shí)別它并使用它，這就需要在truffle.js中配置相關(guān)屬性：

module.exports = {
  // See <http://truffleframework.com/docs/advanced/configuration>
  // for more about customizing your Truffle configuration!
  networks: {
    development: {
      host: "127.0.0.1",
      port: 8545,
      network_id: "*" // Match any network id
    }
  }
};

執(zhí)行部署命令

接下來在新的命令窗口執(zhí)行部署命令

cd /usr/work/dapp-guide-pet-shop
truffle migrate

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

Using network 'development'.

Running migration: 1_initial_migration.js
  Deploying Migrations...
  ... 0x29612ceea67bc946cc6ae82afbedc546f9a53ba8cab5d804f9025fb8f15e48f8
  Migrations: 0x8af912046664ba26738b811c34068d42216528c0
Saving successful migration to network...
  ... 0x6c968a3c492439ab22028e1956360a6b73a02716c436b15234cd29804dac7298
Saving artifacts...
Running migration: 2_deploy_contracts.js
  Deploying Adoption...
  ... 0x27448e4f75b608015f3670e3650cf607c882fe7f1a32f98e8a94bf7a406c871c
  Adoption: 0xe42f434105a7e0eacf4f4229c76e1e135d536db6
Saving successful migration to network...
  ... 0x9375cd6fa143d01a520c5ed0d46cfe859f482b01e37cf678d751c5db6a278e5f
Saving artifacts...

查看Ganache-cli的輸出文件：trace.log,可以看到區(qū)塊鏈狀態(tài)的變化，現(xiàn)在產(chǎn)生了4個(gè)區(qū)塊。

net_version
eth_accounts
eth_accounts
net_version
net_version
eth_sendTransaction

  Transaction: 0x29612ceea67bc946cc6ae82afbedc546f9a53ba8cab5d804f9025fb8f15e48f8
  Contract created: 0x8af912046664ba26738b811c34068d42216528c0
  Gas usage: 268407
  Block Number: 1
  Block Time: Tue Apr 10 2018 09:10:18 GMT+0800 (CST)

eth_newBlockFilter
eth_getFilterChanges
eth_getTransactionReceipt
eth_getCode
eth_uninstallFilter
eth_sendTransaction

  Transaction: 0x6c968a3c492439ab22028e1956360a6b73a02716c436b15234cd29804dac7298
  Gas usage: 41981
  Block Number: 2
  Block Time: Tue Apr 10 2018 09:10:19 GMT+0800 (CST)

eth_getTransactionReceipt
eth_accounts
net_version
net_version
eth_sendTransaction

  Transaction: 0x27448e4f75b608015f3670e3650cf607c882fe7f1a32f98e8a94bf7a406c871c
  Contract created: 0xe42f434105a7e0eacf4f4229c76e1e135d536db6
  Gas usage: 247573
  Block Number: 3
  Block Time: Tue Apr 10 2018 09:10:19 GMT+0800 (CST)

eth_newBlockFilter
eth_getFilterChanges
eth_getTransactionReceipt
eth_getCode
eth_uninstallFilter
eth_sendTransaction

  Transaction: 0x9375cd6fa143d01a520c5ed0d46cfe859f482b01e37cf678d751c5db6a278e5f
  Gas usage: 26981
  Block Number: 4
  Block Time: Tue Apr 10 2018 09:10:20 GMT+0800 (CST)

eth_getTransactionReceipt

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

測(cè)試

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

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

pragma solidity ^0.4.17;

import "truffle/Assert.sol";   // 引入的斷言
import "truffle/DeployedAddresses.sol";  // 用來獲取被測(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è)試用例

運(yùn)行測(cè)試用例

在終端中，執(zhí)行

truffle test

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

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 (246ms)
    ? testGetAdopterAddressByPetId (231ms)
    ? testGetAdopterAddressByPetIdInArray (287ms)


  3 passing (2s)

3. 創(chuàng)建用戶接口和智能合約交互

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

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

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

初始化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:8545');
    }
    web3 = new Web3(App.web3Provider);

    return App.initContract();
  }

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

實(shí)例化合約

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

  initContract: function() {
    // 加載Adoption.json，保存了Adoption的ABI（接口說明）信息及部署后的網(wǎng)絡(luò)(地址)信息，它在編譯合約的時(shí)候生成ABI，在部署的時(shí)候追加網(wǎng)絡(luò)信息
    $.getJSON('Adoption.json', function(data) {
      // Get the necessary contract artifact file and instantiate it with truffle-contract
       // 用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();
  },

處理領(lǐng)養(yǎng)

修改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);
      });
    });
  }

4. 安裝和配置lite-server

【定義】lite-server 是一個(gè)全功能的網(wǎng)站架設(shè)工具軟件包輕量級(jí)的，僅適用于開發(fā) 的 node 服務(wù)器，它僅支持 web app。它能夠?yàn)槟愦蜷_瀏覽器, 當(dāng)你的html或是JavaScript文件變化時(shí)，它會(huì)識(shí)別到并自動(dòng)幫你刷新瀏覽器, 還能使用套接字自動(dòng)注入變化的CSS, 當(dāng)路由沒有被找到時(shí)，它將自動(dòng)后退頁面。
參考文章《第一課如何在WINDOWS環(huán)境下搭建以太坊開發(fā)環(huán)境》的"（8）安裝 lite-server 【可選】”章節(jié)完成lite-server的安裝。

bs-config.json文件指示了lite-server的工作目錄。

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

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

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

{
  "name": "pet-shop",
  "version": "1.0.0",
  "description": "",
  "main": "truffle.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "dev": "lite-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.3.0"
  }
}

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

cd /usr/work/dapp-guide-pet-shop
npm run dev

正常的運(yùn)行結(jié)果有如下類似輸出內(nèi)容：

> pet-shop@1.0.0 dev /usr/work/dapp-guide-pet-shop
> 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.80.144:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.80.144:3001
 ---------------------------------------
[Browsersync] Serving files from: ./src
[Browsersync] Serving files from: ./build/contracts
[Browsersync] Watching files...

5. 安裝 MetaMask和配置區(qū)塊鏈網(wǎng)絡(luò)

安裝 MetaMask

【定義】MetaMask 是一款插件形式的以太坊輕客戶端，開發(fā)過程中使用MetaMask和我們的dapp進(jìn)行交互是個(gè)很好的選擇。
作者是在本地WINDOWS的CHROME瀏覽器上安裝MetaMask錢包工具，具體的安裝方法參考文章《第一課如何在WINDOWS環(huán)境下搭建以太坊開發(fā)環(huán)境》的“（7）安裝 MetaMask 【可選】”章節(jié)。
說明下，最詳細(xì)的MetaMask安裝/配置文章可參考?xì)W陽哥哥的《以太坊錢包MetaMask使用教程》

配置錢包

1. 接受隱私條款
點(diǎn)擊瀏覽器地址欄右側(cè)，MetaMask的狐貍頭圖標(biāo)，第一次使用時(shí)，會(huì)出一個(gè)隱私提示，如下圖：

隱私提示

2. 接受服務(wù)條款
點(diǎn)擊Accept按鈕，顯示的是MetaMask的服務(wù)條款，如下圖2-2：

image.png

Accept按鈕默認(rèn)是灰色的，將滾動(dòng)條拉到底部，就可以點(diǎn)擊Accept按鈕了

3、創(chuàng)建新賬號(hào)

創(chuàng)建新賬號(hào)：輸入一串8位以上的密碼，再次重復(fù)輸入，點(diǎn)擊CREATE按鈕，即可完成。
下面以創(chuàng)建新賬號(hào)為例：

作者啟動(dòng)大寫鍵使用自己的通用密碼設(shè)置

在點(diǎn)擊CREATE按鈕后，MetaMask會(huì)為用戶創(chuàng)建12個(gè)英文助記詞，一定要保存好這些助記詞，點(diǎn)擊SAVE SEED WORDS AS FILE可以將助詞詞以文件的形式保存到本地，建議使用紙筆手工記錄并收藏于安全的地方。

SEED

連接開發(fā)區(qū)塊鏈網(wǎng)絡(luò)

默認(rèn)連接的是以太坊主網(wǎng)（左上角顯示），選擇Custom RPC，添加Ubuntu的IP地址作為客戶自定義RPC網(wǎng)絡(luò)

http://192.168.80.144:8545

鏈接測(cè)試機(jī)以太坊客戶端成功，菜單有鏈接成功的橙色√提示。

連接成功

這是左上角顯示為Private Network，此時(shí)顯示的是默認(rèn)的Account 1空賬號(hào)，ETH數(shù)量為0。

導(dǎo)入Ganache-cli的第一個(gè)錢包賬號(hào)

查看“trace.log”文件，可以Ganache-cli的第一個(gè)默認(rèn)錢包地址為

(0) 629551aa45c594ce822c5b4a378d01cf46fb57c15b69a61eb400a4867ffab002
(1) a90103a95ed805acc52782eaa29eb061f6c2a9431fed3ac18a683ea3143a29b6

選擇MetaMask的“Import Account”輸入私鑰，獲取賬號(hào)，可以查看對(duì)應(yīng)ETH余額。

輸入私鑰

第一個(gè)錢包賬戶的余額：

99.211ETH,智能合約運(yùn)行已消耗

第二個(gè)錢包賬戶的余額：

100ETH，未消耗過

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

6. 領(lǐng)養(yǎng)寵物

修改.\dapp-guide-pet-shop\src\index.html文件引用jquery的地址

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     -->
     <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->

在WINDOWS瀏覽器輸入測(cè)試網(wǎng)站地址
http://192.168.80.144:3000/

可以看到寵物商店的入口界面：

可愛的狗狗

點(diǎn)擊“Adopt”按鈕，領(lǐng)養(yǎng)這個(gè)最漂亮的狗狗寶貝。MetaMask會(huì)提示我們交易的確認(rèn)，如圖：

要從當(dāng)前賬號(hào)6扣除交易費(fèi)用

點(diǎn)擊“SUBMIT”按鈕成功后，這個(gè)狗狗的按鈕變?yōu)?SUCCESS"，該狗狗已被包養(yǎng)了。

領(lǐng)養(yǎng)成功

查看當(dāng)前打開的賬號(hào)ACCOUNT6，發(fā)現(xiàn)金額不再是100ETH，而是99.999ETH了。

賬戶余額消耗

恭喜你，開發(fā)并成功部署了一個(gè)DAPP區(qū)塊鏈應(yīng)用程序，并且領(lǐng)養(yǎng)了幾只小狗狗。

6. 知識(shí)對(duì)接服務(wù)

我們?cè)谥R(shí)星球開通了區(qū)塊鏈入門專欄，用于存放本項(xiàng)目的工程源碼等內(nèi)容，并建立專項(xiàng)微信群用于技術(shù)交流，歡迎加入。

分享碼

7. 參考

1)，Truffle官網(wǎng)文檔
2)，一步步教你開發(fā)、部署第一個(gè)Dapp應(yīng)用:寵物商店
3)，web3.js 1.0中文手冊(cè)-接口詳細(xì)涉及web3.eth.personal函數(shù)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

第六課技術(shù)小白如何開發(fā)一個(gè)DAPP區(qū)塊鏈應(yīng)用(以寵物商店為例)

第六課技術(shù)小白如何開發(fā)一個(gè)DAPP區(qū)塊鏈應(yīng)用(以寵物商店為例)

1. 文章摘要

【本文目標(biāo)】

【環(huán)境前置條件】

【技術(shù)收獲】

【實(shí)操課程列表】

2. 下載/編寫TRUFFLE框架的智能合約

項(xiàng)目背景

環(huán)境搭建

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

項(xiàng)目目錄結(jié)構(gòu)

編寫智能合約

編譯部署智能合約

編譯

編寫部署代碼

安裝啟動(dòng)Ganache測(cè)試環(huán)境

配置以太坊客戶端本地環(huán)境

執(zhí)行部署命令

測(cè)試

運(yùn)行測(cè)試用例

3. 創(chuàng)建用戶接口和智能合約交互

初始化web3

實(shí)例化合約

處理領(lǐng)養(yǎng)

4. 安裝和配置lite-server

5. 安裝 MetaMask和配置區(qū)塊鏈網(wǎng)絡(luò)

安裝 MetaMask

配置錢包

連接開發(fā)區(qū)塊鏈網(wǎng)絡(luò)

導(dǎo)入Ganache-cli的第一個(gè)錢包賬號(hào)

6. 領(lǐng)養(yǎng)寵物

6. 知識(shí)對(duì)接服務(wù)

7. 參考

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

第六課 技術(shù)小白如何開發(fā)一個(gè)DAPP區(qū)塊鏈應(yīng)用(以寵物商店為例)

1. 文章摘要

【本文目標(biāo)】

【環(huán)境前置條件】

【技術(shù)收獲】

【實(shí)操課程列表】

2. 下載/編寫TRUFFLE框架的智能合約

項(xiàng)目背景

環(huán)境搭建

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

項(xiàng)目目錄結(jié)構(gòu)

編寫智能合約

編譯部署智能合約

編譯

編寫部署代碼

安裝啟動(dòng)Ganache測(cè)試環(huán)境

配置以太坊客戶端本地環(huán)境

執(zhí)行部署命令

測(cè)試

運(yùn)行測(cè)試用例

3. 創(chuàng)建用戶接口和智能合約交互

初始化web3

實(shí)例化合約

處理領(lǐng)養(yǎng)

4. 安裝和配置lite-server

5. 安裝 MetaMask和配置區(qū)塊鏈網(wǎng)絡(luò)

安裝 MetaMask

配置錢包

連接開發(fā)區(qū)塊鏈網(wǎng)絡(luò)

導(dǎo)入Ganache-cli的第一個(gè)錢包賬號(hào)

6. 領(lǐng)養(yǎng)寵物

6. 知識(shí)對(duì)接服務(wù)

7. 參考

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

第六課技術(shù)小白如何開發(fā)一個(gè)DAPP區(qū)塊鏈應(yīng)用(以寵物商店為例)