前言

Web 3.0 的概念是由以太坊聯(lián)合創(chuàng)始人 Gavin Wood 在 2014 年提出的，指基于區(qū)塊鏈的去中心化在線生態(tài)系統(tǒng)，它代表了下一代互聯(lián)網(wǎng)時(shí)代。目前 Web 3.0 仍處于起步階段，但是發(fā)展非常迅猛，其去中心化、抗審查等特點(diǎn)使得人們更容易建設(shè)一個(gè)開放的網(wǎng)絡(luò)生態(tài)。本文會(huì)先對(duì) Web3.0 的底層區(qū)塊鏈做個(gè)簡(jiǎn)單介紹，然后再介紹 Web3.0 的整體架構(gòu)，最后通過一個(gè)簡(jiǎn)單的例子來介紹 Web3.0 開發(fā)常用的一些技術(shù)。本文只是一個(gè)引子，讓大家對(duì) Web3.0 不再陌生，文中提到的一些技術(shù)感興趣的同學(xué)可以再自行深入了解。

區(qū)塊鏈簡(jiǎn)介

區(qū)塊鏈架構(gòu)

區(qū)塊鏈?zhǔn)且粋€(gè)去中心化的分布式賬本，可以在數(shù)字世界中進(jìn)行價(jià)值的表示和轉(zhuǎn)移。區(qū)塊鏈的架構(gòu)自下而上分為六層，分別是數(shù)據(jù)層、網(wǎng)絡(luò)層、共識(shí)層、激勵(lì)層、合約層和應(yīng)用層。

• 數(shù)據(jù)層

區(qū)塊鏈?zhǔn)峭ㄟ^區(qū)塊（block）存儲(chǔ)數(shù)據(jù)，每個(gè)數(shù)據(jù)節(jié)點(diǎn)之間都包含所有數(shù)據(jù)，即分布式賬本。每個(gè)區(qū)塊都包括了區(qū)塊的大小、區(qū)塊頭、區(qū)塊所包含的交易數(shù)量及部分或所有的近期新交易。數(shù)據(jù)層主要是解決這些數(shù)據(jù)以什么樣的形式組合在一起，形成一個(gè)有意義的區(qū)塊。區(qū)塊鏈的數(shù)據(jù)結(jié)構(gòu)中包括兩種哈希指針，它們均是不可篡改特性的數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)。一個(gè)是形成“區(qū)塊+鏈”（block+chain）的鏈狀數(shù)據(jù)結(jié)構(gòu)，另一個(gè)是哈希指針形成的梅克爾樹（如下圖所示）。鏈狀數(shù)據(jù)結(jié)構(gòu)使得對(duì)某一區(qū)塊內(nèi)的數(shù)據(jù)的修改很容易被發(fā)現(xiàn)；梅克爾樹的結(jié)構(gòu)起類似作用，使得對(duì)其中的任何交易數(shù)據(jù)的修改很容易被發(fā)現(xiàn)。

可以在https://www.blockchain.com/explorer上查看比特幣的區(qū)塊鏈交易數(shù)據(jù)，可以在https://cn.etherscan.com/上查看以太坊的區(qū)塊鏈交易數(shù)據(jù)。

• 網(wǎng)絡(luò)層

區(qū)塊鏈?zhǔn)褂玫氖侨ブ行幕木W(wǎng)絡(luò)架構(gòu)，沒有中心化服務(wù)器，依靠用戶點(diǎn)對(duì)點(diǎn)交換信息，主要包括 P2P 組網(wǎng)機(jī)制、數(shù)據(jù)傳播和驗(yàn)證機(jī)制。正是由于節(jié)點(diǎn)的 P2P 特性，數(shù)據(jù)傳輸是分散在各個(gè)節(jié)點(diǎn)之間進(jìn)行的，部分節(jié)點(diǎn)或網(wǎng)絡(luò)遭到破壞對(duì)其他部分影響很小。節(jié)點(diǎn)指的是區(qū)塊鏈客戶端軟件（比如比特幣客戶端、以太坊客戶端），一般分為全節(jié)點(diǎn)和輕節(jié)點(diǎn)，全節(jié)點(diǎn)包含了所有區(qū)塊鏈的區(qū)塊數(shù)據(jù)，輕節(jié)點(diǎn)僅包括與自己相關(guān)的數(shù)據(jù)。

• 共識(shí)層

共識(shí)層的功能是讓高度分散的節(jié)點(diǎn)在 P2P 網(wǎng)絡(luò)中，針對(duì)區(qū)塊數(shù)據(jù)的有效性達(dá)成共識(shí)，決定了誰可以將新的區(qū)塊添加到主鏈中（挖礦機(jī)制）。

工作量證明共識(shí)機(jī)制（PoW），礦工需要將網(wǎng)絡(luò)中未確認(rèn)的交易按梅克爾樹組裝成候選區(qū)塊，在候選區(qū)塊的頭部有一個(gè) 32 位的隨機(jī)數(shù)區(qū)域，礦工需要反復(fù)調(diào)整隨機(jī)數(shù)并計(jì)算，目標(biāo)是讓整個(gè)區(qū)塊的哈希值小于一個(gè)“目標(biāo)值”，誰先完成這個(gè)目標(biāo)誰就有權(quán)力將交易記錄到區(qū)塊鏈分布式賬本中并獲得一定的獎(jiǎng)勵(lì)。挖礦的過程比拼的就是各個(gè)礦工節(jié)點(diǎn)的算力，可以變相認(rèn)為誰的算力高誰的工作量就高，就有權(quán)力記賬和獲得獎(jiǎng)勵(lì)。比特幣使用的是 PoW 機(jī)制；以太坊開始使用的是 PoW 機(jī)制，后來改成了 PoS 機(jī)制，原因是該機(jī)制交易速度更快、資源消耗更低。這種挖礦計(jì)算是非對(duì)稱的，挖礦可能需要經(jīng)過許多次哈希計(jì)算，而要驗(yàn)證的確找到有效的隨機(jī)數(shù)，只需要一次計(jì)算就可以，因此其他節(jié)點(diǎn)能夠很快驗(yàn)證交易是否已經(jīng)被記入賬本。

• 激勵(lì)層

激勵(lì)層的功能主要是提供一些激勵(lì)措施，鼓勵(lì)節(jié)點(diǎn)參與記賬，保證整個(gè)網(wǎng)絡(luò)的安全運(yùn)行。通過共識(shí)機(jī)制勝出取得記賬權(quán)的節(jié)點(diǎn)能獲得一定的獎(jiǎng)勵(lì)。

目前比特幣的激勵(lì)措施是新區(qū)塊產(chǎn)生時(shí)系統(tǒng)會(huì)獎(jiǎng)勵(lì)礦工一定的比特幣（系統(tǒng)產(chǎn)生的新比特幣，也會(huì)記錄在分布式賬本，來源地址是 0，因此整個(gè)過程叫挖礦），獎(jiǎng)勵(lì)最初是 50 個(gè)比特幣，每四年減半一次，分別為 25 個(gè)、12.5 個(gè)，以此類推。當(dāng)比特幣數(shù)量達(dá)到 2100 萬枚的上限后（2140 年），激勵(lì)就全靠交易的手續(xù)費(fèi)了。以太坊交易是靠 gas 手續(xù)費(fèi)來激勵(lì)礦工。

• 合約層

合約層封裝了各類腳本、算法和智能合約，使得區(qū)塊鏈具有可編程能力。例如，比特幣的腳本^[1]中就規(guī)定了比特幣的交易方式和過程中的種種細(xì)節(jié)，不過這種腳本使用不夠便捷且不是圖靈完備的。以太坊提出了智能合約的解決方案，提供了一種圖靈完備的高級(jí)編程語言來編寫智能合約，并使智能合約能夠運(yùn)行在分布式的以太坊虛擬機(jī) EVM 上。智能合約就是存儲(chǔ)在區(qū)塊鏈上的一段代碼，它們可以被區(qū)塊鏈上的交易所觸發(fā)，觸發(fā)后，這段代碼可以從區(qū)塊鏈上讀取數(shù)據(jù)或者向區(qū)塊鏈上寫入數(shù)據(jù)。區(qū)塊鏈系統(tǒng)（比特幣、以太坊）可以認(rèn)為是一個(gè)分布式狀態(tài)機(jī)，通過交易觸發(fā)合約（腳本、智能合約）運(yùn)行來改變狀態(tài)機(jī)的狀態(tài)。

• 應(yīng)用層

應(yīng)用層封裝了區(qū)塊鏈的各種應(yīng)用場(chǎng)景，具體應(yīng)用可參見90+ #Ethereum Apps You Can Use Right Now^[2]。

以下為一筆比特幣轉(zhuǎn)賬交易的過程：

以太坊簡(jiǎn)介

因?yàn)槲覀儗⒁谝蕴簧祥_發(fā)一個(gè) Web3.0 demo 應(yīng)用，所以先簡(jiǎn)單介紹一下以太坊的一些基本概念。

賬戶和錢包

以太坊賬戶分為外部賬戶和合約賬戶。外部賬戶是擁有私鑰的賬戶，擁有私鑰意味著控制對(duì)以太幣或合約的訪問。合約賬戶具有地址但是沒有私鑰，合約賬戶具有智能合約代碼，而外部賬戶不具有。智能合約代碼是在合約賬戶創(chuàng)建時(shí)由以太坊區(qū)塊鏈記錄的軟件程序，由 EVM 執(zhí)行。

錢包是用來管理以太坊賬戶的軟件應(yīng)用程序 ，它控制對(duì)以太幣的訪問、管理私鑰和地址、跟蹤賬戶的余額、創(chuàng)建并簽名交易。可以說，以太坊錢包是通往以太坊世界的大門。一個(gè)針對(duì)以太坊錢包的常見誤解是認(rèn)為錢包中包含以太幣或者代幣。實(shí)際上，錢包中只保存了密鑰。以太幣和其他各種代幣都保存在以太坊區(qū)塊鏈上。

當(dāng)創(chuàng)建一個(gè)以太坊外部賬戶的時(shí)候，會(huì)用非對(duì)稱加密算法生成一對(duì)公鑰與私鑰，并保存在錢包里，而地址是公鑰的哈希值。交易的簽名和驗(yàn)證過程如下（橢圓曲線數(shù)字簽名算法）：

Sig=Fsig(Fkeccak256(m) , k)

其中：

• k 是用于簽名的私鑰

• m 是經(jīng)過 RLP 編碼的交易數(shù)據(jù)包

• Fkeccak256 是 Keccak-256 哈希函數(shù)

• Fsig 是簽名算法

• Sig 是輸出的數(shù)字簽名

函數(shù) Fsig 生成了一個(gè)簽名，這個(gè)簽名包含兩部分內(nèi)容，通常稱為 r 和 s：Sig=(r, s)

簽名驗(yàn)證算法的輸入包括交易數(shù)據(jù)包（其實(shí)是交易的哈希值的一部分）、簽名方的公鑰和簽名（r 和 s 值），如果針對(duì)消息和公鑰的簽名驗(yàn)證成功，算法會(huì)返回 true。

以太幣和 gas

以太坊的貨幣單位稱為 ether，也常使用 ETH 表示，例如 1 ether 或者 1 ETH。以太幣可以被拆分成更小的單元，最小單元稱為 wei，1 ether = 10^18 wei。以太幣的面額和單位名稱如下所示：

以太坊交易過程使用的是 gas 來支付手續(xù)費(fèi)。gas 并不是以太幣，它是一種獨(dú)立的虛擬貨幣，跟以太幣之間存在匯率關(guān)系。gas 獨(dú)立于以太幣，是為了在以太幣價(jià)格大幅度波動(dòng)的情況下，仍舊保護(hù)系統(tǒng)的靈活性，保證 gas 的價(jià)值相對(duì)穩(wěn)定。

gas 的另一個(gè)作用是控制交易對(duì)資源的使用。交易數(shù)據(jù)會(huì)包含 gasPrice（交易發(fā)起方愿意支付的 gas 價(jià)格）和 gasLimit（交易發(fā)起方愿意為這個(gè)交易支付的最大 gas 數(shù)量）兩個(gè)參數(shù)，而每一條智能合約代碼語句的運(yùn)行都會(huì)消耗對(duì)應(yīng)的 gas，當(dāng)運(yùn)行過程中累計(jì)的 gas 消耗超過了 gasLimit，合約就會(huì)終止執(zhí)行，交易失敗。失敗的交易仍舊會(huì)被作為一次失敗的嘗試而記錄在案，執(zhí)行所花費(fèi)的 gas 將從發(fā)起賬戶中被扣除，除此之外，它不會(huì)對(duì)合約或者賬戶狀態(tài)產(chǎn)生任何其他影響。

客戶端

Geth 是官方提供的 go 語言實(shí)現(xiàn)的以太坊客戶端。客戶端可以以全功能節(jié)點(diǎn)的方式運(yùn)行，也可以以遠(yuǎn)程調(diào)用的方式運(yùn)行。全功能節(jié)點(diǎn)會(huì)下載全部的區(qū)塊數(shù)據(jù)，對(duì)系統(tǒng)的網(wǎng)絡(luò)和存儲(chǔ)有較高的要求。從遠(yuǎn)程調(diào)用以太坊的客戶端不在本地保存區(qū)塊鏈數(shù)據(jù)，也不參與區(qū)塊和交易驗(yàn)證，這樣的客戶端提供錢包功能，也可以創(chuàng)建并廣播交易。以太坊客戶端會(huì)對(duì)外提供 API（例如 web3.js API、JSON-RPC API）來訪問以太坊網(wǎng)絡(luò)。

智能合約

智能合約是運(yùn)行在以太坊的虛擬機(jī)上的計(jì)算機(jī)程序，一旦部署之后，智能合約的代碼就不能被更改，但是可以刪除。把合約注冊(cè)到區(qū)塊鏈上需要通過一個(gè)特殊的交易，這個(gè)交易的目標(biāo)地址是 0x0000000000000000000000000000000000000000，也被稱為零地址。

當(dāng)交易目標(biāo)是合約地址時(shí)，它會(huì)導(dǎo)致該合約在 EVM 中運(yùn)行，使用交易和交易的數(shù)據(jù)作為其輸入。由于合約賬戶沒有私鑰，因此無法啟動(dòng)交易。只有外部賬戶才能啟動(dòng)交易，但合約可以通過調(diào)用其他合約，構(gòu)建復(fù)雜的執(zhí)行路徑來對(duì)交易做出反應(yīng)。智能合約永遠(yuǎn)不會(huì)“自動(dòng)運(yùn)行”，或者“在后臺(tái)運(yùn)行”。

常用的以太坊智能合約編程語言為 solidity。

token/代幣/通證

token、代幣、通證指的都是同一種東西。區(qū)塊鏈上的代幣是指基于區(qū)塊鏈的一種抽象資產(chǎn)，可以被持有并且用來代表資產(chǎn)、現(xiàn)金或訪問權(quán)限。

代幣與以太幣不同，因?yàn)橐蕴粎f(xié)議本身跟代幣完全沒有任何關(guān)聯(lián)。發(fā)送以太幣是以太坊平臺(tái)的內(nèi)在動(dòng)作，但發(fā)送或擁有代幣并不是以太坊協(xié)議中定義的內(nèi)容。以太坊賬戶的以太幣余額在協(xié)議級(jí)別處理，而以太坊賬戶的代幣余額在智能合約級(jí)別處理。要在以太坊上創(chuàng)建新代幣，你必須創(chuàng)建一個(gè)新的智能合約。部署后，智能合約將處理所有內(nèi)容，包括所有權(quán)，轉(zhuǎn)移和訪問權(quán)限。

代幣有可替代性代幣和不可替代性代幣，標(biāo)準(zhǔn)分別是ERC20^[3]和ERC721^[4]，目前市面上比較火爆的 NFT 就是一種不可替代性代幣。

Web3.0 簡(jiǎn)介

從信息互聯(lián)網(wǎng)到價(jià)值互聯(lián)網(wǎng)

1989 年，Tim Bernes-Lee 撰寫了一篇題為“Information Management: A Proposal”的論文，其中他將“網(wǎng)絡(luò)”一詞描述為一個(gè)由超文本鏈接相互連接而成的信息系統(tǒng)網(wǎng)絡(luò)，這就是 Web 1.0。Web 1.0 發(fā)生在 1990 至 2004 年間，Netscape、谷歌、Yahoo、Amazon、eBay、Java 和 AOL 等公司憑借其瀏覽器和搜索引擎主導(dǎo)了互聯(lián)網(wǎng)，這些平臺(tái)是 Web 1.0 時(shí)代的內(nèi)容創(chuàng)造者，而上面的絕大多數(shù)用戶是內(nèi)容的消費(fèi)者。

隨著社交媒體平臺(tái)的出現(xiàn)，Web 2.0 時(shí)期開始于 2004 年。在 Web 2.0 時(shí)代，用戶能夠上傳自己的文本、圖片和視頻等內(nèi)容到平臺(tái)上，不再是內(nèi)容的被動(dòng)接受者，而是可以創(chuàng)造內(nèi)容并與其他人進(jìn)行交流。在 Web 2.0 時(shí)代，人們變成各種應(yīng)用程序的用戶，并在這些產(chǎn)品上創(chuàng)造大量的內(nèi)容，這些數(shù)據(jù)被一個(gè)中心化的平臺(tái)所掌控。

Web 3.0 的概念是由以太坊聯(lián)合創(chuàng)始人、 Polkadot 創(chuàng)造者 Gavin Wood 在 2014 年提出的，代表了下一代的去中心化互聯(lián)網(wǎng)，并賦予了個(gè)體價(jià)值。Web 3.0 關(guān)注的是通過區(qū)塊鏈等去中心化技術(shù)形成的“誰創(chuàng)造，誰擁有”的關(guān)系價(jià)值。

以太坊官網(wǎng)^[5]對(duì) Web 3.0 主要特點(diǎn)的總結(jié)如下：

• Web3 is decentralized: instead of large swathes of the internet controlled and owned by centralized entities, ownership gets distributed amongst its builders and users.

• Web3 is permissionless : everyone has equal access to participate in Web3, and no one gets excluded.

• Web3 has native payments: it uses cryptocurrency for spending and sending money online instead of relying on the outdated infrastructure of banks and payment processors.

• Web3 is trustless : it operates using incentives and economic mechanisms instead of relying on trusted third-parties.

Web 2.0 與 Web 3.0 開發(fā)范式對(duì)比

Web 2.0 開發(fā)范式：

• 需要開發(fā)登錄、注冊(cè)功能，讓用戶綁定郵箱、綁定手機(jī)，需要搭建數(shù)據(jù)庫來存儲(chǔ)用戶注冊(cè)信息以及用戶交互數(shù)據(jù)

• 使用前端代碼語言(JavaScript, HTML, CSS)來開發(fā)頁面邏輯，需要搭建一個(gè)服務(wù)器來部署前端頁面

• 使用后端代碼語言（像 Node.js, Java, Go 等）來開發(fā)業(yè)務(wù)邏輯，并需要搭建一個(gè)服務(wù)器來部署后端服務(wù)，并需要運(yùn)維服務(wù)

• 所有代碼、數(shù)據(jù)都部署在中心化的服務(wù)器上，所有控制權(quán)歸開發(fā)者

Web 3.0 開發(fā)范式：

• 不需要用戶綁定郵箱，綁定手機(jī)，可以直接通過錢包登錄，也不需要存儲(chǔ)用戶信息

• 可以不需要搭建前端服務(wù)器，用戶可通過 IPFS 或 arweave 存儲(chǔ)前端頁面，并進(jìn)行訪問

• 不需要搭建后端服務(wù)器，后端邏輯是用智能合約編寫的，運(yùn)行在 EVM 上的

• 不需要搭建數(shù)據(jù)庫，歷史數(shù)據(jù)與數(shù)據(jù)庫操作通過 TheGraph 來實(shí)現(xiàn)

實(shí)戰(zhàn)：去中心化的 HPC 代幣交易系統(tǒng)

下面我們將基于以太坊開發(fā)一種遵循ERC20^[6]標(biāo)準(zhǔn)的可替代性代幣，叫做 HPC，并提供一個(gè)簡(jiǎn)單的頁面進(jìn)行 HPC 代幣的交易。

安裝客戶端&生成賬戶

根據(jù)官網(wǎng)https://geth.ethereum.org/docs/指導(dǎo)安裝geth客戶端并生成兩個(gè)測(cè)試賬號(hào)。

• Mac 下安裝 geth

brew?tap?ethereum/ethereum
brew?install?ethereum

• 安裝完 geth 后會(huì)同時(shí)提供一個(gè)錢包工具 Clef，可用于賬號(hào)管理和進(jìn)行交易簽名

mkdir?-p?geth-config/keystore
clef?newaccount?--keystore?geth-config/keystore??#?運(yùn)行兩次，創(chuàng)建兩個(gè)測(cè)試賬戶
clef?newaccount?--keystore?geth-config/keystore

創(chuàng)建完賬戶后可以看到geth-config/keystore目錄下多了兩個(gè)賬號(hào)的配置文件，后續(xù)也可以利用這兩個(gè)文件將賬戶導(dǎo)入其他錢包

• 以輕節(jié)點(diǎn)模式啟動(dòng) geth，我們使用 Goerli 區(qū)塊鏈網(wǎng)絡(luò)（一個(gè)以太坊測(cè)試網(wǎng)絡(luò)）來進(jìn)行測(cè)試，Goerli 區(qū)塊鏈網(wǎng)絡(luò)的 id 是 5

clef?--keystore?geth-config/keystore?--configdir?geth-config/clef?--chainid?5?#先啟動(dòng)clef，后續(xù)交易需要使用clef來簽名
geth?--datadir?geth-config?--signer=geth-config/clef/clef.ipc?--goerli?--syncmode?light?--http?--http.api?"eth,debug"???#?新開一個(gè)terminal?tab，啟動(dòng)geth

• 啟動(dòng) geth 后，geth 默認(rèn)會(huì)在 127.0.0.1:8545 上啟動(dòng)一個(gè) http 服務(wù)，可以使用 geth attach 命令連接該服務(wù)進(jìn)入到一個(gè) js console 環(huán)境，并可以使用 web3.js api 與區(qū)塊鏈主網(wǎng)進(jìn)行交互

geth?attach?http://127.0.0.1:8545???#?新開一個(gè)terminal?tab運(yùn)行該命令，運(yùn)行該命令后terminal?tab會(huì)被block住，需要到運(yùn)行clef服務(wù)的tab去授權(quán)，授權(quán)完geth?attach命令就會(huì)進(jìn)入一個(gè)交互式的頁面，該頁面可以使用web3.js?api進(jìn)行交互

• 獲取測(cè)試以太幣，從https://goerlifaucet.com/或者h(yuǎn)ttps://goerli-faucet.mudit.blog/獲取goerli測(cè)試網(wǎng)絡(luò)的以太幣

開發(fā)智能合約（類比服務(wù)端代碼）

• 使用solidity^[7]語言進(jìn)行開發(fā)，根據(jù)ERC20^[8]標(biāo)準(zhǔn)智能合約需要實(shí)現(xiàn)以下接口，同時(shí)在代碼中設(shè)定智能合約的擁有者可以調(diào)用 mint 函數(shù)進(jìn)行挖礦產(chǎn)生代幣，完整項(xiàng)目代碼參見https://github.com/watchsky/hpc_eth_coin/tree/master/contracts

pragma?solidity?^0.5.2;

interface?IERC20?{
????function?transfer(address?to,?uint256?value)?external?returns?(bool);
????function?approve(address?spender,?uint256?value)?external?returns?(bool);
????function?transferFrom(address?from,?address?to,?uint256?value)?external?returns?(bool);
????function?totalSupply()?external?view?returns?(uint256);
????function?balanceOf(address?who)?external?view?returns?(uint256);
????function?allowance(address?owner,?address?spender)?external?view?returns?(uint256);

????event?Transfer(address?indexed?from,?address?indexed?to,?uint256?value);
????event?Approval(address?indexed?owner,?address?indexed?spender,?uint256?value);
}

• 安裝 solidity 編譯器，Mac 系統(tǒng)使用 brew 安裝

brew?install?solidity

• 編譯合約

solc?--bin?--abi?HippoCoin.sol??#?在代碼目錄下執(zhí)行

• 部署智能合約，在 js console 環(huán)境下使用 web3.js api 進(jìn)行部署

• 在 geth js console 環(huán)境下對(duì)我們的智能合約進(jìn)行測(cè)試

hpcContract?=?new?eth.Contract(abi,?'0x74fe09b3ba8adea31f6448f4c742e9148a262d9b')??#?獲取合約實(shí)例
hpcContract.mint('0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709',?200000,?{from:?'0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709'})??#?0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709是創(chuàng)建合約的地址，在合約代碼里將其設(shè)為了owner，可以進(jìn)行挖礦
hpcContract.mint('0xee45cE18A60C2Df0B092185Ca4C0B483018FB07B',?500000,?{from:?'0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709'})
hpcContract.transfer('0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709',?500,?{from:?'0xee45cE18A60C2Df0B092185Ca4C0B483018FB07B'})

查看交易記錄https://goerli.etherscan.io/address/0x74fe09b3ba8adea31f6448f4c742e9148a262d9b

代幣詳情https://goerli.etherscan.io/token/0x74fe09b3ba8adea31f6448f4c742e9148a262d9b

開發(fā)前端頁面

• 因?yàn)樾枰ㄟ^頁面來進(jìn)行 HPC 代幣的交易，因此需要使用一個(gè) web 錢包來進(jìn)行交易的簽名和發(fā)送。這里我們使用MetaMask^[9]錢包，它支持通過瀏覽器插件^[10]的方式運(yùn)行。為了測(cè)試，我們將前面創(chuàng)建的兩個(gè)賬戶（0xee45cE18A60C2Df0B092185Ca4C0B483018FB07B 和 0xEC30B4dAec9B113E5009a2259e7A4f201aE1D709）導(dǎo)入 MetaMask，如下圖所示

• 開發(fā)前端代碼，主要邏輯是要跟 MetaMask 錢包交互，當(dāng)安裝了 MetaMask Chrome 插件后會(huì)在頁面上注冊(cè)一個(gè)window.ethereum對(duì)象，通過該對(duì)象可以使用到錢包提供的功能，發(fā)送交易時(shí)需要對(duì)數(shù)據(jù)進(jìn)行編碼，使用的是 ethers 庫，完整代碼參見https://github.com/watchsky/hpc_eth_coin/tree/master/src，以下列出請(qǐng)求連接錢包和發(fā)送交易的代碼

請(qǐng)求連接錢包：

export?const?requestMetamaskAccount?=?async?()?=>?{
??if?(!ethereum)?{
????return;
??}

??const?accounts?=?await?ethereum.request({?method:?"eth_accounts"?});

??if?(accounts.length?===?0)?{
????currentAccount?=?null;
??}?else?if?(accounts[0]?!==?currentAccount)?{
????currentAccount?=?accounts[0];
??}

??return?currentAccount;
};

發(fā)送交易：

??const?toAddress?=?document.getElementById("toAddress").value.trim();
??const?amount?=?document.getElementById("amount").value.trim();

??const?contractAddress?=?'0x74FE09B3bA8AdEa31f6448f4c742e9148A262d9b';
??const?abiInterface?=?new?utils.Interface(abi);
??const?functionData?=?abiInterface.encodeFunctionData("transfer",?[
????toAddress,
????parseInt(amount),
??]);
??const?transactionParameters?=?{
????nonce:?"0x00",?//?ignored?by?MetaMask
????gasPrice:?"0x94810dee",?//?customizable?by?user?during?MetaMask?confirmation.
????gas:?"0x8a82",?//?customizable?by?user?during?MetaMask?confirmation.
????to:?contractAddress,?//?Required?except?during?contract?publications.
????from:?account,?//?must?match?user's?active?address.
????value:?"0x00",?//?Only?required?to?send?ether?to?the?recipient?from?the?initiating?external?account.
????data:?functionData,
????chainId:?"0x5",?//?Used?to?prevent?transaction?reuse?across?blockchains.?Auto-filled?by?MetaMask.
??};

??const?txHash?=?await?ethereum.request({
????method:?"eth_sendTransaction",
????params:?[transactionParameters],
??});

• 對(duì)靜態(tài)資源使用 webpack 打包構(gòu)建，然后通過 ipfs 將頁面資源部署到去中心化的網(wǎng)絡(luò)中

• 頁面效果 https://ipfs.io/ipfs/QmQDnUK2X1XQLFkQJeiqocseWiq4bE6SWRo65U6sd7J2Wn?filename=index.html

為了讓大家對(duì) Web3.0 常用的一些底層技術(shù)有所了解，本文的案例沒有使用任何框架來開發(fā)，但實(shí)際開發(fā)中我們可以利用一些工具來幫助開發(fā)提效，例如Home - Truffle Suite^[11]、Embark into the Ether. | Embark^[12]、Fleek: Build on the New Internet^[13]、Remix - Ethereum IDE^[14]。

參考資料

《精通以太坊：開發(fā)智能合約和去中心化應(yīng)用》

區(qū)塊鏈?zhǔn)鞘裁?超級(jí)詳細(xì)，看了無師自通!^[15]

Web 3.0 架構(gòu)不僅是去中心化的，更是模塊化的-今日頭條^[16]

Web 3.0 生態(tài)全解析：顛覆性的技術(shù)變革-今日頭條^[17]

What is Web3 and why is it important? | ethereum.org^[18]

Ethereum Provider API | MetaMask Docs^[19]

往期推薦

基礎(chǔ)鞏固-你最少用幾行代碼實(shí)現(xiàn)深拷貝？

深入了解前端路由 hash 與 history 差異

一位 Google 工程師的十年總結(jié)

最后

• 歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧

參考資料