Симулятор крипто-трейдинга прямо в чат-приложении

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

Стек

  • Next.js 14
  • Tailwind CSS
  • FastAPI
  • PostgreSQL

как мы построили

Мы построили Mini App, симулирующий крипто-трейдинг прямо внутри Telegram. Пользователи получают виртуальный кошелёк со стартовым балансом, просматривают реальные торговые пары и выставляют ордера на покупку/продажу против живых ценовых данных, отображаемых на интерактивных свечных графиках. Графики используют библиотеку lightweight-charts — тот же движок, что стоит за TradingView, — это даёт визуальное доверие, важное, когда учишь людей читать свечи и видеть паттерны. Каждая сделка обновляет портфель в реальном времени: остатки, P&L, история транзакций. На исполнение ордера срабатывает нативная для Telegram тактильная отдача через @twa-dev/sdk, а push-уведомления сигнализируют, когда позиция существенно сдвигается. Всё это ощущается нативно для платформы, а не как браузерная страница, втиснутая в окно чата.

что было сложно

Первым реальным вызовом стал вьюпорт. Telegram Mini App работают только в мобильном WebView с жёстко ограниченным экранным пространством — никакого десктопного режима, никакой альбомной ориентации. Уместить осмысленный торговый график рядом с данными портфеля, управлением ордерами и тикером цен потребовало агрессивных решений по лейауту. Мы пришли к табовому интерфейсу, между которыми пользователь свайпает: вид графика и вид портфеля, плюс постоянная панель тикера сверху. Это компромисс — но он работает: 80% времени пользователи всё равно проводят на вкладке графика.

Ценовые данные в реальном времени стали второй задачей. WebSocket-соединения внутри WebView Telegram ненадёжны — они рвутся при переходах между фоном и передним планом, а некоторые Android-вендоры агрессивно их прибивают. Вместо борьбы мы перешли на polling с адаптивными интервалами обновления: чаще, когда пользователь активно смотрит график, реже на других вкладках. Бэкенд — FastAPI с async SQLAlchemy и asyncpg — спокойно держит нагрузку polling, потому что каждый запрос лёгкий. Это не настоящий реал-тайм, но при субсекундном обновлении на активных графиках пользователи разницы не замечают.

онбординг

Затем был обучающий флоу. Клиент настаивал на онбординге, который учит новых пользователей, что такое свеча, как читать ценовой график и как разместить первую сделку. Ловушка с туториалами в том, что каждый добавленный шаг увеличивает отвал — но каждый убранный оставляет пользователей в растерянности. Мы остановились на четырёхшаговом гайдед-флоу с анимациями Framer Motion: один экран про концепцию кошелька, один про чтение графиков, один про размещение симулированной сделки и поздравительный экран с первым результатом P&L. Завершаемость держится около 72%, что клиент считает сильным показателем для своей аудитории. Пользователи, прошедшие туториал, в три раза чаще возвращаются на следующий день.

результаты

Результат — продукт, превративший пассивных читателей канала в активных участников. Среднее время сессии внутри Mini App — более четырёх минут, что значимо для контекста Telegram, где большинство взаимодействий длится секунды. Конверсия сообщества в платный тариф заметно выросла после запуска, потому что пользователи, попрактиковавшиеся в симуляторе, понимали, для чего вообще нужны премиальные сигналы и курсы. Честный урок: строить под платформу Telegram Mini App — значит принять её ограничения заранее. Каждую фичу, которую мы проектировали desktop-first, пришлось выбрасывать и переделывать под рамку шириной 360 пикселей. Если бы начинали mobile-only с первого дня, сэкономили бы целый спринт переделок.