Implementierung eines Echtzeit-Dashboards für die Börsen mit Diagrammen in iOS

Nach dem Hinzufügen konfigurieren Sie Ihre Info.plist, um den Netzwerkzugriff (HTTP, falls erforderlich) mit einer App Transport Security-Ausnahme für Ihre API-Domäne zu ermöglichen, oder verwenden Sie HTTPS-Endpunkte.

Gestaltung der Datenmodelle

Erstellen Sie eine Struktur , die die von Ihrem Provider zurückgegebene JSON-Struktur widerspiegelt. Die meisten APIs geben Arrays von Objekten mit Feldern wie , , , , und zurück. Konzentrieren Sie sich für ein Echtzeit-Dashboard auf den neuesten Preis und ein rollendes Fenster historischer Daten (z. B. die letzten 100 Ticks).

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

Definieren Sie einen -Container, der ein Array dieser Punkte enthält, sowie Metadaten wie das Symbol und die letzte Aktualisierungszeit.

Netzwerkebene mit Echtzeit-Funktionen

Erstellen Sie eine Klasse, die Alamofire zum Abrufen von Daten verwendet.

• Polling – senden Sie regelmäßig HTTP GET-Anfragen (alle 5–30 Sekunden, abhängig von API-Ratenlimits). Einfacher, aber weniger effizient.
• WebSocket – pflegen Sie eine dauerhafte Verbindung, um Push-Updates zu erhalten (unterstützt von Finnhub, IEX usw.).

Implementieren Sie eine Methode, die einen Publisher zurückgibt oder ein FLT:15-Muster verwendet, um die neuesten Daten abzurufen. Für Umfragen planen Sie ein FLT:16 in Ihrem Ansichtsmodell. Verwenden Sie für WebSockets Apples FLT:17 oder eine Bibliothek wie Starscream (obwohl Alamofire 5 auch experimentelle WebSocket-Unterstützung hat).

Beispiel ] Funktion:

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
}

Parsing und Speicherung von Daten

Ihr Ansichtsmodell sollte die Antwort verarbeiten, sie Diagrammeinträgen zuordnen und einen Puffer der letzten Punkte beibehalten. Verwenden Sie Eigenschaften, damit SwiftUI- oder UIKit-Ansichten auf Änderungen reagieren können.

Wenn neue Daten ankommen, fügen Sie den Eintrag an und schneiden Sie alte, um die Diagrammansicht endlich zu halten, wodurch Speicheraufblähungen verhindert werden und das Diagramm lesbar bleibt.

Erstellen des Charts mit Charts Library

Ziehen Sie eine aus der Charts-Bibliothek in Ihr Storyboard oder instanziieren Sie es programmgesteuert.

• Verwenden Sie mit Arrays.
• Aktivieren Sie für Preisschilder, aber begrenzen Sie auf die letzten paar Punkte, um Unordnung zu vermeiden.
• Setzt für glattere Linien.
• Passen Sie Achse Formatierer - für x-Achse (Zeit) und y-Achse (Preis) Formatierung.

Beispiel:

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

Bei Echtzeit-Updates werden Sie nicht den gesamten Datensatz bei jedem Tick zurücksetzen, sondern einen neuen Eintrag hinzufügen und aufrufen, um die Ansicht schrittweise zu aktualisieren.

Echtzeit-Update-Strategien

Polling mit Timer

Verwenden Sie ein in Ihrem Ansichtsmodell. Ungültig machen, wenn die Ansicht verschwindet. Beachten Sie die API-Ratenlimits – freie Ebenen erlauben oft nur 5-10 Anfragen pro Minute. Verwenden Sie ein längeres Intervall (10-15 Sekunden) und geben Sie eine konfigurierbare Bildwiederholrate frei.

WebSocket-Verbindung

Wenn Ihre API WebSockets unterstützt, erstellen Sie eine Verbindung, wenn die Ansicht angezeigt wird, und rufen Sie in einer Schleife auf, um gestreamte Daten zu erhalten.

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
 }
 }
}

WebSockets reduzieren Latenz und Netzwerklast, erfordern jedoch die Handhabung von Reconnection- und Keepalive-Pings.

UI Layout und Reaktionsfähigkeit

Ihr Dashboard sollte Folgendes enthalten:

• Eine Suchleiste oder Picker, um ein Aktiensymbol einzugeben.
• Ein aktuelles Preislabel, das mit Animation aktualisiert wird (z. B. grün/rot für Preiserhöhung/-rückgang).
• Die -Zeilendiagramm nimmt den größten Teil des Bildschirmraums ein.
• Zusätzliche Metriken: Prozentsatz der täglichen Änderung, hoch/niedrig, Volumen.
• Ein Statusindikator zeigt den Verbindungszustand (verbunden / getrennt / geladen).

Verwenden Sie SwiftUI für ein deklaratives Layout oder UIKit mit Auto Layout. Stellen Sie sicher, dass schwere Arbeit (Parsing, Diagrammdatenkonstruktion) vom Hauptthread abläuft.

Fehlerbehandlung und Resilienz

Netzwerkausfälle sind unvermeidlich. Implementieren Sie die Retry-Logik mit exponentieller Backoff-Funktion für HTTP-Anforderungen (Alamofires RequestRetrier). Hören Sie bei WebSockets auf Schließcodes und versuchen Sie nach einer Verzögerung, die Verbindung wieder herzustellen. Zeigen Sie ein benutzerfreundliches Fehlerbanner oder ein Platzhalterdiagramm an, wenn die Daten veraltet sind.

Verwenden Sie mit , um Fehler anmutig zu behandeln.

Leistungsoptimierung

Ein Echtzeit-Chart wird mehrmals pro Minute aktualisiert, um die Benutzeroberfläche reibungslos zu halten:

• Begrenzen Sie die Anzahl der Datenpunkte auf ein festes Fenster (z. B. 200 Einträge).
• Deaktivieren Sie das Zeichnen unnötiger Elemente (, nur für Vielfache).
• Verwenden Sie Layer Backing in UIKit oder bevorzugen Sie SwiftUIs für das Compositing mit Metallunterstützung.
• Throttle-Updates: Wenn WebSocket-Nachrichten schneller als die Bildschirm-Aktualisierungsrate (60 Hz) ankommen, werden mehrere Punkte in ein Diagramm-Update gestapelt.

Testen des Dashboards

Schreibe Unit-Tests für das Datenparsing und den Netzwerkmanager mit Mock-JSON-Antworten. Verwenden Sie oder , um API-Antworten zu simulieren. Für die Diagrammansicht können Snapshot-Tests mit die korrekte Wiedergabe nach Updates überprüfen. Testen Sie das Echtzeitverhalten mit UI-Tests, die zeitgesteuerte Mock-Daten über einen benutzerdefinierten Server einfügen.

Einsatzüberlegungen

Speichern Sie Ihren API-Schlüssel sicher – niemals Hardcode. Verwenden Sie Umgebungsvariablen in Xcode-Schemata oder ein , das ignoriert wird. Erwägen Sie, einen lokalen Cache (z. B. Core Data) zu implementieren, damit das Dashboard die letzten bekannten Daten sofort beim Start anzeigt, während Sie auf neue Daten warten.

Stellen Sie für die Einreichung im App Store sicher, dass Ihre App die Hintergrundeinstellungen für die App-Aktualisierung respektiert und den BGTaskScheduler verwendet, wenn Sie regelmäßige Updates wünschen, wenn die App nicht im Vordergrund steht, obwohl WebSocket-Verbindungen für ein echtes Echtzeit-Gefühl nur im Vordergrund funktionieren.

Schlussfolgerung

Durch die Kombination von Alamofire für Netzwerkanforderungen, der Charts-Bibliothek für Visualisierung und entweder Polling oder WebSockets für Live-Updates können Sie ein robustes Echtzeit-Aktienmarkt-Dashboard für iOS erstellen. Konzentrieren Sie sich auf saubere Architektur, anmutige Fehlerbehandlung und Performance-Tuning, um eine professionelle Erfahrung zu bieten, der Benutzer vertrauen. Denken Sie daran, API-Ratenlimits zu respektieren und klares Feedback zu geben, wenn Daten verzögert werden. Mit diesen Grundlagen können Sie das Dashboard mit mehreren Symbolen erweitern, technische Indikatoren oder sogar Watchlist-Management.