6.3 为机器人建立后台项目

riyad

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

7 [6 \; p" |& B% Q- [6 a

1. yarn add @twa-dev/sdk
   ! h: r' Y- T+ r8 I

复制代码

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

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

1. return (
   
2.   <div>
   
3.     <div>
   & H, T9 q" g# i* [
4.       <TonConnectButton />
   * Z3 v3 x  h, B! b
5.     </div>
   
6.     <div>
   
7.       <div className='Card'>
   
8.         <b>{WebApp. platform}</b>
   $ W, {: J2 p4 B% ^- L* X( S
9.         <b>Our contract Address</b>
   
10.         <div className='Hint">{contract_address?.slice(0, 30) + "...")</div>
    
11.         <b>Our contract Balance</b>
      }- I' P( D0 D7 S; ]
12.         {contract balance && (
    
13.           <div className= 'Hint'>{fromNano(contract_balance)}</div>
    
14.         )}
    
15.       </div>

复制代码

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

1 r. f5 K3 }* W1 s

1. function App() {
   8 \* ~7 ]/ W  N$ b) h- ~" \3 k) G
2.   const {
   
3.     contract_address,
   3 P- x8 v6 j! Q, Y
4.     counter_value,
   9 K" h+ J; F0 {
5.     recent_sender,
   + S. M) w/ A8 g8 `
6.     owner_address,
   
7.     contract_balance,
   
8.     sendIncrement,
   
9.     sendDeposit
   
10.     sendWithdrawalRequest
    . [# X  k: E3 C* l) J4 ~2 j
11.   } = useMainContract();
    
12. 
    " N( [' x* U: X+ g9 `# D9 d1 W8 U
13. 
    ; V% `$ `& g* o& N, Z  ?
14. 
    $ Z4 Z  Z, ]5 [" A8 a0 Y; c, O
15.   const { connected } = useTonConnect();
    # \) @7 _) `" V6 F5 Y* Z
16. 
    
17.   const showAlert = () => {
    
18.     WebApp.showAlert("Hey there!");
    
19.   };

复制代码

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

1. return (
   
2.     <div>
   
3.       <div>
   2 o, t9 f+ ~% v& {, _- X
4.         <TonConnectButton />
   4 Q9 `2 {/ e. i6 `( q
5.       </div>
   1 Q5 [7 B# m5 Y- ^) V7 T( b* E
6.       <div>
   
7.         <div className='Card'>
   " Z& U$ H0 Q6 }4 {6 q! z6 S9 y5 Q
8.           <b>{WebApp.platform}</b>
   
9.           <b>Our contract Address</b>
   % J  G5 J' ~5 g' q! r
10.           <div className='Hint'>{contract_address?.slice(0, 30) + "..."}</div>
    6 H" N/ W4 [& {9 H8 j
11.           <b>Our contract Balance</b>
    
12.           {contract_balance && (
    
13.             <div className='Hint'>{fromNano(contract_balance)}</div>
    5 V  P; F$ ]0 v9 Y3 `
14.           )}
    ! N/ P$ C) i# C: z1 @
15.         </div>
    0 Y$ R+ p; M. u1 \
16. 
    ' O8 `( I; Y2 _8 G3 V
17.         <div className='Card'>
    5 Q4 d3 }% b$ `- V# c6 g& J
18.           <b>Counter Value</b>
    
19.           <div>{counter_value ?? "Loading..."}</div>
    
20.         </div>
    * @1 [; a* e9 z' J! s; |2 z
21. 
    
22.         <a
    
23.           onClick={() => {
    7 H! d6 T2 m* L1 d5 u2 Q$ Z$ Q& k
24.             showAlert();
    
25.           }}
    * o3 T6 r- ?  F" M3 p0 H
26.         >
    7 c6 h0 b6 E# B( g9 X4 [% J9 s3 V
27.           Show Alert
    $ N5 G0 {# H5 `/ v$ |1 P- l/ ?
28.         </a>
    " h3 }( m' f6 u: ], f$ R- Y
29. 
    
30.         <br />
    7 G  B9 i' i6 o( e: [; A& ~
31. 
    $ k$ R( f" d& Y" a: z( d
32.         {connected && (
    0 k5 [/ Z) }( c/ k' l6 |7 D; w
33.           <a
    
34.             onClick={() => {
    
35.               sendIncrement();
    9 c! J7 ~& i: e" a) S$ U9 d3 _
36.             }}
    ' o; b% ~  ]7 q! U
37.           >
    8 f# Y* g; ]' m+ e" Z
38.             Increment by 5
    
39.           </a>
    
40.         )}
    ) n! u; C0 d' P" u! @/ a
41. 
    
42.         <br />
    . J) h# X  [  _  ~: p
43. 
    
44.         {connected && (
    
45.           <a
    
46.             onClick={() => {
    ; I# P/ u. C) m! N  {  {
47.               sendDeposit();
    
48.             }}
    
49.           >
    3 Z+ o' K; N0 f" Y0 I! _) t
50.             Request deposit of 1 TON
    
51.           </a>
    5 ]; H- \0 t" o, d
52.         )}
    
53. 
    : D2 @" |4 U. Z- ~( i: D
54.         <br />
    
55. 
    
56.         {connected && (
    + [+ J1 e3 ]* u% G+ a4 D, C( U
57.           <a
    
58.             onClick={() => {
    
59.               sendWithdrawalRequest();
    1 T( @3 Q4 q9 ^- F3 o* ]3 ?
60.             }}
    4 s7 q8 |" p' `. j! m' y4 c2 F
61.           >
    1 ]5 c6 f  W% F$ e9 k! s1 u
62.             Request 0.7 TON withdrawal
    
63.           </a>
    2 p% N1 h% a4 R8 s
64.         )}
    ; a( |; V& L- I7 h/ Q
65.       </div>
    
66.     </div>
    " \5 u4 e  G: |7 j( d9 r- M
67.   );
    
68. }

复制代码

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

6 b7 K2 w! @+ o  q  c( h* _; u

1. git status
   ; Q* v+ ~% w( ?0 ?2 q
2. git add .
   1 V# D# i1 N, F% q( z, C
3. git commit -m "TWA SDK integrated"
   
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 部件发生什么，你的对话都会跟上。

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

0 D) o) Q3 L' U4 D* D' Q* T+ a

! \( U' _3 G$ C  P% a/ V! T8 w