Ios のチャートでリアルタイムの株式市場ダッシュボードを実施

プロジェクト設定と依存関係

追加したら、[Info.plistを構成して、APIドメインのApp Transport Security例外でネットワークアクセス(HTTPが必要な場合)を許可するか、HTTPSエンドポイントを使用する。

データモデルの設計

プロバイダーが返したJSON構造をミラーリングする 構造を作成します。ほとんどの API は、]、]、 、 、 [、 []]のようなフィールドを持つオブジェクトの配列を返します。リアルタイムダッシュボードでは、最新の価格と履歴データの転がり窓(例えば、100)に焦点を当てます。

struct StockDataPoint: Codable {
 let timestamp: TimeInterval
 let price: Double
 let volume: Int
}

これらの点の配列を保持する [ コンテナを定義します。また、シンボルや最後のリフレッシュタイムのようなメタデータ。APIからヘビ case にマッチして、Swift で camelCase を使用します。

リアルタイム機能を備えたネットワークレイヤー

Alamofire を使用してデータを取得する クラスを作成します。 リアルタイムの更新には、2 つのアプローチがあります。

• [Polling] - 定期的にHTTP GETリクエストを送信します(APIレート制限に応じて5〜30秒)。 シンプルで効率的です。
• []WebSocket] - プッシュ更新を受信するための永続的な接続を維持します(Finnhub、IEXなどによってサポートされています)。 遅延を抑え、オーバーヘッドを削減します。

出版社を返すメソッドを実装するか、 パターンを使用して最新のデータを取得します。 ポーリングのために、ビューモデルでをスケジュールします。 WebSocket の場合、Apple の または Starscream のようなライブラリ (Alamofire 5 では実験的な WebSocket サポートがあります) を使用します。

例 関数をフェッチ:

func fetchLatestPrice(for symbol: String) async throws -> StockDataPoint {
 let url = "https://api.example.com/quote?symbol=\(symbol)&apikey=\(apiKey)"
 let response = try await AF.request(url).serializingDecodable(StockDataPoint.self).value
 return response
}

データの解析と保存

ビューモデルは、レスポンスを処理し、チャートエントリにマップし、最近のポイントのバッファを維持する必要があります。 [プロパティを使用して、SwiftUIまたはUIKitビューが変更に反応できます。 たとえば、最後のNデータポイントを表す []オブジェクトの配列を維持します。

新しいデータが到着したら、エントリーを追加して、チャートビューのフィニトを維持するために古いものをトリムします。これにより、メモリの肥大を防ぎ、チャートの読みやすい状態を維持します。

チャートライブラリでチャートをビルドする

チャートライブラリから、プログラムを瞬時にドラッグするか、またはプログラムをインスタンス化します。制約を設定し、外観を設定します。

• [ 配列で [] を使用します。
• 価格ラベルの[を有効にしますが、混乱を避けるために、最後の数点に制限します。
• よりスムーズなラインに[]を設定。
• 軸フォーマッタをカスタマイズ – x軸(時間)とy軸(価格)のフォーマットで[。

事例:

let entries = stockDataPoints.map { ChartDataEntry(x: $0.timestamp, y: $0.price) }
let dataSet = LineChartDataSet(entries: entries, label: "\(symbol) Price")
dataSet.drawCirclesEnabled = false
dataSet.lineWidth = 2
dataSet.setColor(.systemBlue)

let chartData = LineChartData(dataSet: dataSet)
lineChartView.data = chartData

リアルタイムの更新では、すべてのティックにセットされたデータ全体をリセットしません。代わりに、新しいエントリを追加し、[を呼び出して、ビューを増分的に更新します。

リアルタイムアップデート戦略

タイマーでポーリング

ビューモデルのを使用します。ビューが消えるときに無効にしてください。 APIレート制限が留意してください。無料のティアは、多くの場合、毎分5〜10リクエストしか許可しません。 長い間隔(10〜15秒)を使用して、構成可能なリフレッシュレートをexpose。

Webソケット接続

API が WebSocket をサポートしている場合、ビューが表示されるときに接続を作成し、ストリームされたデータを取得するループで を呼び出すと接続を作成します。JSON として各受信メッセージをパースし、チャートを更新します。[]] を使用して例:

let task = session.webSocketTask(with: url)
task.resume()
func receive() {
 task.receive { result in
 switch result {
 case .success(let message):
 if case .string(let text) = message,
 let data = text.data(using: .utf8),
 let point = try? JSONDecoder().decode(StockDataPoint.self, from: data) {
 DispatchQueue.main.async { self.updateChart(with: point) }
 }
 self.receive()
 case .failure(let error):
 // reconnect logic
 }
 }
}

WebSocketはレイテンシとネットワーク負荷を軽減しますが、再接続と保護ピンの処理が必要です。

UIレイアウトと応答性

ダッシュボードには以下が含まれます: