通過(guò)Web3將智能合約（Solidity代碼）連接到用戶界面。如果您也是那些仍在努力尋找一個(gè)可靠開(kāi)發(fā)教程的初學(xué)者之一，那么對(duì)于您來(lái)說(shuō)，這無(wú)疑是必讀的文章。

兩個(gè)必備組件

在我們深入了解實(shí)際過(guò)程之前，我只想對(duì)一個(gè)非常關(guān)鍵的細(xì)節(jié)做一個(gè)非常簡(jiǎn)短的修改。

既然已經(jīng)知道Web3是一個(gè)真正幫助我們將智能合約連接到前端的庫(kù)。但是為了成功連接到智能合約，Web3首先還需要兩個(gè)非常關(guān)鍵的組件。

這兩個(gè)組件是：

應(yīng)用程序二進(jìn)制接口（ABI）：它基本上包含所有功能，它們的權(quán)限以及智能合約中的其他細(xì)節(jié)（采用JSON格式）。

地址（ADDRESS）：這是在遷移實(shí)體代碼后生成的智能合約的地址。

現(xiàn)在您就可以牢記這些細(xì)節(jié)了，讓我們繼續(xù)前進(jìn)，嘗試實(shí)際將智能合約連接到前端的過(guò)程。

先決條件

1.Ganache CLI：為了讓這個(gè)過(guò)程非常簡(jiǎn)單，基本上可以將其視為可定制的區(qū)塊鏈模擬器，它為您提供10個(gè)免費(fèi)的以太坊帳戶，其中每個(gè)帳戶都攜帶100個(gè)以太坊。

安裝：

$npm install -g ganache-cli

2. Metamask Extension：毫無(wú)疑問(wèn)，這是最必要的要求，因?yàn)樗梢詭椭覀冊(cè)贔irefox或Chrome等常規(guī)瀏覽器中訪問(wèn)啟用了以太坊的分布式應(yīng)用程序（DAPP）。

3.Truffle：這是最好的開(kāi)發(fā)工具，包括所有必要的文件和環(huán)境，您不僅可以部署和開(kāi)發(fā)智能合約，還可以對(duì)其進(jìn)行測(cè)試。

安裝：

$npm install -g truffle

最終建立聯(lián)系，到這里您已成功成功安裝所有必備組件，現(xiàn)在讓我們將智能合約連接到前端。

盡管您可以選擇各種框架來(lái)開(kāi)發(fā)前端，但到目前為止，讓我們開(kāi)始吧。

好吧，無(wú)可否認(rèn)，考慮到React本身的復(fù)雜性，從頭開(kāi)始編寫所有代碼可能很麻煩。好吧，truffle為您提供了一些支持，該代碼為您提供了一些將React與Web3連接的樣板代碼。您所要做的就是安裝truffle的React Box。

安裝

$truffle unbox react

第1步：Edit trufle-config.js：從trufle中解壓react組件后，第一個(gè)任務(wù)是在module.export部分編輯網(wǎng)絡(luò)對(duì)象。將主機(jī)設(shè)置為localhost，端口設(shè)置為8545。

為什么這樣做？

好吧，我們需要將dapp連接到本地區(qū)塊鏈。在我們的案例中，Ganche CLI將完成這項(xiàng)工作。最重要的是，Ganache CLI偵聽(tīng)端口8545，這就是為什么我們?cè)趖uffle.js中將端口設(shè)置為8545的原因。

第2步：?jiǎn)?dòng)Ganache CLI：下一部分是運(yùn)行終端命令ganache-cli以激活Ganache。

第3步：設(shè)置METAMASK：

說(shuō)實(shí)話，這是事情可能變得丑陋的部分。因此，讓我們了解此步驟的基礎(chǔ)知識(shí)。

Metamask可以簡(jiǎn)單地看作是一種工具，可以將您的常規(guī)瀏覽器（即Firefox或Chrome）基本上轉(zhuǎn)換為可以與區(qū)塊鏈通信的工具。

在開(kāi)發(fā)過(guò)程中，可以通過(guò)為此metamask擴(kuò)展提供合適的端口并設(shè)置其與我們的開(kāi)發(fā)帳戶的連接來(lái)完成。

為此，您有兩個(gè)可靠的端口用于開(kāi)發(fā)目的。

· 端口7545：-使用Ganache GUI

· 端口8545：-使用Ganache CLI

因此，假設(shè)您已在自己喜歡的瀏覽器上成功建立了Metamask擴(kuò)展程序，現(xiàn)在讓我們從主要部分開(kāi)始。

如您所見(jiàn)，默認(rèn)情況下，此擴(kuò)展名連接到以太坊主網(wǎng)絡(luò)，這不是您要用于開(kāi)發(fā)目的的所有帳戶（除非您真的很富有并且擁有大量以太幣）。因此，單擊下拉菜單，然后選擇Localhost8545。（因?yàn)镚anache CLI使用端口8545）。

設(shè)置端口后，現(xiàn)在單擊右上方的圓形按鈕，然后選擇“導(dǎo)入帳戶”選項(xiàng)。

在此將要求您輸入要使用的帳戶的私鑰。記住，Ganche CLI已經(jīng)為我們提供了10個(gè)帶有100個(gè)免費(fèi)以太幣的帳戶。好了，從這10個(gè)帳戶中選擇任何私鑰并將其粘貼到此處。

就這樣，既然您已經(jīng)設(shè)置了帳戶，那么您就可以開(kāi)始開(kāi)發(fā)過(guò)程了。

最后，用REACT啟動(dòng)前端，因此現(xiàn)在可以簡(jiǎn)單地啟動(dòng)前端部分了。

請(qǐng)遵循以下步驟：

現(xiàn)在到 truffle react

1.輸入trufle compile命令。

2.然后輸入命令truffle migrate。

注意：一旦您遷移了智能合約，就會(huì)因gas而扣除少量的eth。因此，單擊瀏覽器上的Metamask擴(kuò)展，然后檢查是否扣除了一些金額。如果是的話，那么您的設(shè)置就可以了。

4.轉(zhuǎn)到客戶端目錄，然后輸入命令npm start。

5.打開(kāi)瀏覽器，然后轉(zhuǎn)到localhost：3000。

您可能會(huì)看到這樣的Metamask彈出窗口。

這只是您需要批準(zhǔn)的一個(gè)簡(jiǎn)單事務(wù)，以便從智能合約獲得價(jià)值到前端部分。只需單擊確認(rèn)按鈕。

注意：您是否看到一行顯示，存儲(chǔ)的值是：5.此處的值5來(lái)自智能合約，因此表示您的前端與合約同步。

而已。您已通過(guò)WEB3和Ganache CLI成功將React與Solidity智能合約集成在一起。