Telegram App Development Instructions

Telegram is a cross-platform instant messaging software that currently provides Bots and Mini Apps, making it very convenient to develop third-party application services. TON is a decentralized and open internet created by the community using technology designed by Telegram.

TG Bot Development

A Telegram Bot is a special account that can be set up without a phone number. Messages or actions sent by users to the Bot are forwarded to the Bot owner's server through Telegram's intermediary server, and the Bot owner's server processes the user's message inputs and action requests.

A Telegram Bot is not an independent application; it exists within the Telegram ecosystem. Therefore, the "client" of the Bot is the Bot dialog provided by Telegram and its related components.

In addition to the Bot client, we also need to develop the corresponding Bot server. Similarly, the server also relies on the infrastructure provided by Telegram, specifically the Telegram Bot API.

Simple Steps to Develop a Bot:

Search for BotFather in the Contacts within TG
Enter /newbot to create a new bot, then follow the prompts to enter the required information. Remember to save the returned Bot Token, as it will be needed during development.
Once the bot is successfully created, you can search for and chat with it using the bot account demo_bot.
Functionality Implementation:

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...");
});

reference:
Telegram Api

TG Mini App Development

Bind a website domain to our Bot. This website will be a mini app.

Simple Steps to Develop a Mini App:

Search for BotFather in the Contacts within TG.
Enter /newapp to create a new app, then follow the prompts to enter the required information.
Once the URL is bound, the mini app is successfully created. We can access the mini app via t.me/bot_name/webapp_name.
A Mini App is just a regular web page. The simplest Mini App code is as follows:

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>

reference:
Testing-mini-apps

Development Approach

If MiniApp developers wish to integrate and use BitgetWallet, due to the environment of MiniApp being within the TG App, they cannot directly use the provider within the JS Bridge to call the wallet API. In this case, they can choose the HTTP Bridge solution, such as Wallet Connect or Ton Connect, to connect the wallet in the following ways:

QR Code: This method mainly establishes a network connection between the DApp and the wallet through an intermediary server, thereby allowing the DApp to call the wallet API.
Deeplinks: This mainly refers to the technology of app redirection on mobile phones (for example, clicking a link on a mobile phone can directly jump to a specific page within an app). BitgetWallet has its own Deeplinks called Bitget Deeplinks, and TG also has its own Deeplinks (such as TG Deeplinks and TG MiniApps links).

Taking Ton Connect on the Ton chain as an example, the Http Bridge is as follows:

When the application initializes the connection, it directly sends it to the wallet via a QR code or a universal link.

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

The parameter v specifies the protocol version. Unsupported versions will not be accepted by the wallet.

The parameter id specifies the client ID of the application, encoded in hexadecimal (without the '0x' prefix).

The parameter r specifies the URL-safe JSON ConnectRequest.

The parameter ret (optional) specifies the return policy of the deep link after the user signs/declines the request.

'back' (default) means returning to the application that initiated the deep link jump (e.g., browser, local app, etc.), 'none' means no jump after user action; a URL: the wallet will open this URL after the user action is completed. Note that if your application is a web page, you should not pass your application's URL. This option applies to local applications to resolve possible OS-specific issues with the 'back' option. The ret parameter should support empty deep links -- it may be used to specify wallet behavior after confirming other operations (sending transactions, signing raw data, etc.).

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

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

The link can be embedded in a QR code or clicked directly.

The initial request is unencrypted because (1) no personal data has been transmitted yet, and (2) the application does not even know the identity of the wallet.

For details, see: Http Bridge

TG MiniApp Integration with Bitget Wallet

Scenario 1:

The DApp integrates with TonConnect within the TG MiniApp to connect to Bitget Wallet.

For integration, please refer to Ton Ton Connect.

Scenario 2:

A webapp seeks to be displayed on the BGW event page and, when clicked, opens and redirects to the TG MiniApp from the webview.

The integrator needs to provide the MiniApp redirection link (e.g., https://t.me/your_bot_name/your_app_path?startapp=xxx) to the relevant BitgetWallet personnel.
BGW personnel configure the event page link, where an agreed parameter (utm_source=BitgetWallet) is added to indicate the source. The complete path would be: https://t.me/your_bot_name/your_app_path?startapp=xxx&utm_source=BitgetWallet.
When the user clicks to redirect to the MiniApp, the MiniApp can recognize the special parameter information. Here, the MiniApp developers need to modify the wallet connection code logic: The original wallet connection logic (e.g., user clicks the Connect button to connect the wallet) should check if the condition utm_source=BitgetWallet is met and directly connect to BGW. The steps are as follows:

a. Mobile deeplink access: https://bkcode.vip/ton-connect.. redirects to bitkeep://.. and jumps to BGW.

b. PC QR code scanning/JS bridge connection method, open the link (QR code scanning and redirection) example:

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

// The parameters after encodeURIComponent are as follows:
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

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

// The parameters after encodeURIComponent are as follows:
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

Telegram App Development Instructions ​

TG Bot Development ​

Simple Steps to Develop a Bot: ​

TG Mini App Development ​

Simple Steps to Develop a Mini App: ​

Development Approach ​

TG MiniApp Integration with Bitget Wallet ​

Scenario 1: ​

Scenario 2: ​

Further Reading ​