Skip to content

Commit

Permalink
web app -> mini app
Browse files Browse the repository at this point in the history
  • Loading branch information
SwiftAdviser committed Sep 28, 2023
1 parent ccf19aa commit d81ba2f
Show file tree
Hide file tree
Showing 10 changed files with 37 additions and 37 deletions.
2 changes: 1 addition & 1 deletion docs/develop/companies/outsource.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Discover 3rd party development teams for your TON project
### Astralyx

#### Summary
Company with big experience in TON and other chains development. You can ask us to create design, Telegram Web Application (TWA), website, anything.
Company with big experience in TON and other chains development. You can ask us to create design, Telegram Mini Application (TMA), website, anything.

#### Workstreams
- TON smart-contracts development (including audits & tests)
Expand Down
2 changes: 1 addition & 1 deletion docs/develop/dapps/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Before diving into DApps, make sure you understand the underlying blockchain pri

Comparing to the pure [Smart Contracts](/develop/smart-contracts/) development, DApps development is more complex. You need to understand [how to work with APIs](/develop/dapps/apis/), how to use authenticate user using [TON Connect](/develop/dapps/ton-connect/overview) and how to use [SDKs](/develop/dapps/apis/sdk) to work with the blockchain.

<Button href="/develop/dapps/telegram-apps/" colorType={'primary'} sizeType={'sm'}>Build a Web App</Button>
<Button href="/develop/dapps/telegram-apps/" colorType={'primary'} sizeType={'sm'}>Build a Mini App</Button>
<Button href="/develop/dapps/apis/sdk"
colorType="secondary" sizeType={'sm'}>
Choose an SDK
Expand Down
2 changes: 1 addition & 1 deletion docs/develop/dapps/telegram-apps/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Here are some key points about Telegram Mini Apps:
- **Integration within Telegram**: Telegram Mini Apps are intended to seamlessly integrate into the Telegram app, providing users with a cohesive experience. They can be accessed from within a Telegram chat or group conversation.
- **Enhanced Functionality**: Telegram Mini Apps can offer a wide range of functionalities. They can be used for various purposes, such as gaming, content sharing, productivity tools, and more. These apps extend the capabilities of the Telegram platform beyond basic messaging.
- **Cross-Platform Compatibility**: Since Telegram Mini Apps are web-based, they are available on Android, iOS, PC, Mac and Linux Telegram apps. Users can access them without the need for additional installations in one click.
- **Bot Interaction**: Telegram Mini Apps often make use of Telegram bots to provide interactive and automated experiences. Bots can respond to user input, perform tasks, and facilitate interactions within the web app.
- **Bot Interaction**: Telegram Mini Apps often make use of Telegram bots to provide interactive and automated experiences. Bots can respond to user input, perform tasks, and facilitate interactions within the Mini App.
- **Development Frameworks**: Developers can build Telegram Mini Apps using web development technologies like HTML, CSS, and JavaScript. Additionally, Telegram provides developer tools and APIs for creating these apps and integrating them with the Telegram platform.
- **Monetization Opportunities**: Telegram Mini Apps can be monetized in various ways, such as through in-app purchases, subscription models, or advertising, making them attractive to developers and businesses.
- **Web3 Ready**: TON SDK; TON Connect is a communication protocol between wallets and apps in TON; Tokens
Expand Down
14 changes: 7 additions & 7 deletions docs/develop/dapps/telegram-apps/app-examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Button from '@site/src/components/button'

# TMA Examples

Check out the examples below to see how to create your own Telegram Web App.
Check out the examples below to see how to create your own Telegram Mini App.

## Basic TMA Example

Expand All @@ -13,7 +13,7 @@ Check out the examples below to see how to create your own Telegram Web App.
</p>


This is a basic and straightforward Telegram Web App(TWA) implemented using plain JavaScript, HTML, and CSS. This project aims to provide a minimalistic example of how to create a simple TMA and launch it within Telegram without relying on complex build tools or bleeding-edge libraries.
This is a basic and straightforward Telegram Mini App(TMA) implemented using plain JavaScript, HTML, and CSS. This project aims to provide a minimalistic example of how to create a simple TMA and launch it within Telegram without relying on complex build tools or bleeding-edge libraries.

- App is available via direct link: [t.me/simple_telegram_web_app_bot/app](https://t.me/simple_telegram_web_app_bot/app)
- Or you can launch app with a bot menu button: [t.me/simple_telegram_web_app_bot](https://t.me/simple_telegram_web_app_bot)
Expand Down Expand Up @@ -62,7 +62,7 @@ Open index.html in your preferred code editor or IDE.

### Introduction

Vite (which means "fast" in French) is a front-end build tool and development server that aims to provide a faster and leaner development experience for modern web projects. We will utilise Vite to create Telegram Web App example.
Vite (which means "fast" in French) is a front-end build tool and development server that aims to provide a faster and leaner development experience for modern web projects. We will utilise Vite to create Telegram Mini App example.

You can find example project here [https://github.com/twa-dev/vite-boilerplate](https://github.com/twa-dev/vite-boilerplate) or you can go through following instructions.

Expand Down Expand Up @@ -98,7 +98,7 @@ yarn create vite my-react-telegram-web-app --template react-ts
cd my-react-telegram-web-app
```

### Development of Web App
### Development of Mini App

Now we need to start development mode of the project, run following commands in terminal:

Expand Down Expand Up @@ -240,7 +240,7 @@ WebApp.ready();
ReactDOM.createRoot...
```

`WebApp.ready()` - is a method that informs the Telegram app that the Web App is ready to be displayed. It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Web App is shown.
`WebApp.ready()` - is a method that informs the Telegram app that the Mini App is ready to be displayed. It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Mini App is shown.

Then we will add some interaction with user. Go to `src/App.tsx` and we will add the button with alert.

Expand Down Expand Up @@ -284,11 +284,11 @@ function App() {
export default App
```

And now we need to create Telegram Bot so we can launch Telegram Web App within messenger application.
And now we need to create Telegram Bot so we can launch Telegram Mini App within messenger application.

### Setting Up a Bot for the App

To connect your Web App to the Telegram, you need to create a bot and set up a web app for it. Follow these steps to set up a new Telegram bot:
To connect your Mini App to the Telegram, you need to create a bot and set up a Mini App for it. Follow these steps to set up a new Telegram bot:

<Button href="/develop/dapps/telegram-apps/step-by-step-guide#setting-up-a-bot-for-the-app" colorType={'primary'} sizeType={'sm'}>Setup a Bot</Button>

Expand Down
26 changes: 13 additions & 13 deletions docs/develop/dapps/telegram-apps/publishing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Button from '@site/src/components/button'

# Publishing Mini Apps

As developers, it's important to understand the ecosystem in which we operate. Telegram provides a unique opportunity for Web App developers, thanks to its robust platform and expansive user base. This article will guide you through the available channels for publishing your Mini Apps on Telegram.
As developers, it's important to understand the ecosystem in which we operate. Telegram provides a unique opportunity for Mini App developers, thanks to its robust platform and expansive user base. This article will guide you through the available channels for publishing your Mini Apps on Telegram.

## tApps Center

Expand Down Expand Up @@ -33,9 +33,9 @@ Telegram currently supports six different ways of launching Mini Apps: from a [k

Users can interact with bots using [custom keyboards](https://core.telegram.org/bots#keyboards), [buttons under bot messages](https://core.telegram.org/bots#inline-keyboards-and-on-the-fly-updating), as well as by sending freeform **text messages** or any of the **attachment types** supported by Telegram: photos and videos, files, locations, contacts and polls. For even more flexibility, bots can utilize the full power of **HTML5** to create user-friendly input interfaces.

You can send a **web_app** type [KeyboardButton](https://core.telegram.org/bots/api#keyboardbutton) that opens a Web App from the specified URL.
You can send a **web_app** type [KeyboardButton](https://core.telegram.org/bots/api#keyboardbutton) that opens a Mini App from the specified URL.

To transmit data from the user back to the bot, the Web App can call the [Telegram.WebApp.sendData](https://core.telegram.org/bots/webapps#initializing-web-apps) method. Data will be transmitted to the bot as a String in a service message. The bot can continue communicating with the user after receiving it.
To transmit data from the user back to the bot, the Mini App can call the [Telegram.WebApp.sendData](https://core.telegram.org/bots/webapps#initializing-web-apps) method. Data will be transmitted to the bot as a String in a service message. The bot can continue communicating with the user after receiving it.

**Good for:**

Expand All @@ -46,11 +46,11 @@ To transmit data from the user back to the bot, the Web App can call the [Telegr

**TL;DR:** For more interactive Mini Apps like [@DurgerKingBot](https://t.me/durgerkingbot), use a **web_app** type [Inline KeyboardButton](https://core.telegram.org/bots/api#inlinekeyboardbutton), which gets basic user information and can be used to send a message on behalf of the user to the chat with the bot.

If receiving text data alone is insufficient or you need a more advanced and personalized interface, you can open a Web App using a **web_app** type [Inline KeyboardButton](https://core.telegram.org/bots/api#inlinekeyboardbutton).
If receiving text data alone is insufficient or you need a more advanced and personalized interface, you can open a Mini App using a **web_app** type [Inline KeyboardButton](https://core.telegram.org/bots/api#inlinekeyboardbutton).

From the button, a Web App will open with the URL specified in the button. In addition to the user's [theme settings](https://core.telegram.org/bots/webapps#color-schemes), it will receive basic user information (ID, name, username, language_code) and a unique identifier for the session, **query_id**, which allows messages on behalf of the user to be sent back to the bot.
From the button, a Mini App will open with the URL specified in the button. In addition to the user's [theme settings](https://core.telegram.org/bots/webapps#color-schemes), it will receive basic user information (ID, name, username, language_code) and a unique identifier for the session, **query_id**, which allows messages on behalf of the user to be sent back to the bot.

The bot can call the Bot API method [answerWebAppQuery](https://core.telegram.org/bots/api#answerwebappquery) to send an inline message from the user back to the bot and close the Web App. After receiving the message, the bot can continue communicating with the user.
The bot can call the Bot API method [answerWebAppQuery](https://core.telegram.org/bots/api#answerwebappquery) to send an inline message from the user back to the bot and close the Mini App. After receiving the message, the bot can continue communicating with the user.

**Good for:**

Expand All @@ -59,24 +59,24 @@ The bot can call the Bot API method [answerWebAppQuery](https://core.telegram.or

### Launching Mini Apps from the Menu Button

**TL;DR:** Mini Apps can be launched from a customized menu button. This simply offers a quicker way to access the app and is otherwise **identical** to [launching a Web App from an inline button](https://core.telegram.org/bots/webapps#inline-button-web-apps).
**TL;DR:** Mini Apps can be launched from a customized menu button. This simply offers a quicker way to access the app and is otherwise **identical** to [launching a Mini App from an inline button](https://core.telegram.org/bots/webapps#inline-button-web-apps).

By default, chats with bots always show a convenient **menu button** that provides quick access to all listed [commands](https://core.telegram.org/bots#commands). With [Bot API 6.0](https://core.telegram.org/bots/api-changelog#april-16-2022), this button can be used to **launch a Web App** instead.
By default, chats with bots always show a convenient **menu button** that provides quick access to all listed [commands](https://core.telegram.org/bots#commands). With [Bot API 6.0](https://core.telegram.org/bots/api-changelog#april-16-2022), this button can be used to **launch a Mini App** instead.

To configure the menu button, you must specify the text it should show and the Web App URL. There are two ways to set these parameters:
To configure the menu button, you must specify the text it should show and the Mini App URL. There are two ways to set these parameters:

- To customize the button for **all users**, use [@BotFather](https://t.me/botfather) (the /setmenubutton command or *Bot Settings > Menu Button*).
- To customize the button for both **all users** and **specific users**, use the [setChatMenuButton](https://core.telegram.org/bots/api#setchatmenubutton) method in the Bot API. For example, change the button text according to the user's language, or show links to different Web Apps based on a user's settings in your bot.

Apart from this, Web Apps opened via the menu button work in the exact same way as when [using inline buttons](https://core.telegram.org/bots/webapps#inline-button-web-apps).

[@DurgerKingBot](https://t.me/durgerkingbot) allows launching its Web App both from an inline button and from the menu button.
[@DurgerKingBot](https://t.me/durgerkingbot) allows launching its Mini App both from an inline button and from the menu button.

### Inline Mode Mini Apps

**TL;DR:** Mini Apps launched via **web_app** type [InlineQueryResultsButton](https://core.telegram.org/bots/api#inlinequeryresultsbutton) can be used anywhere in inline mode. Users can create content in a web interface and then seamlessly send it to the current chat via inline mode.

NEW You can use the *button* parameter in the [answerInlineQuery](https://core.telegram.org/bots/api#answerinlinequery) method to display a special 'Switch to Web App' button either above or in place of the inline results. This button will **open a Web App** from the specified URL. Once done, you can call the [Telegram.WebApp.switchInlineQuery](https://core.telegram.org/bots/webapps#initializing-web-apps) method to send the user back to inline mode.
NEW You can use the *button* parameter in the [answerInlineQuery](https://core.telegram.org/bots/api#answerinlinequery) method to display a special 'Switch to Mini App' button either above or in place of the inline results. This button will **open a Mini App** from the specified URL. Once done, you can call the [Telegram.WebApp.switchInlineQuery](https://core.telegram.org/bots/webapps#initializing-web-apps) method to send the user back to inline mode.

Inline Mini Apps have **no access** to the chat – they can't read messages or send new ones on behalf of the user. To send messages, the user must be redirected to **inline mode** and actively pick a result.

Expand All @@ -86,9 +86,9 @@ Inline Mini Apps have **no access** to the chat – they can't read messages or

### Direct Link Mini Apps

**TL;DR:** Web App Bots can be launched from a direct link in any chat. They support a *startapp* parameter and are aware of the current chat context.
**TL;DR:** Mini App Bots can be launched from a direct link in any chat. They support a *startapp* parameter and are aware of the current chat context.

NEW You can use direct links to **open a Web App** directly in the current chat. If a non-empty *startapp* parameter is included in the link, it will be passed to the Web App in the *start_param* field and in the GET parameter *tgWebAppStartParam*.
NEW You can use direct links to **open a Mini App** directly in the current chat. If a non-empty *startapp* parameter is included in the link, it will be passed to the Mini App in the *start_param* field and in the GET parameter *tgWebAppStartParam*.

In this mode, Mini Apps can use the *chat_type* and *chat_instance* parameters to keep track of the current chat context. This introduces support for **concurrent** and **shared** usage by multiple chat members – to create live whiteboards, group orders, multiplayer games and similar apps.

Expand Down
14 changes: 7 additions & 7 deletions docs/develop/dapps/telegram-apps/step-by-step-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ Telegram Mini Apps are web applications that run inside the Telegram messenger.

## Create your App

1. To connect your Web App to the Telegram, place the SDK script `telegram-web-app.js` using this code:
1. To connect your Mini App to the Telegram, place the SDK script `telegram-web-app.js` using this code:

```html
<script src="https://telegram.org/js/telegram-web-app.js"></script>
```


2. Once the script is connected, a **[window.Telegram.WebApp](https://core.telegram.org/bots/webapps#initializing-web-apps)** object become available. You can read more about creating Web App utilising [`telegram-web-app.js`](https://docs.ton.org/develop/dapps/telegram-apps/app-examples#basic-twa-example) here.
2. Once the script is connected, a **[window.Telegram.WebApp](https://core.telegram.org/bots/webapps#initializing-web-apps)** object become available. You can read more about creating Mini App utilising [`telegram-web-app.js`](https://docs.ton.org/develop/dapps/telegram-apps/app-examples#basic-twa-example) here.

3. The modern way to connect SDK is npm package for Telegram Mini Apps SDK:

Expand All @@ -21,11 +21,11 @@ npm i @twa-dev/sdk

You can find guide for [`@twa-dev/sdk`](https://docs.ton.org/develop/dapps/telegram-apps/app-examples#modern-twa-example ) here.

5. When your Web App is ready and deployed to the web server, follow to the next step.
5. When your Mini App is ready and deployed to the web server, follow to the next step.

## Setting Up a Bot for the App

To connect your Web App to the Telegram, you need to create a bot and set up a web app for it. Follow these steps to set up a new Telegram bot:
To connect your Mini App to the Telegram, you need to create a bot and set up a Mini App for it. Follow these steps to set up a new Telegram bot:

### 1. Start a Chat with BotFather

Expand All @@ -39,15 +39,15 @@ To connect your Web App to the Telegram, you need to create a bot and set up a w
- BotFather will ask you to choose a name for your bot. This is a display name and can contain spaces.
- Next, you'll be asked to choose a username for your bot. This must end in `bot` (e.g., `sample_bot`) and be unique.

### 3. Set Up Bot Web App
### 3. Set Up Bot Mini App

- Send `/mybots` command to BotFather.
- Choose your bot from the list and the **Bot settings** option
- Choose **Menu button** option
- Choose **Edit menu button URL** option and send URL to your Telegram Web App, for example link from GitHub Pages deploy.
- Choose **Edit menu button URL** option and send URL to your Telegram Mini App, for example link from GitHub Pages deploy.

### 4. Accessing the Bot

- You can now search for your bot using its username in Telegram's search bar.
- Press the button next to attach picker to launch your Telegram Web App in messenger
- Press the button next to attach picker to launch your Telegram Mini App in messenger
- You’re awesome!
Loading

0 comments on commit d81ba2f

Please sign in to comment.