如何構(gòu)建 Web3 網(wǎng)站應(yīng)用？看這一篇就夠了
通常來(lái)說(shuō)我們認(rèn)為 Web1.0 是使用用戶名和密碼進(jìn)行登錄的應(yīng)用，而 Web2.0 是使用第三方登錄，例如 Facebook、Google、微信等等，而 Web3?則是使用進(jìn)行錢包登錄，用戶產(chǎn)生的所有價(jià)值都屬于用戶自己。
那么究竟 Web3.0 是一個(gè)什么樣子的呢？接下來(lái)我們用一個(gè)簡(jiǎn)單的示例來(lái)體驗(yàn)下如何開發(fā)一個(gè)完整的 Web3.0 網(wǎng)站應(yīng)用。
合約
首先打開終端，創(chuàng)建一個(gè)名為 hello-web3 的目錄，在該目錄下面初始化 hardhat：
??mkdir?hello-web3?&&?cd?hello-web3
??npx?hardhat?init
Hardhat 是一套完整的 Ethereum 的本地開發(fā)套件，我們可以通過(guò)它進(jìn)行智能合約的測(cè)試和部署。
這里我們選擇創(chuàng)建一個(gè) sample 類型的項(xiàng)目，其他保持默認(rèn)配置即可，初始化完成后我們可以使用 VSCode 打開項(xiàng)目目錄，默認(rèn)的項(xiàng)目結(jié)構(gòu)如下圖所示：
先將項(xiàng)目的 contracts 和 scripts 目錄下面的文件移除，我們從0開始編寫一個(gè)智能合約。在 contracts 目錄下面創(chuàng)建一個(gè)名為 Counter.sol 的文件，.sol 是 Solidity 語(yǔ)言的文件名后綴，然后我們就可以開始在該文件中編寫代碼了，一般合約一開始都會(huì)有一句版權(quán)聲明，然后會(huì)定義使用 solidity 的版本號(hào)，為了測(cè)試方便一般我們也會(huì)導(dǎo)入 console.log() 這個(gè)工具包：
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;
import "hardhat/console.sol";
從上面的代碼使用習(xí)慣上可以看出，Solidity 和 JavaScript 比較相似。
接下來(lái)我們就可以定義合約了，使用 contract 關(guān)鍵字，比如這里我們定義一個(gè)名為 Counter 的合約，并在合約里面定義一個(gè)名為 counts 的 state 變量，用來(lái)保存計(jì)數(shù)器的數(shù)據(jù)，然后使用 constructor() 定義一個(gè)構(gòu)造函數(shù)，在函數(shù)體內(nèi)將 counts 變量初始化為0，不過(guò)在獲取定義變量的時(shí)候不再需要大家熟知的 this 關(guān)鍵字了：
contract Counter {
uint256 counts;
constructor() {
counts = 0;
}
}
我們想要實(shí)現(xiàn)的一個(gè)功能是用戶在前端頁(yè)面上點(diǎn)擊一個(gè)按鈕然后計(jì)數(shù)器就+1，所以除了上面的變量定義之外，我們還需要定義一個(gè)計(jì)數(shù)器增加的函數(shù) add()，同樣還要獲取計(jì)數(shù)器的數(shù)據(jù)，也需要定義一個(gè) getCounts() 的函數(shù)：
contract Counter {
uint256 counts;
constructor() {
counts = 0;
}
function add() public {
counts = counts + 1;
}
function getCounts() public view returns (uint256) {
return counts;
}
}
在定義函數(shù)的時(shí)候，函數(shù)名后面我們添加了一個(gè) public 關(guān)鍵字，表示當(dāng)前合約函數(shù)可以被外部調(diào)用，另外一個(gè)函數(shù)在獲取變量值的時(shí)候還添加了一個(gè) view 關(guān)鍵字，表示該函數(shù)只是讀取數(shù)據(jù)，并不會(huì)涉及到交易（可以理解為調(diào)用這個(gè)函數(shù)不用花 gas 費(fèi)用）。
到這里我們的第一個(gè)簡(jiǎn)單的智能合約就編寫完成了，完整的合約代碼如下所示：
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract Counter {
uint256 counts;
constructor() {
counts = 0;
}
function add() public {
counts = counts + 1;
}
function getCounts() public view returns (uint256) {
return counts;
}
}
測(cè)試
智能合約編寫完成后，接下來(lái)我們需要來(lái)對(duì)這份合約進(jìn)行測(cè)試。
首先在 scripts 目錄下面新增一個(gè)名為 run.js 的文件，在文件中定義一個(gè) main 函數(shù)，注意要加上 async 關(guān)鍵字，因?yàn)楹瘮?shù)內(nèi)的很多語(yǔ)句執(zhí)行都需要等待，所以一般我們會(huì)使用 async/await 的模式去編寫，先將 Counter 這份智能合約獲取到，獲取到后將合約部署到區(qū)塊鏈上去，由于上鏈需要一段時(shí)間，所以一般還需要加上一句判斷是否部署完成的代碼，用來(lái)確保智能合約部署完成了，部署完成后我們就可以獲取到合約的地址了，代碼如下所示：
//?可選的，通過(guò)?`node?
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>