Building a Stock Market App Using SwiftUI and API Data

Developing a stock market application using SwiftUI and API data provides a practical and engaging project for aspiring iOS developers. This tutorial covers the essential steps, including setting up the project, fetching data from a stock market API, and presenting the data in an intuitive user interface. SwiftUI’s declarative syntax and real-time preview features make it an ideal choice for building dynamic and visually appealing apps.

What is SwiftUI?

SwiftUI is Apple’s modern UI framework for building user interfaces across all Apple platforms. It provides a declarative syntax, real-time previews, and seamless integration with other Apple technologies.

Why SwiftUI for Stock Market Apps?

• Declarative Syntax: Makes UI code easier to read and maintain.
• Real-time Previews: Speeds up development with immediate feedback on UI changes.
• Cross-Platform Compatibility: Allows code reuse across iOS, macOS, watchOS, and tvOS.
• Reactive Programming: Simplifies data binding and UI updates with Combine framework.

Setting Up Your Xcode Project

To begin, create a new Xcode project:

1. Open Xcode and select “Create a new Xcode project.”
2. Choose “iOS” > “App” and click “Next.”
3. Enter a project name (e.g., “StockMarketApp”) and select “SwiftUI” as the interface. Click “Next.”
4. Choose a location to save the project and click “Create.”

Choosing a Stock Market API

To fetch stock market data, you’ll need an API. Popular options include:

• Alpha Vantage: Offers a wide range of market data and supports various API endpoints.
• IEX Cloud: Provides real-time stock prices and financial data.
• Financial Modeling Prep: Offers comprehensive financial data with a free and premium tier.

For this tutorial, we’ll use the Alpha Vantage API, as it provides a free API key for limited use.

1. Sign up for a free API key at Alpha Vantage.

Fetching Stock Data with URLSession

Create a data model and a function to fetch the stock data using URLSession.

import Foundation

struct Stock: Identifiable, Decodable {
    let id = UUID()
    let symbol: String
    let name: String
    let price: Double
    let change: Double
    let changePercent: Double

    enum CodingKeys: String, CodingKey {
        case symbol = "symbol"
        case name = "name"
        case price = "price"
        case change = "change"
        case changePercent = "changePercent"
    }
}

class StockDataFetcher: ObservableObject {
    @Published var stocks: [Stock] = []

    init() {
        fetchStocks()
    }

    func fetchStocks() {
        guard let url = URL(string: "YOUR_API_ENDPOINT_HERE") else {
            print("Invalid URL")
            return
        }

        URLSession.shared.dataTask(with: url) { data, response, error in
            if let error = error {
                print("Error: \(error.localizedDescription)")
                return
            }

            guard let data = data else {
                print("No data received")
                return
            }

            do {
                let decodedData = try JSONDecoder().decode([Stock].self, from: data)
                DispatchQueue.main.async {
                    self.stocks = decodedData
                }
            } catch {
                print("Decoding error: \(error.localizedDescription)")
            }
        }.resume()
    }
}

Replace "YOUR_API_ENDPOINT_HERE" with the actual API endpoint. Ensure the JSON structure from the API matches your Stock struct.

Displaying Stock Data in SwiftUI

Create a view to display the stock data using SwiftUI’s List and Text views.

import SwiftUI

struct StockListView: View {
    @ObservedObject var stockDataFetcher = StockDataFetcher()

    var body: some View {
        NavigationView {
            List(stockDataFetcher.stocks) { stock in
                StockRow(stock: stock)
            }
            .navigationTitle("Stocks")
        }
    }
}

struct StockRow: View {
    let stock: Stock

    var body: some View {
        HStack {
            Text(stock.symbol)
                .font(.headline)
            Spacer()
            Text("\$\\(stock.price, specifier: \"%.2f\")")
            Text(stock.change >= 0 ? "+\(stock.change, specifier: \"%.2f\")" : "\(stock.change, specifier: \"%.2f\")")
                .foregroundColor(stock.change >= 0 ? .green : .red)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        StockListView()
    }
}

Handling Asynchronous Operations with Combine

For more robust asynchronous operations and data binding, use the Combine framework.

import Foundation
import Combine

class StockDataFetcher: ObservableObject {
    @Published var stocks: [Stock] = []
    var cancellables = Set<AnyCancellable>()

    init() {
        fetchStocks()
    }

    func fetchStocks() {
        guard let url = URL(string: "YOUR_API_ENDPOINT_HERE") else {
            print("Invalid URL")
            return
        }

        URLSession.shared.dataTaskPublisher(for: url)
            .map { $0.data }
            .decode(type: [Stock].self, decoder: JSONDecoder())
            .receive(on: DispatchQueue.main)
            .sink(receiveCompletion: { completion in
                switch completion {
                case .failure(let error):
                    print("Error: \(error.localizedDescription)")
                case .finished:
                    break
                }
            }, receiveValue: { fetchedStocks in
                self.stocks = fetchedStocks
            })
            .store(in: &cancellables)
    }
}

By using dataTaskPublisher, you can handle data fetching and error management more efficiently.

Adding More Features

Enhance your stock market app with additional features:

• Search Functionality: Allow users to search for specific stocks.
• Detailed Stock Views: Provide detailed information about each stock, such as charts and news.
• User Authentication: Implement user accounts for saving favorite stocks and portfolios.
• Real-time Updates: Use web sockets for real-time stock price updates.

Conclusion

Building a stock market app using SwiftUI and API data is a rewarding project that allows you to leverage the power of SwiftUI for creating modern and responsive user interfaces. By fetching data from APIs, handling asynchronous operations with Combine, and implementing key features, you can develop a functional and visually appealing stock market application. This hands-on experience will enhance your skills in iOS development and deepen your understanding of SwiftUI and related technologies.