Dapp开发与应用的最佳实践

前言

本文旨在汇总开发一款DApp应用的最佳实践方案，涵盖技术栈选择、开发工作流推荐、工具包使用以及相关资源推荐，帮助开发者高效构建去中心化应用。

完整DApp应用技术栈

前端：应用界面例如：（React or React Native）
服务端(可选)：传统的服务端开发提供服务端api 例如Node
智能合约：例如：Solidity
Provider/Signer:负责与区块链进行通信例如:(wgami / ethers.js /web3.js)
Relay：与区块链的某一个节点同步状态的服务器集群例如：（Infura）

开发工作流推荐

Hardhat：编写solidity合约一站式开发、测试、部署全流程；
Scaffold-ETH 2：快速构建一个DApp，包含前端、合约；

开发工作流使用

Hardhat使用

bash 复制代码

# 说明有前端基础hardhat比较好上手一些
# 操作步骤
1 mkdir hardhat-tutorial（创建项目目录） 
2 cd hardhat-tutorial （进入工程目录）
3 npm init 项目初始化
4 npm install --save-dev hardhat （安装hardhat）
5 npx hardhat init （hardhat初始化项目选择项目模板）
6 npm install --save-dev @nomicfoundation/hardhat-toolbox （下载对应的工具包 修改hardhat.config 处理项目报错问题）
# 项目常用指令
npx hardhat compile （合约编译）
npx hardhat test XXX (合约测试)
npx hardhat deploy （合约部署全部）
npx hardhat run xxx（部署指定合约）
npx hardhat node （启动节点）

Scaffold-ETH 2使用

bash 复制代码

# 说明快速搭建一站式 前端、合约Dapp项目
# 操作步骤
npx create-eth@latest xxx（创建项目）
cd xxx
# 启动指令
yarn chain （启动节点）
yarn start （前端项目启动）
yarn deploy （合约部署）

钱包登录工具包推荐

RainbowKit ：可以使用默认也可以自定钱包
thirdweb：综合工具不单单钱包集成

钱包工具包使用

RainbowKit

下载对应的包

kotlin 复制代码

npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query （包下载）

导入对应的包

javascript 复制代码

import '@rainbow-me/rainbowkit/styles.css'; 
import { getDefaultConfig, RainbowKitProvider, } from '@rainbow-me/rainbowkit'; 
import { WagmiProvider } from 'wagmi'; 
import { mainnet, polygon, optimism, arbitrum, base, } from 'wagmi/chains'; 
import { QueryClientProvider, QueryClient, } from "@tanstack/react-query";

config配置

php 复制代码

const config = getDefaultConfig({

appName: 'My RainbowKit App',

projectId: 'YOUR_PROJECT_ID',//通用[WalletConnect Cloud](https://cloud.walletconnect.com/)获取项目id

chains: [mainnet, polygon, optimism, arbitrum, base],

ssr: true, // If your dApp uses server side rendering (SSR)

});

包装提供者

javascript 复制代码

const queryClient = new QueryClient();
const App = () => {
return ( <WagmiProvider config={config}> 
<QueryClientProvider client={queryClient}> 
<RainbowKitProvider> {/* Your App */} 
</RainbowKitProvider> 
</QueryClientProvider> </WagmiProvider> ); 
};
//链接按钮组件
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {

return <ConnectButton />;

};

合约开发

以Solidity为例，相关内容已在作者的专栏《Web3相关知识分享》中进行了详细阐述。该专栏包含关于合约开发、测试、部署的实践案例，以及合约开发常用工具的汇总，有兴趣的读者可以前往查阅。

服务端

在服务端开发中，构建API的过程与传统Web服务端开发基本相同。主要区别在于，DApp的服务端需要通过第三方库（例如ethers.js）与智能合约进行交互，从而实现与区块链的通信。

前端

在DApp开发中，前端部分与传统Web2开发在技术栈上基本一致，但新增了与智能合约交互以及钱包连接的功能。具体来说，开发者需要引入Web3.js、ethers.js、wagmi等工具库，以便实现与区块链的交互和钱包的集成

补充

去中心化储存方案

IPFS：最早和最流行的去中心化储存网络。
Filecoin：以 IPFS 为基础的储存网络。
Arweave(AR)：去中心化的永存网络，一次写入付费，读数据免费。你正在阅读的这篇文章即由 Mirror 代为保存在 AR 上。

对开发者的高级包装储存服务

Web3.storage 基于 Filecoin 的免费储存服务。
NFT.storage Web3.storage 提供的 NFT 元数据针对性储存服务，提供网页界面上传与 SDK。
Filebase 整合了多个去中心化储存网络的服务，接口类似 AWS S3，提供丰富的 SDK 与 API，支持信用卡付费。
Bundlr 基于 Arweave 构建的永久储存服务，支持用多链 token 结算。

关于Hardhat 插件推荐

hardhat-gas-reporter：帮助开发者了解运行单元测试中部署和执行合约方法消耗的 gas 费用
solidity-coverage：单元测试覆盖率报告
nomiclabs/hardhat-etherscan：将所发布合约的源码和 ABI 都展示在合约地址页面
tenderly/hardhat-tenderly：监控线上合约的状态并提供 debug 建议

总结

以上内容总结了开发一款DApp应用所涉及的技术构成以及常用的工具和资源。