SwiftUI | Combine & URLSession examples with OpenWeatherAPI

Photo by Wolfgang Hasselmann on Unsplash

In this post, I brought a weather like app using Combine and URLSession. This time, I tried not to use any external library such as AlamoFire, KingFisher.

What I’m going to show in this post are:

  • URLSession(dataTask, dataPublihser)
  • Combine

Environment:

  • iOS 15 (iOS 14 can also be deployable when TextField.background() is excepted)
  • Xcode 13.2.1

To begin with

If you want to try this by yourself, you must register and get application API key at OpenWeather. (References: Current weather data — OpenWeatherMap, Weather Conditions — OpenWeatherMap)

And I would like to share an article that I got some useful ideas from(MVVM with Combine Tutorial for iOS | raywenderlich.com). Especially for this post, I brought some great basic settings from the article. If you are interested, I recommend that you could take time and read it.

Preview

First View

First of all, for the ease of managing web data, I made a WeatherDataManager class. It will get a JSON data from OpenWeather’s server for us and then decode them to CurrentWeatherResponse data.

You should know that

  • I saved my API key to APIKeys.plist for security. Of course it doesn’t ensure my key’s safety from getting hacked but at least prevents api key being uploaded to a public repository by adding the file to gitignore.
  • After it finished fetching the key, it will make a URLsession and return Publisher, specifically URLSession’s dataPublisher. The publisher will do the role that returns downloaded data to their subscribers at the moment it completed its task.
  • I’m not going to reproduce any data in here. That will be taken care of at which subscribers sink those publishers. Now let’s just decode the JSON data to CurrentWeatherResponse struct for further use. You can see the details of CurrentWeatherResponse in here.

View Model

It’s time to make a view model which converts response data(CurrentWeatherResponse) to the actual data(CurrentWeather) we can use and delivers data to the view later.

WeatherListViewModel is pretty simple.

  • The function fetchWeather literally fetches required data by subscribing WeatherDataManager’s currentWeatherPublihser.
  • currentWeatherPublihser will return Fail publisher when it occurs error. Otherwise, it will return CurrentWeatherResponse. By mapping the results to CurrentWeather struct’s init function, we can finally get CurrentWeather data.
  • Mapped results will be stored in class’s array property cityViewSource in the closure function of receiveValue of sink.

View

Then let’s look into the view.

  • At the list and rows part(WeatherList), rows are used to present weather informations of cities. When it comes to the icon, they are fetched from OpenWeather’s asset, not local asset.
  • Each rows are connected to second view(CurrentWeatherView) when it’s clicked which presents details of the city’s weather condition such as max/min temp, humidity, air pressure etc.

The other components are actually not difficult to make so I’ll just skip it. If you want to look into the others, see here.

Second View

Nothing special in here. As I briefly said before, second view, CurrentWeatherView presents details of the city’s weather condition such as max/min temp, humidity, air pressure etc.

  • It receives view model CurrentWeather which contains required informations from parent view.
  • Button more doesn’t have any functions here. You can add another view like 5 days forecasts.

Also in here, the other components are actually not difficult to make so I’ll just skip it. If you want to look into the others, see here.

--

--

--

I can make your dream come true — Mainly Interested in iOS and also in Flutter, Python

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Build a SwiftUI App Powered by an Airtable Backend

How to reduce the size of NumPy 1dim array

Quick Notes: Designated Init vs Convenience Init

AppDelegate Lifecycle 🥚🐣🐥🐓

Integrating with the iOS Keychain, Simplified

Local Notifications based on Geolocation in Flutter

2 Ways How to Auto Layout Programmatically Swift

Case study: Designing an application to foster better mental health assistance

Header Image

Get the Medium app

Enebin

Enebin

I can make your dream come true — Mainly Interested in iOS and also in Flutter, Python

More from Medium

Working with GroupBox in SwiftUI

SwiftUI LazyVGrid and LazyHGrid

The updating Callback Action with DragGesture

Sequence Operators in Combine Framework