6.3 为机器人建立后台项目

riyad

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

1. yarn add @twa-dev/sdk
   

复制代码

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

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

1. return (
   2 h" t8 b  P1 {! w, u8 M# w
2.   <div>
   7 X0 v3 c* D& S9 Q: Y
3.     <div>
   
4.       <TonConnectButton />
   : q" D& Q! Z  _, |
5.     </div>
   - R+ ]! D9 \; Z, S
6.     <div>
   
7.       <div className='Card'>
   
8.         <b>{WebApp. platform}</b>
   
9.         <b>Our contract Address</b>
   6 B8 o8 `& w; h. V& m6 ~3 ^" b
10.         <div className='Hint">{contract_address?.slice(0, 30) + "...")</div>
    2 a8 d  N! u# y4 k! q8 a
11.         <b>Our contract Balance</b>
    ! ~) @2 P: m5 X* l
12.         {contract balance && (
    ; _: n! U' c* ^) Y* z! ~- y
13.           <div className= 'Hint'>{fromNano(contract_balance)}</div>
    $ X( M( `3 |. `* R3 |
14.         )}
    
15.       </div>

复制代码

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

1. function App() {
   
2.   const {
   1 V  a% M$ J/ J' y; M7 Y; j
3.     contract_address,
   
4.     counter_value,
   
5.     recent_sender,
   
6.     owner_address,
   " l1 e& P5 A' ?1 I  R
7.     contract_balance,
   
8.     sendIncrement,
   . H" E' L& a: N
9.     sendDeposit
   1 l7 @, h. {0 U
10.     sendWithdrawalRequest
      U1 |; u/ n& m( y5 z2 c! B
11.   } = useMainContract();
    
12. 
    
13. 
    
14. 
    
15.   const { connected } = useTonConnect();
    
16. 
    $ o! R$ R" `) ^& q3 W
17.   const showAlert = () => {
    6 }' F! N. @- G5 a8 O/ F# `) a2 S
18.     WebApp.showAlert("Hey there!");
    ) b' f! \5 J/ m8 M4 W* t/ ~% S, m
19.   };

复制代码

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

1. return (
   + z) @2 R4 a8 N4 S/ }0 u1 V
2.     <div>
   
3.       <div>
   
4.         <TonConnectButton />
   
5.       </div>
   2 z/ _6 E6 I9 @/ c
6.       <div>
   3 K0 T: w+ I6 y- Q6 K; r
7.         <div className='Card'>
   
8.           <b>{WebApp.platform}</b>
   # A( v3 V; J: O
9.           <b>Our contract Address</b>
   
10.           <div className='Hint'>{contract_address?.slice(0, 30) + "..."}</div>
      d' S! s; L, R/ P# i
11.           <b>Our contract Balance</b>
    ( H! r7 |( w8 G
12.           {contract_balance && (
    0 o- ?  f" H2 _  Y* V7 ~
13.             <div className='Hint'>{fromNano(contract_balance)}</div>
    ! ~  W  R  }7 {8 L" C* B. o8 W
14.           )}
    * {5 }$ d9 Z" B. r( K$ ^2 V
15.         </div>
    
16. 
    
17.         <div className='Card'>
    % c! Y4 a' @6 @, d- C# P+ ?3 n
18.           <b>Counter Value</b>
    5 f1 K3 [' |) Z3 ^% I  b3 k
19.           <div>{counter_value ?? "Loading..."}</div>
    . \# R; c$ |+ L9 q& s
20.         </div>
    
21. 
    6 U% O7 C# z% M3 l4 S. T- B
22.         <a
    
23.           onClick={() => {
      }. j4 Z3 f' ~& w; u2 B
24.             showAlert();
    
25.           }}
    6 o. Y6 Z0 C; c0 ~/ k5 U
26.         >
    
27.           Show Alert
    
28.         </a>
    ) X6 r; {) u) K. {1 P3 {
29. 
    + C: ]5 X2 o5 L+ |- Y
30.         <br />
    ( i' |5 g+ @- G4 u/ A5 Z
31. 
    . z, ]& x' e5 a+ _$ e8 e1 ], v
32.         {connected && (
    7 ~% y- S3 _* A0 d( x8 H! q' U) J
33.           <a
    
34.             onClick={() => {
    
35.               sendIncrement();
    2 O2 D' g6 G7 P& Q3 p
36.             }}
    
37.           >
    
38.             Increment by 5
    
39.           </a>
    - }3 o* M: W. X& m  U$ r9 f: ~
40.         )}
    7 b+ u' K* V, l# T
41. 
    
42.         <br />
    " j- L# R7 l' O, V
43. 
    
44.         {connected && (
    % |8 W& k- {0 Y0 [9 S! ~5 s. A8 @7 j
45.           <a
    9 [9 x" Y* [4 s+ _
46.             onClick={() => {
    
47.               sendDeposit();
    
48.             }}
    
49.           >
    " ~# l5 L$ T3 L4 F" x
50.             Request deposit of 1 TON
    9 p5 D1 w+ {. K
51.           </a>
    
52.         )}
    
53. 
    8 O/ }2 {5 C3 x4 ~0 q; s; |4 A
54.         <br />
    7 `* ^( U6 c( x  ]' M: a) k
55. 
    5 G* I% K8 W9 j6 U
56.         {connected && (
    
57.           <a
    & C# G7 }6 q: Y0 h  _
58.             onClick={() => {
    
59.               sendWithdrawalRequest();
    9 g0 P% C8 A" h  m0 {
60.             }}
    
61.           >
    
62.             Request 0.7 TON withdrawal
    % Q( m: Y! w% X8 ^6 L) n8 `
63.           </a>
    
64.         )}
    6 `  \6 o) a+ I6 v* z4 H- @' ]
65.       </div>
    - }0 I; f& z2 x+ V& k0 E$ k. Q
66.     </div>
    $ o; v# O+ A  E/ ~( U; m& M
67.   );
    
68. }

复制代码

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

1. git status
   " v  K8 B  i  ^* F& X* c5 x) m3 L; j
2. git add .
   7 a, _  ]5 p; y+ f, d# C, y4 \) D
3. git commit -m "TWA SDK integrated"
   7 m& P( a) Z! j+ P
4. git push
   
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 部件发生什么，你的对话都会跟上。

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

: i8 G1 u8 \. y3 x# G! D5 G