[Chainlink] 如何分三步搭建dApp


去中心化應用程序或dApp 是不依賴於中心化服務器或後端,而是利用區塊鍊和預言機等Web3 技術來包含其邏輯和後端功能的應用程序,使其具有防篡改和安全性。

在本技術教程中,你將學習如何創建一個簡單的端到端dApp,允許用戶在智能合約中檢索和存儲以太坊的當前價格。完整的演示可以在GitHub 上找到。

要求

請確保你已安裝以下內容:

節點JS
Metamask

什麼是去中心化應用程序?

dApp 的後端代碼運行在區塊鏈上,而傳統應用程序的後端代碼運行在中心化服務器上。dApp 可以具有以任何語言編寫的前端代碼和用戶界面,並部署在任何服務器或服務器上以與後端邏輯進行交互。

由於將其後端邏輯置於高度安全、防篡改的智能合約中,dApp 享有許多傳統Web2 系統無法獲得的好處:

零停機時間
增強隱私
審查阻力
信任最小化的邏輯執行

然而,這些好處也伴隨著一些缺點。dApp 的維護更為複雜,因為默認情況下部署到區塊鏈的代碼不可修改。由於在分佈式網絡而不是中心化服務器上運行邏輯,還存在性能開銷。除此之外,由於dApp 用戶需要經歷擁有Web3 錢包並為其提供足夠的加密來支付交易費用的複雜性,用戶體驗也會受到影響。

dApp 的組件

dApp 的組件可以分為三個不同的類別:智能合約、前端邏輯和用戶界面以及數據存儲。

智能合約

智能合約存儲dApp 的業務邏輯以及應用程序的狀態。這是dApp 和傳統Web 應用程序之間的最大區別,也是dApp 具有上述所有好處的原因。

前端/用戶界面

雖然dApp 的後端邏輯需要開發人員編寫要部署在區塊鏈上的智能合約代碼,但dApp 的前端或客戶端可以使用標準的Web 技術,例如HTML 和JavaScript。這允許開發人員使用熟悉的工具、庫和框架。客戶端用戶界面通常通過Web3.js 或Ethers.js 等客戶端庫鏈接到智能合約,這些庫與前端資源捆綁在一起並與UI 一起發送到瀏覽器。與智能合約的交互(例如簽署消息和向智能合約發送交易)通常通過基於瀏覽器的Web3 錢包(例如MetaMask)進行。

數據存儲

大多數應用程序都需要存儲數據,但由於區塊鏈的分佈式特性,在鏈上存儲大量數據是不可行的,而且可能會變得非常昂貴。這就是為什麼許多需要存儲數據的dApp 使用IPFS 或Filecoin 等鏈下數據存儲服務,讓區塊鏈只存儲關鍵的業務邏輯和狀態。

你還可以使用傳統的基於雲的存儲服務。然而,許多開發人員選擇去中心化選項來維護和擴展由區塊鏈驅動的dApp 提供的信任最小化屬性。

以太坊dApp 架構圖以太坊dApp 架構。資料來源:Web3 應用程序的架構

現在我們已經了解了dApp 的組件,讓我們來看一個構建簡單端到端示例的示例。

第一步:創建智能合約

我們dApp 中的智能合約將是一個簡單的示例,用於查找數據並反映區塊鏈上的狀態變化。在這種情況下,我們將使用ETH/USD Chainlink 數據饋送查找ETH/USD 的價值,然後將結果永久存儲在智能合約中。

第一步是打開我們的文檔並前往使用數據饋送頁面。從那裡你可以復制示例源代碼並將其粘貼到你選擇的IDE 中的一個新文件中(例如Visual Code),或者你可以按“Open In Remix”按鈕並從Web 版本的Remix 中工作。

在此示例中,我們將使用Visual Studio Code 和Hardhat,一個以太坊虛擬機開發框架。

首先,我們將為我們的dApp 創建一個新的目錄結構,其中包含一個用於智能合約代碼的後端文件夾:

mkdir chainlink-dapp-example
cd chainlink-dapp-example
mkdir backend
cd backend

接下來,我們將在VS Code 編輯器中打開為dApp 創建的目錄,然後安裝Hardhat:

npm init -y
npm install –save-dev hardhat
npx hardhat
(選擇創建javascript項目,選擇默認參數)

完成後,刪除“contracts”文件夾中的Touch.sol 文件,在該文件夾中創建一個名為價格ConsumerV3.sol 的新文件,然後保存。這是我們將創建智能合約的地方,因此將Chainlink 文檔示例中的代碼複製到此文件中並保存。

在示例代碼中,你會看到演示合約已經有一個函數getLatestPrice 來在Rinkeby ETH/USD 數據源上查找以太坊的當前價格。

function getLatestPrice() public view returns (int) {
(
/*uint80 roundID*/,
int price,
/*uint startedAt*/,
/*uint timeStamp*/,
/*uint80 answersInRound*/
) = priceFeed.latestRoundData();
退貨價格;

我們需要創建一個新變量和一個新函數來將此值存儲在智能合約上。第一步是在現有priceFeedone 下創建一個新變量來存儲以太坊的價格:

int 公共存儲價格;

接下來,我們需要創建一個可以被dApp 前端調用的新函數。該函數應該通過調用現有的getLatestPrice 函數來查找以太坊的最新價格。然後它應該將值存儲在新的storedPrice 參數中:

函數storeLatestPrice() 外部 {
storedPrice = getLatestPrice();
}

你的新合約應如下所示:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

導入“@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol”;

合約價格ConsumerV3 {

AggregatorV3接口內部priceFeed;
int 公共存儲價格;

/**
* 網絡:Rinkeby
* 聚合器:ETH/USD
* 地址:0x8A753747A1Fa494EC906cE90E9f37563A8AF630e
*/
constructor() {
priceFeed =
AggregatorV3Interface(0x8A753747A1Fa494EC906cE90E9f37563A8AF630e);
}

/**
* 返回最新價格
*/
function getLatestPrice() public view returns (int) {
(
/*uint80 roundID*/,
int price,
/*uint startedAt*/,
/*uint timeStamp*/,
/*uint80 answersInRound */
) = priceFeed.latestRoundData();
退貨價格;
}

函數storeLatestPrice() 外部 {
storedPrice = getLatestPrice();
}
}

第二步:部署智能合約

現在你已準備好編譯合約並將其部署到Rinkeby 測試網絡。請務必先用一些Rinkeby ETH 為你的MetaMask 錢包注資。

如果你使用的是Remix,你可以使用標準的Remix 流程編譯和部署你的合約。如果你使用的是Visual Studio Code 之類的IDE,我們建議你使用Hardhat 來管理你的合約。

編譯和部署合約的第一步是安裝Hardhat 工具庫、Chainlink 合約庫和dotenv 庫,用於將加密貨幣和敏感密鑰存儲在單獨的.env 文件中:

npm install –save-dev @nomicfoundation/hardhat-toolbox
npm install @chainlink/contracts –save
npm install dotenv

接下來,將hardhat-c​​onfig.js 文件的內容替換為以下內容:

要求(“@nomicfoundation/hardhat-toolbox”);

//require(“@nomiclabs/hardhat-ethers”)
require(‘dotenv’).config()

常量RINKEBY_RPC_URL = process.env.RINKEBY_RPC_URL ||
“https://eth-rinkeby.alchemyapi.io/v2/your-api-key”
const PRIVATE_KEY = process.env.PRIVATE_KEY || “abcdef”

module.exports = {
defaultNetwork: “rinkeby”,
networks: {
hardhat: {
// // 如果你想做一些分叉,取消註釋
// forking: {
// url: MAINNET_RPC_URL
// }
},
localhost: {
} ,
rinkeby: {
url: RINKEBY_RPC_URL,
帳戶: [PRIVATE_KEY],
saveDeployments: true,
},
},

堅固性:“0.8.9”,
};

下一步是在後端文件夾中創建一個.env 文件。然後,你需要從Web3 錢包中提取你的私鑰,並將其粘貼到.env 文件中PRIVATE_KEY 字段的值部分。請確保你使用的新Web3 錢包在主網上沒有任何資金。

完成此操作後,你需要獲取RPC 端點以訪問Rinkeby 網絡。你可以通過在.env 文件的RINKEBY_RPC_URL 字段中粘貼RPC URL 來完成此操作。我們建議註冊一個免費的Infura 或Alchemy 帳戶以獲取RPC URL。

創建.env fi創建.env 文件

下一步是修改“scripts”文件夾中的deploy.js 文件的內容,以確保它將部署你的新合約。打開文件並確保以下代碼替換其中已有的內容。這將簡單地獲取你編譯的價格ConsumerV3 合約並嘗試部署它。請記住保存你的更改。

// 我們在這裡明確需要安全帽運行時環境。這是可選
的// 但對於通過`node ` 運行腳本。如果你這樣做,Hardhat
// 將編譯你的合約,將Hardhat Runtime Environment 的成員添加到
// 全局範圍,然後執行腳本。
const hre = 要求(“安全帽”);

異步函數main() {

const 價格Consumer = await hre.ethers.getContractFactory(“PriceConsumerV3”);
const priceConsumer = 等待價格Consumer.deploy();

等待priceConsumer.deployed();

console.log(“合約部署到:”, priceConsumer.address);
}

// 我們建議這種模式能夠在任何地方使用async/await
// 並正確處理錯誤。
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});

你現在已準備好使用Hardhat 編譯和部署你的智能合約到Rinkeby 網絡:

npx hardhat 編譯
npx hardhat 運行–network rinkeby scripts/deploy.js

你應該會看到一條類似於下面的消息,顯示你的智能合約部署到的Rinkeby 上的地址。記下這個地址,下一步我們將需要它。

部署的智能合約截圖部署智能合約。

恭喜,你現在已準備好進入dApp 的前端部分
第三步:創建前端應用程序

dApp 的前端邏輯和用戶界面可以使用各種不同的框架構建。

React 是用於構建功能豐富的Web 用戶界面的最流行的JavaScript 庫之一,因此被許多Web3 dApps 使用。除此之外,Ethers.js 是一個JavaScript 庫,用於連接基於EVM 的區塊鍊和智能合約並與之交互。當你將兩者結合起來時,你就有了構建dApp 前端的合理起點。

在本節中,我們將使用create-react-app 樣板生成器創建一個新的React 應用程序。然後我們將介紹一些使用Ethers.js 將用戶界面與部署的智能合約連接起來的鏈下邏輯,為我們提供一個完整的端到端dApp。

創建反應應用程序

創建前端的第一步是安裝並實現create-react-app 樣板項目,然後對其進行修改以適合我們的dApp。第一步是將庫安裝到一個新的“前端”文件夾中:

cd ..
npx create-react-app 前端

完成後,你應該會在項目中看到一個新的“前端”文件夾,其中包含所有相關的React 代碼。展開“frontend”文件夾並執行以下操作:

刪除/src/setupTests.js
刪除/src/ReportWebVitals.js
刪除/src/logo.svg
刪除/src/App.test.js
刪除/src/App.css

文件夾結構應如下所示:

React 前端文件夾結構截圖React 前端文件夾結構。

我們現在幾乎可以開始修改React 應用程序代碼了。但首先,請務必安裝Bootstrap 和Ethers.js 的庫。Bootstrap 是一個流行的前端CSS 框架,它帶有應用了CSS 樣式的React 友好的UI 小部件,而Ethers.js 允許我們將前端連接到區塊鏈上部署的智能合約。確保這些命令從“前端”文件夾中運行。

cd 前端
npm install bootstrap
npm install ethers

現在我們準備修改React 應用程序代碼。打開/src/ 文件夾中的App.js 文件並刪除內容。我們將從頭開始構建它。

第一步是告訴應用程序我們要使用React(包括useEffect 和useState 庫)和Ethers.js:

從’react’導入反應,{ useEffect,useState};
從“ethers”導入{ ethers };

接下來,創建一個名為“App”的函數並將其導出:

函數應用程序(){

}

導出默認應用程序;

現在我們將開始填寫“App”函數的內容。將以下代碼添加到其中。該代碼執行以下操作:

設置storedPrice 和setStoresPrice 反應掛鉤。
創建與你的MetaMask Web3 錢包的連接。
設置部署的智能合約地址和ABI。Ethers.js 要求我們與部署的智能合約進行交互。

可以從本指南前面的部署步驟中獲取智能合約地址。用這個值代替REPLACE_WITH_DEPLOYED_CONTRACT_ADDRESS 字符串。
智能合約ABI 可以從/backend/artifacts/contracts/PriceConsumerV3.json 文件中的abi 元素中獲取。你可以使用代碼壓縮器以更好的方式對其進行格式化,以便存儲在你的應用程序中。

const [storedPrice, setStoredPrice] = useState(”);
const provider = new ethers.providers.Web3Provider(window.ethereum)
const signer = provider.getSigner()
const contractAddress = ”;
const ABI =
‘[{“inputs”:[],”stateMutability”:”nonpayable”,”type”:”constructor”},{“inputs”:[],”name”:”getLatestPrice”,”outputs”: [{“internalType”:”int256″,”name”:””,”type”:”int256″}],”stateMutability”:”view”,”type”:”function”},{“inputs”:[ ],”name”:”storeLatestPrice”,”outputs”:[],”stateMutability”:”nonpayable”

現在我們將創建兩個要在我們的應用程序中使用的函數:

getStoredPrice 將連接到已部署的智能合約並獲取storedPrice() getter 函數的當前值。
setNewPrice 將調用已部署的智能合約的storeLatestPrice 函數,等待交易完成,然後調用getStoredPrice 函數檢索智能合約中存儲的價格。

我們還將在App 函數中添加對getStoredPrice 的調用,以便它最初在頁面加載時調用getter 函數:

const getStoredPrice = async () => {
try {
const contractPrice = await contract.storedPrice();
setStoredPrice(parseInt(contractPrice) / 100000000);
} catch (error) {
console.log(“getStoredPrice Error: “, error);
}
}

async function updateNewPrice() {
try {
const transaction = await contract.storeLatestPrice();
等待交易。等待();
等待getStoredPrice();
} catch (error) {
console.log(“updateNewPrice Error: “, error);
}

}

getStoredPrice()
.catch(console.error)

創建前端的最後一步是讓你的應用程序返回JSX 代碼以供瀏覽器呈現。將以下代碼粘貼到App 函數底部的getStorePrice() 調用下。此代碼執行以下操作:

返回一個簡單的兩列網格佈局。
第一列包含智能合約中當前存儲的ETH/USD 價格。
第二列包含一個按鈕,用戶可以使用該按鈕與智能合約交互並更新存儲的價格。按下按鈕調用上面的setNewPrice 函數。

返回 (


存儲價格

存儲的ETH/USD 價格:{storedPrice}


更新價格
更新



);

你的應用程序現已準備就緒。如果需要,你可以將你的代碼與已完成的示例進行比較,以確保你已正確完成所有操作。現在你已準備好運行你的dApp。

運行你的dApp

確保保存所有文件後,通過從前端文件夾運行以下命令在本地啟動dApp:

npm 運行開始

應用程序加載後,你的瀏覽器中應該會出現一個新窗口,顯示你的dApp 用戶界面。你還應該收到來自MetaMask 的彈出通知,要求將你的錢包連接到應用程序。

反應前端反應前端。

在你確認你已使用一些Rinkeby ETH 為你的MetaMask 帳戶注資後,單擊dApp UI 上的“更新”按鈕以與你在Rinkeby 網絡上部署的智能合約進行交互。你應該會收到來自MetaMask 的通知,要求你確認交易。完成此操作後,在幾秒鐘內,你的dApp 應該會自動刷新,並且以太坊的當前價格應該出現在“存儲價格”部分:

顯示數據饋送結果的反應前端React 前端顯示數據饋送結果。

恭喜,你現在已成功創建、部署並與簡單的dApp 交互在本指南中,你只是在你的計算機上本地運行前端,但如果你願意,你可以將其部署到基於雲的服務器,甚至也可以去中心化前端並將其部署到IPFS你還可以使用應用程序的CSS 來更改用戶界面的外觀。
概括

去中心化應用程序是用區塊鍊和智能合約等Web3 技術取代傳統後端服務器處理的應用程序,為它們提供獨特的安全性和抗審查保證,這是傳統Web 應用程序無法實現的。

在這個技術演示中,我們創建了一個簡單的dApp,其中包含一個智能合約,該合約從ETH/USD Chainlink 數據饋送中獲取最新價格並將結果存儲在智能合約中。然後,我們創建了一個簡單的UI,它使用React 和Ethers.js 連接到部署的智能合約並與之交互。

通過訪問chain.link 或閱讀docs.chain.link 上的文檔來了解有關Chainlink 的更多信息。你還可以訂閱Chainlink 時事通訊,以隨時了解Chainlink 堆棧中的所有內容。要討論集成,請聯繫專家。

如何通過三個步驟構建dApp 的帖子首先出現在Chainlink 博客上。

>>查看Chainlink

加入我們的電報

在推特上關注我們

在Facebook 上關注我們

資訊來源:由0x資訊編譯自AZCOINNEWS。版權歸作者Chainlink News所有,未經許可,不得轉載

提示:投資有風險,入市需謹慎,本資訊不作為投資理財建議。請理性投資,切實提高風險防範意識;如有發現的違法犯罪線索,可積極向有關部門舉報反映。

上一篇


美國參議員要求最高金融監管機構取消為銀行製定的加密指南:報告


Vitalik Buterin 表示,即使發生分裂,以太坊也會從升級中變得更強大


對沖基金Tiger Global 下跌50% 但可能觸底


幣安首席執行官改造其價值7,500,000,000 美元的風險投資部門,稱現在是投資加密的最佳時機


8 月6 日以太坊價格分析與預測– ETHUSD 持有1,700 美元


Argo挖礦加密貨幣產量在7 月上漲至219 BTC




Total
0
Shares
Related Posts