之前创建了一个具有计数器功能以及存取款功能的智能合约。这个智能合约作为我们应用的后端基础设施。在这篇中，我将开发前端或用户界面，使最终用户能够通过浏览器访问调用合约的功能。
我正在构建的应用是去中心化的。去中心化应用程序（DApps）遵循特定的规则。
其中一个规则是，后端必须完全由智能合约组成，而不能依赖任何集中式服务器。
另一个规则是，前端必须完全在客户端运行，并且是开源的。
还有其他要求，但这两个规则非常重要。通过遵循这些规则，我可以确保不依赖后端服务器来提供前端。如果使用集中式服务器（并非所有终端用户都能平等访问），整个应用也会变得集中化。
在本节中，我将使用另一个TON钱包——Tonkeeper。钱包将通过名为TON Connect 2的协议与我们的DApp通信。如果选择不同于Tonkeeper的钱包，请确认它支持这个版本的TON Connect。不要忘记把钱包连接到正确的网络，不论主网或测试网。
Tonkeeper默认在TON主网上工作。如果决定在测试网上工作，需要手动将应用切换到开发模式。打开“设置”选项卡，并快速点击底部的版本号五次调出“开发菜单”，点击“切换到测试网”并进行切换。
TON Connect
为合约创建用户界面时，为什么需要TON Connect？
- TON区块链：允许在大规模创建信任最小化的应用和服务。
- 应用程序：为基于TON的智能合约提供无限功能的UI，但不能即时访问用户的资金。
- 钱包：为批准交易提供UI，并在用户的个人设备上安全地保存用户的加密密钥。
这种关注点的分离使得用户可以快速创新并获得高水平的安全性：钱包不需要自己构建生态系统，而应用程序也不需要承担持有终端用户账户的风险。
TON Connect是跨越这一概念差距的桥梁。
总结一下，TON Connect是旨在简化应用程序通过终端用户的钱包与TON区块链交互方式的协议。
你有时会看到TON Connect 2，这只是协议的最新版本。
为DApp设置项目
我选择使用React构建前端。为了速度创建项目，我会用Vite及其React模板。新建一个项目名称，例如counter-front-end，然后打开终端并运行以下命令：
yarn create vite counter-front-end --template react-ts cd counter-front-end && yarn
安装一些额外的库，这些库可以让组件和TON区块链交互。之前在编写测试和编译/部署脚本时已经看到这些包的使用。运行以下命令：
yarn add ton ton-core ton-crypto yarn add @orbs-network/ton-access
最后，解决ton库对Nodejs Buffer的依赖问题，因为它在浏览器中不可用。安装一个polyfill，运行以下命令：
yarn add vite-plugin-node-polyfills
为了修复这个Buffer，更新vite.config.ts文件：
import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { nodePolyfills } from 'vite-plugin-node-polyfills'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), nodePolyfills()], base: '/', });
查看你的空白应用模板，在命令行中运行：
yarn dev
然后打开网络浏览器，并访问CLI结果中显示的URL（类似于http://localhost:5173/）。
你会看到一个包含Vite TypeScript模板内容的全新页面。