去中心化应用（DApp）是一种大部分或完全分散化的应用。考虑一个应用程序是否是去中心化的应用主要方面包括：前端软件、后端软件（应用逻辑）、数据存储、命名解析、信息通信等。其中每一个都可以有些集中化，也可以有些分散化。例如，前端可以开发成在集中式服务器上运行的网络应用，或者开发成在设备上运行的移动应用。后端和存储可以是在私人服务器和专有数据库上，或者是智能合约和P2P存储。
dApp组件
dApp的组件会有三个不同的类型：智能合约，前端逻辑（UI）和数据存储。
智能合约
智能合约存储了dApp的业务逻辑和当前的状态，这个是dApp和传统网络应用的最大区别，也正是因为这一点让dApp具备了以上提到过的优势。
前端/UI
尽管后端逻辑需要开发者完成智能合约代码，并把它部署在区块链上，但是在前端，开发者还是使用标准的网络技术，比如HTML和javascript，因此开发者可以使用自己熟悉的工具，库和框架。客户端的UI通常通过Web3.js「https://web3js.readthedocs.io/en/v1.7.4/」和Ether.js「https://docs.ethers.io/v5/」与智能合约交互。像是对信息进行签名并且发送给智能合约这些操作，通常是通过浏览器的Web3钱包MetaMask完成。
第一步：创建智能合约：DAPP链上合约交互平台系统开发搭建：I35开发7O98案例O7I8
我们dApp中的智能合约是一个简单的例子，它可以查看数据并且反应出区块链上的变化。在这个例子中，我们会通过Chainlink ETH/USD喂价对查看ETH/USD的价格，然后将结果永久存储在智能合约上。
第一步是打开Chainlink的文档，然后导航到Using Data Feeds页面。从这里将源代码复制进你的IDE中的一个新的文件里（比如Visual Code），或者你可以点击“Open In Remix”按钮，然后使用在线IDE Remix。
在这个例子中，我们会使用Visual Studio Code和Hardhat（一个EVM开发框架）。
首先，为我们的dApp创建一个新的文件夹，并在这个文件夹中创建一个后端文件夹，用来存储智能合约代码：
mkdir chainlink-dapp-example
cd chainlink-dapp-example
mkdir backend
cd backend
接下来，我通过VS Code打开创建好的文件夹，然后安装Hardhat：
npm init-y
npm install--save-dev hardhat
npx hardhat
(choose create javascript project,choose default parameters)
当安装完成之后，在“contracts”文件夹中删掉Touch.sol，然后在这个文件夹中创建一个叫做PriceConsumerV3.sol的文件。在这个文件将存储我们的合约，所以将Chainlink文档中的代码复制到这个文件中，然后保存。
在样例代码中，你会看到demo合约已经有一个叫做getLatestPrice的功能来通过Rinkeby上的ETH/USD喂价对查看Ethereum的当前价格。
function getLatestPrice()public view returns(int){
(
/uint80 roundID/,
int price,
/uint startedAt/,
/uint timeStamp/,
/uint80 answeredInRound/
)=priceFeed.latestRoundData();
return price;
创建一个新的变量和函数，在智能合约上储存这个值。
int public storedPrice;
然后，创建一个新的函数，它会被dApp的前端调用。这个函数会通过调用getLatestPrice函数查看Ethereum的最新价格，然后将这个值存储在storedPrice这个参数中：
function storeLatestPrice()external{
storedPrice=getLatestPrice();
}
你的新的合约应该和下面的一样：
//SPDX-License-Identifier:MIT
pragma solidity^0.8.7;
import"chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";
contract PriceConsumerV3{
AggregatorV3Interface internal priceFeed;
int public storedPrice;
/**
*Network:Rinkeby
*Aggregator:ETH/USD
*Address:0x8A753747A1Fa494EC906cE90E9f37563A8AF630e
*/
constructor(){
priceFeed=
AggregatorV3Interface(0x8A753747A1Fa494EC906cE90E9f37563A8AF630e);
}
/**
*Returns the latest price
*/
function getLatestPrice()public view returns(int){
(
/uint80 roundID/,
int price,
/uint startedAt/,
/uint timeStamp/,
/uint80 answeredInRound/
)=priceFeed.latestRoundData();
return price;
}
function storeLatestPrice()external{
storedPrice=getLatestPrice();
}
}
第二步：部署智能合约
现在你已经可以在Rinkeby测试网中编译和部署你的合约了，如果没有测试网的通证的话，可以在Chainlink faucet获得一些。
如果你使用的是Remix的话，你可以通过Remix编译和部署你的合约。如果你使用的是像是Visual Studio Code这样的IDE的话，我们推荐使用Hardhat来管理你的合约。
在部署合约之前，第一步是安装Hardhat工具包，Chainlink合约库和dotenv库。dotenv可以将存储密码和敏感信息存储在一个单独的.env文件中：
npm install--save-dev nomicfoundation/hardhat-toolbox
npm install chainlink/contracts--save
npm install dotenv
然后，将hardhat-config.js文件中的内容换成下面的内容：
require("nomicfoundation/hardhat-toolbox");
//require("nomiclabs/hardhat-ethers")
require('dotenv').config()
const 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:{
////If you want to do some forking,uncomment this
//forking:{
//url:MAINNET_RPC_URL
//}
},
localhost:{
},
rinkeby:{
url:RINKEBY_RPC_URL,
accounts:[PRIVATE_KEY],
saveDeployments:true,
},
},
solidity:"0.8.9",
};
第三步：创建前端应用
dApp的前端逻辑和UI可以通过各种框架完成。
React「https://reactjs.org/」是最受欢迎的Javascript代码库之一，它可以用来开发功能丰富的网页，因此也被许多Web3 dApp所使用。除此之外，Ether.js是一个Javascript库，它是用来和EVM区块链连接和交互的。当你把这两者结合起来，就可以开始开发你的dApp的前端的了。
在这部分，我们将使用create-react-app「https://create-react-app.dev/」创建一个新的React应用。然后我会介绍如何通过Ether.js来将UI和已经部署的智能合约连接起来，完成一个end-to-end的dApp。
创建React应用
开发前端代码之前，需要先安装和初始化一个cerate-react-app项目，然后修改它以满足我们的dApp。第一步将这个库安装到“frontend”文件夹：
cd..
npx create-react-app frontend
