More Networking

Module 1 of 11 0%

More Networking

Introduction

In this module, we’ll focus on working with the Unsplash API, implementing pagination with infinite scrolling, and handling image downloads.

By the end of this module, you’ll understand:

How to connect to the Unsplash API to fetch images
How pagination works and how to implement infinite scrolling
How to download and save images to a device

1. Connecting to the Unsplash API

Unsplash API Overview

Unsplash provides a robust API for accessing high-quality, free images. Our application uses this API to search for and display images to users.

API Configuration

Our implementation uses a dedicated configuration structure to store API credentials and the base URL:

struct UnsplashConfig {
    static let baseURL = "https://api.unsplash.com"
    static let accessKey = "here should go the key"
}

⚠️ Important: In a production application, you should never hardcode API keys in your source code. Consider using environment variables, secure storage, or a configuration file excluded from version control.

Endpoint Structure

We’ve organized our API endpoints using an enum with associated values for parameters:

enum UnsplashEndpoint {
    case searchPhotos(query: String, page: Int)
    case fetchPictureDetails(pictureId: String)

    var endpointURL: URL? {
        switch self {
        case .searchPhotos(let query, let page):
            let baseURL = UnsplashConfig.baseURL
            let accessKey = UnsplashConfig.accessKey
            let urlString = "\(baseURL)/search/photos?page=\(page)&query=\(query)&client_id=\(accessKey)&orientation=portrait"
            return URL(string: urlString)
        case .fetchPictureDetails(pictureId: let pictureId):
            let baseURL = UnsplashConfig.baseURL
            let accessKey = UnsplashConfig.accessKey
            let urlString = "\(baseURL)/photos/\(pictureId)?client_id=\(accessKey)"
            return URL(string: urlString)
        }
    }
}

Benefits of this approach:

Type safety for different endpoints
Centralized URL construction
Easy addition of new endpoints in the future
Self-documenting code through the enum cases

Data Models

For the API to work properly, we need to define data models that match the JSON structure returned by Unsplash.

Basic Picture Model

struct UnsplashPicture: Decodable {
    let id: String
    let urls: [String: String]
}

Detailed Picture Model

struct UnsplashPictureDetails: Decodable {

    let id: String
    let createdAt: Date
    let urls: Urls
    let user: User
    let exif: Exif?
    let location: Location?

    enum CodingKeys: String, CodingKey {
        case id, created_at, urls, user, exif, location
    }

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)

        id = try container.decode(String.self, forKey: .id)
        urls = try container.decode(Urls.self, forKey: .urls)
        user = try container.decode(User.self, forKey: .user)
        exif = try container.decode(Exif?.self, forKey: .exif)
        location = try container.decode(Location?.self, forKey: .location)

        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ssZ"
        dateFormatter.locale = Locale(identifier: "en_US_POSIX")
        dateFormatter.timeZone = TimeZone(secondsFromGMT: 0)

        let createdAtString = try container.decode(String.self, forKey: .created_at)
        guard let createdAtDate = dateFormatter.date(from: createdAtString) else {
            throw DecodingError.dataCorruptedError(forKey: .created_at, in: container, debugDescription: "Date string does not match format expected by formatter.")
        }

        createdAt = createdAtDate
    }

    struct User: Decodable {
        let name: String
    }

    struct Exif: Decodable {
        let make: String?
        let model: String?
    }

    struct Urls: Decodable {
        let regular: String
    }

    struct Location: Decodable {
        let city: String?
        let country: String?
    }
}

Search Results Model

struct UnsplashSearchResult: Decodable {
    let total: Int
    let results: [UnsplashPicture]
    let total_pages: Int
}

API Client

The UnsplashAPI class handles the direct communication with the Unsplash API:

final class UnsplashAPI {

    private let networkManager: Networkable

    /// Initializes a new instance of `UnsplashAPI`.
    /// - Parameter networkManager: An object conforming to `Networkable` that will be used for network operations.
    init(networkManager: Networkable) {
        self.networkManager = networkManager
    }

    func searchPhotos(
        query: String,
        page: Int = 1,
        completion: @escaping (Result<UnsplashSearchResult, NetworkError>) -> Void
    ) {
        guard let endpointURL = UnsplashEndpoint.searchPhotos(
            query: query,
            page: page
        ).endpointURL else {
            completion(.failure(.badURL))
            return
        }

        networkManager.fetch(
            from: endpointURL,
            cachePolicy: .returnCacheDataElseLoad,
            completion: completion
        )
    }

    func fetchPictureDetails(
        pictureId: String,
        completion: @escaping (Result<UnsplashPictureDetails, NetworkError>) -> Void
    ) {
        guard let endpointURL = UnsplashEndpoint.fetchPictureDetails(pictureId: pictureId).endpointURL else {
            completion(.failure(.badURL))
            return
        }

        networkManager.fetch(
            from: endpointURL,
            cachePolicy: .returnCacheDataElseLoad,
            completion: completion
        )
    }
}

Key features of this implementation:

Dependency injection for the network manager
Proper error handling with early returns for invalid URLs
Result type to handle both success and failure cases
Caching policy to improve performance and reduce API calls

Service Layer

We’ve implemented a service layer that abstracts the API implementation details from the rest of the application:

protocol SearchPicturesService {
    func searchPictures(
        query: String,
        page: Int,
        completion: @escaping (Result<PicturesSearchResult, PicturesServiceError>) -> Void
    )
}

final class UnsplashSearchPicturesService: SearchPicturesService {

    private let unsplashAPI = UnsplashAPI(
        networkManager: CombineNetworkManager()
    )

    func searchPictures(
        query: String,
        page: Int = 1,
        completion: @escaping (Result<PicturesSearchResult, PicturesServiceError>) -> Void
    ) {
        unsplashAPI.searchPhotos(query: query, page: page) { result in
            switch result {
            case .success(let searchResults):
                completion(.success(searchResults.toPictureSearchResult()))
            case .failure:
                completion(.failure(.somethingWenWrong))
            }
        }
    }
}

enum PicturesServiceError: Error {
    case somethingWenWrong
}

Benefits of this service layer approach:

Decouples the API implementation from the view models
Makes testing easier with protocol-based design
Simplifies error handling by mapping API errors to domain-specific errors
Transforms API models to application models using mapping functions

2. Understanding Pagination and Infinite Scrolling

What is Pagination?

Pagination is a technique used to divide large sets of data into smaller chunks or “pages.” This is essential for:

Reducing network load and data usage
Improving application performance
Enhancing user experience by loading content progressively

How Pagination Works with Unsplash API

The Unsplash API supports pagination through query parameters:

Request Parameters:
- page: The page number to retrieve (starting at 1)
- Other parameters like query for search terms
Response Data:
- results: Array of photos for the current page
- total: Total number of matching photos
- total_pages: Total number of available pages

As shown in our UnsplashSearchResult model:

struct UnsplashSearchResult: Decodable {
    let total: Int
    let results: [UnsplashPicture]
    let total_pages: Int
}

Implementing Infinite Scrolling

Infinite scrolling is a user interface pattern where new content loads automatically as the user scrolls to the bottom of the view. Here’s how to implement it:

1. Track the Current Page and Loading State

class PhotosViewController: UIViewController {
    private var currentPage = 1
    private var isLoading = false
    private var hasMorePages = true
    private var photos: [UnsplashPicture] = []

    // UI components
    private let collectionView: UICollectionView = // ...
}

2. Detect When the User Is Near the End of the Content

extension PhotosViewController: UICollectionViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        let contentHeight = scrollView.contentSize.height
        let height = scrollView.frame.size.height

        // If we're near the bottom and not already loading
        if offsetY > contentHeight - height - 100 && !isLoading && hasMorePages {
            loadMorePhotos()
        }
    }
}

3. Load More Data When Needed

private func loadMorePhotos() {
    isLoading = true

    // Show loading indicator
    showLoadingIndicator()

    searchPicturesService.searchPictures(query: currentQuery, page: currentPage) { [weak self] result in
        guard let self = self else { return }

        // Hide loading indicator
        self.hideLoadingIndicator()

        switch result {
        case .success(let searchResult):
            // Append new photos to existing array
            self.photos.append(contentsOf: searchResult.pictures)

            // Update pagination state
            self.currentPage += 1
            self.hasMorePages = self.currentPage <= searchResult.totalPages

            // Update UI
            self.collectionView.reloadData()

        case .failure(let error):
            // Handle error
            self.showError(error)
        }

        self.isLoading = false
    }
}

4. Add a Loading Indicator at the Bottom

func showLoadingIndicator() {
    let spinner = UIActivityIndicatorView(style: .medium)
    spinner.startAnimating()
    spinner.frame = CGRect(x: 0, y: 0, width: collectionView.bounds.width, height: 44)

    // Add as footer view if using UITableView
    // tableView.tableFooterView = spinner

    // Or add as a supplementary view if using UICollectionView
    // with a custom layout that supports footers
}

func hideLoadingIndicator() {
    // Remove the spinner when loading is complete
    // tableView.tableFooterView = nil
}

3. Image Download Tasks

Understanding the Image Download Process

Downloading images involves several steps:

Fetching the image data from a URL
Processing the incoming data
Converting the data to an image format
Displaying the image or saving it to local storage
Handling errors and edge cases

Basic Image Download

func downloadImage(from url: URL, completion: @escaping (UIImage?, Error?) -> Void) {
    URLSession.shared.dataTask(with: url) { data, response, error in
        if let error = error {
            completion(nil, error)
            return
        }

        guard let httpResponse = response as? HTTPURLResponse,
              (200...299).contains(httpResponse.statusCode) else {
            completion(nil, NSError(domain: "InvalidResponse", code: 0))
            return
        }

        if let data = data, let image = UIImage(data: data) {
            completion(image, nil)
        } else {
            completion(nil, NSError(domain: "InvalidData", code: 0))
        }
    }.resume()
}

Saving Images to Device Storage

func saveImageToDocuments(_ image: UIImage, withName name: String) -> URL? {
    guard let data = image.jpegData(compressionQuality: 1.0) else { return nil }

    let documentsDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
    let fileURL = documentsDirectory.appendingPathComponent("\(name).jpg")

    do {
        try data.write(to: fileURL)
        return fileURL
    } catch {
        print("Error saving image: \(error)")
        return nil
    }
}

Tracking Download Progress

func downloadImageWithProgress(from url: URL, progress: @escaping (Float) -> Void, completion: @escaping (UIImage?, Error?) -> Void) {
    let session = URLSession(configuration: .default, delegate: nil, delegateQueue: nil)

    let downloadTask = session.downloadTask(with: url) { localURL, response, error in
        if let error = error {
            completion(nil, error)
            return
        }

        guard let httpResponse = response as? HTTPURLResponse,
              (200...299).contains(httpResponse.statusCode),
              let localURL = localURL else {
            completion(nil, NSError(domain: "InvalidResponse", code: 0))
            return
        }

        do {
            let data = try Data(contentsOf: localURL)
            if let image = UIImage(data: data) {
                completion(image, nil)
            } else {
                completion(nil, NSError(domain: "InvalidData", code: 0))
            }
        } catch {
            completion(nil, error)
        }
    }

    // Create an observation for download progress
    let observation = downloadTask.progress.observe(\.fractionCompleted) { observedProgress, _ in
        DispatchQueue.main.async {
            progress(Float(observedProgress.fractionCompleted))
        }
    }

    // Store the observation to prevent it from being deallocated
    // You'll need to store this observation as a property in your class
    self.progressObservation = observation

    downloadTask.resume()
}

4. Homework Assignment

Now it’s your turn to apply what you’ve learned! Complete the following tasks:

Task 1: Implement a Request for Fetching All Images with Pagination

Using our existing architecture, create a function that fetches all images from Unsplash with pagination support.

Requirements:

Create a new endpoint in UnsplashEndpoint for fetching all photos.
Implement the corresponding method in UnsplashAPI.
Add a service method that transforms the API response to your domain model.
Handle error cases appropriately.
Implement a view controller that displays the photos with infinite scrolling.

Task 2: Implement a Request for Fetching an Image Based on ID

Extend the existing UnsplashAPI class to support fetching a single image by its ID.

Requirements:

Use the existing fetchPictureDetails method in the UnsplashAPI class.
Create a view controller to display the detailed information about a photo.
Show all available metadata (photographer, date, location, camera info).
Add a full-screen view option for the image.

Task 3: Implement the Download Functionality

Add the ability to download and save images to the device’s storage.

Requirements:

Create a download manager class that handles downloading images.
Implement progress tracking during downloads.
Save images to the appropriate location in the file system.
Add appropriate error handling.
Request and handle any necessary permissions.

Task 4: Implement Unit Tests

Write comprehensive unit tests for your networking code.

Requirements:

Test the UnsplashAPI class with mock responses.
Test the pagination logic.
Test error handling cases.
Use dependency injection to replace the network layer with a mock for testing.
Achieve at least 80% code coverage for your networking code.

5. Additional Resources

Official Documentation

iOS Roadmap

More Networking

Introduction

1. Connecting to the Unsplash API

Unsplash API Overview

API Configuration

Endpoint Structure

Data Models

Basic Picture Model

Detailed Picture Model

Search Results Model

API Client

Service Layer

2. Understanding Pagination and Infinite Scrolling

What is Pagination?

How Pagination Works with Unsplash API

Implementing Infinite Scrolling

1. Track the Current Page and Loading State

2. Detect When the User Is Near the End of the Content

3. Load More Data When Needed

4. Add a Loading Indicator at the Bottom

3. Image Download Tasks

Understanding the Image Download Process

Basic Image Download

Saving Images to Device Storage

Tracking Download Progress

4. Homework Assignment

Task 1: Implement a Request for Fetching All Images with Pagination

Task 2: Implement a Request for Fetching an Image Based on ID

Task 3: Implement the Download Functionality

Task 4: Implement Unit Tests

5. Additional Resources