今天我們來(lái)編寫一個(gè)完整的去中心化（區(qū)塊鏈）應(yīng)用（Dapps）
項(xiàng)目背景
Jack有一個(gè)寵物店，有16只寵物，他想開(kāi)發(fā)一個(gè)去中心化應(yīng)用，讓大家來(lái)領(lǐng)養(yǎng)寵物。
在truffle box中，已經(jīng)提供了pet-shop的網(wǎng)站部分的代碼，我們只需要編寫合約及交互部分。
環(huán)境搭建
安裝Node
安裝 Truffle ：npm install -g truffle
安裝Ganache
創(chuàng)建項(xiàng)目
1、建立項(xiàng)目目錄并進(jìn)入
2、使用truffle unbox 創(chuàng)建項(xiàng)目
項(xiàng)目目錄結(jié)構(gòu)
contracts/?智能合約的文件夾，所有的智能合約文件都放置在這里，里面包含一個(gè)重要的合約Migrations.sol
migrations/?用來(lái)處理部署（遷移）智能合約 ，遷移是一個(gè)額外特別的合約用來(lái)保存合約的變化。
test/?智能合約測(cè)試用例文件夾
truffle.js/?配置文件
編寫智能合約
智能合約承擔(dān)著分布式應(yīng)用的后臺(tái)邏輯和存儲(chǔ)，智能合約使用solidity編寫。
1、在contracts目錄下，添加合約文件Adoption.sol
編譯部署智能合約
Truffle集成了一個(gè)開(kāi)發(fā)者控制臺(tái)，可用來(lái)生成一個(gè)開(kāi)發(fā)鏈用來(lái)測(cè)試和部署智能合約。
編譯
Solidity是編譯型語(yǔ)言，需要把可讀的Solidity代碼編譯為EVM字節(jié)碼才能運(yùn)行。
dapp的根目錄pet-shop-pro下：
輸出：
部署
編譯之后，就可以部署到區(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
在執(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í)行部署命令:?truffle migrate
在打開(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)編寫，這里使用Solidity。
在test目錄下新建一個(gè)TestAdoption.sol，編寫測(cè)試合約。
運(yùn)行測(cè)試用例
出現(xiàn)如上界面，代表測(cè)試通過(guò)。
創(chuàng)建用戶接口和智能合約交互
我們已經(jīng)編寫和部署及測(cè)試好了合約，接下為合約編寫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
代碼中優(yōu)先使用Mist?或?MetaMask提供的web3實(shí)例，如果沒(méi)有則從本地環(huán)境創(chuàng)建一個(gè)。
實(shí)例化合約
使用truffle-contract會(huì)幫我們保存合約部署的信息，就不需要我們手動(dòng)修改合約地址，修改initContract()代碼如下：
處理領(lǐng)養(yǎng)
修改markAdopted()代碼：
修改handleAdopt()代碼：
在瀏覽器中運(yùn)行
安裝 MetaMask
MetaMask 是一款插件形式的以太坊輕客戶端，開(kāi)發(fā)過(guò)程中使用MetaMask和我們的dapp進(jìn)行交互是個(gè)很好的選擇，安裝完成后，瀏覽器工具條會(huì)顯示一個(gè)小狐貍圖標(biāo)。
配置錢包
在接受隱私說(shuō)明后，會(huì)出現(xiàn)頁(yè)面如下：
這里我們通過(guò)還原一個(gè)Ganache為我們創(chuàng)建好的錢包，作為我們的開(kāi)發(fā)測(cè)試錢包。點(diǎn)擊頁(yè)面的Import Existing DEN，輸入Ganache顯示的助記詞。
huble bus frown switch hamster index slam flat pigeon breeze choose casino
連接開(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的工作目錄。
./src 是網(wǎng)站文件目錄
./build/contracts 是合約輸出目錄
在package.json文件的scripts中添加了dev命令：
當(dāng)運(yùn)行npm run dev的時(shí)候，就會(huì)啟動(dòng)lite-server
啟動(dòng)服務(wù)
會(huì)自動(dòng)打開(kāi)瀏覽器顯示我們的dapp，如下圖：
現(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)了一個(gè)寵物。
好了，至此去中心化式應(yīng)用DAPP已經(jīng)開(kāi)發(fā)完畢。
