跳转到内容

在 Aptos 上构建端到端 Dapp

学习新框架或编程语言的常见方式是构建一个简单的待办事项列表。在本教程中,我们将学习如何构建端到端的待办事项列表 dapp,从智能合约端到前端,最后使用钱包与两者进行交互。

请参阅 源代码 中的完整代码。

在满足下面描述的前提条件设置后,您将按以下顺序学习本教程:

  1. 创建智能合约
  2. 设置前端
  3. 从链上获取数据
  4. 向链上提交数据
  5. 处理任务

您必须具备:

虽然我们会解释一些 React 的决策,但我们不会深入探讨 React 的工作原理;因此我们假设您有一些 React 的使用经验。

在本节中,我们将创建一个 my-first-dapp 目录来保存我们的项目文件,包括客户端代码(基于 React)和 Move 代码(我们的智能合约)。

为此,我们将使用 create-aptos-dapp 来创建项目。

  1. 打开终端并导航到项目的所需目录(例如,Desktop 目录)。
  2. 运行 npx create-aptos-dapp@latest 来创建项目。
Terminal window
npx create-aptos-dapp@latest
  1. 按照说明创建项目。
  • 为项目选择一个名称,例如 my-first-dapp
  • 选择 Full-stack project 选项。
  • 选择 Boilerplate Template 选项。
  • 为简单起见,选择不使用 Surf。
  • 选择 Vite app 框架选项。
  • 选择 Devnet 网络选项。

该工具将在与项目同名的目录中创建项目并安装所需的依赖项。

按照 Next Steps 说明操作。

现在让我们创建智能合约