全干貨一步一步開發(fā)自己的第一個Dapp實戰(zhàn)

第一步:環(huán)境配置

1、安裝node環(huán)境(不會請自行百度)

2、安裝ganache

下載地址:https://www.trufflesuite.com/ganache

3、安裝Truffle

打開cmd窗口,運行命令:npm install -g truffle@v5.1.10


安裝成功結(jié)果

第二步:初始化項目

進(jìn)入自己的工作目錄

運行命令:truffle init pet-shop

運行成功結(jié)果

此時新生成的pet-shop目錄下會有如下文件


生成的文件

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

contracts/? ?----------- 智能合約的文件夾,所有的智能合約文件都放置在這里

migrations/? ?----------用來處理部署(遷移)智能合約 ,遷移是一個額外特別的合約用來保存合約的變化。

test/? ?-------------------智能合約測試用例文件夾

truffle-config.js? ?------配置文件

第三步:編寫自己的智能合約

智能合約承擔(dān)著分布式應(yīng)用的后臺邏輯和存儲。智能合約使用 solidity 編寫,可先了解solidity相關(guān)內(nèi)容。

在 contracts 目錄下,添加合約文件 Adoption.sol

// SPDX-License-Identifier: MIT

pragma solidity >=0.4.22 <0.9.0;

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] memory) {

? ? return adopters;

? ? }

}

第四步:編譯部署智能合約

1、編譯

在項目目錄pet-shop下運行命令:truffle compile

運行成功結(jié)果

2、部署

在migrations文件夾下創(chuàng)建一個自己的部署腳本? 2_deploy_contracts.js

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

module.exports =function(deployer) {

deployer.deploy(Adoption);

};

啟動Ganache來開啟一個私鏈來進(jìn)行開發(fā)測試,默認(rèn)會在7545端口上運行一個開發(fā)鏈。

啟動成功后效果,剛啟動current block是0,此圖是部署成功后的效果

核對配置文件,確保參數(shù)一致


truffle-config.js里的配置

接下來運行部署命令:truffle migrate


運行成功后的樣子

此時Ganache里的current block應(yīng)該會變成4

第五步:測試

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

在test目錄下新建一個TestAdoption.sol,編寫測試合約。

// SPDX-License-Identifier: MIT

pragma solidity >=0.4.22 <0.9.0;

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 = address(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 = address(this);

address[16] memory adopters = adoption.getAdopters();

Assert.equal(adopters[8], expected, "Owner of pet ID 8 should be recorded.");

}

}

運行測試用例:truffle test

運行成功結(jié)果

第六步:創(chuàng)建Dapp和智能合約交互

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

Dapp源碼下載:https://github.com/luoyeguiti/pet-store

將下載好的源碼放到本地web服務(wù)中,在瀏覽器中打開。

在瀏覽器中安裝metamask錢包插件,選擇RPC網(wǎng)絡(luò)為本地測試網(wǎng)絡(luò),如果沒有顯示可以自定義RPC,填寫Ganache中對應(yīng)的RPC SERVER。

(本人使用過程中遇到無法創(chuàng)建自定義RPC的問題,但是metamask默認(rèn)帶有l(wèi)ocalhost:8545網(wǎng)絡(luò),所以在truffle-config.js配置文件中將端口改成8545,并且在Ganache的設(shè)置中修改了端口,解決了問題)



連接好metamask錢包后,就可以進(jìn)行領(lǐng)養(yǎng)寵物了。


已連接


領(lǐng)養(yǎng)確認(rèn)

到此,一個簡單的Dapp就完成了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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