今天我們來編寫一個完整的去中心化（區(qū)塊鏈）應(yīng)用（Dapps）, 本文可以和編寫智能合約結(jié)合起來看。
寫在前面
閱讀本文前滤奈，你應(yīng)該對以太坊厘贼、智能合約有所了解，如果你還不了解，建議你先看 以太坊 是什么
除此之外绘迁，你最好還了解一些HTML及JavaScript知識合溺。
本文通過實例教大家來開發(fā)去中心化應(yīng)用，應(yīng)用效果如圖：
從本文，你可以學(xué)習(xí)到：
- 搭建智能合約開發(fā)環(huán)境
- 創(chuàng)建Truffle項目
- 編寫智能合約
- 編譯和部署智能合約到區(qū)塊鏈
- 如何通過Web3和智能合約交互
- MetaMask 的使用
小專欄用戶在教程結(jié)尾處可以下載完整的Dapp代碼。
項目背景
Pete有一個寵物店窍仰，有16只寵物，他想開發(fā)一個去中心化應(yīng)用恭朗，讓大家來領(lǐng)養(yǎng)寵物。
在truffle box中依疼，已經(jīng)提供了pet-shop的網(wǎng)站部分的代碼痰腮，我們只需要編寫合約及交互部分。
環(huán)境搭建
- 安裝Node
- 安裝 Truffle ：npm install -g truffle
- 安裝Ganache [1]
創(chuàng)建項目
1.建立項目目錄并進(jìn)入
> mkdir pet-shop-tutorial
> cd pet-shop-tutorial
2.使用truffle unbox 創(chuàng)建項目
> 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 來創(chuàng)建一個全新的項目律罢。
項目目錄結(jié)構(gòu)
-
contracts/智能合約的文件夾膀值，所有的智能合約文件都放置在這里，里面包含一個重要的合約- - -
Migrations.sol（稍后再講） -
migrations/用來處理部署（遷移）智能合約 误辑，遷移是一個額外特別的合約用來保存合約的變化沧踏。 -
test/智能合約測試用例文件夾 -
truffle.js/配置文件
其他代碼可以暫時不用管
編寫智能合約
智能合約承擔(dān)著分布式應(yīng)用的后臺邏輯和存儲。智能合約使用 solidity 編寫巾钉，可閱讀 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ù)組長度內(nèi)
adopters[petId] = msg.sender; // 保存調(diào)用這地址
return petId;
}
// 返回領(lǐng)養(yǎng)者
function getAdopters() public view returns (address[16]) {
return adopters;
}
}
編譯部署智能合約
Truffle集成了一個開發(fā)者控制臺砰苍，可用來生成一個開發(fā)鏈用來測試和部署智能合約潦匈。
編譯
Solidity是編譯型語言，需要把可讀的Solidity代碼編譯為EVM字節(jié)碼才能運(yùn)行赚导。
dapp的根目錄pet-shop-tutorial下茬缩，
> truffle compile
輸出
Compiling ./contracts/Adoption.sol...
Writing artifacts to ./build/contracts
部署
編譯之后，就可以部署到區(qū)塊鏈上吼旧。
在migrations文件夾下已經(jīng)有一個1_initial_migration.js部署腳本凰锡，用來部署Migrations.sol合約。
Migrations.sol 用來確保不會部署相同的合約圈暗。
現(xiàn)在我們來創(chuàng)建一個自己的部署腳本2_deploy_contracts.js
var Adoption = artifacts.require("Adoption");
module.exports = function(deployer) {
deployer.deploy(Adoption);
};
在執(zhí)行部署之前掂为，需要確保有一個區(qū)塊鏈運(yùn)行
可以使用Ganache來開啟一個私鏈來進(jìn)行開發(fā)測試，默認(rèn)會在7545端口上運(yùn)行一個開發(fā)鏈员串。
Ganache 啟動之后是這樣：
接下來執(zhí)行部署命令:
> truffle migrate
執(zhí)行后菩掏，有一下類似的輸出，
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里可以看到區(qū)塊鏈狀態(tài)的變化昵济，現(xiàn)在產(chǎn)生了4個區(qū)塊。
這時說明已經(jīng)智能合約已經(jīng)部署好了。
測試
現(xiàn)在我們來測試一下智能合約访忿，測試用例可以用 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());
// 領(lǐng)養(yǎng)測試用例
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 {
// 期望領(lǐng)養(yǎng)者的地址就是本合約地址，因為交易是由測試合約發(fā)起交易卧斟，
address expected = this;
address adopter = adoption.adopters(8);
Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded.");
}
// 測試所有領(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的測試用例
運(yùn)行測試用例
在終端中珍语，執(zhí)行
> 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)
創(chuàng)建用戶接口和智能合約交互
我們已經(jīng)編寫和部署及測試好了我們的合約，接下我們?yōu)楹霞s編寫UI板乙，讓合約真正可以用起來是偷。
在Truffle Box pet-shop里，已經(jīng)包含了應(yīng)用的前端代碼募逞，代碼在src/文件夾下蛋铆。
在編輯器中打開src/js/app.js
可以看到用來管理整個應(yīng)用的App對象，init函數(shù)加載寵物信息放接，就初始化web3.
web3是一個實現(xiàn)了與以太坊節(jié)點通信的庫刺啦，我們利用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:7545');
}
web3 = new Web3(App.web3Provider);
return App.initContract();
}
代碼中優(yōu)先使用Mist 或 MetaMask提供的web3實例，如果沒有則從本地環(huán)境創(chuàng)建一個乳乌。
實例化合約
使用truffle-contract會幫我們保存合約部署的信息捧韵，就不需要我們手動修改合約地址，修改initContract()代碼如下：
initContract: function() {
// 加載Adoption.json汉操，保存了Adoption的ABI（接口說明）信息及部署后的網(wǎng)絡(luò)(地址)信息再来，它在編譯合約的時候生成ABI，在部署的時候 追加網(wǎng)絡(luò)信息
處理領(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;
// 獲取用戶賬號
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);
});
});
}
在瀏覽器中運(yùn)行
安裝 MetaMask
MetaMask 是一款插件形式的以太坊輕客戶端磷瘤，開發(fā)過程中使用MetaMask和我們的dapp進(jìn)行交互是個很好的選擇芒篷，通過此鏈接安裝，安裝完成后采缚，瀏覽器工具條會顯示一個小狐貍圖標(biāo)针炉。
配置錢包
在接受隱私說明后，會出現(xiàn)頁面如下：
這里我們通過還原一個Ganache為我們創(chuàng)建好的錢包扳抽，作為我們的開發(fā)測試錢包篡帕。點擊頁面的** Import Existing DEN**殖侵，輸入Ganache顯示的助記詞。
candy maple cake sugar pudding cream honey rich smooth crumble sweet treat
然后自己想要的密碼镰烧，點擊OK拢军。
如圖：
連接開發(fā)區(qū)塊鏈網(wǎng)絡(luò)
默認(rèn)連接的是以太坊主網(wǎng)（左上角顯示），選擇Custom RPC怔鳖，添加一個網(wǎng)絡(luò)：http://127.0.0.1:7545 茉唉，點返回后，顯示如下:
這是左上角顯示為Private Network结执，賬號是Ganache中默認(rèn)的第一個賬號度陆。
至此MetaMask的安裝，配置已經(jīng)完成献幔。
安裝和配置lite-server
接下來需要本地的web 服務(wù)器提供服務(wù)的訪問懂傀， Truffle Box pet-shop里提供了一個lite-server可以直接使用，我們看看它是如何工作的斜姥。
bs-config.json 指示了lite-server的工作目錄鸿竖。
{
"server": {
"baseDir": ["./src", "./build/contracts"]
}
}
./src 是網(wǎng)站文件目錄
./build/contracts 是合約輸出目錄
以此同時，在package.json文件的scripts中添加了dev命令：
"scripts": {
"dev": "lite-server",
"test": "echo "Error: no test specified" && exit 1"
},
當(dāng)運(yùn)行npm run dev的時候铸敏，就會啟動lite-server
啟動服務(wù)
> npm run dev
會自動打開瀏覽器顯示我們的dapp缚忧，如本文的第一張圖。
現(xiàn)在領(lǐng)養(yǎng)一直寵物看看杈笔，當(dāng)我們點擊Adopt時闪水，MetaMask會提示我們交易的確認(rèn)，如圖：
點擊Submit確認(rèn)后蒙具，就可以看到成功領(lǐng)養(yǎng)了這次寵物球榆。
在MetaMask中，也可以看到交易的清單：
好了禁筏，恭喜你持钉，即將成為一名去中心化式應(yīng)用開發(fā)者的你已經(jīng)成為邁出了堅實的一步。
如果學(xué)習(xí)中遇到問題篱昔，歡迎來我的知識星球交流每强。
-
Ganache（或Ganache CLI）已經(jīng)取代了 testrpc。 ?
