原文链接：https://blog.chain.link/how-to-display-crypto-and-fiat-prices-on-a-frontend/
Web3开发者经常选择在前端显示平台或协议的原生加密通证，而不是显示与法币的转换结果。虽然这样做容易让用户聚焦原生通证，但显示法币转换结果可能是一个更好的选择。为加密通证定价要求对通证当前价值有了解，而通证的价值往往是波动的，而且还为新用户创造了一个不太受欢迎的体验，许多人对参考美元或他们的本地货币感到更舒服。 Web3 developers often choose to display the original encryption modem of the platform or protocol at the front end & #xff0c; instead of showing the result of the conversion to the French currency. While this can easily allow users to focus on the original modem & #xff0c; but showing the result may be a better option. For encryption the price requirement is an understanding of the current value of the translator & #xff0c; the value of the translator is often volatil xff0c; it also creates a less popular experience for new users xff0c; many feel more comfortable with reference dollars or their local currency. 幸运的是，通过Chainlink Data Feeds，ETH和美元等货币之间的转换非常简单，这意味着开发者只需几个简单的步骤就能为用户提供更好的体验。本技术教程阐述了如何使用ETH/USD Chainlink Price Feed在前端显示加密通证和法币价格。 Chainlink Data Feeds是一套提供安全和可靠的真实世界数据源的智能合约。它们由独立的、高信誉的和地理上分布的节点运营商提供支持，这有助于确保返回数据的可靠性。例如，ETH/USD，目前利用31个独立的预言机，或者说信息来源，用于确定当前ETH对美元的价格的可信答案。 Chainlink Data Feeds is an intelligent contract that provides a secure and reliable source of real world data. They are supported by independent, high-profile and geographically distributed nodes & #xff0c; this helps to ensure the reliability of returned data. For example, ， #xff0c; currently using 31 independent prognosis machines & #xff0c; or source #xff0c; and a credible answer to determine the current prices of ETH for dollars. 为什么我们需要31个信息源来获取相同的信息？使用多个来源来汇总一个有效的响应，意味着不可能有单点故障问题，并防止数据被篡改。 Why do we need 31 information sources to get the same information & #xff1f; to use multiple sources to aggregate an effective response & #xff0c; to mean that there can be no single failure & #xff0c; and to prevent data from being tampered with? 当与智能合约互动时，必须有一个Web3连接的提供者。通常，这可以通过用户的钱包连接获得。如果没有，或者你不需要连接用户的钱包，你可以通过以下方式完成同样的功能： When interacting with an intelligent contract xff0c; there must be a provider with a Web3 connection. Usually xff0c; this can be obtained through a user's wallet connection. Without xff0c; or if you do not need a user's wallet xff0c; you can do the same function xff1a by: RPC_URL_HERE可以从一个节点提供商那里获得，如Alchemy, Infura, Moralis或QuickNode。提供者（provider）是我们通往区块链的 “网关”。 RPC_URL_HERE can obtain xff0c from a node provider, e.g. Alchemy, , or . 本教程的另一个要求是一个以太坊JavaScript库。在这个例子中，我使用的是ethers库。你需要安装它，才能让本文案例工作。 Another requirement of the curriculum is a evasive JavaScript library. In this example, xff0c; I use ethers library. You need to install it xff0c; in order for this case to work. 现在是需要在前端显示ETH/USD价格的代码。 It is now necessary to display the ETH/USD price code at the front end. 如果你想跟着做，这个例子的代码可以在例子库中找到。按照README.md中的说明，在本地运行这个例子。这个例子使用Svelte，但同样的概念应该适用于任何前端JavaScript框架，如React或Vue。在SmartContract的GitHub仓库中，你还可以使用其他几个入门套件。 If you want to follow xff0c; the code for this example can be found in the . This example can be found in the example of . 这段代码可以通过导入语句在前端使用： This code can use xff1a at the front end by importing statements; 然后，将结果存储为以美元计算的ETH价格： xff0c; store results as ETH prices in United States dollars xff1a; 假设ethAmount是要转换的ETH数额，则使用此值从ETH转为美元。 Assuming that EthAmount was to convert the ETH amount xff0c, this value was converted from ETH to United States dollars. 这里是完整的文件： This is the complete document #xff1a; 我们需要的代码中大部分是aggregatorV3InterfaceABI或ABI。这是我们将与之互动的合约的数据结构，我们需要让ethers知道这些。通常，你可能会在前端项目中把这些存储在单独的JSON文件中。在本例中，它被包含在utils文件中，这样是把所有内容都放在一起。 Most of the codes we need are aggregator V3Interface ABI or ABI. This is the data structure of the contract with which we will interact xff0c; we need to let ethers know about it. Usually xff0c; you may store these in a separate JSON file in front of the project. In this case xff0c; it is contained in the utils file xff0c; this is to put everything together. 这个合约地址将根据网络或价格对的变化而变化；你可以使用这些Data Feed合约地址中的任何一个。 This contract address will vary according to the changes in the network or price; you can use either of these . 与合约的交互是直接的。我们调用latestRoundData，它返回： The interaction with the contract is direct. We call latestRoundData， it returns to xff1a; 我们使用和来返回ETH的价格： We use and come back to the price of ETH #xff1a; 一旦我们有了单个ETH的价格，我们可以用它来轻松地将ETH转换成美元价格。在下面的例子中，rawETH是一个合约的余额返回的字符串。 Once we have a single ETH price xff0c; we can easily convert it into a dollar price. In the example below, xff0c; rawath is a string that returns the balance of a contract. Chainlink Data Feeds提供了一个可靠的解决方案，它使用安全的方法将资产价值从ETH转换为美元。 Chainlink Data Feeds provides a reliable solution xff0c; it uses a secure method to convert asset values from ETH to United States dollars. 到目前为止，在一个前端应用程序中创建一个实用功能似乎很简单。但是，如果我们能够消除前端开发者对价格的担心，并为他们处理价格问题呢？ So far xff0c; creating a functional feature in a front-end application seems simple. But xff0c; if we can remove the concerns of the front-end developers about prices xff0c; and handle price problems for them xff1f; 只要对你的合约做一些修改，你就可以向终端用户提供当前的价格数据–他们需要担心的是连接到你的合约。这就简化了所需的前端工作。让我们来看看一个合约的例子。 Just make some changes to your contract xff0c; you can provide the end user with the current price data — what they need to worry about is the contract that connects you to. This simplifies the front-end work needed. Let's look at one example of the contract. 首先，我们导入我们在上述前端版本中使用的相同的聚合器接口。 First xff0c; we import the same polymer interface that we use in the front version above. 然后，我们需要让聚合器知道我们感兴趣的Price Feed的合约地址。 And then #xff0c; we need to let the polymer know the contractual address of Price Feed, which we're interested in. 在我们的getLatestPrice()函数中，我们调用priceFeed.latestRoundData()。priceFeed引用的是我们在上面的getETHPrice利用中使用的同一个合约。它返回： In our GetLatestPrice() function & #xff0c; we call PriceFeed.latestRoundData(). PriceFeed refers to the same contract that we used in the getETHPrice above. It returns #xff1a; ● ：轮次ID。 • & #xff1a; Round ID. 这里的代码可能看起来有点奇怪。我们唯一感兴趣的值是字段。因此，我们不把其他的值分配给变量。把它们跳过，可以防止储存未使用的数据。 The code here may look a little strange. The only value we're interested in is the field. So xff0c; we don't assign other values to variables. Skip xff0c; it prevents the storage of unused data. 现在，价值数据已经包含在你的智能合约中，我们只需要从前端访问合约中该价值数据。 Now xff0c; value data is already contained in your smart contract xff0c; we just need to access the value data in the contract from the front. 这将为我们合约的消费者创造一个更简单的界面，因为他们不需要了解预言机或导入一个单独的ABI。 This will create a simpler interface for our contract consumers & #xff0c; they do not need to know the prophecy or import a separate ABI. 在这个技术教程中，我们展示了如何轻松地将Chainlink数据源集成到你的DApp中，使用户能够轻松使用USD/ETH价格转换。有大量适用于加密通证和法定货币的Chainlink Price Feeds，开发者们可以调整上面的使用步骤使用适用于他们的价格数据。 xff0c; we showed how to easily integrate Chainlink data sources into your DApp xff0c; make USD/ETH price conversion easy for users. There are a lot of Chainlink Price Feeds #xff0c for encryption generals and legal currencies; developers can adjust the use steps above to use price data that apply to them. 
br/> link xff1a;
● ：轮次ID。
● : 价格。
● ：该轮次开始的时间戳。
● ：这一轮更新的时间戳。
● ：计算结果的轮次ID。我们对answer感兴趣。这将是ETH的价格，有一个小的警告。我们需要知道答案中包含的小数点的数量。这就是decimals的作用。它返回要包含的小数位数。
& #xff1a; wheel ID.
: Price.
& #xff1a; the time stamp for the start of the round.
& #xff1a; the time stamp for the update.
& #xff1a; the rotation ID for the calculation of the results. We are interested in Answer. This is the price of the ETH #xff0c; there is a small warning. We need to know the number of small points contained in the answer. This is the role of Decimals.
● : 价格。
● ：该轮次开始的时间戳。
● ：这一轮更新的时间戳。
● ：计算答案的那一轮的ID。
: Price.
& #xff1a; time stamp for the start of the round.
& #xff1a; time stamp for the update.
& #xff1a; round ID for the calculation of answers.
获取更多关于Chainlink的信息，请访问chain.link或在docs.chain.link阅读文档。要讨论集成问题，请联系专家。
Get more information about Chainlink xff0c; please visit Chain.link or docs.chain.link. To discuss integration xff0c; contact experts.
注册有任何问题请添加 微信：MVIP619 拉你进入群
打开微信扫一扫
添加客服
进入交流群
发表评论