Understanding MVVM by Building a Simple Weather App with SwiftUI

GeraldCO — Thu, 06 Aug 2026 03:53:12 +0000

MVVM with swiftUI

When learning SwiftUI, one of the first architectural patterns you'll encounter is MVVM (Model-View-ViewModel). In this tutorial, we'll build a simple weather application that consumes the OpenWeather API while applying MVVM, dependency injection, and protocol-oriented programming. By the end, you'll understand not only how to structure the project, but also why each layer exists.

This is the link for the OpenWeather API https://openweathermap.org/api.

What you'll learn

By the end of this tutorial you'll know how to:

Structure a SwiftUI project using MVVM.
Consume a REST API using async/await.
Apply dependency injection using protocols.
Display loading and error states.
Keep Views focused only on UI.

This is how the data flow looks.

        User taps "Search"
                │
                ▼
         ┌──────────────┐
         │ ContentView  │
         └──────┬───────┘
                │
        await fetchWeather()
                │
                ▼
      ┌────────────────────┐
      │ WeatherViewModel   │
      └─────────┬──────────┘
                │
                ▼
        WeatherServiceProtocol
                │
                ▼
          ┌─────────────────┐
          │ WeatherService  │
          └──────┬──────────┘
                 │
                 ▼
         OpenWeather API

Project Structure

WeatherApp
├── Configuration
│  └──AppConfig.swift
├── Models
│   ├── Main.swift
│   ├── Weather.swift
│   └── WeatherResponse.swift
├── Services
│   ├── WeatherService.swift
│   └── WeatherServiceProtocol.swift
├── ViewModels
│   └── WeatherViewModel.swift
└── Views
    └── ContentView.swift

Configuration contains application-wide constants such as the API key and base URLs.
Models contains the data structures used to decode the API response.
Services is responsible for networking and fetching data.
ViewModels contains the presentation logic and exposes data to the UI.
Views contains the SwiftUI interface.

On the AppConfig file, we are going to keep static info, just like the base URL, API key, etc

struct AppConfig {
    static let apiKey = "YOUR API KEY"
    static let baseGeoCodingAPIURL = "https://api.openweathermap.org/geo/1.0/direct?q="
    static let baseURL = "https://api.openweathermap.org/data/2.5/weather?&units=metric&lat="

}

Designing the UI

Before implementing the networking layer, we'll start by designing the UI. Defining the interface first helps us identify exactly which data we need from the API, allowing us to create only the models required by the application.

The app is going to look something like

┌───────────────────────────────┐
│ Enter city           Search   │
├───────────────────────────────┤
│                               │
│             Rain              │
│        Moderate Rain          │
│                               │
│             28.5°             │
│                               │
│  Feels Like     Min      Max  │
│     29.1°      25.0°    31.2° │
│                               │
└───────────────────────────────┘

After defining what data we need to show, we can create our models. The OpenWeather API JSON returns something like this

{
  "lat": 51.5,
  "lon": -0.1,
  "timezone": "Europe/London",
  "timezone_offset": 3600,
  "data": [
    {
      "dt": 1777449371,
      "sunrise": 1777437375,
      "sunset": 1777490344,
      "temp": 286.42,
      "feels_like": 285.32,
      "pressure": 1024,
      "humidity": 58,
      "dew_point": 278.34,
      "uvi": 1.55,
      "clouds": 0,
      "visibility": 10000,
      "wind_speed": 8.23,
      "wind_deg": 70,
      "weather": [
        {
          "id": 800,
          "main": "Clear",
          "description": "sky is clear",
          "icon": "01d"
        }
      ]
      "alerts": [
        "8B46C632-DCA7-44D7-8BDF-02445621BAFF",
        "29F58A35-BB91-4A73-9F46-9FC64BDF604F",
        ...
    ]
    }
  ]
}

The OpenWeather response contains much more information than we need. Rather than decoding the entire JSON, we'll only model the fields our application uses.

Creating the Models

First we have the Weather model

struct Weather: Codable{
    var id: Int
    var main: String
    var description: String
    var icon: String
}

also we have the Main model

struct Main: Codable{
    let temp: Double
    let feels_like: Double
    let temp_min: Double
    let temp_max: Double
}

Now we can combine the two of them to get the data we need from the OpenWeather API, this is the WeatherResponse object

struct WeatherResponse: Codable {
    var weather : [Weather]
    var main : Main
}

Building the Service Layer

After creating the model, we can work on the service, the service is part of the data layer, it handles API/NETWORK tasks.

fetchCity and fetchWeather are asynchronous throwing functions. They propagate any networking or decoding errors to the caller, allowing the ViewModel to decide how to handle them.

The WeatherService is responsible for communicating with the OpenWeather API. It converts the city name into coordinates using the Geocoding API, then requests the current weather using those coordinates.

We are going to create the protocol for WeatherService, in that way we can use dependency injection, we can pass the interface via the initializer so you can easily swap it with a mock service during SwiftUI Previews or Unit testing.

protocol WeatherServiceProtocol{
    static func convertCityToGeoCodingAPI(city: String) -> String
    static func getWeatherAPI(lat: Double, lon: Double) -> String
    static func fetchCity(for city: String ) async throws  -> CityCoords
    func fetchWeather(city: String) async throws -> WeatherResponse
}

We make these helper methods static because they don't depend on any instance-specific state. They simply build URLs based on the provided parameters, so there's no need to create a WeatherService object just to call them.

static func convertCityToGeoCodingAPI(city: String) -> String {
        return AppConfig.baseGeoCodingAPIURL + city + "&limit=1&appid=" + AppConfig.apiKey
    }

    static func getWeatherAPI(lat: Double, lon: Double) -> String {
        return AppConfig.baseURL + "\(lat)&lon=\(lon)&appid=" + AppConfig.apiKey
    }

now we have the fetchCity and fetchWeather, the fetchCity receives the city name and converts it to coords, the fetchWeather uses the fetchCity function to get the current weather data from the results from fetchCity.

    static func fetchCity(for city: String ) async throws  -> CityCoords {
        //create and validate url
        guard let url = URL(string : Self.convertCityToGeoCodingAPI(city: city)) else {
            throw NetworkError.invalidURL
        }

        //Fetch data from the network
            let (data, response) = try await URLSession.shared.data(from: url)

        //verify http status code
        guard let httpResponse = response as? HTTPURLResponse,httpResponse.statusCode == 200 else {
            throw NetworkError.invalidResponse
        }

        //Decode JSON payload
        let coordsList = try JSONDecoder().decode([CityCoords].self, from: data)

        // 5. Ensure the array isn't empty before picking the first result
        guard let coords = coordsList.first else {
            throw NetworkError.cityNotFound 
        }

        return coords;
    }

    func fetchWeather(city: String) async throws -> WeatherResponse {
        let coords = try await Self.fetchCity(for: city)

        guard let url = URL(string: Self.getWeatherAPI(lat: coords.lat, lon: coords.lon)) else {
            throw NetworkError.invalidURL
        }
        let (data, response) = try await URLSession.shared.data(from: url)
        guard let httpResponse = response as? HTTPURLResponse, httpResponse.statusCode == 200 else {
            throw NetworkError.invalidResponse
        }

        let weatherData = try JSONDecoder().decode(WeatherResponse.self, from: data)

        return weatherData
    }
}

Implementing the ViewModel

Now we can work on the ViewModel; The ViewModel responds to user actions, requests data from the service, stores the screen's state, and exposes formatted data for the View to display.

We use computed properties to send the data formatted to the view so we can keep the view dumb.

The WeatherViewModel conforms to ObservableObject, allowing SwiftUI to observe it for changes. Properties marked with @Published automatically notify the View whenever their values change, causing the UI to refresh.

The @MainActor is used to guarantee the code will run in the main thread, which is mandatory when we are updating the user interface.

import Foundation
import Combine


@MainActor
final class WeatherViewModel: ObservableObject {
    //Store state
    @Published var weatherResponse : WeatherResponse?
    @Published var isLoading = false
    @Published var errorMessage: Error?

    //Dependencies
    private let weatherService : WeatherServiceProtocol

    init(weatherService: WeatherServiceProtocol){
        self.weatherService = weatherService
    }

    //private derived data
    private var currentWeather: Weather? {
        weatherResponse?.weather.first
    }

    //UI computed properties
    var weatherDescription: String {
        currentWeather?.description ?? "No Data"
    }
    var weatherCondition: String {
        currentWeather?.main ?? "No Data"
    }
    var temperatureText : String {
        formattedTemperature(weatherResponse?.main.temp)
    }

    var feelsLikeText : String {
        formattedTemperature(weatherResponse?.main.feels_like)
    }
    var minTemperatureText: String {
        formattedTemperature(weatherResponse?.main.temp_min)
    }
    var maxTemperatureText: String {
        formattedTemperature(weatherResponse?.main.temp_max)
    }

We use this function to format the temperature and send it to the view; in this way, the view does not have to do anything but display the data.

private func formattedTemperature(_ value: Double?) -> String {
        guard let value else {
            return "No Data"
        }

        return String(format: "%.2f°C", value)
    }

the last function is the fetchWeather, this one receives a city name as String and invokes the function from the weatherService, this function also controls the different states such as isLoading, errorMessage and weatherResponse.

func fetchWeather(city : String) async {

        isLoading = true
        errorMessage = nil

        defer {
            isLoading = false
        }
        do{
           weatherResponse = try await weatherService.fetchWeather(city: city)
        } catch {
            errorMessage = error
        }
    }
}

Building the View

Finally, we can build the View.

We create the @State var for getting the user input, As the user types, SwiftUI automatically updates the city state.

We create the weatherService object in the constructor, also the weather ViewModel is created inside the constructor because it needs the reference to the service object.

    //
//  ContentView.swift
//  WeatherApp
//
//  Created by Gerald on 23/6/26.
//

import SwiftData
import SwiftUI

struct ContentView: View {
    @State private var city = ""
    let service : WeatherService
    @StateObject private var weatherVM : WeatherViewModel

    init(service: WeatherService = WeatherService()) {
        self.service = service
        self._weatherVM = StateObject(wrappedValue: WeatherViewModel(weatherService: service))
    }

    var body: some View {
        VStack(spacing: 24) {

            HStack {
                TextField("Enter city", text: $city)
                    .textFieldStyle(.roundedBorder)
                    .onSubmit {
                        fetchWeather()
                    }

                Button("Search") {
                    fetchWeather()
                }
                .buttonStyle(.borderedProminent)
            }

            if weatherVM.temperatureText != "No Data" {
                if weatherVM.isLoading {
                    ProgressView()
                }

                VStack(spacing: 16) {

                    Text(weatherVM.weatherCondition)
                        .font(.largeTitle)
                        .fontWeight(.bold)

                    Text(weatherVM.weatherDescription.capitalized)
                        .font(.title3)
                        .foregroundStyle(.secondary)

                    Text(weatherVM.temperatureText)
                        .font(.system(size: 72, weight: .thin))

                    HStack(spacing: 40) {

                        WeatherInfoView(
                            title: "Feels Like",
                            value: weatherVM.feelsLikeText
                        )

                        WeatherInfoView(
                            title: "Min",
                            value: weatherVM.minTemperatureText
                        )

                        WeatherInfoView(
                            title: "Max",
                            value: weatherVM.maxTemperatureText
                        )
                    }
                }
                .padding()
            } else {
                ContentUnavailableView(     
                    "No Weather Data",
                    systemImage: "cloud.sun",
                    description: Text("Search for a city to see the weather")
                )
            }

            Spacer()
        }.alert(
            "Error",
            isPresented: .constant(weatherVM.errorMessage != nil)
        ) {
            Button("OK") {
                weatherVM.errorMessage = nil
            }
        } message: {
            Text(weatherVM.errorMessage?.localizedDescription ?? "")
        }
        .padding()
    }

    private func fetchWeather() {
        Task {
            await weatherVM.fetchWeather(city: city)
        }
    }
}

struct WeatherInfoView: View {
    let title: String
    let value: String

    var body: some View {
        VStack(spacing: 6) {
            Text(title)
                .font(.caption)
                .foregroundStyle(.secondary)

            Text(value)
                .font(.headline)
        }
    }
}

#Preview {
    ContentView()
}

In this tutorial we built a weather application using SwiftUI and the MVVM architectural pattern.
Along the way we learned how to:

Separate presentation logic from networking.
Use dependency injection through protocols.
Consume a REST API using async/await.
Manage loading and error states.
Keep the View focused only on displaying data.

Although this is a small application, these same architectural principles can be applied to much larger iOS projects.

Source Code

The complete source code for this project is available on GitHub:

https://github.com/GeraldCO/weather-app-swift

DEV Community: GeraldCO