TG Bot & Mini-App 开发实践

7 min readDec 27, 2023

一、前言

目前主流应用架构，都是分为“客户端/Client”和“服务端/Server”两部分，通过请求和响应的方式给用户提供服务。

如果应用要提供“可扩展性”，让用户来自定义客户端展示内容，以及编写对应的服务端处理程序，从技术实现难易度和功能复用性上，可以有不同的产品方案。

Telegram 先是在 2015 年推出了“不可以自定义界面样式”以及“客户端不直接和服务端通信”的 Telegram Bot。

然后直到 2022年，Telegram 才推出了 Mini-App，让开发者可以完全掌控用户界面并且“客户端直接和服务端通信”，而不需要 Telegram 服务端转发请求。

Telegram 之所以在推出 Bot 的 7 年后才推出 Mini-App，是因为 Bot 虽然不可以定义自己的界面，但是 Telegram 提供了非常丰富的内置界面组件，如内联按钮，键盘按钮，Bot 命令，Deep Link等等，已经可以满足极大部分Telegram内的需求。

下图展示了 Bot 和 Mini-App 在应用架构上交互模式的不同。

二、TG Bot 开发

Telegram Bot 是不需要电话号码即可设置的特殊帐户。用户发送给 Bot 的消息或对应操作通过 Telegram 中间服务器(intermediary server)转发到其所有者的服务器上，最终由Bot所有者的服务器处理用户的消息输入和操作请求。

我们知道 Telegram Bot 并不是一个独立的应用，而是依赖于 Telegram 体系而存在，所以 Bot 的“客户端”就是 Telegram 提供的 Bot 对话框和相关配套。

除了 Bot 客户端，我们还需要开发对应的 Bot 服务端，同样服务端也需要依赖 Telegram 提供的基础设施，这里就特指 Telegram Bot API，

备注：

Telegram 的开放性非常高，你不但可以通过 Telegram Bot API 来完全掌控你的 Bot，甚至你可以通过 Telegram 提供的 Telegram API and TDLib 去构建你自己的 Telegram Client。

下图是 Bot 交互的详细介绍，在 Telegram 客户端，我们通过 BotFather 配置好自己的 Bot 后，不能自定义任何用户界面，只能通过你的 Bot 服务端, 使用 Telegram Bot API 规定的交互模式，来定义你的 Bit 和用户业务交互。

延伸阅读

Bot 简介：A General Bot Platform Overview
Bot 功能介绍：Telegram Bot Features
Bot API 接口文档：Telegram Bot API
Bot 开发SDK和类库：Bot API Library / SDK
SDK和类库是由开源社区用不同的编程语言对 Bot API 进行的封装。
以 grammy.dev 框架举例，ctx.api包含所有的API封装，但是实际编程时，推荐使用ctx下封装过的方法，可以减少不必要的参数输入，如ctx.replyWithPhoto可以减少输入chat_id。

三、Mini-App 开发

有一个概念一定要牢记，Mini-App 并不是独立于 Bot 的新组件，而是依附于 Bot 的一个可选交互方式。

Bot 作为 Telegram 中最重要的交互入口，不论是 Game 还是 Mini-App 其实都复用了 Bot 的基础设施作为服务配置和用户入口点。

也就是说 Game 和 Mini-App 都是属于某个 Bot 下面的，Bot 和他们之间是 “一对多”的关系，而 Game 和 App 之间除了可能属于同一个 Bot 以外，没有直接的从属关系。

下图是 Bot 加上 Mini-App 整体的交互图，在 Telegram 里面打开一个 Mini-App，则 Telegram 客户端会给这个 Mini-App 实例创建一个 WebView 容器，这个容器类似一个浏览器的 Tab，Mini-App 运行在这个 WebView 容器之中。

同时，Telegram 客户端会给 WebView 容器注入一个window.Telegram.WebApp对象，Mini-App 可以从这个对象中获取当前 Telegram 用户和执行环境的有效信息, 如下面所示。

{
  "authDate": "2023-12-12T08:46:19.000Z",
  "chat": null,
  "hash": "84907a1ec646fafdc8076796...x112",
  "canSendAfter": null,
  "queryId": null,
  "receiver": null,
  "user": {
    "allowsWriteToPm": true,
    "firstName": "Andrew",
    "id": 1122334455, 
    "isPremium": true,
    "languageCode": "en",
    "lastName": "Tonx 💎",
    "username": "andrew_tonx"
  },
  "startParam": null
}