如何在智能合同的頂部建立簡單的DAPP？

設置松露，ganache和metAmask，用堅固的智能合約構建和測試簡單的以太坊DAPP。

2025/07/10 16:50

建立您的開發環境

要開始在智能合約的頂部建立一個簡單的DAPP，您必須首先建立適當的開發環境。 Truffle是最受歡迎的基於以太坊開發的工具之一，該工具為編譯，部署和測試智能合約提供了一個框架。

• 安裝Node.js和NPM來管理JavaScript軟件包
• 運行npm install -g truffle以安裝全球松露套件
• 在您的項目目錄中使用truffle init腳手架

設置松露後，您還需要一個本地區塊鏈來進行測試。 Ganache是​​一種常用的工具，可以在本地模擬以太坊網絡。下載並安裝Ganache，然後啟動一個新的工作區以生成測試帳戶和私鑰。

此外，使用MetAmask（一種以太坊錢包，允許與分散應用程序交互）將瀏覽器連接到區塊鏈。確保將Ganache提供的本地網絡添加到MetAmask中，以進行無縫測試。

寫一份基本的智能合同

現在您的環境已經準備好了，是時候寫一份基本的智能合約了。堅固性是用於編寫以太坊智能合約的主要語言。在Truffle生成的contracts文件夾中創建一個新的.sol文件。

這是樣本合同：

 pragma solidity ^0.8.0;合同簡單{




uint storedData; function set(uint x) public { storedData = x; } function get() public view returns (uint) { return storedData; }
 }

該合同定義了一個可變storedData和兩個功能：一個功能更新其值，另一個用於檢索它。確保固體版本與松露配置中指定的版本匹配。

撰寫合同後，在migrations夾中創建遷移腳本。該腳本告訴松露如何將合同部署到區塊鏈。

編譯和部署智能合同

借助您寫的智能合約，下一步是編譯和部署它。在您的終端中，導航到項目根並運行：

• truffle compile - 這將您的堅固碼編譯到以太坊虛擬機（EVM）可讀取的字節碼中
• truffle migrate - 這將您的合同部署到由Ganache管理的本地區塊鏈

在執行遷移命令之前，請確保Ganache正在運行。您應該看到指示成功部署的事務日誌。

部署後，請注意控制台印刷的合同地址。將您的前端應用程序連接到智能合約時，此地址將在以後使用。

您還可以通過檢查Ganache中的交易或使用truffle console的松露控制台並手動與已部署的合同進行交互來驗證部署。

構建前端界面

DAPP的前端使用戶能夠與智能合約進行互動。用於構建DAPP的常見堆棧包括用於UI和Web3.js或Ethers.js的React.js 。用於區塊鏈交互。

首先創建一個React應用程序：

• 運行npx create-react-app my-dapp進行腳手架一個新的反應項目
• 導航到項目目錄，並通過npm install web3或npm install ethers

接下來，將智能合同ABI（應用二進制界面）集成到您的前端。 ABI是在編譯過程中自動生成的，可以在build/contracts目錄中找到。

在您的React組件中，導入Web3並實例化與用戶錢包（例如MetAmask）的連接：

 import Web3 from 'web3'; const web3 = new Web3（window.Etereum）;
等待window.Ethereum.enable（）;

然後，使用ABI和合同地址創建合同實例：

 const contractInstance = new web3.eth.Contract(abi, contractAddress);

使用此設置，您現在可以調用set並從按鈕處理程序中的智能合約中get功能，並在屏幕上顯示結果。

將前端連接到智能合約

創建合同實例後，您可以實現功能，允許用戶直接通過瀏覽器與其進行交互。

例如，調用get函數：

 contractInstance.methods.get().call()
 .then(result => console.log(result));

使用set功能發送事務：

 contractInstance.methods.set(42).send({ from: accountAddress })
 .on('transactionHash', hash => console.log(hash));

在執行任何交易之前，請確保連接並解鎖。另外，優雅地處理錯誤以改善用戶體驗。

更新您的UI組件以反映存儲在區塊鏈上的電流值，並允許輸入字段以設置新值。這為您的DAPP創建了功能齊全的接口。

通過運行npm start React App來測試整個流，並與按鈕進行交互，同時觀察Ganache和瀏覽器控制台的變化。

常見問題

DAPP和常規網絡應用程序有什麼區別？

DAPP（去中心化應用程序）在區塊鍊網絡上運行，並將智能合約用於後端邏輯，而常規的Web應用程序依靠集中式服務器。 DAPP由於其分散性而提供了透明度，不變性和審查制度的抵抗力。

在本地部署智能合同時，我需要支付汽油費嗎？

不，當使用諸如Ganache之類的本地區塊鏈時，會模擬汽油費，並且不需要真實的以太。交易立即處理而無需實際成本，使其非常適合測試。

除了對DAPP的前端做出反應之外，我還能使用其他框架嗎？

是的，您可以使用任何前端框架，例如vue.js，Angular，甚至是普通的HTML/CSS/JavaScript。關鍵是將Web3提供商集成並與智能合約進行正確交互。

是否可以將DAPP部署到TestNet而不是本地區塊鏈？

是的，您可以將Rinkeby，Ropsten或Goerli等網絡部署到更廣泛的測試中。您需要測試以太，可以從與這些網絡相關的水龍頭獲得。確保您的松露配置包括正確的網絡設置和助記符。