「零基础也能上手！」手把手教你用 Sui dApp-Kit 开发去中心化应用

前言

Sui dApp-Kit 是 Mysten Labs 提供的开发工具包，旨在帮助开发者快速构建基于 Sui 区块链的去中心化应用（dApps）。在本篇博客中，我们将基于两个模板项目（react-e2e-counter 和 react-client-dapp），从项目结构到功能实现，深入解析如何快速开发一个 dApp。

Move 共学活动：快速上手 Move 开发

为了帮助更多开发者快速了解和掌握 Move 编程语言，Move 共学活动由 HOH 社区、HackQuest、OpenBuild、KeyMap 联合发起。该活动旨在为新手小白提供一个良好的学习平台，带领大家一步步熟悉 Move 语言，并了解如何将其应用到 Web3 开发中。

通过与 Move 领域的专业导师们合作，参与者可以快速掌握 Move 语言的基础知识，逐步向更复杂的应用开发进阶。无论是区块链初学者，还是有一定开发经验的工程师，都能从中获益。

资源链接：

• sui官方文档🚪：获取关于 Sui 链的详细文档，包括开发指南、API 参考等。
• move学习B站视频🚪：通过 B 站的视频教程，跟随导师学习 Move 编程语言的基础与进阶。
• letsmove仓库🚪：这是一个 Move 学习资源的 GitHub 仓库，包含了各种示例代码和教程，帮助开发者掌握 Move 语言。

一、什么是 Sui dApp-Kit？

Sui dApp-Kit 提供了常见的 dApp 模板和工具，让开发者可以专注于业务逻辑的实现，而无需处理复杂的底层区块链交互。

主要特性

• 模板支持：内置多种模板（如计数器应用和通用客户端）。
• 轻松集成：提供简单的区块链连接和钱包交互功能。
• 模块化设计：支持自定义扩展。

两种模板简介

1. react-e2e-counter
   一个简单的计数器示例，展示如何通过 Sui 智能合约操作链上数据。
2. react-client-dapp
   一个通用的 dApp 模板，适合扩展为复杂的应用，提供钱包连接和账户信息展示功能。

更多详情请参考官方文档：Sui dApp-Kit 文档🚪

二、环境准备

在开始构建 Sui dApp 项目前，请确保你的开发环境中已经安装了以下工具：
必备工具
在开始之前，请确保你的开发环境安装了以下工具：

1. Node.js
   推荐安装最新的 LTS 版本，确保稳定性和兼容性。
2. pnpm
   高效的包管理工具，推荐使用。安装命令如下：

npm install -g pnpm

3. Sui CLI
   Sui 提供的命令行工具，用于与区块链交互。关于安装与使用的详细教程请参考： 教程🚪

三、创建项目

使用以下命令快速初始化 Sui dApp 项目：

npm create @mysten/dapp

选择模板
运行命令后，终端会提示选择项目模板：

1. react-e2e-counter
   一个简单的链上计数器应用，适合学习链上交互基础。
2. react-client-dapp
   通用的客户端模板，支持钱包连接和账户管理。

根据项目需求选择合适的模板。以下将分别解析两种模板的结构、运行方式和主要功能。

四、模板一react-e2e-counter

选择react-e2e-counter之后，项目命名为e2e-dapp，系统将自动生成以下项目结构：

react-e2e-counter
├── move              // Move 智能合约代码
│   └── counter
│       ├── Move.toml      // 合约配置文件
│       └── sources        // 智能合约源代码
├── src
│   ├── App.tsx            // 应用主入口
│   ├── Counter.tsx        // 计数器组件
│   ├── CreateCounter.tsx  // 创建计数器组件
│   ├── constants.ts       // 合约地址和模块名
│   └── networkConfig.ts   // 网络配置

部署智能合约

首先，检查 Sui 网络环境、活跃地址以及当前余额是否满足部署条件：

sui client envs
sui client active-address
sui client gas

在合约根目录下使用以下命令部署智能合约：

sui client publish --skip-dependency-verification

将生成的package id填写到 src/constants.ts 文件中：

export const DEVNET_COUNTER_PACKAGE_ID = "0xTODO";
export const TESTNET_COUNTER_PACKAGE_ID = "0xTODO";
export const MAINNET_COUNTER_PACKAGE_ID = "0xTODO";

运行项目

下载依赖并启动开发环境：

pnpm install
pnpm dev

在浏览器访问 http://localhost:5173，即可使用计数器应用，体验链上计数功能

五、模板二react-client-dapp

选择react-client-dapp之后，项目命名为react-dapp，生成的项目结构如下：

react-client-dapp
├── src
│   ├── App.tsx            // 应用主入口
│   ├── OwnedObjects.tsx   // 显示账户拥有的链上对象
│   ├── WalletStatus.tsx   // 钱包连接状态组件
│   └── networkConfig.ts   // 网络配置

运行项目

下载依赖并启动开发环境：

pnpm install
pnpm dev

在浏览器访问 http://localhost:5173，你将看到一个显示你当前连接的账户所拥有的全部object id的应用界面。

六、模板对比

总结

在本文中，我们详细解析了如何使用 Sui dApp-Kit 快速构建去中心化应用。文章从环境准备开始，介绍了所需工具的安装与使用方法，然后通过两个模板（react-e2e-counter 和 react-client-dapp）的具体实践，全面讲解了项目创建、合约部署与应用启动的全过程。我们不仅对两种模板的特性进行了对比分析，还提供了具体的操作步骤和运行效果的展示，帮助开发者更好地理解 Sui dApp-Kit 的强大功能与便捷性。希望这篇文章能为你的去中心化应用开发之旅提供参考与帮助。如果你有任何疑问或建议，欢迎在评论区留言交流！🌟