你好！今天，我們將介紹如何構(gòu)建能夠與以太坊智能合約交互的web應(yīng)用程序。這種互動非常吸引人，因?yàn)樗鼘槟切┫Ｍ麌@區(qū)塊鏈構(gòu)建應(yīng)用程序（dapp）的web開發(fā)者打開一個新的可能性世界。
在本教程中，我們將構(gòu)建一個微型智能合約來存儲和檢索以太坊區(qū)塊鏈上的數(shù)據(jù)，并創(chuàng)建一個允許我們訪問和更改智能合約上數(shù)據(jù)的web應(yīng)用程序。
**智能合約**
讓我們先介紹一下我們將用于構(gòu)建web應(yīng)用程序的智能合約。由于本文的重點(diǎn)是將JavaScript連接到區(qū)塊鏈，因此我盡量簡化合合約：
pragma solidity ^0.6.6;
contract CoolNumberContract {
uint public coolNumber = 10;
function setCoolNumber(uint _coolNumber) public {
coolNumber = _coolNumber;
}
}
也許這并不是有史以來最令人印象深刻的智能合約，但現(xiàn)在就可以了。如果你不確定這個智能合約是干什么的，讓我解釋一下。
智能合約CoolNumberContract在區(qū)塊鏈上存儲一個名為coolNumber的變量，初始值為10。這個變量是公共函數(shù)，這意味著我們可以從區(qū)塊鏈訪問它的值，而無需構(gòu)建getter函數(shù)。
此外，智能合約還包含一個名為setCoolNumber的公共函數(shù)，您可能已經(jīng)猜到了，它將更改區(qū)塊鏈上變量的值。這里要記住的真正重要的一點(diǎn)是，區(qū)塊鏈數(shù)據(jù)中的任何更改都必須由事務(wù)來表示。這意味著調(diào)用方法setCoolNumber將需要進(jìn)行交易，并且該交易將具有與之相關(guān)的gas費(fèi)。
在繼續(xù)進(jìn)行之前，請確保將智能合約部署到測試網(wǎng)絡(luò)。
設(shè)置項(xiàng)目和依賴項(xiàng)
這就是樂趣的開始。要與JavaScript中的任何以太坊區(qū)塊鏈進(jìn)行交互，您將需要一個庫。在我們的例子中，我們將使用web3。Web3將允許我們通過MetaMask或Gan3之類的web3提供程序與任何以太坊網(wǎng)絡(luò)進(jìn)行交互。
讓我們開始一個新項(xiàng)目。您可以使用任何所需的框架。我將使用原始的JavaScript和HTML，但是您可以使用任何框架，例如React或Vue。我所有的代碼都將放入一個文件index.html中，我將從以下結(jié)構(gòu)開始：
讓我們分解上面的代碼，從body標(biāo)簽開始。這是一個簡單的用戶界面，有兩個按鈕和一個表示狀態(tài)的范圍。這兩個按鈕都調(diào)用目前尚未定義的JavaScript函數(shù)。
在head標(biāo)簽上，重要的標(biāo)簽是我們正在導(dǎo)入的腳本。那就是我們對web3的依賴。您可以像我一樣將這種依賴關(guān)系添加到代碼中，或者，如果您使用的是框架，則可以使用以下命令簡單地導(dǎo)入包：
如果尚未安裝該庫，則可以通過NPM進(jìn)行：
最后在繼續(xù)之前，我強(qiáng)烈建議您安裝MetaMask擴(kuò)展。如果您喜歡使用任何其他提供程序，則可能必須相應(yīng)地更改部分代碼，因?yàn)樗峁┑氖纠褂肕etaMask注入的web3提供程序。
將Web應(yīng)用程序連接到以太坊區(qū)塊鏈
現(xiàn)在我們已經(jīng)準(zhǔn)備好基本結(jié)構(gòu)和依賴項(xiàng)，我們可以添加將應(yīng)用程序連接到區(qū)塊鏈的代碼。
在正文的script標(biāo)簽內(nèi)，我們將添加：
上面的所有代碼都非常簡單，除了函數(shù)loadWeb3，我們將進(jìn)一步解釋。該函數(shù)負(fù)責(zé)建立連接并授權(quán)我們與區(qū)塊鏈進(jìn)行交互。
為了使用我們的智能合約，我們需要一個新的Web3實(shí)例。創(chuàng)建此實(shí)例時，需要指定要使用的提供程序。由于我們使用MetaMask作為代理，因此我們使用由MetaMask擴(kuò)展注入的window.ethereum提供程序。
如果現(xiàn)在轉(zhuǎn)到瀏覽器并通過文件或Web瀏覽器加載頁面，您將看到MetaMask授權(quán)流程。它看起來應(yīng)該像這樣：
確保接受并將錢包連接到您的應(yīng)用程序以繼續(xù)。
訪問智能合約
到目前為止，您的代碼可以訪問與區(qū)塊鏈的交互。確保您的應(yīng)用可以與智能合約進(jìn)行交易。
為此，我們將創(chuàng)建一個新函數(shù)來創(chuàng)建與您的合約接口匹配的合約實(shí)例：
要獲得區(qū)塊鏈上任何合約的實(shí)例，我們需要做的兩件事：合約的ABI規(guī)范和合約地址，您都可以從Remix中提取兩者。
要獲取合約的ABI規(guī)范，請轉(zhuǎn)到“編譯”選項(xiàng)卡上的“Remix”，確保進(jìn)行編譯，然后單擊“ ABI”：
此按鈕會將您的合約的ABI規(guī)范復(fù)制為剪貼板上的JSON數(shù)組，我們可以將其直接用作第一個參數(shù)的一部分。
第二個參數(shù)是已部署的合約地址，您可以在部署時從Remix或Etherscan獲得該地址。
以下是完整功能代碼查找我的智能合約的方式：
async function loadContract() {
return await new window.web3.eth.Contract([
{
"inputs": [],
"name": "coolNumber",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_coolNumber",
"type": "uint256"
}
],
"name": "setCoolNumber",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
], '0x5F4a8C71AFB0c01BA741106d418E78888607Ee63');
}
完成之后，我們可以從加載器函數(shù)中簡單地調(diào)用loadContract：
async function load() {
await loadWeb3();
window.contract = await loadContract();
updateStatus('Ready!');
}
從智能合約中讀取價值
我們準(zhǔn)備開始調(diào)用智能合約功能，并且將從合約中檢索我們的coolNumber開始。
借助web3，我們可以非常快速地從智能合約中檢索數(shù)據(jù)。這是獲取公共變量coolNumber的值的示例：
超級容易！我們使用上一節(jié)中的contract實(shí)例，獲取方法并使用變量名調(diào)用函數(shù)（這是我在開頭提到的getter），最后，我們使用call來啟動遠(yuǎn)程請求。
更新智能合約的值
最后，我們需要確保我們也可以使用智能合約進(jìn)行交易，為此，我們將通過訪問setter函數(shù)來更改存儲在合約中的coolNumber來顯示示例。
我們的更改功能將簡單地分配一個新的隨機(jī)數(shù)并將其保存在區(qū)塊鏈上：
我想在這里強(qiáng)調(diào)兩件事。首先，我們引用一個getCurrentAccount（）函數(shù)，該函數(shù)目前尚未定義。我們稍后會處理。其次是我們?nèi)绾握{(diào)用setter。如果您注意從智能合約中調(diào)用setCoolNumber方法的那一行，它看起來與我們?yōu)檎{(diào)用者所做的稍有不同：
我們沒有使用call，而是使用send方法。我們需要指定發(fā)件人帳戶。為什么？事實(shí)證明，我們需要一個交易來改變區(qū)塊鏈上的價值。也就是說，一個交易需要一個from和to賬戶是有效的-從是交易的發(fā)起人到，在本例中，是智能合約地址。
我們可以將任何帳戶用作起始值嗎？不，它必須是您有權(quán)訪問的帳戶（在我們的情況下，該帳戶已在您的MetaMask錢包中注冊），因?yàn)槟鷮⑿枰跈?quán)交易并確認(rèn)gas費(fèi)。
現(xiàn)在我們已經(jīng)清除了這一點(diǎn)，讓我們構(gòu)建getCurrentAccount（）方法：
Web3很棒。我們可以與區(qū)塊鏈和錢包進(jìn)行交互，因此可以通過Web3請求有關(guān)在錢包上注冊的帳戶的信息。在我們的示例中，我們只需將它們?nèi)磕米卟⑹褂玫谝粋�帳戶進(jìn)行交易即可。
把它們放在一起
如果您完成了所有功能，則代碼應(yīng)類似于我的代碼。測試時，您應(yīng)該會看到類似以下內(nèi)容的內(nèi)容：
---------------------------------------------
原文作者：Cruz Martinez
譯者：鏈三豐
譯文出處：http://bitoken.world
---------------------------------------------
