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

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

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

Як вибрати стек технологій для мобільної біржі?

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% бюджету (близько $20 000) за рахунок перевикористання коду. Порівняно з нативною розробкою, React Native дозволяє витратити в 1.6 рази менше часу на MVP.

Які технічні проблеми ми вирішуємо?

• 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 гарантує доставку без втрат.

Архітектура додатку

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. Наприклад, MVP на React Native коштує від $50 000, тоді як аналогічний нативний проект — від $80 000.

Процес роботи

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 дні.