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. ✌🏻
