👋 Привет

Меня зовут Максим. Я веб-разработчик уже больше 10 лет, большой поклонник Телеграм и с интересом наблюдаю, что здесь происходит.

Люблю заниматься своими пет-проектами. С 2022 года разрабатываю 👛 Копилку (мини-апп по финансам), с 2024 — 🍅 Помидорку (таймер по «методу помидора»), а в конце 2024 запустил 💪 FITPAD (мини-приложение для ведения дневника тренировок)… В работе и в голове еще пачка нереализованных идей.

💡 О чем планирую писать? Пока, как минимум, о разработке и тонкостях работы с веб-приложениями для Телеграма на основе своего опыта и умений. О том, как их сделать удобнее и красивее для пользователя по моему мнению. Также новости, обзоры, мысли и интересную информацию, попавшую в мой кругозор.

👀 Кому это будет интересно? В первую очередь самим разработчикам и дизайнерам, а также просто интересующимся этой темой.

⬇️@MiniAppsForLife
🔘#личное

🪁 Запуск из любого чата

Допустим, у вас уже есть свой мини-апп, но чтобы им воспользоваться пользователю нужно сперва перейти в бота, нажать кнопку «Старт», а затем открыть веб-приложение, кликнув на кнопку меню. Для кого-то этот путь может быть слегка утомительным.

Телеграм позволяет отправлять специальную ссылку на мини-апп в любой чат, при клике на которую, приложение будет запущено напрямую поверх этого чата. На данный мемент в документации это явно не прописано, поэтому:

1️⃣ Переходим в @BotFather и вызываем команду /newapp
2️⃣ Выбираем нужного бота. Вводим заголовок, короткое описание, фото (640×360) или гифку (не обязательно)
3️⃣ Вводим URL-адрес приложения, например https://app.pmdrk.ru (или любую другую внутреннюю страницу)
4️⃣ Придумываем уникальное короткое имя, например start или app
5️⃣ Готово! Теперь у вас есть ссылка https://news.1rj.ru/str/PmdrkBot/start, которую можно скинуть в любой чат и мини-апп запустится сразу же, минуя переход в бота. Более того, такую ссылку можно разместить в интернете и при переходе по ней, веб-приложение откроется поверх списка чатов

В целом, таких адресов можно создать сколько угодно, должно отличаться только короткое имя. Все остальные детали есть в документации.

❓ Поделитесь опытом, для чего и в каких случаях вы используете такие короткие ссылки?

———

🔄 Обновлено 30.10.24

С выходом версии 7.8 к боту можно прикреплять основное мини-приложение через @BotFather командой /setminiapp. После чего в профиле бота появляется большая синяя кнопка «Открыть приложение», аналогом которой является ссылка на бота с параметром startapp.

Другими словами, если вы увидите в профиле любого бота такую кнопку, то можно смело брать ссылку вида https://news.1rj.ru/str/<BOT_NAME>?startapp и вставлять ее где угодно.

⬇️@MiniAppsForLife
🔘#инструкции

🛍 Мини-магазин приложений

На днях вышло большое обновление, где команда Телеграма, помимо прочего, представила свой мини-магазин приложений, который многие ждут уже давно.

Назвать это магазином, конечно же, не получается. По сути, пока это выглядит как список популярных тапалок. Я до последнего надеялся, что это сделают похожим на то, как «Кошелек» разместили в разделе настроек и что это будет Apps Center.

Так или иначе, «магазин» можно найти, зайдя в поиске во вкладку «Приложения», что, вроде бы, логично, но как-то не самый очевидный и частый кейс для обычного пользователя.

Итак, чтобы профиль бота с мини-аппом выглядел красиво, как на видео, нужно привязать к боту веб-приложение. Делается это в Bot Father командой /setminiapp или /mybots → выбрать бота → Bot Settings → Configure Mini App.

После этого в профиле бота появится большая кнопка «Открыть приложение», а также возможность загрузить туда демонстрационные скриншоты на разных языках.

Кстати, если зайти в бота, то теперь под его названием показывается количество пользователей. Я так понимаю это размер месячной аудитории.

Еще в новой версии АПИ появилась возможность через мини-апп публиковать истории. Жаль, что не истории от самого бота 😀

А еще появился внутренний браузер. Теперь любая ссылка открывается внутри него — еще один шаг Телеграма держать пользователя внутри себя. Отключить можно в Настройках → Данные и память → Браузер.

❓ Что думаете про обновление? Может быть заметили что-то еще неочевидное?

⬇️@MiniAppsForLife
🔘#новости #инструкции

📱 Добавление иконки на домашний экран телефона

На видео, к сожалению, пока лишь мечты, но к ним есть возможность приблизиться 🙌

В предыдущем посте рассказывалось, как запускать мини-приложение напрямую из любого чата. Можно пойти еще дальше и добавить иконку на домашний экран телефона.

📱 На Айфоне через приложение «Команды»:

1. Запускаем приложение и жмем на плюсик для создания новой команды
2. Жмем на кнопку «Добавить действие» и выбираем «Интернет»
3. Находим в списке команду для Сафари «Открыть URL»
4. Вставляем готовую ссылку https://news.1rj.ru/str/PmdrkBot/start в первое поле. Здесь же, в нижней панели, жмем на иконку «Поделиться» и выбираем пункт «На экран „Домой“»
5. Меняем название, загружаем иконку или выбираем значок, жмем «Добавить». Готово!

📱 На Андроиде через приложение Shortcut Maker:

1. Запускаем приложение и выбираем Websites
2. Вводим название и вставляем готовую ссылку https://news.1rj.ru/str/PmdrkBot/start. Жмем на кнопку Place on Home Screen
3. Настраиваем иконку и, при желании, другие фукции. Жмем Create Shortcut. Готово!

Минус в том, что изначально мы не знаем таких ссылок для других мини-аппов, если разработчики не поделились таковой. Поэтому, как минимум, можем запускать так свои приложения.

———

🔄 Обновлено 30.10.24

С выходом версии 7.8 к боту можно прикреплять основное мини-приложение через @BotFather командой /setminiapp. После чего в профиле бота появляется большая синяя кнопка «Открыть приложение», аналогом которой является ссылка на бота с параметром startapp.

Другими словами, если вы увидите в профиле любого бота такую кнопку, то можно смело брать ссылку вида https://news.1rj.ru/str/<BOT_NAME>?startapp и вставлять ее где угодно.

———

🔄 Обновлено 09.05.25

С выходом версии 8.0 на телефонах такая кнопка теперь доступна по умолчанию через меню мини-аппа, там где три точки 💬

⬇️@MiniAppsForLife
🔘#инструкции

Как многие и предполагали, количество пользователей в боте — это размер месячной аудитории по подсчетам самого Телеграма. Теперь это подтверждает подпись. Кстати, с ДР 🕯

⬇️@MiniAppsForLife
🔘#наблюдения

🌐 Локализация бота

Наверняка вы замечали, что когда открываете какой-то бот, то там есть описание на паре разных языков. Обычно я вижу, как описывают на английском и русском одно и то же.

Телеграм позволяет локализовать такие тексты и сразу же показать описание на родном пользователю языке или на том, который выбран на уровне системы.

На данный момент локализация поддерживает:
— Название
— Описание профиля
— Описание при открытии
— Команды
— Скриншоты
— Кнопку меню

Почти все можно настроить обычными запросами с вызовом соответствующего метода через АПИ по адресу https://api.telegram.org/bot<TOKEN>/<METHOD_NAME>.

Изначально стоит определиться с языком по умолчанию — он будет основным, а затем точечно добавить перевод под конкретный язык. Например, по умолчанию всегда будет английский, а для пользователей из России сделаем отдельный перевод. Чтобы задать язык, нужно передать двухбуквенный код страны.

👤 Название бота

Основной язык (метод setMyName):
— https://api.telegram.org/bot<TOKEN>/setMyName?name=<NAME_EN>

На русском:
— https://api.telegram.org/bot<TOKEN>/setMyName?name=<NAME_RU>&language_code=ru

Проверка (метод getMyName):
— https://api.telegram.org/bot<TOKEN>/getMyName
— https://api.telegram.org/bot<TOKEN>/getMyName?language_code=ru

🗓 Описание профиля бота

Основной язык (метод setMyShortDenoscription):
— https://api.telegram.org/bot<TOKEN>/setMyShortDenoscription?short_denoscription=<SHORT_DESCRIPTION_EN>

На русском:
— https://api.telegram.org/bot<TOKEN>/setMyShortDenoscription?short_denoscription=<SHORT_DESCRIPTION_RU>&language_code=ru

Проверка (метод getMyShortDenoscription):
— https://api.telegram.org/bot<TOKEN>/getMyShortDenoscription
— https://api.telegram.org/bot<TOKEN>/getMyShortDenoscription?language_code=ru

📝 Описание бота при открытии

Основной язык (метод setMyDenoscription):
— https://api.telegram.org/bot<TOKEN>/setMyDenoscription?denoscription=<DESCRIPTION_EN>

На русском:
— https://api.telegram.org/bot<TOKEN>/setMyDenoscription?denoscription=<DESCRIPTION_RU>&language_code=ru

Проверка (метод getMyDenoscription):
— https://api.telegram.org/bot<TOKEN>/getMyDenoscription
— https://api.telegram.org/bot<TOKEN>/getMyDenoscription?language_code=ru

📢 Команды в боте

Основной язык (метод setMyCommands):
— https://api.telegram.org/bot<TOKEN>/setMyCommands?commands=<COMMANDS_EN>

На русском:
— https://api.telegram.org/bot<TOKEN>/setMyCommands?commands=<COMMANDS_RU>&language_code=ru

Проверка (метод getMyCommands):
— https://api.telegram.org/bot<TOKEN>/getMyCommands
— https://api.telegram.org/bot<TOKEN>/getMyCommands?language_code=ru

🖼 Скриншоты в профиле бота

Тут попроще. Надо зайти в редактирование самого бота и в конце экрана загрузить скриншоты под каждый язык.

◀️ Кнопка меню мини-аппа

А тут чуть посложнее. Смысл в том, что когда пользователь стартует бота (вызывает команду /start), то в этот момент вместе с приветственным сообщением можно заодно изменить название кнопки, используя метод setChatMenuButton.

⬇️@MiniAppsForLife
🔘#инструкции

🛠 Режим отладки с помощью инспектора

Разработка веб-приложения — дело непростое. Очень часто нам нужно проинспектировать элементы и отловить какое-то несоответствие или баг.

🖥 Telegram Desktop

— Через боковое меню перейдите в Настройки → Продвинутые настройки → Экспериментальные настройки и включите опцию Enable webview inspecting
— Запустите мини-апп и через правую кнопку мышки будет доступен веб-инспектор

🖥 Telegram для macOS

— Прямо на главном экране нажмите быстро 5 раз на иконку настроек и включите опцию Debug Web App
— Запустите мини-апп и через правую кнопку мышки будет доступен веб-инспектор

📞 Telegram для Android

— Через боковое меню перейдите в Настройки, в самом низу нажмите и удерживайте на номере версии, затем выберите Enable WebView Debug
— Включите отладку по USB на устройстве. Подключитесь к компьютеру через кабель, запустите мини-апп и выберите веб-инспектор через вкладку «Девайсы».

📞 Telegram для iOS и iPadOS

— Прямо на главном экране нажмите быстро 10 раз на иконку настроек и включите опцию Allow Web View Inspector
— Включите функции для веб-разработчиков в Сафари, а затем и на самом устройстве. Подключитесь к Маку через кабель, запустите мини-апп и откройте веб-инспектор через вкладку «Разработка».

⬇️@MiniAppsForLife
🔘#инструкции

🆕 Новое в версии АПИ 7.10 для мини-аппов

— Появилась возможность добавить вторую кнопку рядом с главной, а так же расположить их в ряд или одну над другой
— На главную кнопку теперь можно добавить эффект мерцания для большего привлечения внимания
— Фон нижней панели так же теперь можно изменить

❓ Что думаете про обновление? Может быть заметили что-то еще неочевидное?

⬇️@MiniAppsForLife
🔘#новости

🗄 Кэширование скрипта инициализации

На фоне обновления АПИ попался на непонятный баг, когда скрипт для инициализации мини-аппа https://telegram.org/js/telegram-web-app.js при вызове новых методов выдавал ошибки, хотя Telegram.WebApp.platform отдавал новую версию — 7.10.

Выяснилось, что скрипт закэшировался в браузере, хотя такого раньше не случалось. В итоге сейчас при каждой сборке приложения добавляю версию к скрипту, типа https://telegram.org/js/telegram-web-app.js?v=1.2.3.

⬇️@MiniAppsForLife
🔘#инструкции

Зацените, как можно изменять окно просмотра в веб версии Телеграма (К). Причем размер меняется пропорционально. Минимум 328×376, максимум — ограничение браузера.

⬇️@MiniAppsForLife
🔘#наблюдения

Бот, в котором можно смотреть, как все работает в мини-аппе — https://news.1rj.ru/str/asmico_attach_bot

Кнопки и их расположение, цвета, открытие ссылок, виброотклики, облачное хранилище и другие методы. Пользуюсь частенько сам.

❓ Если вы знаете что-то похожее с примерами работы функционала веб-приложений, делитесь в комментариях)

⬇️@MiniAppsForLife
🔘#инструменты

Некоторое время назад я решил отказаться от библиотеки Telegraf по причине того, что она очень медленно развивается. Последнее обновление вышло больше полугода назад, аж 29 февраля. То есть максимум, что она поддерживает — это версию Телеграм АПИ 7.1, когда текущая уже 7.10.

Недолго поискав, я наткнулся на фреймворк Grammy и доволен!

Делюсь видео, которое помогло мне быстро въехать в контекст: 📺 ВК и 📺 Ютуб.

И, чтобы два раза не вставать, свежее видео с того же канала про авто-деплой бота с помощью Github Actions: 📺 ВК и 📺 Ютуб.

⬇️@MiniAppsForLife
🔘#инструменты

В Telegram Desktop, оказывается, тоже можно ресайзить окно мини-аппа, но, в отличие от веб-версии, хотя бы не пропорционально, спасибо 🙂

Осталось дождаться обновления версии для Mac.

⬇️@MiniAppsForLife
🔘#наблюдения