Skip to content

Telegram App 开发说明

Telegram 是跨平台的即时通讯软件,目前其提供了机器人 BotMini App,可以非常方便的开发第三方应用服务。 Ton是一个去中心化和开放的互联网,由社区使用Telegram设计的技术创建。

TG Bot 开发

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

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

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

Bot 简单开发步骤:

  1. 在 TG 内 Contacts 内搜索 BotFather
  2. 输入/newbot 新建机器人,然后根据提示输入即可。记得保存返回的机器人 Token,开发时候会用到。
  3. 机器人新建成功之后,我们可以通过机器人账号【demo_bot】搜索到并与其对话。
  4. 功能实现:
js
const TelegramBot = require("node-telegram-bot-api");
const token = "your token";
const bot = new TelegramBot(token, { polling: true, testEnvironment: true });

bot.onText(/\/add (.+)/, (msg, match) => {
  const chatId = msg.chat.id;
  const text = match[1];

  bot.sendMessage(chatId, "balabala...");
});
const TelegramBot = require("node-telegram-bot-api");
const token = "your token";
const bot = new TelegramBot(token, { polling: true, testEnvironment: true });

bot.onText(/\/add (.+)/, (msg, match) => {
  const chatId = msg.chat.id;
  const text = match[1];

  bot.sendMessage(chatId, "balabala...");
});

参考:
Telegram Api

TG Mini App 开发

给我们的 Bot 机器人绑定一个网站域名,这个网站就是一个 mini app。

Mini App 简单开发步骤:

  1. 在 TG 内 Contacts 内搜索 BotFather
  2. 输入/newapp 新建 app,然后根据提示输入即可。
  3. 绑定完 URL 之后 mini app 即新建成功,我们可以通过t.me/bot_name/webapp_name访问 mini app。
  4. Mini App 就是一个普通网页,一个最简单的 Mini App 代码如下:
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Title</title>
  </head>
  <body>
    Hello World
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Title</title>
  </head>
  <body>
    Hello World
  </body>
</html>

参考:
Testing-mini-apps

开发思路

如果 MiniApp 开发者希望接入并使用 BitgetWallet ,由于MiniApp所处的环境是TG App,无法直接使用 JS Bridge 内的 provider 来调用钱包API;此处可选择 HTTP Bridge 的解决方案,如:Wallet Connect 或者 Ton Connect 等组件,通过以下方式链接钱包:

  1. 扫码:该方式主要是通过一个中间服务器建立DApp和钱包的网络连接从而实现DApp对钱包Api调用。

  2. Deeplinks:主要指手机App的跳转技术(如:在手机上点击一个链接之后,可以直接跳转到app内的某个页面)。BitgetWallet 拥有自己的Deeplinks Bitget Deeplinks ,TG也有自己的Deeplinks(如:TG DeeplinksTG MiniApps links

TonTon Connect 为例 Http Bridge 如下:

当应用初始化连接时,它直接通过二维码或通用链接发送给钱包。

https://<wallet-universal-url>?
                               v=2&
                               id=<to_hex_str(A)>&
                               r=<urlsafe(json.stringify(ConnectRequest))>&
                               ret=back
https://<wallet-universal-url>?
                               v=2&
                               id=<to_hex_str(A)>&
                               r=<urlsafe(json.stringify(ConnectRequest))>&
                               ret=back

参数 v 指定协议版本。不受支持的版本不会被钱包接受。

参数 id 指定应用的客户端 ID,以十六进制编码(不带 '0x' 前缀)。

参数 r 指定 URL 安全的 json ConnectRequest。

参数 ret (可选)指定用户签名/拒绝请求后深链接的返回策略。

'back'(默认)意味着返回到初始化深链接跳转的应用(例如,浏览器,本地应用等), 'none' 意味着用户操作后不跳转; 一个 URL:完成用户操作后钱包将打开此 URL。请注意,如果您的应用是网页,您不应传递您的应用的 URL。此选项应用于本地应用,以解决可能的操作系统特定问题与 'back' 选项。 ret 参数应该支持空的深链接 -- 它可能用于指定完成其他操作确认后(发送交易,签名原始数据等)的钱包行为。

https://<wallet-universal-url>?ret=back
https://<wallet-universal-url>?ret=back

链接可以嵌入在二维码中或直接点击。

初始请求是未加密的,因为 (1) 尚未传递个人数据,(2) 应用甚至不知道钱包的身份。

详情见: Http Bridge

TG MiniApp 接入Bitget Wallet

场景一:

DApp在TG小程序内接入 TonConnect 即可链接 Bitget Wallet

接入请参考 Ton Connect

场景二:

webapp寻求在BGW活动页内展示,并且被点击从webview打开跳转至TG MiniApp。

  1. 需要接入方提供MiniApp跳转链接(如:https://t.me/your_bot_name/your_app_path?startapp=xxx )至 BitgetWallet 相关人员

  2. BGW相关人员配置活动页链接,此处需要添加约定参数(utm_source=BitgetWallet)标识来源,完整路径为: https://t.me/your_bot_name/your_app_path?startapp=xxx&utm_source=BitgetWallet

  3. 用户点击跳转至对MiniApp之后 MiniApp可识别特殊的参数信息,此处需Mini App方开发人员修改钱包链接代码逻辑: 原本链接钱包的逻辑(如:用户点击Connect按钮链接钱包),小程序判断 utm_source=BitgetWallet 条件成立则直接链接BGW 步骤如下:

a.手机端deeplink访问:https://bkcode.vip/ton-connect.. 重定向至 bitkeep://.. 跳转至BGW

b.PC端扫码/JS bridge方式连接,打开链接( 扫码与跳转 )示例:

//原始数据:
https://bkcode.vip/ton-connect?v=2&id=4d725f278e98c9dfb55bbf83fbd7b565be17176e9f9c6fc75cd0ec700e241021&r={"manifestUrl":"https://app.ston.fi/tonconnect-manifest.json","items":[{"name":"ton_addr"}]}&ret=none

//参数encodeURIComponent之后如下:
https://bkcode.vip/ton-connect?v=2&id=4d725f278e98c9dfb55bbf83fbd7b565be17176e9f9c6fc75cd0ec700e241021&r=%7B%22manifestUrl%22%3A%22https%3A%2F%2Fapp.ston.fi%2Ftonconnect-manifest.json%22%2C%22items%22%3A%5B%7B%22name%22%3A%22ton_addr%22%7D%5D%7D&ret=none
//原始数据:
https://bkcode.vip/ton-connect?v=2&id=4d725f278e98c9dfb55bbf83fbd7b565be17176e9f9c6fc75cd0ec700e241021&r={"manifestUrl":"https://app.ston.fi/tonconnect-manifest.json","items":[{"name":"ton_addr"}]}&ret=none

//参数encodeURIComponent之后如下:
https://bkcode.vip/ton-connect?v=2&id=4d725f278e98c9dfb55bbf83fbd7b565be17176e9f9c6fc75cd0ec700e241021&r=%7B%22manifestUrl%22%3A%22https%3A%2F%2Fapp.ston.fi%2Ftonconnect-manifest.json%22%2C%22items%22%3A%5B%7B%22name%22%3A%22ton_addr%22%7D%5D%7D&ret=none

扩展阅读

@tonconnect/ui

*Open specific wallet The methods described in this section are marked as experimental and are subject to change in future releases.

To open a modal window for a specific wallet, use the openSingleWalletModal() method. This method accepts the wallet app_name as a parameter (please refer to the wallets-list.json) and opens the corresponding wallet modal. It returns a promise that resolves after the modal window is successfully opened.

使用 openSingleWalletModal 指定连接BGW。

js
await tonConnectUI.openSingleWalletModal('bitgetTonWallet');
await tonConnectUI.openSingleWalletModal('bitgetTonWallet');

详见 https://www.npmjs.com/package/@tonconnect/ui