תרשים באפליקציית מסחר ניידת: TradingView Lightweight דרך WebView

שילבנו את TradingView Lightweight Charts באפליקציית מסחר ניידת באמצעות WebView. ספריית JavaScript זו לתרשימים פיננסיים שוקלת כ-45 KB בדחיסת gzip וכבר נמצאת בשימוש בפרודקשן על ידי Coinbase, OKX, Gate.io. במכשירים ניידים, הרצה בתוך WebView מספקת את כל היכולות של הספרייה ללא צורך ביישום תרשים נרות מקורי מאפס. הניסיון שלנו מראה שגישה זו מקצרת את זמן הפיתוח ב-30% בהשוואה ליישום תרשים מקורי מלא. יש לנו ניסיון של 5+ שנים בפיתוח נייד ולמעלה מ-50 פרויקטים שהושלמו במגזר הפיננסי. הספרייה תומכת בתרשימי נרות, היסטוגרמות נפח, קווי מגמה ואינדיקטורים, ומתאימה את עצמה לערכת הנושא הכהה של אפליקציית המסחר.

ארכיטקטורת גשר WebView

האינטגרציה בנויה על גשר דו-כיווני: האפליקציה המקורית שולחת נתונים ל-WebView דרך JavaScript, וה-WebView מאותת בחזרה על אירועים (לדוגמה, הקשה על נר, תנועת קרוסהייר).

ב-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 ms. עבור אפליקציית מסחר, זה קריטי. אנו פותרים זאת על ידי חימום מוקדם של ה-WebView: אנו מאתחלים אותו כשמסך הטיקר נפתח, לא כשמנווטים למסך התרשים. אנו גם משתמשים ב-WebView מחוץ למסך כדי לטעון מראש את הספרייה.

היבט חשוב נוסף הוא ניהול זיכרון. WebView צורך כ-100-150 MB של RAM בהתאם לגודל התרשים. עבור מכשירים ישנים יותר, זו יכולה להיות בעיה. לכן, אנו מגבילים את מספר הנרות על המסך ל-500 ומשתמשים בדחיסת נתונים אגרסיבית.

למה לבחור ב-WebView על פני רינדור מקורי?

למרות שפתרונות מקוריים (לדוגמה, // Инициализация 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)'); } או SciChart) מספקים אנימציה חלקה וצריכת זיכרון נמוכה יותר, WebView עם Lightweight Charts מנצח במהירות הפיתוח ובגמישות.

בחירה ב-WebView מוצדקת אם זמן היציאה לשוק וגמישות הממשק הם בראש סדר העדיפויות. הלקוחות שלנו חוסכים בדרך כלל $10,000–$15,000 בעלויות פיתוח בהשוואה לרינדור מקורי.

עדכונים בזמן אמת

WebSocket tick → Flutter → קריאה ל-MPAndroidChart ב-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)');
}

updateLastCandle ב-Lightweight Charts מעדכן רק את הנר האחרון ללא ציור מחדש של כל התרשים. זה מותאם — הספרייה עושה זאת נכון. עבור תדרי tick מעל 10/שנייה, אנו מיישמים אצווה: שליחת עדכונים מצטברים כל 100 ms כדי למנוע עומס על הגשר.

מלכודות אינטגרציה

Viewport meta. ללא 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)'); } , iOS Safari מאפשר זום משתמש בלחיצה כפולה — הממשק נשבר. ב-Android — candleSeries.update().

הבזק לבן בטעינה. WebView מציג רקע לבן עד שה-HTML נטען. פתרון — הגדרת maximum-scale=1.0 של WebView כך שתתאים לרקע התרשים (WebSettings.setSupportZoom(false)) והצגת backgroundColor מעל ה-WebView עד ש-#131722 מופעל.

עיכוב רינדור ראשוני. חימום מוקדם כפי שהוזכר.

מקלדת ופוקוס. WebView מיירט פוקוס — מקלדת מקורית ומחוות יכולות להתנגש. השבת במפורש קלט טקסט ב-WebView: CircularProgressIndicator ואל תכלול אלמנטים של טפסי JavaScript.

גשר JavaScript ב-iOS. ב-iOS, onPageFinished (מתחת למכסה המנוע של WebView) מעביר הודעות מ-JS באופן אסינכרוני. עם זרם מהיר של ticks (>10/שנייה), תור ההודעות יכול ליצור פיגור. פתרון: אצווה עדכונים בצד Flutter, שליחת עדכונים מצטברים כל 100 ms במקום כל tick.

אינדיקטורים טכניים

Lightweight Charts תומך בהוספת סדרות קווים שרירותיות על גבי התרשים הראשי. לדוגמה, ממוצע נע של 20 תקופות (MA(20)) המחושב ב-Flutter:

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
• עדכונים בזמן אמת דרך WebSocket
• קרוסהייר עם תצוגת OHLCV בפאנל Flutter מקורי
• החלפת מסגרות זמן
• פסי נפח
• אינדיקטורים בסיסיים (MA, EMA — בתיאום)

לוחות זמנים ועלויות

אינטגרציה בסיסית עם WebSocket וקרוסהייר: 5-8 ימים, החל מ-$4,500. מסך מלא עם החלפת מסגרות זמן, אינדיקטורים, התאמה ל-iOS/Android: 2-3 שבועות, בדרך כלל $8,000–$12,000. אנו מציעים אחריות ל-30 יום על כל האינטגרציות. צרו קשר לייעוץ והצעת מחיר מפורטת המותאמת לאפליקציה שלכם.

תיעוד Lightweight Charts Lightweight Charts GitHub