Telegram Web/Mini Apps with Flutter

In this post, how to develop telegram web apps using Flutter, an easy-to-use flutter package and, of course, Telegram. We will see most of the apis provided by the example pacakge in telegram_web_app.

Steps

For this, we should go through following steps:

1. Fork telegram_web_app
2. Deploy example to firebase
3. Create bot in telegram and create mini app
4. Test all the apis and usage

Fork telegram_web_app

You can find the package link here. But, to run the example we need to fork it from the repo. Once forked move to the example folder in terminal by typing command:

Deploy example to firebase

Firstly, you will need to create firebase project in firebase console.

Add project and give it a name. Then after several steps, you should be able to create a project.

Then. Install npm and Firebase CLI tools from your terminal

$ npm install -g firebase-tools

After that type these command one-by-one from the example folder:

firebase login

firebase init

flutter build web

firebase deploy

You can find the full guide on how to deploy here.

Create bot in telegram and create mini app

To test the mini apps you should use the bot father in telegram to create bots. Create simple bot and then web app for that bot from the bot menu. There are several small steps. During bot creation, you will be asked to provide web url in which you should enter the hosted url. Now, your website is ready to be used from telegram as mini app 🎉🎉🎉🎉🎉🎉🎉

Test all the apis and usage

Before continuing, don’t forget to star the repo and upvote the package 🥹.

You can call all the telegram apis by TelegramWebApp.instance. You can find many examples in main_screen.dart file in the example.

InfoExpandableTile(
 ‘Init Data’,
 TelegramWebApp.instance.initData.toString(),
)

Here is the full content of the file 👉 main_screen gist

The example project is full of api examples which you can personally check.

In this article, we have learned how to make telegram mini apps using telegram_web_app package. Cheers to everyone 🎉🎉🎉