type
status
date
slug
summary
tags
category
icon
password
Telegram 是全球顶流的社交软件，目前其提供了机器人 bot 和 mini app，可以非常方便的开发三方服务。
本文通过实现一个 TodoList 服务，以跑通完整的开发流程。
环境准备
建议使用 Test 环境开发，限制条件会少很多。如何打开 Test
环境，参考[官方文档](https://core.telegram.org/bots/webapps#testing-mini-apps)，比较简单。
以 MacOS 版本为例：
- 点击 10 下设置按钮，打开 Debug 面板
- 开启 Debug 模式
- `⌘ + click`点击添加账号，即可登录测试账号
Bot
机器人注册
- 搜索 BotFather 机器人
[](https://camo.githubusercontent.com/2b597a47357139cb8e34751d7316bc63164a68426dc69fb09651bf1072d1e106/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363835383138353233312d64316531353264612d636434382d346632642d626266362d6637376665373034653037632e706e6723617665726167654875653d25323366646663666326636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3237392669643d756363663633313233266f726967696e4865696768743d31353034266f726967696e57696474683d31303132266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d3530313031267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7532333632376265622d346166652d343830372d393263352d6131663065643639626535267469746c653d2677696474683d313838)
- 输入 `/newbot`新建机器人，然后根据提示输入即可。第一次输入昵称，第二次输入机器人账号（全平台唯一，且需要以 bot 结尾），至此新建机器人成功，**记得保存返回的机器人 Token，开发时需要** 。
[](https://camo.githubusercontent.com/dba576f457573dae65930ca05ec42251abcf596403c1a3a3d4fb2bf64ba4246a/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363835383337353737392d66333961383732622d613065352d343632332d383938352d6638666331396231346533612e706e6723617665726167654875653d25323366376636663626636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3330322669643d753133363663316234266f726967696e4865696768743d31343936266f726967696e57696474683d31303232266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d333135313433267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7531393362366531382d313761322d343233342d626433612d3132643136643339313866267469746c653d2677696474683d323036)
- 机器人新建成功，我们可以通过机器人账号「todo_list_demo_bot」搜索到机器人，并与它对话。当然，现在机器人还什么都不会呢。
[](https://camo.githubusercontent.com/3967d8b6c7a6c6e6c5068f96d817a718f5121cd7a44c7e52916dbcca71c83c95/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363835383437313837382d32396230376139372d336233612d343636352d626633312d3538373735343037633966392e706e6723617665726167654875653d25323366616661666126636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3134332669643d753266313361336431266f726967696e4865696768743d363532266f726967696e57696474683d31303334266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d3439393934267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7561623330323933302d333133642d343432622d383335322d6438653037663030323739267469746c653d2677696474683d323236)
功能实现
机器人的交互逻辑很简单，用户输入的任意内容，会通知到我们的服务端，服务端根据约定的格式，处理用户请求。
比如我们约定通过 `/add 任务`的格式来添加任务，那当用户输入 `/add 写作业`时，服务端会通过文本匹配，来添加一个 `写作业`的任务。
我们先来实现添加任务的服务端逻辑，极其简单。
这里我们通过 Node.js 语言来写，同时集成了 [node-telegram-bot-
api](https://github.com/yagop/node-telegram-bot-api) 库，只需要几行代码就好了。
const TelegramBot = require('node-telegram-bot-api');
const token = 'your token';
const bot = new TelegramBot(token, { polling: true, testEnvironment: true });
const todos = {};
bot.onText(/\/add (.+)/, (msg, match) => {
const chatId = msg.chat.id;
const text = match[1];
if (!todos[chatId]) {
todos[chatId] = [];
}
todos[chatId].push(text);
bot.sendMessage(chatId, 'Added "' + text + '" to your to-do list.');
});
上面代码很简单，就是当用户输入的内容是以 `/add` 开始的话，就给该用户新增一个任务。
启动这个服务，然后我们试一试效果。
[](https://camo.githubusercontent.com/851d3bea03512293131af4e9e8df952e4f4ccfef2f763cbeda750eb87e5fddec/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363835393431383732392d37633362613230332d313462362d343138302d626636372d3663306561353163613366382e706e6723617665726167654875653d25323366626662666226636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3232342669643d753061653966373331266f726967696e4865696768743d343438266f726967696e57696474683d31303136266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d3438353830267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7536396639646136342d383664612d346364382d396566342d6634393531663333326565267469746c653d2677696474683d353038)
现在我们已经可以成功的通过机器人新建一个任务了。
然后我们再加一个 `/list`命令，列出当前所有的任务
bot.onText(/\/list/, (msg) => {
const chatId = msg.chat.id;
const todoList = todos[chatId];
let message = 'Your to-do items are:\n';
todoList.forEach((item, index) => {
message += `${index + 1}. ${item}\n`;
});
bot.sendMessage(chatId, message);
});
[](https://camo.githubusercontent.com/cd5a05ad8e40c5bf3838f46b138a840cf45a7abf77fb77e6ed3fcb124837cc9d/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363835393535313133322d39656231373832342d353465312d343139662d383037352d6131663265383966313863352e706e6723617665726167654875653d25323366636663666326636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3138322669643d756336646430666431266f726967696e4865696768743d333634266f726967696e57696474683d31303136266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d3338373632267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7562633838396331662d376665392d346261632d383431622d3963373433623262626432267469746c653d2677696474683d353038)
成功。
接下来我们上点难度，我们希望这样删除任务：
- 用户输入 `/delete`关键字
- 用户端显示出所有的任务，并可以点击，用户选择一个任务删除
// 监听 /delete 命令，返回所有的任务
bot.onText(/\/delete/, (msg) => {
console.log('??delete');
const chatId = msg.chat.id;
const todoList = todos[chatId];
bot.sendMessage(chatId, 'Click an item to delete:', {
reply_markup: {
inline_keyboard: todoList.map((item, index) => [
{
text: `${index + 1}. ${item}`,
callback_data: JSON.stringify({ command: 'delete', index })
},
]),
},
});
});
// 监听用户点击
bot.on('callback_query', (callbackQuery) => {
const message = callbackQuery.message;
const data = JSON.parse(callbackQuery.data);
const chatId = message.chat.id;
if (data.command === 'delete') {
const deleted = todos[chatId].splice(data.index, 1);
bot.answerCallbackQuery(callbackQuery.id, { text: 'Deleted "' + deleted[0] + '" from your to-do list.' });
}
});
上面的代码很简单，做了两件事情：
- 当用户输入 `/delete`后，返回所有的任务，注意 inline_keyboard，就是控制在返回消息中添加按钮的。
- 监听用户点击任务，监听到之后删除该任务。
[](https://camo.githubusercontent.com/f91f6645d151cdf7e807d8df8e904a71ffbd49e8b1ed191aade3b147eb496022/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363836303432343935322d39636466613137662d393139642d343434352d616532302d3964653532653334616237372e706e6723617665726167654875653d25323366366635663526636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3230372669643d753435353733333761266f726967696e4865696768743d343134266f726967696e57696474683d31303030266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d3337373637267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7564663865353039632d363565662d343830332d616339622d6435646362323734383132267469746c653d2677696474683d353030)
通过上述几个步骤，我们实现了一个简单的 TodoList Demo。
然后我们稍微优化一下，`/list`和 `/delete`命令做成直接点击选择的，不需要每次都手动输入。
找到 BotFather 机器人，输入 `/setcommands` 命令，然后按要求输入我们约定的命令。
[](https://camo.githubusercontent.com/98d2ec4283a9cfe1dda83e67b2f7fc23a4fe144988b393c71aaf5d59838ac0a6/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363836303537383032362d38613066373664362d353230642d343439352d616638652d6263373132333465646635342e706e6723617665726167654875653d25323366616639663926636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3437382669643d756136363861323437266f726967696e4865696768743d393536266f726967696e57696474683d31303030266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d313437303338267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7533643462666566342d373934312d346438392d623061372d3930663230646465633334267469746c653d2677696474683d353030)
这样用户就可以通过我们机器人左下角的菜单按钮，直接快捷选择命令了。
[](https://camo.githubusercontent.com/68b75e6e4f9afed4f0adaac1dc5ad05da7e801f68dbde9298b6161c885e80740/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363836303634323836352d34306137626665342d663330372d343738352d386536382d3439653534636236633831652e706e6723617665726167654875653d25323366376637663726636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3131342669643d753833333735663735266f726967696e4865696768743d323238266f726967696e57696474683d393332266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d3138373630267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7530313432346135622d333962652d343130642d393761312d6562353632396639396561267469746c653d2677696474683d343636)
[](https://camo.githubusercontent.com/29bf7f91ae4a7aafefcde55b4d56f6884ffadb22f00bec9684c098ac7996b40a/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363836303635303239322d37643338636531652d333432322d346666622d396239312d3464643833646134636162662e706e6723617665726167654875653d25323366396639663926636c69656e7449643d7531353365613530302d356130642d342666726f6d3d7061737465266865696768743d3230352669643d756331336661356330266f726967696e4865696768743d343130266f726967696e57696474683d393330266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d3531373038267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7539376363636338622d386661382d346163362d386330612d6333643763386432376535267469746c653d2677696474683d343635)
Mini apps
上面的 Bot 还是以文本的形式操作 TodoList，当然没有可视化界面操作着舒服。这一小节我们实现一个集成在 Telegram 中的可视化页面，来管理
TodoList。
APP 注册
注册 APP 说白了，就是给我们的 Bot 机器人，绑定一个网站域名，这个网站就是一个 mini app 了。
老规矩，找到 BotFather，输入 `/newapp`，告诉它我们要新建一个 app，然后选择需要绑定的 Bot，然后根据提示一步一步输入即可。
[](https://camo.githubusercontent.com/1c9108c2b0a8fd91802afa3ca39849b365445d9e90c141adb7631981686ad1fd/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363836313332393531372d37343730303563332d373236372d346164312d623432352d3531363462323161343266312e706e6723617665726167654875653d25323366616639663926636c69656e7449643d7530643637666361312d376436612d342666726f6d3d7061737465266865696768743d313037362669643d753165643863626232266f726967696e4865696768743d32313532266f726967696e57696474683d31313932266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d333836303335267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7539643965363431392d333561302d343130662d623231362d6638653963373838343431267469746c653d2677696474683d353936)
这里需要注意的是，Test 环境域名可以绑定 127.0.0.1，开发起来非常方便。
最终 BotFather 会给我们一个 `t.me/bot_name/name`格式的域名，通过这个域名就可以打开我们的 app 了。
[](https://camo.githubusercontent.com/60f40e169761d4aa382130bd6f0328c1622bab7354c25928e17c8023dc26d3f4/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363836313439383439302d64383832663566352d633133612d343064652d386237662d3435383461323236326137332e706e6723617665726167654875653d25323366386638663826636c69656e7449643d7530643637666361312d376436612d342666726f6d3d7061737465266865696768743d3239372669643d753665656333613438266f726967696e4865696768743d353934266f726967696e57696474683d31313530266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d313432333838267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7534316430623237662d653363372d343630622d623064662d6363633230353534323932267469746c653d2677696474683d353735)
APP 实现
App 就是一个普通的网页，比如我们写一个最简单的 HTML 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
Hello Todo List
</body>
</html>
上面的 HTML 文件，我们启动一个服务，通过 [http://127.0.0.1:8000](http://127.0.0.1:8000/)
可以访问到即可。
然后我们在 Telegram 中打开刚才注册 app 给的网址：t.me/todo_list_demo_bot/manager，即可成功访问我们的 app
了，效果如下图。
[](https://camo.githubusercontent.com/154ee8e849199e92fc11987db2f364eb9e44b40c3248227ca5b11df66b0fe8e4/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363836313636373330312d64333162336234382d616565652d346237342d383961622d6239653366363963343035322e706e6723617665726167654875653d25323361346134613326636c69656e7449643d7530643637666361312d376436612d342666726f6d3d7061737465266865696768743d3432332669643d753634353137313264266f726967696e4865696768743d31383734266f726967696e57696474683d31313630266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d313636393736267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7562393330613438322d643439382d346464382d623739332d3865616635383034323963267469746c653d2677696474683d323632)
如果只是一个单纯的网页，肯定不能满足我们的需求。
我们需要拿到 Telegram 的各种状态，比如当前用户信息，用户位置，主题配置等等各种。
同时我们需要能和 Telegram 进行各种交互。
很简单，在我们的 HTML 中集成 `telegram-web-app.js`即可，然后我们就可以通过
`window.Telegram.WebApp`变量和 Telegram 进行交互了。
<script src="https://telegram.org/js/telegram-web-app.js"></script>
具体的 API 可以参考[官方文档](https://core.telegram.org/bots/webapps#initializing-mini-
apps)。
具体 TodoList 代码这里就不做实现了。
更多能力
通过上述文档，我们跑通了 Bot 和 APP 的开发流程，使用了一些最基础的功能。
当然 Telegram Bot 和 APP 还有其它更多更强大的功能，可以参见官方文档。这里我简单罗列一些功能。
- 支持给不同的用户组设置不通的命令
- 支持控制多种按钮位置
[](https://camo.githubusercontent.com/23d54825cb382b231c811831828665b49b1b35f97b5a8d0803746c53c6d8ed26/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363930323431313134392d36363962656362622d666563322d343938342d386432382d3136383566623764636130342e706e6723617665726167654875653d25323366396661663626636c69656e7449643d7537346337323464362d616430652d342666726f6d3d7061737465266865696768743d3230312669643d753465366632373464266f726967696e4865696768743d393534266f726967696e57696474683d393734266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d343339363831267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7566363233343238612d323662662d343161662d613434302d656234656661333663356426)
[](https://camo.githubusercontent.com/813850703f9e18c4658dcec3394e948d932600b19a5fe23e2ed2cfa03f6a10df/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363930323433313136362d38656263613634302d343865372d346632312d396432302d6636303062376138613162322e706e6723617665726167654875653d25323366306632656426636c69656e7449643d7537346337323464362d616430652d342666726f6d3d7061737465266865696768743d3139362669643d756366386636303531266f726967696e4865696768743d363036266f726967696e57696474683d353938266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d313933363634267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7536333061346365392d366431322d346633342d386263652d3830353936383330333835267469746c653d2677696474683d313933)
- 支持在群聊中给机器人发送命令，同时支持如图的内联响应。
[](https://camo.githubusercontent.com/2fb64857b450224f55674b6f7f6d84ee889d8b79214f0c91b809de43066c6c11/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363930323133303431342d32636535383161652d663663372d346633382d386339372d6633316164356533663536642e706e6723617665726167654875653d25323361656164393726636c69656e7449643d7537346337323464362d616430652d342666726f6d3d7061737465266865696768743d3330382669643d753733323861653937266f726967696e4865696768743d383732266f726967696e57696474683d31303830266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d363231393534267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7533623138306331332d343938642d346132662d613035612d3533643164393165383564267469746c653d2677696474683d333832)
- 支持附件菜单，不过只对特定应用开放权限。
[](https://camo.githubusercontent.com/63f13c9bb2ab9b5854d012ec232aaa09a96769d649c57397cd5803e1e8755084/68747470733a2f2f63646e2e6e6c61726b2e636f6d2f79757175652f302f323032332f706e672f3138393335302f313639363930323136383130362d66636563303363662d393564302d343234652d393462622d3734623965616561373537642e706e6723617665726167654875653d25323364356538633826636c69656e7449643d7537346337323464362d616430652d342666726f6d3d7061737465266865696768743d3330322669643d753762393765333434266f726967696e4865696768743d383038266f726967696e57696474683d373930266f726967696e616c547970653d62696e61727926726174696f3d3226726f746174696f6e3d302673686f775469746c653d66616c73652673697a653d333035393432267374617475733d646f6e65267374796c653d6e6f6e65267461736b49643d7533613432643039622d623736612d346264312d396465392d6365366230303135623837267469746c653d2677696474683d323935)
- 作者:Maynor
- 链接:https://maynor1024.live/article/2dd1f390-6aa9-81c9-aaf7-e72c5f5c3eb6
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
