SwiftUI + Combine + MVVM Experiences with Spotify API: Chaining Network Requests, Observable Objects, Dynamic List and more

Hello everyone. I’m here with an interesting topic.

As you know, Apple aroused great interest in the software industry by explaining SwiftUI and Combine. In this article we will create a simple Spotify Album List app and learn how to get started using the brand new frameworks, SwiftUI and Combine, released by Apple in 2019. We will use the MVVM pattern.

SwiftUI: SwiftUI helps you to build great-looking apps across all Apple platforms with the power of Swift — and as little code as possible. With SwiftUI, you can bring even better experiences to all users, on any Apple device, using just one set of tools and APIs.

Combine: The Combine framework provides a declarative Swift API for processing values over time. These values can represent many kinds of asynchronous events. Combine declares publishers to expose values that can change over time, and subscribers to receive those values from the publishers.

Let’s start. 🏁

Step 1: Sign up for Spotify Developer

First, we need to create a developer account on Spotify and prepare for API calls. You can get help for this from Spotify API Documentation and this article.

When we do the necessary operations, our dashboard will look like this.

IMPORTANT!

Save the “Client ID” and “Client Secret” keys on your dashboard somewhere.

Step 2: Project Setups

Let’s open Xcode and select the interface option SwiftUI and create our project.

Step 3: Network Setups

1. Auth Manager

Spotify’s network services first ask us to get access token from the authentication service before we can create an album list.

Let’s create an AuthManager class and customize it according to Spotify’s API documentation.

We created a constant with encoding the authentication key to base64. Let’s write our request method and tokenURL for the access token.

And also write to our AccessToken model.

Request Headers:

Request Body:

Request Method: POST

This request can also be tested in Postman.

2. API Manager & Chaining Requests

We now have access token. Now we can write the API request method for the Spotify Artist contents. Let’s create an APIManager class.

IMPORTANT!

We must use the flatMap method for access token data when tokenPublisher is published. Because we need to notify the second publisher that the first publisher published.
first publisher: Auth Manager getAccessToken()
second publisher: API Manager request(with model:)

Step 4: Data Providing

Let’s write a helper class to provide the data after the request is finished.

artistsAlbumSubject: This is publisher and subscriber object.
cancellables: A type-erasing cancellable object that executes a provided closure when canceled.
sink(receiveCompletion:receiveValue:): Attaches a subscriber with closure-based behavior.

And also write to our decodable models.

Identifiable: A class of types whose instances hold the value of an entity with stable identity.
Hashable: A type that can be hashed into a Hasher to produce an integer hash value.

Step 5: View Model

Let’s write our view model class in order to receive and process the data in DataProvider and send it to the AlbumListView.

Published: A type that publishes a property marked with an attribute.

Step 6: View

Now let’s send this processed album data to a list we created in the view.

ObservedObject: A property wrapper type that subscribes to an observable object and invalidates a view whenever the observable object changes.
List(Array(zip(sequence1:_, sequence2:_, …)): Creates a sequence of pairs built out of two or more underlying sequences. (we used tuple.)
onAppear(perform:): Adds an action to perform when this view appears.
padding(_:_): Adds an equal padding amount to specific edges of this view.
Link: A control for navigating to a URL.
cornerRadius: The radius to use when drawing rounded corners for the layer’s background.

Looks nice. Let’s see what the list looks like.

The music albums listed belong to me. You can listen to my songs from this link. :)

Thank you for reading. Good coding. ✌🏻

iOS Developer

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

Recommended from Medium

Using OCMock with Swift

Basic learning about Coredata Local DB

iOS In-App Purchases AppReview

How to try Swift beta version on your Xcode

AR You Ready for the Future? Part 1: Getting Started with ARKit on iOS

Fetch Images From Unsplash API & Cache(Swift 5)

Share User Location in swift

Clean Architecture

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cem Kazım

Cem Kazım

iOS Developer

More from Medium

SwiftUI — Complex navigation made easier with UIPilot

Storyboard to SwiftUI Converter Supporting All Controls

From Combine to Async/Await

How MVVM devs get MVVM wrong in SwiftUI: From view model to state