Een realtime beursdashboard met grafieken in Ios implementeren

Stel uw Info.plist in om netwerktoegang (HTTP indien nodig) mogelijk te maken met een uitzondering voor App Transport Security voor uw API-domein, of beter, gebruik HTTPS-eindpunten.

Ontwerpen van de gegevensmodellen

Maak een structuur die de JSON structuur weerspiegelt die door uw provider is teruggegeven. De meeste API's geven arrays van objecten terug met velden als , , , , en ]. Voor een realtime dashboard, richt je je op de laatste prijs en een rollend venster van historische gegevens (bijv. laatste 100 teken).

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

Definieer een container die een reeks van deze punten bevat, plus metadata zoals het symbool en de laatste refresh-tijd. Gebruik om slang case van de API te vergelijken met kameelCase in Swift.

Netwerklaag met reële tijd-capaciteiten

Maak een klasse die Alamofire gebruikt om gegevens op te halen. Voor real-time updates heb je twee benaderingen:

• Polling
• WebSocket . . handhaven van een aanhoudende verbinding om push updates te ontvangen (ondersteund door Finnhub, IEX, enz.). Lagere latentie en verminderde overhead.

Implementeer een methode die een uitgever teruggeeft of gebruikt een patroon om de laatste gegevens op te halen. Plan voor het peilen een in uw weergavemodel. Gebruik Apple

Voorbeeld fetch functie:

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
}

Gegevens ontleden en opslaan

Uw weergavemodel moet de respons verwerken, in kaart brengen met inzendingen in kaart brengen en een buffer van recente punten behouden. Gebruik eigenschappen zodat SwiftUI of UIKit views kunnen reageren op veranderingen. Bijvoorbeeld, onderhoud een array van objecten (van de Charts library) die de laatste N datapunten vertegenwoordigen.

Als nieuwe gegevens aankomen, voeg de ingang toe en snijd oude om de grafiekweergave eindig te houden. Dit voorkomt geheugenopgeblazenheid en houdt de grafiek leesbaar.

De grafiek bouwen met Charts Library

Sleep een vanuit de Charts-bibliotheek naar je storyboard of instantiseert het programmatisch. Stel de beperkingen in en configureer het uiterlijk:

• Gebruik met arrays.
• Schakel in voor prijslabels, maar beperkt tot de laatste paar punten om rommel te voorkomen.
• Stel in voor gladdere lijnen.
• Pas as voor materies aan voor x-as (tijd) en y-as (prijs) opmaak.

Voorbeeld:

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

Voor real-time updates, u won don ..de volledige gegevensset op elke vink opnieuw instellen. In plaats daarvan, voeg nieuwe invoer en oproep om het uitzicht increërend te vernieuwen.

Real-time updatestrategieën

Bespreking met Timer

Gebruik een in uw weergavemodel. Invalideer het wanneer het uitzicht verdwijnt. Houd rekening met de API-snelheidslimieten . Vrije entree laat vaak slechts 5

WebSocket-verbinding

Als uw API WebSockets ondersteunt, maak dan een verbinding wanneer het beeld verschijnt en bel in een lus om gestreamde gegevens te krijgen. Ontvang elk binnenkomend bericht als JSON en update de grafiek. Voorbeeld met :

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 verminderen latency en netwerkbelasting, maar vereisen het hanteren van reconnectie en keepalive pings.

UI-indeling en responsiviteit

Uw dashboard moet omvatten:

• Een zoekbalk of picker om een voorraadsymbool in te voeren.
• Een huidig prijsetiket dat met animatie wordt bijgewerkt (bv. flash green/red voor prijsverhoging/daling).
• De lijndiagram neemt het grootste deel van de schermruimte in beslag.
• Aanvullende metrieken: dagelijks veranderingspercentage, hoog/laag, volume.
• A statusindicator toont de verbindingsstatus (verbonden / losgekoppeld / laden).

Gebruik SwiftUI voor een declaratieve lay-out of UIKit met Auto Layout. Zorg ervoor dat zwaar werk (parsing, grafiekgegevensconstructie) loopt van de hoofddraad. Verzending UI updates naar .

Fout bij het hanteren en weerstaan

Netwerkstoringen zijn onvermijdelijk. Implementeer herstart logica met exponentiële backoff voor HTTP-verzoeken (Alamofire