Разработка мобильного приложения криптобиржи под ключ

Разработка мобильного приложения криптобиржи под ключ

Мы столкнулись с проектом, где клиент потерял 10% пользователей из-за лагов при обновлении цен в реальном времени на старых устройствах. Причина — неправильная архитектура WebSocket и рендеринг FlatList. Переписали на FlashList с дедупликацией подписок — задержка обновлений снизилась до 200 мс, uptime вырос до 99.9%. По данным CoinGecko, 78% трейдеров используют мобильные приложения для торговли. Мобильное приложение биржи — это не адаптированная веб-версия, а отдельный продукт с другим UX, требованиями к безопасности и техническими ограничениями. Пользователь с телефона торгует иначе: быстрые жесты, биометрия вместо пароля, меньше экрана. Наши инженеры имеют 5+ лет опыта в блокчейне и запустили 30+ проектов, поэтому знают типичные грабли. Разработка на React Native обходится на 37% дешевле нативных решений и сокращает время выхода на рынок в 2 раза. Экономия на эксплуатации достигает 40% за счёт OTA-обновлений.

Какие технические проблемы мы решаем

• Real-time обновления order book: 1000+ обновлений в секунду на слабых устройствах. Используем diff-патчи и прореживание (throttling) для уменьшения нагрузки на UI. Типичная ошибка — обновлять весь список при каждом сообщении, что приводит к артефактам и высокому потреблению CPU. Мы применяем useMemo и FlashList с константной высотой строк.
• Безопасность мобильного окружения: Токены в AsyncStorage — частая уязвимость. Используем SecureStore (iOS Keychain/Android Keystore) с биометрической защитой. Certificate pinning через react-native-ssl-pinning блокирует MITM-атаки. Jailbreak detection через jail-monkey предупреждает пользователя, но не блокирует полностью — чтобы не затронуть легитимные приложения.
• Push-уведомления с deep linking: После FCM/APNs пользователь должен попасть на экран ордера или вывода. Реализуем через React Navigation deep linking: exchange://trade/BTC-USDT открывает торговый экран напрямую. Очередь Redis + Bull гарантирует доставку без потерь.

Почему React Native оптимальный выбор для мобильной биржи?

React Native — основной выбор, если у вас уже есть веб-фронтенд на React. Переиспользуем бизнес-логику, одну кодовую базу на iOS и Android. Expo подходит для быстрого прототипирования; для продакшена мигрируем на bare workflow — так можно добавить кастомные нативные модули (secure enclave, биометрия). Flutter — альтернатива при отсутствии существующего JS кода: Dart обеспечивает высокую производительность, но библиотек для крипто меньше. Native (Swift/Kotlin) даёт максимум производительности, но две кодовые базы и большие расходы на поддержку — оправдано только для HFT-уровня.

В большинстве случаев React Native + Expo для старта, затем bare workflow — оптимальный баланс скорости разработки и производительности. Например, заказчик с веб-биржей на React смог запустить MVP за 10 недель вместо 16, сэкономив 37% бюджета за счёт переиспользования кода.

Архитектура приложения

State management

Стейт биржи сложный: реалтайм тикеры, order book, история сделок, балансы, активные ордера. Всё обновляется через WebSocket. Используем Zustand для локального стейта и React Query для серверного кэширования.

import { create } from 'zustand'; import { subscribeWithSelector } from 'zustand/middleware'; interface MarketStore { tickers: Record<string, Ticker>; orderBook: OrderBook | null; lastPrice: Record<string, string>; updateTicker: (pair: string, ticker: Ticker) => void; updateOrderBook: (book: OrderBook) => void; } const useMarketStore = create<MarketStore>()( subscribeWithSelector((set) => ({ tickers: {}, orderBook: null, lastPrice: {}, updateTicker: (pair, ticker) => set((state) => ({ tickers: { ...state.tickers, [pair]: ticker } })), updateOrderBook: (book) => set({ orderBook: book }), })) ); 

WebSocket менеджер с автоматическим переподключением и дедупликацией подписок:

class WSManager { private ws: WebSocket | null = null; private subscriptions = new Set<string>(); private reconnectTimer: NodeJS.Timeout | null = null; connect(url: string) { this.ws = new WebSocket(url); this.ws.onopen = () => { this.subscriptions.forEach(sub => this.ws!.send(sub)); }; this.ws.onclose = () => { this.reconnectTimer = setTimeout(() => this.connect(url), 3000); }; this.ws.onmessage = (e) => this.handleMessage(JSON.parse(e.data)); } } 

Навигация

React Navigation v6 — Auth Stack (Login, Register, 2FA) и Main Tabs (Home, Trade, Wallets, Orders, Profile). Deep linking для push-уведомлений.

Торговый экран

Самый сложный экран: TradingView chart через react-native-webview, order book через FlashList, форма ордера с калькулятором. Производительность — критична: используем useMemo и Reanimated для анимаций.

Как обеспечить безопасность приложения

Биометрическая аутентификация — обязательна. Используем expo-local-authentication и expo-secure-store для хранения JWT в iOS Keychain / Android Keystore.

import * as LocalAuthentication from 'expo-local-authentication'; import * as SecureStore from 'expo-secure-store'; async function authenticateWithBiometrics(): Promise<boolean> { const hasHardware = await LocalAuthentication.hasHardwareAsync(); const isEnrolled = await LocalAuthentication.isEnrolledAsync(); if (!hasHardware || !isEnrolled) return fallbackToPIN(); const result = await LocalAuthentication.authenticateAsync({ promptMessage: 'Подтвердите личность для выхода', disableDeviceFallback: false, cancelLabel: 'Отмена', }); return result.success; } async function saveToken(token: string) { await SecureStore.setItemAsync('auth_token', token, { keychainAccessible: SecureStore.WHEN_UNLOCKED_THIS_DEVICE_ONLY, }); } 

Certificate pinning через react-native-ssl-pinning (пиннить промежуточный CA, не leaf). Jailbreak detection через jail-monkey (предупреждение).

Как оптимизировать производительность

• Hermes engine для быстрого старта и малого потребления памяти.
• expo-image для реимейджинга изображений.
• react-native-reanimated для анимаций на UI thread.
• Bundle splitting через Expo Router lazy loading.
• Сборка через EAS Build, OTA Updates для быстрых исправлений.
• CI/CD: GitHub Actions → EAS Build → TestFlight/Internal Testing → Production.

Типичная экономия: при переходе с нативных стеков на React Native стоимость разработки снижается на 30–40%, а время внедрения обновлений — на 60% за счёт OTA.

Процесс работы

1. Анализ требований и аудит существующей инфраструктуры (2–5 дней).
2. Прототипирование UX/UI с учётом мобильных жестов и биометрии (1–2 недели).
3. Разработка архитектуры WebSocket, state management, навигации (2–4 недели).
4. Интеграция API биржи и смарт-контрактов (2–3 недели).
5. Тестирование на 200+ сценариях и реальных устройствах (2–3 недели).
6. Деплой в App Store и Google Play + OTA-обновления (1–2 недели).
7. Пост-продакшн поддержка 3 месяца (исправление багов, мониторинг).

Закажите предварительную оценку на нашем сайте — это займёт 2 дня.

Сроки и бюджет

Бюджет проекта рассчитывается индивидуально в зависимости от сложности интеграций и требуемого набора фич. Обратитесь к нам — мы подготовим детальную оценку за 2 дня.

Что входит в результат

Свяжитесь с нами

Получите консультацию по вашему проекту. Мы проанализируем требования и предложим оптимальное решение. Закажите оценку через форму на сайте — это займёт 2 дня.