Mise en place d'un tableau de bord en temps réel avec des graphiques en Ios

Configuration et dépendances du projet

Une fois ajouté, configurez votre Info.plist pour permettre l'accès au réseau (HTTP si nécessaire) avec une exception de sécurité de transport pour l'application pour votre domaine API, ou mieux, utilisez les paramètres HTTPS.

Conception des modèles de données

Créer une structure qui reflète la structure JSON retournée par votre fournisseur. La plupart des API renvoient des tableaux d'objets avec des champs comme , , , , et . Pour un tableau de bord en temps réel, concentrez-vous sur le dernier prix et une fenêtre roulante de données historiques (p. ex., les 100 dernières tiques).

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

Définir un conteneur qui contient un tableau de ces points, plus des métadonnées comme le symbole et la dernière fois de rafraîchissement. Utilisez pour correspondre serpent case de l'API à camelCase dans Swift.

Couche de mise en réseau avec capacités en temps réel

Créez une classe qui utilise Alamofire pour récupérer des données. Pour les mises à jour en temps réel, vous avez deux approches :

• Polling – envoie périodiquement des requêtes HTTP GET (toutes les 5 à 30 secondes selon les limites de débit de l'API).
• WebSocket – maintenir une connexion persistante pour recevoir des mises à jour push (supportées par Finnhub, IEX, etc.). Latence réduite et frais généraux réduits.

Implémentez une méthode qui retourne un éditeur ou utilise un modèle pour récupérer les données les plus récentes. Pour le sondage, programmez un dans votre modèle de vue. Pour WebSockets, utilisez Apples ou une bibliothèque comme Starscream (bien qu'Alamofire 5 ait également un support WebSocket expérimental).

Exemple fonction de récupération:

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
}

Analyse et stockage des données

Votre modèle de vue doit gérer la réponse, la mapper aux entrées de diagrammes et maintenir un tampon de points récents. Utilisez propriétés de sorte que les vues SwiftUI ou UIKit peuvent réagir aux changements. Par exemple, maintenez un tableau d'objets (à partir de la bibliothèque de graphiques) qui représentent les derniers points de données N.

Lorsque de nouvelles données arrivent, ajoutez l'entrée et coupez les anciennes pour garder la vue du graphique finie. Cela empêche le bloat de mémoire et garde le graphique lisible.

Construire la carte avec la bibliothèque des cartes

Faites glisser un de la bibliothèque des graphiques dans votre storyboard ou l'instantanez programmatiquement. Réglez ses contraintes et configurez l'apparence :

• Utiliser avec tableaux.
• Activer pour les étiquettes de prix, mais limiter à quelques points pour éviter les encombrements.
• Régler pour des lignes plus lisses.
• Personnaliser les formateurs d'axe – pour le formatage de l'axe des x (temps) et de l'axe des y (prix).

Exemple :

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

Pour les mises à jour en temps réel, vous n'avez pas réinitialisé l'ensemble des données sur chaque tique. Au lieu de cela, ajoutez une nouvelle entrée et appelez pour rafraîchir la vue progressivement.

Stratégies de mise à jour en temps réel

Sondage avec minuterie

Utilisez un dans votre modèle de vue. Invalidez-le lorsque la vue disparaît. Attention aux limites de taux d'API – les niveaux libres ne permettent souvent que 5 à 10 requêtes par minute. Utilisez un intervalle plus long (10 à 15 secondes) et exposez un taux de rafraîchissement configurable.

Connexion WebSocket

Si votre API prend en charge WebSockets, créez une connexion lorsque la vue apparaît et appelez dans une boucle pour obtenir des données en streaming. Parcourez chaque message entrant comme JSON et mettez à jour le graphique. Exemple en utilisant :

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 réduisent la latence et la charge réseau, mais nécessitent la manipulation de la connexion et des pings de maintien.

La disposition et la réceptivité de l'assurance-chômage

Votre tableau de bord devrait comprendre :

• Une barre de recherche ou piqueur[ pour saisir un symbole de stock.
• Une étiquette de prix[ actuelle qui met à jour avec l'animation (p. ex., vert flash/rouge pour augmenter/diminuer les prix).
• Le le graphique prend la majorité de l'espace d'écran.
• Mesures supplémentaires: pourcentage de variation journalière, élevé/faible, volume.
• Un indicateur de statut montrant l'état de connexion (connecté / déconnecté / chargé).

Utilisez SwiftUI pour une mise en page déclarative ou UIKit avec la mise en page automatique. Assurez-vous que le travail lourd (parsage, construction de données de diagramme) s'éteint hors du fil principal.

Gestion des erreurs et résilience

Les défaillances réseau sont inévitables. Implémenter une logique de ré-essai avec une sauvegarde exponentielle pour les requêtes HTTP (Alamofire -Rechercher). Pour WebSockets, écouter les codes fermés et tenter de se reconnecter après un délai.

Utilisez avec pour gérer les erreurs gracieusement. Enregistrez les erreurs sur un service distant comme Crashlytics uniquement en production.

Optimisation des performances

Un graphique en temps réel met à jour plusieurs fois par minute. Pour garder l'interface utilisateur en douceur :

• Limiter le nombre de points de données à une fenêtre fixe (p. ex. 200 entrées).
• Désactiver le dessin d'éléments inutiles (, seulement pour les multiples).
• Utiliser support de couche[ en UIKit ou préférer SwiftUI=s pour le calcul à base de métal.
• Mises à jour de la vitesse de rotation : si les messages WebSocket arrivent plus rapidement que le taux de rafraîchissement de l'écran (60 Hz), lotez plusieurs points dans une seule mise à jour de graphique.

Essai du tableau de bord

Utilisez ou pour simuler les réponses de l'API. Pour la vue du graphique, les tests instantanés avec peuvent vérifier le rendu correct après les mises à jour. Testez le comportement en temps réel avec les tests d'interface utilisateur qui injectent des données de simulation timed via un serveur personnalisé.

Considérations relatives au déploiement

Considérez la mise en place d'un cache local (par exemple, les données de base) de sorte que le tableau de bord affiche les dernières données connues immédiatement au lancement en attendant de nouvelles données.

Pour la soumission de l'App Store, assurez-vous que votre application respecte les paramètres de fond de l'application et utilise BGTaskScheduler si vous voulez des mises à jour périodiques lorsque l'application n'est pas mise au premier plan, bien que pour une vraie sensation en temps réel, les connexions WebSocket ne fonctionnent qu'au premier plan.

Conclusion

En combinant Alamofire pour les demandes réseau, la bibliothèque de graphiques pour la visualisation, et soit scrutateur ou WebSockets pour les mises à jour en direct, vous pouvez construire un tableau de bord solide en temps réel du marché boursier pour iOS. Focus sur l'architecture propre, la gestion gracieuse des erreurs, et le réglage des performances pour fournir une expérience professionnelle que les utilisateurs confiance. N'oubliez pas de respecter les limites de taux API et fournir des commentaires clairs lorsque les données sont retardées.