pet-shop Box項(xiàng)目地址：http://truffleframework.com/boxes/pet-shop
pet-shop Box官方教程：http://truffleframework.com/tutorials/pet-shop
原文：一步步教你開(kāi)發(fā)、部署第一個(gè)去中心化應(yīng)用(Dapp) - 寵物商店
作者： Tiny熊
本文在原文基于Truffle Box中的pet-shop Box代碼吕世，使用圖形化的Ganache以及插件形式的以太坊輕客戶端MetaMask秸侣，編寫(xiě)一個(gè)去中心化的寵物商店的基礎(chǔ)上，加入了在實(shí)際操作過(guò)程中解決遇到的問(wèn)題弦悉。例如頁(yè)面無(wú)法正常顯示的問(wèn)題。
項(xiàng)目背景
Pete有一個(gè)寵物店铃绒，有16只寵物次哈，他想開(kāi)發(fā)一個(gè)去中心化應(yīng)用，讓大家來(lái)領(lǐng)養(yǎng)寵物睬关。
在truffle box中诱担，已經(jīng)提供了pet-shop的網(wǎng)站部分的代碼，我們只需要編寫(xiě)合約及交互部分电爹。
環(huán)境搭建
- 安裝Node
- 安裝 Truffle
第1蔫仙，2步驟請(qǐng)查看區(qū)塊鏈開(kāi)發(fā)(一)Truffle入門(mén)指南 - 安裝Ganache
創(chuàng)建項(xiàng)目
- 建立項(xiàng)目目錄并進(jìn)入
yuyangdeMacBook-Pro:~ yuyang$ mkdir pet-shop-tutorial
yuyangdeMacBook-Pro:~ yuyang$ cd pet-shop-tutorial
- 使用truffle unbox 創(chuàng)建項(xiàng)目
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ truffle unbox pet-shop
這一步需要等待一會(huì)。
也可以使用truffle init 來(lái)創(chuàng)建一個(gè)全新的項(xiàng)目丐箩。
項(xiàng)目目錄結(jié)構(gòu)
contracts/ 智能合約的文件夾摇邦，所有的智能合約文件都放置在這里，里面包含一個(gè)重要的合約Migrations.sol（稍后再講）屎勘。
migrations/ 用來(lái)處理部署（遷移）智能合約 施籍，遷移是一個(gè)額外特別的合約用來(lái)保存合約的變化。
test/ 智能合約測(cè)試用例文件夾概漱。
truffle.js/ 配置文件法梯。
其他代碼可以暫時(shí)不用管。
編寫(xiě)智能合約
智能合約承擔(dān)著分布式應(yīng)用的后臺(tái)邏輯和存儲(chǔ)犀概。智能合約使用solidity編寫(xiě)。
在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)行产喉。
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ truffle compile
輸出
Compiling ./contracts/Migrations.sol...
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í)行部署命令:
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ truffle migrate
執(zhí)行后障涯，有以下類似的輸出:
Using network 'development'.
Running migration: 1_initial_migration.js
Deploying Migrations...
... 0x3f72ba590249446eea8e90d124450b341fe58505b6976c0ab334cb413b64257b
Migrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0
Saving successful migration to network...
... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956
Saving artifacts...
Running migration: 2_deploy_contracts.js
Deploying Adoption...
... 0xe85b10cb23f3e026b5252a8666393c074ad3f32d1e66f2d42eca034f5bfb1cc4
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)部署好了唯蝶。
測(cè)試
現(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è)試用例缔杉。
運(yùn)行測(cè)試用例
在終端中，執(zhí)行:
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ truffle test
如果測(cè)試通過(guò)搁料，則終端輸出：
Using network 'development'.
Compiling ./contracts/Adoption.sol...
Compiling ./test/TestAdoption.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...
TestAdoption
? testUserCanAdoptPet (62ms)
? testGetAdopterAddressByPetId (43ms)
? testGetAdopterAddressByPetIdInArray (119ms)
3 passing (539ms)
創(chuàng)建用戶接口和智能合約交互
我們已經(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)行交互。
初始化web3
接下來(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è)填渠。
實(shí)例化合約
使用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();
}
處理領(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);
}
// 用第一個(gè)賬號(hào)去領(lǐng)養(yǎng)
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);
});
});
}
在瀏覽器中運(yùn)行
安裝 MetaMask
MetaMask 是一款插件形式的以太坊輕客戶端捺檬，開(kāi)發(fā)過(guò)程中使用MetaMask和我們的dapp進(jìn)行交互是個(gè)很好的選擇再层，通過(guò)此鏈接安裝，安裝完成后欺冀，瀏覽器工具條會(huì)顯示一個(gè)小狐貍圖標(biāo)树绩。
配置錢(qián)包
在接受隱私說(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
連接開(kāi)發(fā)區(qū)塊鏈網(wǎng)絡(luò)
默認(rèn)連接的是以太坊主網(wǎng)（左上角顯示）瘫俊，選擇Custom RPC，添加一個(gè)網(wǎng)絡(luò)：http://127.0.0.1:7545悴灵，點(diǎn)返回后扛芽，顯示如下：
這時(shí)左上角顯示為Private Network，賬號(hào)是Ganache中默認(rèn)的第一個(gè)賬號(hào)积瞒。
至此MetaMask的安裝川尖，配置已經(jīng)完成。
安裝和配置lite-server
接下來(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
啟動(dòng)服務(wù)
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ npm run dev
會(huì)自動(dòng)打開(kāi)瀏覽器顯示我們的dapp剩晴。
注：這里可能會(huì)遇到頁(yè)面無(wú)法正常顯示的問(wèn)題锣咒，例如只顯示Pete's Pet Shop標(biāo)題，而不顯示內(nèi)容赞弥。原因在于
src/index.html引用了Google的jQuery文件被墻：
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
解決方法有三種：
- 翻墻毅整。
- 使用百度的庫(kù)文件地址替換。
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script>`绽左。
- 下載jQuery文件放在
src/js/下毛嫉，然后修改index.html文件。
<script src="js/jquery-2.1.0.min.js"></script>
現(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中，也可以看到交易的清單：
