亚洲熟妇av一区二区三区,久久久久久精品观看sss,免费观看四虎精品国产永久,国产成人精品一区二三区熟女,天堂网在线最新版www资源网

Web3.0 開發(fā)入門(web開發(fā)教程)

前言

Web 3.0 的概念是由以太坊聯(lián)合創(chuàng)始人 Gavin Wood 在 2014 年提出的,指基于區(qū)塊鏈的去中心化在線生態(tài)系統(tǒng),它代表了下一代互聯(lián)網(wǎng)時代。目前 Web 3.0 仍處于起步階段,但是發(fā)展非常迅猛,其去中心化、抗審查等特點(diǎn)使得人們更容易建設(shè)一個開放的網(wǎng)絡(luò)生態(tài)。

本文會先對 Web3.0 的底層區(qū)塊鏈做個簡單介紹,然后再介紹 Web3.0 的整體架構(gòu),最后通過一個簡單的例子來介紹 Web3.0 開發(fā)常用的一些技術(shù)。本文只是一個引子,讓大家對 Web3.0 不再陌生,文中提到的一些技術(shù)感興趣的同學(xué)可以再自行深入了解。

區(qū)塊鏈簡介

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

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

Web3.0 開發(fā)入門(web開發(fā)教程)

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

區(qū)塊鏈?zhǔn)峭ㄟ^區(qū)塊(block)存儲數(shù)據(jù),每個數(shù)據(jù)節(jié)點(diǎn)之間都包含所有數(shù)據(jù),即分布式賬本。每個區(qū)塊都包括了區(qū)塊的大小、區(qū)塊頭、區(qū)塊所包含的交易數(shù)量及部分或所有的近期新交易。數(shù)據(jù)層主要是解決這些數(shù)據(jù)以什么樣的形式組合在一起,形成一個有意義的區(qū)塊。

區(qū)塊鏈的數(shù)據(jù)結(jié)構(gòu)中包括兩種哈希指針,它們均是不可篡改特性的數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)。一個是形成“區(qū)塊 鏈”(block chain)的鏈狀數(shù)據(jù)結(jié)構(gòu),另一個是哈希指針形成的梅克爾樹(如下圖所示)。鏈狀數(shù)據(jù)結(jié)構(gòu)使得對某一區(qū)塊內(nèi)的數(shù)據(jù)的修改很容易被發(fā)現(xiàn);梅克爾樹的結(jié)構(gòu)起類似作用,使得對其中的任何交易數(shù)據(jù)的修改很容易被發(fā)現(xiàn)。

Web3.0 開發(fā)入門(web開發(fā)教程)

可以在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)對點(diǎn)交換信息,主要包括 P2P 組網(wǎng)機(jī)制、數(shù)據(jù)傳播和驗證機(jī)制。正是由于節(jié)點(diǎn)的 P2P 特性,數(shù)據(jù)傳輸是分散在各個節(jié)點(diǎn)之間進(jìn)行的,部分節(jié)點(diǎn)或網(wǎng)絡(luò)遭到破壞對其他部分影響很小。

節(jié)點(diǎn)指的是區(qū)塊鏈客戶端軟件(比如比特幣客戶端、以太坊客戶端),一般分為全節(jié)點(diǎn)和輕節(jié)點(diǎn),全節(jié)點(diǎn)包含了所有區(qū)塊鏈的區(qū)塊數(shù)據(jù),輕節(jié)點(diǎn)僅包括與自己相關(guān)的數(shù)據(jù)。

Web3.0 開發(fā)入門(web開發(fā)教程)

  • 共識層

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

工作量證明共識機(jī)制(PoW),礦工需要將網(wǎng)絡(luò)中未確認(rèn)的交易按梅克爾樹組裝成候選區(qū)塊,在候選區(qū)塊的頭部有一個 32 位的隨機(jī)數(shù)區(qū)域,礦工需要反復(fù)調(diào)整隨機(jī)數(shù)并計算,目標(biāo)是讓整個區(qū)塊的哈希值小于一個“目標(biāo)值”,誰先完成這個目標(biāo)誰就有權(quán)力將交易記錄到區(qū)塊鏈分布式賬本中并獲得一定的獎勵。

挖礦的過程比拼的就是各個礦工節(jié)點(diǎn)的算力,可以變相認(rèn)為誰的算力高誰的工作量就高,就有權(quán)力記賬和獲得獎勵。比特幣使用的是 PoW 機(jī)制;以太坊開始使用的是 PoW 機(jī)制,后來改成了 PoS 機(jī)制,原因是該機(jī)制交易速度更快、資源消耗更低。

這種挖礦計算是非對稱的,挖礦可能需要經(jīng)過許多次哈希計算,而要驗證的確找到有效的隨機(jī)數(shù),只需要一次計算就可以,因此其他節(jié)點(diǎn)能夠很快驗證交易是否已經(jīng)被記入賬本。

  • 激勵層

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

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

  • 合約層

合約層封裝了各類腳本、算法和智能合約,使得區(qū)塊鏈具有可編程能力。例如,比特幣的腳本[1]中就規(guī)定了比特幣的交易方式和過程中的種種細(xì)節(jié),不過這種腳本使用不夠便捷且不是圖靈完備的。以太坊提出了智能合約的解決方案,提供了一種圖靈完備的高級編程語言來編寫智能合約,并使智能合約能夠運(yùn)行在分布式的以太坊虛擬機(jī) EVM 上。

智能合約就是存儲在區(qū)塊鏈上的一段代碼,它們可以被區(qū)塊鏈上的交易所觸發(fā),觸發(fā)后,這段代碼可以從區(qū)塊鏈上讀取數(shù)據(jù)或者向區(qū)塊鏈上寫入數(shù)據(jù)。區(qū)塊鏈系統(tǒng)(比特幣、以太坊)可以認(rèn)為是一個分布式狀態(tài)機(jī),通過交易觸發(fā)合約(腳本、智能合約)運(yùn)行來改變狀態(tài)機(jī)的狀態(tài)。

  • 應(yīng)用層

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

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

Web3.0 開發(fā)入門(web開發(fā)教程)

以太坊簡介

因為我們將要在以太坊上開發(fā)一個 Web3.0 demo 應(yīng)用,所以先簡單介紹一下以太坊的一些基本概念。

賬戶和錢包

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

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

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

Sig=Fsig(Fkeccak256(m) , k)

其中:

  • k 是用于簽名的私鑰
  • m 是經(jīng)過 RLP 編碼的交易數(shù)據(jù)包
  • Fkeccak256 是 Keccak-256 哈希函數(shù)
  • Fsig 是簽名算法
  • Sig 是輸出的數(shù)字簽名

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

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

以太幣和 gas

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

Web3.0 開發(fā)入門(web開發(fā)教程)

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

gas 的另一個作用是控制交易對資源的使用。交易數(shù)據(jù)會包含 gasPrice(交易發(fā)起方愿意支付的 gas 價格)和 gasLimit(交易發(fā)起方愿意為這個交易支付的最大 gas 數(shù)量)兩個參數(shù),而每一條智能合約代碼語句的運(yùn)行都會消耗對應(yīng)的 gas,當(dāng)運(yùn)行過程中累計的 gas 消耗超過了 gasLimit,合約就會終止執(zhí)行,交易失敗。

失敗的交易仍舊會被作為一次失敗的嘗試而記錄在案,執(zhí)行所花費(fèi)的 gas 將從發(fā)起賬戶中被扣除,除此之外,它不會對合約或者賬戶狀態(tài)產(chǎn)生任何其他影響。

客戶端

Geth 是官方提供的 go 語言實(shí)現(xiàn)的以太坊客戶端??蛻舳丝梢砸匀δ芄?jié)點(diǎn)的方式運(yùn)行,也可以以遠(yuǎn)程調(diào)用的方式運(yùn)行。全功能節(jié)點(diǎn)會下載全部的區(qū)塊數(shù)據(jù),對系統(tǒng)的網(wǎng)絡(luò)和存儲有較高的要求。

從遠(yuǎn)程調(diào)用以太坊的客戶端不在本地保存區(qū)塊鏈數(shù)據(jù),也不參與區(qū)塊和交易驗證,這樣的客戶端提供錢包功能,也可以創(chuàng)建并廣播交易。以太坊客戶端會對外提供 API(例如 web3.js API、JSON-RPC API)來訪問以太坊網(wǎng)絡(luò)。

智能合約

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

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

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

token/代幣/通證

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

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

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

Web3.0 簡介

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

1989 年,Tim Bernes-Lee 撰寫了一篇題為“Information Management: A Proposal”的論文,其中他將“網(wǎng)絡(luò)”一詞描述為一個由超文本鏈接相互連接而成的信息系統(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),這些平臺是 Web 1.0 時代的內(nèi)容創(chuàng)造者,而上面的絕大多數(shù)用戶是內(nèi)容的消費(fèi)者。

Web3.0 開發(fā)入門(web開發(fā)教程)

隨著社交媒體平臺的出現(xiàn),Web 2.0 時期開始于 2004 年。在 Web 2.0 時代,用戶能夠上傳自己的文本、圖片和視頻等內(nèi)容到平臺上,不再是內(nèi)容的被動接受者,而是可以創(chuàng)造內(nèi)容并與其他人進(jìn)行交流。

在 Web 2.0 時代,人們變成各種應(yīng)用程序的用戶,并在這些產(chǎn)品上創(chuàng)造大量的內(nèi)容,這些數(shù)據(jù)被一個中心化的平臺所掌控。

Web3.0 開發(fā)入門(web開發(fā)教程)

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

Web3.0 開發(fā)入門(web開發(fā)教程)

以太坊官網(wǎng)[5]對 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ā)范式對比

Web 2.0 開發(fā)范式:

  • 需要開發(fā)登錄、注冊功能,讓用戶綁定郵箱、綁定手機(jī),需要搭建數(shù)據(jù)庫來存儲用戶注冊信息以及用戶交互數(shù)據(jù)
  • 使用前端代碼語言(JavaScript, HTML, CSS)來開發(fā)頁面邏輯,需要搭建一個服務(wù)器來部署前端頁面
  • 使用后端代碼語言(像 Node.js, Java, Go 等)來開發(fā)業(yè)務(wù)邏輯,并需要搭建一個服務(wù)器來部署后端服務(wù),并需要運(yùn)維服務(wù)
  • 所有代碼、數(shù)據(jù)都部署在中心化的服務(wù)器上,所有控制權(quán)歸開發(fā)者

Web 3.0 開發(fā)范式:

  • 不需要用戶綁定郵箱,綁定手機(jī),可以直接通過錢包登錄,也不需要存儲用戶信息
  • 可以不需要搭建前端服務(wù)器,用戶可通過 IPFS 或 arweave 存儲前端頁面,并進(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,并提供一個簡單的頁面進(jìn)行 HPC 代幣的交易。

安裝客戶端&生成賬戶

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

  • Mac 下安裝 geth

brew tap ethereum/ethereumbrew install ethereum

  • 安裝完 geth 后會同時提供一個錢包工具 Clef,可用于賬號管理和進(jìn)行交易簽名

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

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

Web3.0 開發(fā)入門(web開發(fā)教程)

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

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

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

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

Web3.0 開發(fā)入門(web開發(fā)教程)Web3.0 開發(fā)入門(web開發(fā)教程)

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

Web3.0 開發(fā)入門(web開發(fā)教程)Web3.0 開發(fā)入門(web開發(fā)教程)Web3.0 開發(fā)入門(web開發(fā)教程)

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

  • 使用solidity[7]語言進(jìn)行開發(fā),根據(jù)ERC20[8]標(biāo)準(zhǔn)智能合約需要實(shí)現(xiàn)以下接口,同時在代碼中設(shè)定智能合約的擁有者可以調(diào)用 mint 函數(shù)進(jìn)行挖礦產(chǎn)生代幣,完整項目代碼參見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í)行

Web3.0 開發(fā)入門(web開發(fā)教程)

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

Web3.0 開發(fā)入門(web開發(fā)教程)Web3.0 開發(fā)入門(web開發(fā)教程)Web3.0 開發(fā)入門(web開發(fā)教程)Web3.0 開發(fā)入門(web開發(fā)教程)

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

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

Web3.0 開發(fā)入門(web開發(fā)教程)

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

Web3.0 開發(fā)入門(web開發(fā)教程)Web3.0 開發(fā)入門(web開發(fā)教程)

開發(fā)前端頁面

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

Web3.0 開發(fā)入門(web開發(fā)教程)

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

請求連接錢包:

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], });

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

Web3.0 開發(fā)入門(web開發(fā)教程)

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

Web3.0 開發(fā)入門(web開發(fā)教程)Web3.0 開發(fā)入門(web開發(fā)教程)

為了讓大家對 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]。

版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至 舉報,一經(jīng)查實(shí),本站將立刻刪除。