5.1 Dapp 结构和项目设置

riyad

💎 欢迎来到第 5 章。

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

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

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

其中一条规则是，后端必须完全由智能合约组成，不依赖任何中心化服务器。
另一条规则是，前端必须完全在客户端运行，并且是开源的。
. z- n$ r# e' N; Y

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

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

Tonkeeper 默认在 TON 主网上运行。如果您决定在 testnet 上运行，则需要将应用程序手动切换到开发模式。打开 "设置 "选项卡，快速点击底部的版本号 5 次。这时会出现 "开发菜单"。点击 "切换到 Testnet "并完成切换。稍后您可以使用此菜单返回主网。
2 h. t' h$ h# {

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
0 e) j+ Q( R( z% _5 I5 D
cd counter-front-end && yarn

复制代码

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

yarn add ton ton-core ton-crypto
* M- S3 j( B1 U4 t: P* z' H8 z
yarn add @orbs-network/ton-access4 \; a, I% M' J

复制代码

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

yarn add vite-plugin-node-polyfills
0 ^& [+ i* n+ v# D- \% G3 c$ P

复制代码

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

import { defineConfig } from 'vite';
, v& K: ^3 d4 D
import react from '@vitejs/plugin-react'; q% B c8 t4 O: ^
import { nodePolyfills } from 'vite-plugin-node-polyfills';) o ?; i* o0 `( c$ a/ x1 F) M( i
# }* Q5 }# {# W% t
// https://vitejs.dev/config/
% e! P9 K3 g" }
export default defineConfig({
) n% J) o* p# S$ ^' M: H' B% I
plugins: [react(), nodePolyfills()],8 I* ]8 _7 z4 s/ T+ H: ]) k' E1 _9 ]
base: '/',$ l# U# {- ^ D- C# R4 ^! l8 i; `2 X
});

复制代码

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

yarn dev
8 I: F: Q# P- V. }

复制代码

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

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

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

5.1 Dapp 结构和项目设置

riyad LV4