Orbit
Концепт о специфике Mini Apps: полноценное приложение внутри чужого окна, на чужой теме и с подвижным вьюпортом.
Концепт — собственный проект студии
- Тип проекта
- Собственный концепт
- Вопрос
- Что меняется, когда платформа владеет темой и вьюпортом
- Измерялось бы
- Завершение сценария, время до первой брони, отвал по шагам
- Статус
- Концепт — внутренний прототип
Задача
Mini App берёт цвета у клиента пользователя, теряет высоту при открытой клавиатуре и получает нативную кнопку «назад», которую навигация обязана уважать. Большинство Mini Apps делают как обычные мобильные страницы — и потом они «что-то не то», хотя причину сложно назвать.
В этом концепте ограничения платформы — и есть бриф.
Решение
Дизайн-система читает параметры темы Telegram и выводит из них свои роли — приложение выглядит как часть светлой, тёмной или пользовательской темы, а не навязывает свою. Контраст пересчитывается, а не предполагается.
Смена высоты вьюпорта обрабатывается как полноценное событие. Главное действие привязано к нативной кнопке, которая по определению выше клавиатуры, — самый важный контрол невозможно закрыть.
Навигация — единый стек, синхронизированный с нативным «назад». Путь обратно один — тот, которому платформа уже научила.
Адаптация к теме
Роли выводятся из темы платформы на лету.
Дизайн под подвижный вьюпорт
Стандартное допущение мобильного веба — что вьюпорт стабилен, пока заполняется форма, — здесь не работает. Панели свёрстаны так, что открытая клавиатура сжимает область прокрутки, а не выталкивает кнопку отправки за пределы экрана. Приложение слушает события вьюпорта, а не меряет высоту один раз при загрузке.
Бюджет анимаций намеренно мал: переходы короткие и только в навигации. На среднем телефоне внутри чужого приложения каждая лишняя анимация оплачивается тем действием, которое пользователь хотел на самом деле.
Интеграция с платформой
- 01Токены на параметрах темы с проверкой контраста на лету
- 02Серверная проверка init data до любой доверенной операции
- 03Нативная кнопка привязана к главному действию каждого экрана
- 04Единый стек навигации, синхронизированный с «назад»
- 05Вибрация только для подтверждения смены состояния
- 06Непрерывный переход между ботом и Mini App
Сценарий бронирования
Четыре шага, каждый обратим без потери данных.
Технологии
- Telegram Mini Apps SDK
- React
- TypeScript
- Edge functions
- Postgres
Следующий проект
KernАйдентика