Skip to content

Instantly share code, notes, and snippets.

@barinbritva

barinbritva/1-setting-up-bot-and-mini-app.md

Last active November 10, 2024 13:07
Show Gist options
  • Save barinbritva/776cf4ea7537c0aa072fff80398e10ee to your computer and use it in GitHub Desktop.
Save barinbritva/776cf4ea7537c0aa072fff80398e10ee to your computer and use it in GitHub Desktop.
Download ZIP
Mini course
Raw
1-setting-up-bot-and-mini-app.md

Lecture 1 - Setting up bot and mini app

Create a bot

  • Create a bot in @BotFather https://t.me/BotFather using /newbot command
  • Enter a bot name. Example: Water Balance
  • Enter a bot username. Example: WaterBalanceBot.
  • You get a link to your bot like t.me/WaterBalanceBot, use it to open bot later. You can also use bot handle @WaterBalanceBot to find it via search box

Add some prefix to a bot handle as far WaterBalance is already in use

Create a mini app

  • Create a mini app in @BotFather https://t.me/BotFather using /newapp command
  • Select your bot (WaterBalanceBot) to connect mini app with it
  • Enter app title. Example: Water Balance
  • Enter a short description. Example: Keep your water balance
  • Send a cover picture of 640x360 size. You can download a provided template. Cover can be changed later
  • Upload gif version of a cover or run /empty command to skip it
  • Enter https://google.com as your Web App URL just for now
  • Enter app short name (slug). Example: app. Telegram app will be composed from bot username and app slug, example: https://t.me/WaterBalanceBot/app
  • You can click the link to see you app

Link mini app buttons

  • Open your bot using it's link or handle. You see not buttons there to open mini app. Let's set it up
  • Setup your bot main button in @BotFather https://t.me/BotFather using /mybots
  • Select your bot -> Bot Settings -> Menu Button -> Configure menu button
  • Enter https://google.com, then enter button caption. Example: Open app
  • Click Back to Bot -> Bot Settings -> Configure Mini App -> Enable Mini App
  • Enter https://google.com
  • Now you can see Open app button in bot near message input box and in the bot profile as well

Attachments

Mini app cover

water balance

Raw
2-publish-your-app.md

Lecture 2 - Publishing an empty app to the web

Setup tools and app

  • Install VSCode or Cursor to write and edit code
  • Install git. It's a CLI tool to manage your code versions. It also enables access to GitHub
  • Create a GitHub account. GitHub stores your source code and also can publish your app to the Internet
  • Create a new repository where your source code will be placed. Give it a name, like water-balance.
  • Create water-balance folder on your PC. Put index.html file there
  • Place html code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Water Balance</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Publish your app

  • Open a terminal / console and exec the commands:
# init a repo
git init
# add you changes to version history
git add .
git commit -m 'Init.'
# link you local code to GitHub project
git remote add origin https://github.com/[YOUR GITHUB NAME]/water-balance.git
# publish the changes to GitHub
git remote add origin https://github.com/[YOUR GITHUB NAME]/water-balance.git

Configure bot and mini app

  • Open @BotFather https://t.me/BotFather enter /mybots command. Select your bot -> Bot settings -> Main button -> Edit menu button URL -> Put your URL from GitHub.
  • Back to Bot -> Bot settings -> Configure Mini App -> Edit Mini App URL -> Put your URL from GitHub
  • Now bot buttons open your own app instead of Google
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment