Интеграция TradingView Lightweight Charts в мобильное приложение биржи

Мы интегрировали TradingView Lightweight Charts в мобильное приложение биржи через WebView. Эта JavaScript-библиотека для финансовых графиков весит около 45 КБ в gzip и уже используется в продакшн Coinbase, OKX, Gate.io. На мобильных устройствах запуск внутри WebView даёт все возможности библиотеки без нативной реализации candlestick с нуля. Наш опыт показывает, что такой подход сокращает время разработки в среднем на 30% по сравнению с полной нативной реализацией графиков. Наша команда имеет 5+ лет опыта в мобильной разработке и более 50 реализованных проектов в финансовом секторе. Библиотека поддерживает свечные графики, гистограммы объёмов, линии тренда и индикаторы, а также адаптируется под тёмную тему биржевого приложения.

Архитектура WebView-моста

Интеграция строится на двустороннем мосту: нативное приложение отправляет данные в WebView через JavaScript, WebView сигнализирует обратно о событиях (tap на свечу, crosshair movement).

На Flutter используем webview_flutter (официальный от Google):

// Инициализация WebViewController
late final WebViewController _webViewController;

@override
void initState() {
  super.initState();
  _webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..addJavaScriptChannel(
      'FlutterBridge',
      onMessageReceived: (message) {
        final data = jsonDecode(message.message);
        if (data['type'] == 'crosshair') {
          _onCrosshairUpdate(data['candle']);
        }
      },
    )
    ..loadFlutterAsset('assets/chart/index.html');
}

// Отправка данных в WebView
Future<void> setChartData(List<Candle> candles) async {
  final json = jsonEncode(candles.map((c) => {
    'time': c.timestamp ~/ 1000, // Lightweight Charts ожидает секунды
    'open': c.open,
    'high': c.high,
    'low': c.low,
    'close': c.close,
  }).toList());
  await _webViewController.runJavaScript('window.setData($json)');
}

Как обеспечить производительный WebView на мобильных?

Основная проблема — задержка первого рендера WebView, которая может достигать 500 мс. Для биржевого приложения это критично. Мы решаем это прогреванием WebView заранее: инициализируем его при открытии экрана тикера, а не при переходе на экран графика. Также используем offscreen WebView для предзагрузки библиотеки.

Другой важный аспект — управление памятью. WebView потребляет около 100–150 МБ ОЗУ в зависимости от размера графика. Для старых устройств это может быть проблемой. Поэтому мы ограничиваем количество свечей на экране до 500 и используем агрессивное сжатие данных.

Почему выбор WebView вместо нативного рендеринга?

Хотя нативные решения (например, SciChart или MPAndroidChart) обеспечивают плавную анимацию и меньший расход памяти, WebView с Lightweight Charts выигрывает по скорости разработки и гибкости.

Выбор WebView оправдан, если важна скорость вывода на рынок и гибкость интерфейса.

Real-time обновления

WebSocket тик → Flutter → вызов updateLastCandle в WebView:

void onTickReceived(Tick tick) {
  _updateLocalCandle(tick);
  final candleJson = jsonEncode({
    'time': _lastCandle.timestamp ~/ 1000,
    'open': _lastCandle.open,
    'high': _lastCandle.high,
    'low': _lastCandle.low,
    'close': _lastCandle.close,
  });
  _webViewController.runJavaScript('window.updateLastCandle($candleJson)');
}

candleSeries.update() в Lightweight Charts обновляет только последнюю свечу без перерисовки всего графика. Это оптимизировано — библиотека делает это правильно. Для частоты тиков выше 10/с мы применяем батчинг: отправляем накопленное обновление каждые 100 мс, чтобы не перегружать мост.

Подводные камни интеграции

Viewport meta. Без maximum-scale=1.0 iOS Safari включает пользовательский zoom на двойной тап — интерфейс расползается. На Android — WebSettings.setSupportZoom(false).

Белый flash при загрузке. WebView рендерит белый фон до загрузки HTML. Решение — backgroundColor у WebView совпадает с фоном графика (#131722), и показываем CircularProgressIndicator поверх WebView до получения onPageFinished.

Задержка первого рендера. Упомянуто выше.

Keyboard и Focus. WebView перехватывает focus — нативная клавиатура и жесты могут конфликтовать. Явно отключаем text input в WebView: webViewController.setOnPlatformPermissionRequest и не включаем JavaScript form elements.

JavaScript Bridge на iOS. На iOS WKWebView (под капотом WebView) асинхронно доставляет сообщения из JS. При быстром потоке тиков (>10/сек) — очередь сообщений может создавать lag. Решение: батчинг обновлений на Flutter стороне, отправка не каждого тика, а накопленного обновления каждые 100ms.

Технические индикаторы

Lightweight Charts поддерживает добавление произвольных line series поверх основного графика. MA(20) — вычисляем на Flutter, передаём массивом в addLineSeries().setData():

List<Map> calculateMA(List<Candle> candles, int period) {
  final result = <Map>[];
  for (var i = period - 1; i < candles.length; i++) {
    final avg = candles.sublist(i - period + 1, i + 1)
        .map((c) => c.close)
        .reduce((a, b) => a + b) / period;
    result.add({'time': candles[i].timestamp ~/ 1000, 'value': avg});
  }
  return result;
}

Что входит в работу

• Настройка WebView с правильными параметрами для iOS и Android
• HTML/JS шаблон с Lightweight Charts, настройка темы и серий
• Двусторонний мост Flutter ↔ WebView
• Real-time обновления через WebSocket
• Crosshair с отображением OHLCV в нативной панели Flutter
• Переключение таймфреймов
• Volume bars
• Базовые индикаторы (MA, EMA — по согласованию)

Сроки

Базовая интеграция с WebSocket и crosshair: 5–8 дней. Полноценный экран с переключением таймфреймов, индикаторами, адаптацией под iOS/Android: 2–3 недели. Стоимость рассчитывается индивидуально.

Закажите интеграцию TradingView Lightweight Charts в ваше приложение — свяжитесь с нами для деталей. Получите консультацию по архитектуре вашего мобильного графика.

Lightweight Charts Documentation Lightweight Charts GitHub

Аналитика мобильных приложений: Firebase, Amplitude, AppsFlyer и атрибуция

Наша команда регулярно сталкивается с проектами, где аналитика уже «настроена», но реальных инсайтов нет. Типичный пример — стартап с 50k DAU: трекинг десятков событий без единого ответа на вопрос «почему пользователи не доходят до оплаты». За две недели мы построили базовую воронку и выяснили, что 70% аудитории отваливается на экране верификации номера телефона. После локализации бага retention вырос на 12%. Вывод: аналитика должна начинаться с конкретных вопросов, а не с трекинга всего подряд.

Почему таксономия событий — основа аналитики мобильных приложений?

Firebase Analytics, Amplitude, Mixpanel — технически похожи. Разница в том, что вы в них кладёте. Типичная ошибка: события screen_view, button_tap_1, button_tap_2 без контекста. Через месяц никто не помнит, что такое button_tap_2.

Правильная таксономия: объект + действие + контекст. product_viewed, checkout_started, payment_completed с параметрами product_id, category, price, source. Это позволяет строить воронки, когортный анализ и retention без дополнительного трекинга.

Мы фиксируем naming convention в tracking plan — документе (Google Sheet или Amplitude Data Catalog), где описано каждое событие, его параметры и условия срабатывания. Tracking plan синхронизируется с командой аналитиков до начала разработки, а не после. Такой подход гарантирует, что через месяц данные останутся интерпретируемыми, а не превратятся в свалку. Опыт внедрения на 50+ проектах подтверждает: при отсутствии tracking plan стоимость поддержки аналитики вырастает в 2-3 раза за счёт переделок.

Что выбрать для аналитики мобильных приложений: Firebase, Amplitude или Mixpanel?

Таблица ниже показывает ключевые различия трёх популярных платформ. Выбор зависит от бюджета, трафика и задач.

Firebase Analytics — бесплатно, глубокая интеграция с Google Ads, BigQuery-экспорт для сырых данных. Ограничения: задержка данных до 24 часов, ограниченные воронки. Для стартапов с Google Ads трафиком — первый выбор.

Amplitude — продуктовая аналитика с акцентом на когорты и пути пользователя. Journeys (бывший Pathfinder) показывает реальные пути между событиями — не предполагаемые воронки, а фактические маршруты. Session Replay — запись сессий для UX-анализа. Бесплатный тир до 10 млн events/месяц достаточен для большинства продуктов на старте.

Mixpanel — ближе к Amplitude, сильнее в сегментации в реальном времени. Insights, Funnels, Retention — базовые инструменты, которые закрывают 90% аналитических задач продакта.

Более формальные определения этих платформ можно найти в Wikipedia и Wikipedia.

Как решить проблему мультиканальной атрибуции с AppsFlyer?

Знать откуда пришёл пользователь — отдельная задача. Firebase Attribution работает только внутри Google-экосистемы. Для мультиканальной атрибуции (Facebook Ads, TikTok, Apple Search Ads, programmatic) нужен MMP — Mobile Measurement Partner.

AppsFlyer — лидер рынка. OneLink — universal deep link, который работает на iOS и Android и корректно атрибутирует установку из любого канала. Protect360 — встроенная защита от fraud (фейковые установки, click injection на Android). Adjust и Branch — конкуренты с похожим функционалом. Branch силён в deep linking; Adjust популярен в gaming.

Согласно Apple, с iOS 14.5 приложения должны получать разрешение пользователя через ATT перед сбором IDFA для отслеживания. AppsFlyer использует probabilistic matching (IP + user agent + timing) для этих пользователей — точность ниже, но лучше чем ничего. SKAdNetwork и Privacy Preserving Attribution дают агрегированные данные от Apple с задержкой 24-72 часа.

Как настроить crash-аналитику, чтобы не пропускать баги?

Firebase Crashlytics — стандарт для crash reporting. Автоматически группирует крэши по стектрейсу, показывает affected users %, velocity alerts при росте crash rate более чем на 10% за час.

Важно: символикация. На iOS .dSYM файлы должны автоматически загружаться при каждой сборке — через Fastlane upload_symbols_to_crashlytics или Xcode Cloud built-in. Без символов крэш в Crashlytics выглядит как набор адресов памяти. Это происходит чаще чем кажется при переходе на новый CI — в одном проекте с аудиторией 500k пользователей мы обнаружили, что 40% крэшей оставались несимволизированными из-за пропущенного этапа в CI/CD. После автоматизации время реакции на баги сократилось с 3 часов до 15 минут.

Для React Native и Flutter — @sentry/react-native и sentry_flutter дают дополнительный контекст: breadcrumbs, сетевые запросы перед крэшем, состояние Redux/Provider.

Ниже — сравнение популярных инструментов crash-аналитики для выбора под свои задачи.

Настройка окружения

Три окружения с отдельными Firebase проектами: dev, staging, production. Смешивать аналитику из тестовых сессий и production — распространённая ошибка, которая искажает все метрики. На iOS через GoogleService-Info.plist для каждой схемы, на Android через google-services.json в папке каждого flavor.

Сроки: базовая аналитика с Firebase + Crashlytics — 3-5 дней. Полноценный tracking plan + Amplitude/Mixpanel с воронками и когортами — 2-3 недели. Атрибуция через AppsFlyer с deep linking и fraud protection — 1-2 недели. Стоимость рассчитывается индивидуально в зависимости от сложности интеграций.

Что входит в нашу работу

В рамках внедрения аналитики мы предоставляем:

• Разработку и согласование tracking plan с командами продукта и маркетинга.
• Интеграцию SDK (Firebase, Amplitude, Mixpanel, AppsFlyer) с учётом вашего стека (Swift/Kotlin/Flutter/React Native).
• Настройку воронок, когорт, дашбордов и алертов.
• Автоматизацию символикации и загрузки .dSYM через Fastlane.
• Документацию по событиям и параметрам.
• Обучение команды работе с аналитической платформой.
• Две недели пост-релизной поддержки и корректировки трекинга.

Наш опыт — 7 лет внедрения аналитики и более 80 успешных проектов в сфере мобильной разработки. Мы гарантируем корректность данных и прозрачность каждого этапа.

Свяжитесь с нами, чтобы получить консультацию по настройке аналитики вашего приложения. Закажите аудит текущей аналитики — и мы покажем, какие метрики вы теряете.