TON：为TG_Bot设置后端

安装一个 SDK，让我可以使用 TWA（Telegram Web App）的 API。打开我们在上一章中创建的项目中的 App.tsx 文件，并输入以下命令：


yarn add @twa-dev/sdk

导入 Web 应用并开始与其交互。首先在界面中向用户显示平台信息——这在想要基于平台实现不同功能时非常有用。其次，添加一个按钮来触发某些操作。

首先是平台信息。将文本设置为粗体，并添加 WebApp 平台信息并在屏幕上显示它。


return (
  <div>
    <div>
      <TonConnectButton />
    </div>
    <div>
      <div className='Card'>
        <b>{WebApp.platform}</b>
        <b>Our contract Address</b>
        <div className='Hint'>{contract_address?.slice(0, 30) + "..."}</div>
        <b>Our contract Balance</b>
        {contract_balance && (
          <div className='Hint'>{fromNano(contract_balance)}</div>
        )}
      </div>
    </div>
  </div>
);

接下来是动作部分。创建一个名为 showAlert 的函数，用来触发弹出提示框：


function App() {
  const {
    contract_address,
    counter_value,
    recent_sender,
    owner_address,
    contract_balance,
    sendIncrement,
    sendDeposit,
    sendWithdrawalRequest
  } = useMainContract();

  const { connected } = useTonConnect();

  const showAlert = () => {
    WebApp.showAlert("Hey there!");
  };

它不需要认证，所以我们可以简单地在将要显示给授权用户的部分上方显示它。在这里修改为 showAlert。这是整个 return 部分的样子：


return (
    <div>
      <div>
        <TonConnectButton />
      </div>
      <div>
        <div className='Card'>
          <b>{WebApp.platform}</b>
          <b>Our contract Address</b>
          <div className='Hint'>{contract_address?.slice(0, 30) + "..."}</div>
          <b>Our contract Balance</b>
          {contract_balance && (
            <div className='Hint'>{fromNano(contract_balance)}</div>
          )}
        </div>

        <div className='Card'>
          <b>Counter Value</b>
          <div>{counter_value ?? "Loading..."}</div>
        </div>

        <a
          onClick={() => {
            showAlert();
          }}
        >
          Show Alert
        </a>

        <br />

        {connected && (
          <a
            onClick={() => {
              sendIncrement();
            }}
          >
            Increment by 5
          </a>
        )}

        <br />

        {connected && (
          <a
            onClick={() => {
              sendDeposit();
            }}
          >
            Request deposit of 1 TON
          </a>
        )}

        <br />

        {connected && (
          <a
            onClick={() => {
              sendWithdrawalRequest();
            }}
          >
            Request 0.7 TON withdrawal
          </a>
        )}
      </div>
    </div>
  );
}

现在我们提交文件并推送到 GitHub：


git status
git add .
git commit -m "TWA SDK integrated"
git push
git push origin master

利用我们已经配置了的GitHub Actions，应用将被构建并部署到 GitHub Pages。可以看到，它已经在进行中了：

TWA SDK integrated - action，通过将任务委托给它们可以节省大量时间。

你需要通过多次检查来确保你的用户是在 Telegram 中使用这个应用。现在我们可以在手机 Telegram 中查看它在 Messenger 内的工作情况。

我的平台是 iOS。如果点击 show alert，它会显示弹出框：

TWA SDK 为你提供了很多功能。你所需要做的就是阅读文档，它会教你许多可以做的事情，比如指定平台、颜色方案、一些主题参数、使其扩展、设置视口高度等。

另一个功能是按钮控制，主按钮和返回按钮。可以使用这些组件并附加动作。通过丰富的自定义控制权，你的 Web 应用实际上变成了一个交互体验很好的应用程序，可以与 Telegram 互动，可以在其中实现强大的功能并提供出色的用户体验。

如果在 Telegram 中关闭 Web 应用，我、仍然可以看到它是一个聊天窗口。因此，如果想为应用程序整体创建最佳的用户体验，应该使用混合方法：将一些功能保留在 Web 应用中，而另一些功能保留在聊天命令中。与用户保持对话的同时，将 Web 应用于用户习惯在 GUI 中执行的某些操作。

Web 应用负责功能，包括授权钱包、保持会话。而聊天机器人，作为一个独立的应用程序，将与用户保持对话。必须有一种连接方式，使 Web 应用可以将信息传递给聊天机器人。这样，你的对话才能够同步 Web 部分的所有操作。