От кнопки до продакшена: как мы делаем Telegram Mini Apps

[Timures]

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

Ngrok/tuna это явный костыль и разработчикам телеграмма плевать на тех кто, пытается создавать tma приложения. Сколько лет прошло, они до сих пор не могут добавить тестовый режим для разработки tma.

Сейчас разработка ведётся в react/vue и воспользоваться инструментами отладки у меня так и не получилось в edge который открывается для инспекции tma.

Tma явно не для сложных веб страниц, приложения медленно работают именно в tma, лучше сделать pwa или нативное мобильное приложение добавив авторизацию из телеграмма.

ИМХО

[MaksimMukharev]

А чем вас не устраивает использование Telegram Beta? В нем консоль ограничена, но вполне сносно работает.

[ikonik]

Кажется, что в main окружении нужно запускать production приложения, для тестирования и отладки можно воспользоваться тестовым окружением Telegram , в нем можно открывать приложения напрямую с IP-адреса вашего устройства.

С какими из инструментов отладки у вас были проблемы в edge?
На нашем опыте консоль, просмотр дерева элементов и просмотр сетевых запросов работали исправно.

[rSedoy]

• Проверить auth_date: если метка времени слишком старая (например, более нескольких минут), данные могут быть недействительными.

А не сталкивались с такой проблемой, что прилетает auth_date сильно старая (больше суток)? Общее для всех таких, user agent содержит "CPU iPhone OS 16_далее_все_подверсии"

[dmvasiliev]

Мы не сталкивались с данной проблемой, либо не обращали на нее внимание, но судя по issue на GitHub, проблема со стороны MacOS и iOS клиентов

[edyatl]

Когда запускается приложение, то клиент сохраняет Init Data в объекте браузера — Telegram.WebApp.initData (если TMA запущено через keyboard button или inline mode, то объект будет пустой)

Вопрос, как вы решаете чехарду с кнопками. Для TMA кнопка настраивается через BotFather, отправлять свою кнопку, то в списке чатов не будет кнопки start. По inline кнопке и обычной Init data не прилетает, а если перед запуском TMA в боте идёт какая-то предварительная настройка профиля, типа выберите язык, выберите пол и т.п. то логично в конце дать кнопку "запустить" и получается, что по одной кнопке можно авторизовать, а по другой нет. Есть еще и вариант ссылки для запуска TMA. А хочется чтобы авторизация работала по любой кнопке или ссылке.

[dmvasiliev]

Мы в основном используем Web App кнопку, настроенную в BotFather.

Также используем иногда Inline Button для запуска небольших форм (color picker, форма опроса, и т. д.). В таком случае Init Data тоже передаётся.

Ещё можно запускать TMA из меню вложения. В таком случае, мы получим объект пользователя receiver - данные о собеседнике текущего пользователя в чате, где бот был запущен через меню вложения (пример приложение Wallet). Тут также передаётся Init Data.

[newday]

А что можете сказать про ограничения, которые действуют в тма? Например, насколько я знаю, нет доступа к буферу обмена, возможно нельзя подключить микрофон и так далее

[ikonik]

К буферу обмена доступ есть на всех платформах:

const onCopyLinkClick = (inviteLink: string) => {
    navigator.clipboard.writeText(inviteLink)
}

По поводу функциональности микрофона не можем ничего сказать – не сталкивались с такими задачами.