MINI APPS

мини-курс по созданию приложений

для Telegram

Наш мини-курс познакомит вас с основами разработки удобных и функциональных mini apps, которые раскроют новые возможности вашего мессенджера. Вы научитесь создавать, настраивать и внедрять приложения шаг за шагом, получая практические навыки и свежие идеи для цифровых проектов. Присоединяйтесь и откройте для себя будущее  Telegram mini apps уже сегодня!

Лекция 1 - Настройка бота и mini app

#Создание бота

  • Создайте бота в @BotFather с помощью команды /newbot
  • Введите имя бота. Например: Water Balance
  • Введите username для бота. Example: WaterBalanceBot.
  • Вы получите ссылку на вашего бота, например t.me/WaterBalanceBot, – используйте её для дальнейшего открытия бота. Также можно использовать handle бота @WaterBalanceBot для поиска через строку поиска.

Добавьте префикс к handle бота, если WaterBalance уже используется.

#Создание mini app

  • Создайте mini app в @BotFather с помощью команды /newapp
  • Выберите вашего бота (WaterBalanceBot), чтобы привязать к нему mini app
  • Введите заголовок приложения. Например: Water Balance
  • Введите краткое описание. Например: Keep your water balance
  • Загрузите обложку размером640×360 px. Вы можете скачать предоставленный шаблон. Обложку можно изменить позже.
  • Загрузите gif-версию обложки или выполните команду /empty, чтобы пропустить этот шаг
  • Введите https://google.com в качестве URL вашего Web App пока что.
  • Введите короткое имя приложения (slug). Например: app. Telegram app будет состоять из username бота и slug приложения, например: https://t.me/WaterBalanceBot/app
  • Вы можете кликнуть по ссылке, чтобы увидеть ваше приложение.

#Привязка кнопок mini app

  • Откройте вашего бота по ссылке или через handle. Вы не увидите кнопок для открытия mini app. Настроим их.
  • Настройте основную кнопку бота в @BotFather с помощью команды /mybotsp
  • Выберите вашего бота -> Bot Settings -> Menu Button -> Configure menu button
  • Введите https://google.com, , затем введите подпись кнопки. Например: Открыть приложение
  • Нажмите Back to Bot -> Bot Settings -> Configure Mini App -> Enable Mini App
  • Введите https://google.com
  • Теперь вы увидите кнопку “Открыть приложение” в боте возле поля ввода сообщения, а также в профиле бота.

Лекция 2 - Публикация приложения в веб

#Настройка инструментов и приложения

  • Установите VSCode or Cursor чтобы писать и редактировать код
  • Установите git. Это CLI-инструмент для управления версиями кода. Он также даёт доступ к GitHub
  • Создайте учётную запись на GitHub. GitHub хранит ваш исходный код и может публиковать ваше приложение в интернете
  • Создайте новый репозиторий, куда будет помещён ваш исходный код. Дайте ему имя, например water-balance.
  • Создайте папку water-balance на вашем комьютере. Поместите туда файл index.html
  • Добавьте HTML код в ваш файл:
<!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>

#Публикация вашего приложения

  • Откройте terminal / console и выполните команды:
# 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
  • Откройте ваш GitHub репозиторий. Зайдите в Settings -> Pages. Выберите Deploy from branch master, location root. Нажмите Сохранить
  • Вам будет предоставлен адрес вашего сайта, например, https://barinbritva.github.io/water-balance/. Откройте его

#Настройка бота и mini app

  • Откройте @BotFather и введите команду /mybots. Выберите вашего бота -> Bot settings -> Main button -> Edit menu button URL -> Введите URL с GitHub.
  • Вернитесь к боту -> Bot settings -> Configure Mini App -> Edit Mini App URL -> Введите URL с GitHub
  • Теперь кнопки бота будут открывать ваше собственное приложение вместо Google.