當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[币严区块链]以太坊（ETH）Dapp开发入门教程之宠物商店领养游戏

發(fā)布時間：2023/11/30 编程问答 51 豆豆

生活随笔收集整理的這篇文章主要介紹了 [币严区块链]以太坊（ETH）Dapp开发入门教程之宠物商店领养游戏小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

閱讀本文前，你應(yīng)該對以太坊、智能合約有所了解，如果你還不了解，建議你先看以太坊是什么除此之外，你最好還了解一些HTML及JavaScript知識。本文通過實例教大家來開發(fā)去中心化應(yīng)用，應(yīng)用效果如圖:

項目背景

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

*Ganache（或Ganache CLI）已經(jīng)取代了 testrpc。

創(chuàng)建項目

1.建立項目目錄并進入

> mkdir pet-shop-tutorial > cd pet-shop-tutorial

2.使用truffle unbox 創(chuàng)建項目

> truffle unbox pet-shopDownloading...Unpacking...Setting up...Unbox successful. Sweet! Commands:Compile: truffle compileMigrate: truffle migrateTest contracts: truffle testRun dev server: npm run dev

這一步需要等待一會?，也可以使用truffle init 來創(chuàng)建一個全新的項目。

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

contracts/ 智能合約的文件夾，所有的智能合約文件都放置在這里，里面包含一個重要的合約Migrations.sol（稍后再講）。 migrations/ 用來處理部署（遷移）智能合約，遷移是一個額外特別的合約用來保存合約的變化。 test/ 智能合約測試用例文件夾。 truffle.js/ 配置文件。其他代碼可以暫時不用管。

?

編寫智能合約

智能合約承擔著分布式應(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é)碼才能運行。?
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ū)塊鏈運行?
可以使用Ganache來開啟一個私鏈來進行開發(fā)測試，默認會在7545端口上運行一個開發(fā)鏈。?
Ganache 啟動之后是這樣：?

接下來執(zhí)行部署命令:

> truffle migrate

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

Using network 'develop'. Running migration: 1_initial_migration.jsDeploying Migrations...... 0x3076b7dac65afc44ec51508bf6f2b6894f833f0f9560ecad2d6d41ed98a4679fMigrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0 Saving successful migration to network...... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956 Saving artifacts... Running migration: 2_deploy_contracts.jsDeploying Adoption...... 0x2c6ab4471c225b5473f2079ee42ca1356007e51d5bb57eb80bfeb406acc35cd4Adoption: 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的測試用例

運行測試用例

在終端中，執(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來和合約進行交互。

初始化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 GanacheApp.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ò)信息$.getJSON('Adoption.json', function(data) {// 用Adoption.json數(shù)據(jù)創(chuàng)建一個可交互的TruffleContract合約實例。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 petsreturn 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讀取信息不用消耗gasreturn 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);});}); }

在瀏覽器中運行

安裝 MetaMask

MetaMask 是一款插件形式的以太坊輕客戶端，開發(fā)過程中使用MetaMask和我們的dapp進行交互是個很好的選擇，安裝完成后，瀏覽器工具條會顯示一個小狐貍圖標。

配置錢包

在接受隱私說明后，會出現(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ò)

默認連接的是以太坊主網(wǎng)（左上角顯示），選擇Custom RPC，添加一個網(wǎng)絡(luò)：http://127.0.0.1:7545，點返回后，顯示如下：?

這時左上角顯示為Private Network，賬號是Ganache中默認的第一個賬號。

至此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" },

當運行npm run dev的時候，就會啟動lite-server

啟動服務(wù)

> npm run dev

會自動打開瀏覽器顯示我們的dapp，如本文的第一張圖。?
現(xiàn)在領(lǐng)養(yǎng)一直寵物看看，當我們點擊Adopt時，MetaMask會提示我們交易的確認，如圖：?

點擊Submit確認后，就可以看到成功領(lǐng)養(yǎng)了這個寵物。?
在MetaMask中，也可以看到交易的清單：?

好了，恭喜你，即將成為一名去中心化式應(yīng)用開發(fā)者的你已經(jīng)成為邁出了堅實的一步!

BIZZAN(幣嚴) 數(shù)字貨幣交易所官方網(wǎng)址：

www.bizzan.com

轉(zhuǎn)載于:https://www.cnblogs.com/bizzan/p/10401731.html

總結(jié)

以上是生活随笔為你收集整理的[币严区块链]以太坊（ETH）Dapp开发入门教程之宠物商店领养游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。