6.3 为机器人建立后台项目

riyad

我们看看如何安装 SDK，以便使用 TWA（Telegram Web App）的 API。我在上一章的项目中打开 App.tsx 文件，然后输入命令：

1. yarn add @twa-dev/sdk
   

复制代码

很好，我们安装好了。现在，我们要导入网络应用程序并开始与之交互。首先，我们要在界面中向用户显示平台--如果你想根据平台实现不同的功能，这一点非常有用。其次，我们将添加一个按钮来触发一些操作。

让我们从平台开始。我们将文本加粗，并添加 WebApp 平台。我们将在屏幕上显示它。

1. return (
   
2.   <div>
   ' W8 f2 s# ?. t7 ?- ~" l
3.     <div>
   7 u! b7 Q  t5 g: E6 m- c% v
4.       <TonConnectButton />
   
5.     </div>
   " _1 `, h2 W" Q4 k8 z+ ~
6.     <div>
   
7.       <div className='Card'>
   8 y  B+ z1 G; r0 {3 ~6 f
8.         <b>{WebApp. platform}</b>
   5 t0 U) G9 V5 L7 j7 U4 V/ w
9.         <b>Our contract Address</b>
   8 I( D9 P0 p2 @6 @* t
10.         <div className='Hint">{contract_address?.slice(0, 30) + "...")</div>
    
11.         <b>Our contract Balance</b>
    5 V% `2 p! V+ e, p. O% H# v
12.         {contract balance && (
    + [* c9 S, i2 y' C& }
13.           <div className= 'Hint'>{fromNano(contract_balance)}</div>
    
14.         )}
    
15.       </div>

复制代码

第二件事是操作。我们将创建一个函数 showAlert，触发后将显示警报：

! ?- F' q2 D8 `8 e, E

1. function App() {
   
2.   const {
   
3.     contract_address,
   0 \6 @% l/ f) n! V1 Q% X. P
4.     counter_value,
   8 V2 T  D' y/ o* ~7 B
5.     recent_sender,
   4 ^8 d6 f  x8 w+ r, B, f
6.     owner_address,
   0 G: E$ [5 |2 P- f0 Q1 W( j
7.     contract_balance,
   
8.     sendIncrement,
   
9.     sendDeposit
   
10.     sendWithdrawalRequest
    
11.   } = useMainContract();
    
12. 
    
13. 
    0 p3 h9 U+ I$ J
14. 
    
15.   const { connected } = useTonConnect();
    
16. 
    
17.   const showAlert = () => {
    4 M" W! G* X! N4 ^) r- h8 z" H7 X" G
18.     WebApp.showAlert("Hey there!");
    ) j- C6 K  U& K
19.   };

复制代码

它不需要身份验证，因此我们只需将其显示在仅向授权用户显示的部分上方即可。因此，我们要在这里更改 showAlert。这就是整个返回部分的样子：

1. return (
   ) J9 |$ K1 g% Y& ?/ A$ Q
2.     <div>
   2 w$ A7 _2 u6 n/ a" J7 G
3.       <div>
   # I) X7 P9 F3 g5 u; j* [
4.         <TonConnectButton />
   
5.       </div>
   
6.       <div>
   
7.         <div className='Card'>
   " P8 A8 a0 _" R) L/ R/ K# b2 f, J% T
8.           <b>{WebApp.platform}</b>
   
9.           <b>Our contract Address</b>
   
10.           <div className='Hint'>{contract_address?.slice(0, 30) + "..."}</div>
    
11.           <b>Our contract Balance</b>
    
12.           {contract_balance && (
    3 l; U8 W+ W! `2 v- n, u2 X' Q. s8 K
13.             <div className='Hint'>{fromNano(contract_balance)}</div>
    
14.           )}
    
15.         </div>
    " w; I! m7 b1 I2 [  {0 U
16. 
    
17.         <div className='Card'>
    ) h) F( ^$ ]0 g# o1 f# O
18.           <b>Counter Value</b>
    
19.           <div>{counter_value ?? "Loading..."}</div>
    
20.         </div>
    
21. 
    & v. N) K& ?$ U2 Y
22.         <a
    
23.           onClick={() => {
    
24.             showAlert();
    
25.           }}
    6 z$ F" y$ u4 c4 n# r+ w
26.         >
    5 J6 a. K1 v, }# N3 D
27.           Show Alert
    ! O1 K- A7 @7 M
28.         </a>
    
29. 
    ; s% K! k( x) D
30.         <br />
    
31. 
    
32.         {connected && (
    
33.           <a
    
34.             onClick={() => {
    
35.               sendIncrement();
    
36.             }}
    
37.           >
    
38.             Increment by 5
    + h5 a: a. t( J3 R& }8 A
39.           </a>
    
40.         )}
    
41. 
    1 A( S4 f% B' N+ p9 R; d8 D: A
42.         <br />
    
43. 
    " H. c" i3 }4 r# a! l( ?* {% N
44.         {connected && (
    + L2 U: u" q0 r6 M5 ^) H7 q/ K
45.           <a
    
46.             onClick={() => {
    % f* e) X) F& u4 `
47.               sendDeposit();
    3 s3 S7 @, u9 X% `
48.             }}
    
49.           >
    
50.             Request deposit of 1 TON
    
51.           </a>
    ' p2 |4 {6 _6 Q
52.         )}
    
53. 
    3 K8 f# A& Y2 E1 y4 E
54.         <br />
    3 X6 M  ]# c' }
55. 
    
56.         {connected && (
    2 `7 K: B2 s" @5 B  B/ S
57.           <a
    , s5 d; B: G- L, N
58.             onClick={() => {
    9 B) l; V- o* |/ ^  o' B' s5 f
59.               sendWithdrawalRequest();
    5 i% Q4 n" b, I0 y2 q
60.             }}
    
61.           >
    
62.             Request 0.7 TON withdrawal
    
63.           </a>
    : `% U8 u+ V7 j
64.         )}
    
65.       </div>
    
66.     </div>
    % u3 d7 r; W/ V9 G; a: X
67.   );
    
68. }

复制代码

就是这么简单。现在，我们提交文件并推送到 GitHub：

2 P% ]# m  `- N! Z% S

1. git status
   0 S- e+ Y6 x. R/ }4 x3 I
2. git add .
   
3. git commit -m "TWA SDK integrated"
   
4. git push
   , y& u5 n! {+ b8 q' L$ U
5. git push origin master

复制代码

利用 GitHub 操作

正如你所记得的，我们已经配置了 GitHub 操作，因此我们的应用程序将一路构建并部署到 GitHub 页面。我们可以看到，它已经在进程中了：

GitHub 操作功能强大。你可以通过在这里授权来节省大量时间。我们还将在这里运行另一个操作，即从独立分支发布 GitHub 页面。也等它完成吧。

但正如你所看到的，我们无法在这里检测平台，因为网络应用程序对象根本不可用，这是因为我们不在 Telegram 中。因此，这只是我们发布的一个草稿，你需要通过多重检查来了解用户是否在 Telegram 中。现在我们可以进入移动版 Telegram，看看它在社交软件中是如何工作的。

我的平台是 iOS。正如我说过的，这只是一个发布草稿，所以我们以后可以把它做得更好看。如果我点击显示提醒，就会显示弹出窗口：

TWA SDK 赋予了您很大的权力。您需要做的就是阅读文档，其中教了您很多可以做的事情，如指定平台、配色方案、一些主题参数、使其扩展、设置视口高度等。

另一个有趣的功能是控制按钮、主按钮和返回按钮 (https://github.com/twa-dev/SDK/blob/master/src/react/MainButton/Readme.md, https://github.com/twa-dev/SDK/blob/master/src/react/BackButton/Readme.md) 。您可以使用这些组件并为其附加操作。您拥有如此多的控制权，您的网络应用程序实际上正在成为一个与 Telegram 交互的非常容易访问的应用程序。您可以在其中加入大量功能提升用户体验。

如果我关闭 Telegram 中的网络应用程序，我可以看到它仍然是一个聊天工具。因此，如果您想在整体上为您的应用程序创造最佳的用户体验，就应该使用混合方法：在网络应用程序中保留一些功能，在聊天命令中保留一些功能。您可以与用户保持对话，而网络应用程序只用于人们习惯在图形用户界面中进行的某些操作。

在下一课中，我们将使用相同的功能来实现递增5、计数器以及提款和存款请求。我们还将使用聊天注释来实现同样的功能。这取决于你想在产品中使用什么功能，以及在哪里构建功能。总之，我们将学习这一切是如何运作的。此外，我们还将学习如何将网络应用程序中的信息传递到 telegram 聊天机器人中，并创建一个操作对话部分的聊天机器人。

网络应用程序负责功能。它负责授权钱包、保持会话。而聊天机器人作为一个独立的应用程序，将负责与用户保持对话。必须建立连接，这样网络应用程序才能将信息传递给聊天机器人。因此，无论 web 部件发生什么，你的对话都会跟上。

下节课见。我想再次提醒大家，我为你们能顺利完成本课程的学习而感到骄傲。再见

, l6 ~9 j% e4 X

' o5 m" G6 v3 l% h) H$ ?