Implementando un panel de mercado de valores en tiempo real con gráficos en Ios

Establecimiento de proyectos y dependencias

Una vez añadido, configure su Info.plist] para permitir el acceso a la red (HTTP si es necesario) con una excepción de la Seguridad de la Aplicación para su dominio de API, o mejor, utilice puntos finales HTTPS.

Diseño de los modelos de datos

Crear una estructura que refleja la estructura JSON devuelta por su proveedor. La mayoría de las API devuelven arrays de objetos con campos como , , , , y ]. Para un panel en tiempo real, concéntrese en la ventana de un precio histórico y la marcación.

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

Define un contenedor que contiene una variedad de estos puntos, además de metadatos como el símbolo y la última vez de refresco. Use para combinar el estuche de la API para camelCase en Swift.

Capa de red con capacidades en tiempo real

Cree una clase que use Alamofire para buscar datos. Para actualizaciones en tiempo real, usted tiene dos enfoques:

• Polling] – envía periódicamente solicitudes HTTP GET (cada 5–30 segundos dependiendo de los límites de la tasa de API). Más simple pero menos eficiente.
• WebSocket: mantener una conexión persistente para recibir actualizaciones de empuje (apoyo de Finnhub, IEX, etc.). Latencia inferior y la sobrecarga reducida.

Implementar un método que devuelve un editor o utiliza un patrón para buscar los datos más recientes. Para la encuesta, programe un en su modelo de vista. Para WebSockets, utilice Apple o una biblioteca como Starscream (aunque Alamofire 5 también tiene soporte WebSocket experimental).

Ejemplo función de la búsqueda:

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
}

Datos de par y almacenamiento

Su modelo de vista debe manejar la respuesta, mapearla para trazar entradas y mantener un buffer de puntos recientes. Use propiedades para que las vistas de SwiftUI o UIKit puedan reaccionar a los cambios. Por ejemplo, mantenga una variedad de objetos (de la biblioteca de gráficos) que representan los últimos puntos de datos N.

Cuando lleguen nuevos datos, anexa la entrada y recorta los antiguos para mantener la vista de la gráfica finita. Esto evita la apertura de la memoria y mantiene la gráfica legible.

Construyendo el Gráfico con la Biblioteca de Gráficos

Arrastre un de la biblioteca de Charts en su guión gráfico o instantiate programamáticamente. Establecer sus limitaciones y configurar la apariencia:

• Usa con arrays.
• Habilitar para etiquetas de precios, pero limitar a durar pocos puntos para evitar el desorden.
• Set para líneas más suaves.
• Personalizar los formateadores de ejes – ) para el formato de eje x (time) y eje y (price).

Ejemplo:

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

Para actualizaciones en tiempo real, no se restablecerá todo el conjunto de datos en cada marca. En lugar de ello, agregue nueva entrada y llamada para refrescar la vista incrementalmente.

Estrategias de actualización en tiempo real

Votar con Timer

Utilice un en su modelo de vista. Invalidarlo cuando la vista desaparece. Tenga cuidado con los límites de la tasa de API – los niveles libres a menudo permiten sólo 5-10 solicitudes por minuto. Use un intervalo más largo (10-15 segundos) y exponga una tasa de actualización configurable.

Conexión WebSocket

Si su API admite WebSockets, cree una conexión cuando la vista aparece y llame en un bucle para obtener datos de transmisión. Parse cada mensaje entrante como JSON y actualice el gráfico. Ejemplo utilizando :

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 reduce la latencia y la carga de red, pero requiere la reconexión y pings de mantenimiento.

UI Diseño y Responsabilidad

Su panel de control debe incluir:

• A barra de búsqueda o picador para introducir un símbolo de stock.
• A etiqueta de precio actual que actualiza con animación (por ejemplo, verde flash/red para el aumento/disminución de precios).
• El gráfico que ocupa la mayoría del espacio de pantalla.
• métricas adicionales: porcentaje de cambio diario, alto/bajo, volumen.
• A indicador de estado] que muestra estado de conexión (conectado / desconectado / carga).

Utilice SwiftUI para un diseño declarativo o UIKit con Auto Layout. Asegúrese de que el trabajo pesado (parición, construcción de datos de gráficos) se ejecuta fuera del hilo principal.

Manejo de errores y resiliencia

Las fallas de la red son inevitables. Implementar la lógica de reingreso con retroceso exponencial para las solicitudes HTTP (] Solicitud de AlamofireRetrier).Para WebSockets, escuche códigos cercanos e intente reconexión después de un retraso. Examinar una banner de error o una carta de marcador de posición fácil de usar cuando los datos están estancados.

Use con para manejar los errores con gracia. Inicie errores a un servicio remoto como Crashlytics sólo en producción.

Optimización del rendimiento

Una actualización de mapas en tiempo real muchas veces por minuto. Para mantener la interfaz de usuario suave:

• Limite el número de puntos de datos a una ventana fija (por ejemplo, 200 entradas).
• Dibujo desactivado de elementos innecesarios (], solamente para múltiples).
• Use respaldo de capas] en UIKit o prefiera el compositing de SwiftUI .
• Actualizaciones de la ranura: si los mensajes WebSocket llegan más rápido que la tasa de actualización de la pantalla (60 Hz), cómplice varios puntos en una actualización de la gráfica.

Pruebas del tablero de mando

Escribe pruebas de unidad para el persing de datos y el administrador de red usando las respuestas de mock JSON. Use o para simular las respuestas de API. Para la vista de la gráfica, las pruebas de instantáneas con pueden verificar la correcta renderización después de las actualizaciones. Prueba el comportamiento en tiempo real con pruebas de UI que inyectan datos de mock a través de un servidor personalizado.

Consideraciones del despliegue

Almacene su clave de API de forma segura – nunca lo codifica. Utilice variables de entorno en esquemas Xcode o un que es gitignored. Considere la implementación de un caché local (por ejemplo, datos básicos) por lo que el panel muestra los últimos datos conocidos inmediatamente en el lanzamiento mientras espera para datos frescos.

Para App Store submission, asegúrese de que su aplicación respeta los ajustes de actualización de la aplicación de fondo y utiliza BGTaskScheduler si desea actualizaciones periódicas cuando la aplicación no se desplace, aunque para una verdadera sensación en tiempo real, las conexiones WebSocket sólo funcionan en primer plano.

Conclusión

Al combinar Alamofire para solicitudes de red, la biblioteca de Charts para visualización, y ya sea para encuestas o WebSockets para actualizaciones en vivo, puede construir un robusto panel de mercado de valores en tiempo real para iOS. Enfóquese en arquitectura limpia, manejo de errores graciosa y ajuste de rendimiento para ofrecer una experiencia profesional que los usuarios confían. Recuerde respetar los límites de API y proporcionar una respuesta clara cuando los datos se retrasan.