5.1 Dapp 结构和项目设置

riyad

💎 欢迎来到第 5 章。

在最初的课程中，我们将重点设置我们的 dApp 项目并实现 TonConnect 功能。接下来，我们将通过发送实际交易来探索与合约的交互。最后，我们将讨论 dApp 发布到 GitHub 页面的过程，以此结束本章。

在上一章中，我们创建了一个具有计数器功能和存款/取款功能的智能合约。该智能合约是我们应用程序的后台基础设施。在本教程中，我们将开发前端或用户界面，使最终用户能够通过网络浏览器访问它。

重要的是要记住，我们正在构建的应用程序是去中心化的。去中心化应用程序（DApps）遵循特定的规则。

其中一条规则是，后端必须完全由智能合约组成，不依赖任何中心化服务器。
另一条规则是，前端必须完全在客户端运行，并且是开源的。
+ M) V# A1 q- s" Z; R

还有更多规则，但就目前而言，这两条是必须遵守的。通过遵守这些规则，我们可以确保不依赖后端服务器来提供前端服务。如果使用这样的服务器，它本质上就是中心化的（因为并非所有终端用户都有平等的访问权），因此，我们的整个应用程序也会变成中心化的。

在本章中，我们将使用另一个名为 Tonkeeper 的 TON 钱包。这将让你更好地了解不同钱包的运行方式。该钱包将通过名为 TON Connect 2 的协议与我们的 DApp 通信。如果您选择了与 Tonkeeper 不同的钱包，请确认它是否支持此版本的 TON Connect。不要忘记确保您的钱包连接到正确的网络--主网或测试网。

Tonkeeper 默认在 TON 主网上运行。如果您决定在 testnet 上运行，则需要将应用程序手动切换到开发模式。打开 "设置 "选项卡，快速点击底部的版本号 5 次。这时会出现 "开发菜单"。点击 "切换到 Testnet "并完成切换。稍后您可以使用此菜单返回主网。
) j* e) t0 F" P/ l+ _

TON Connect

让我们试着理解一下，当我们决定为合约创建用户界面时，为什么还需要 TON Connect。

我们不难发现，这其中涉及到三个方面：

TON 区块链支持大规模创建信任最小化的应用程序和服务。

应用程序为TON提供基于智能合约无限功能的用户界面，但无法立即访问用户的资金。

钱包提供批准交易的用户界面，并在用户的个人设备上安全地保存用户的加密密钥。

这种关注点的分离为用户带来了高速创新和高水平的安全性：钱包不需要自己建立 "walled-garden"生态系统，而应用程序则不需要承担持有最终用户账户的风险。

TON Connect 是跨越这一概念鸿沟的桥梁。

总而言之，TON Connect 旨在简化应用程序通过终端用户的钱包与 TON Blockhain 进行交互的方式。

您有时会看到 TON Connect 2，这只是最新版本的协议。请使用支持 TON Connect 2 的钱包。

为我们的 DApp 创建项目

我们将使用 React 构建前端。我们将使用 Vite 及其 React 模板来创建项目。为项目选择一个名称，例如 counter-front-end，然后打开终端并运行以下程序：

yarn create vite counter-front-end --template react-ts
& b$ ~+ k9 {9 K* j8 ?- k* ]
cd counter-front-end && yarn

复制代码

我们还需要安装一些软件包，以便与 TON 区块链进行交互。在前几章编写测试和编译/部署脚本时，我们已经看到了这些软件包的运行。在命令行中运行以下命令：

yarn add ton ton-core ton-crypto0 M) `# }) f( B1 W& s* j: b
yarn add @orbs-network/ton-access" a) T! @: Y) m4 a L0 w7 b

复制代码

最后但并非最不重要的一点是，我们需要克服 ton 库对浏览器中不可用的 Nodejs Buffer 的依赖。我们可以通过安装 polyfill 来做到这一点。在终端运行以下命令

yarn add vite-plugin-node-polyfills
1 ]6 a/ B& Y; H, s! S

复制代码

完成 Buffer 修复后，请更新 vite.config.ts 文件：

import { defineConfig } from 'vite';
6 @2 D8 A" B* G. p z/ ~
import react from '@vitejs/plugin-react'; ~/ o' t9 U2 W# `! M; M6 U
import { nodePolyfills } from 'vite-plugin-node-polyfills';
1 s# }4 N& Q6 Q# i( z, W1 e
5 q3 T/ e' D6 t; l$ X! R/ _
// https://vitejs.dev/config/
! p1 h0 @6 O+ `+ H2 |
export default defineConfig({& ^& U% P/ \- v) v8 f" |- u+ _ g
plugins: [react(), nodePolyfills()],
5 Q" m6 q6 W. N' y& D$ Z
base: '/'," P* e6 X; n9 z1 \8 g
});

复制代码

要查看空应用程序模板，请在命令行中运行：

yarn dev) ^+ O5 n: B: H) A0 G

复制代码

然后打开浏览器，直接输入 CLI 结果中显示的 URL（例如 http://localhost:5173/).

您将看到一个全新页面，其中包含 Vite 的 TypeScript 模板内容。

好了！我们可以开始使用 TON Connect 来验证终端用户是否可以使用我们的 DApp 了。

5.1 Dapp 结构和项目设置

riyad LV4