Разработка

Осваиваем StoreKit 2: ProductView и StoreView в SwiftUI

StoreKit 2 представляет дефолтные представления SwiftUI, позволяющие нам быстро создавать пейволы или экраны для магазинов цифровых товаров.

Опубликовано

8 месяцев назад

30.08.2023

Автор:

AppTractor

В прошлой статье мы познакомились с основами StoreKit 2 и узнали, как легко мы можем монетизировать наши приложения. В этой мы продолжим тему, узнав о представлениях StoreKit в SwiftUI. StoreKit 2 представляет дефолтные представления SwiftUI, позволяющие нам быстро создавать пейволы или экраны для магазинов цифровых товаров.

StoreKit 2 предоставляет тип ProductView, позволяющий легко отображать и обрабатывать покупки в приложении для одного продукта. Для этого достаточно разместить в иерархии представлений экземпляр ProductView с определенным идентификатором товара.

struct ContentView: View {
    var body: some View {
        ProductView(id: "55667744")
    }
}

Как видно из приведенного примера, мы можем вызвать экземпляр ProductView одной строкой кода, но за этой строкой скрывается вся сложность загрузки и покупки товаров в App Store. StoreKit предоставляет нам набор стилей для отображения продукта в различных видах. Мы можем использовать модификатор вида productViewStyle, чтобы использовать определенный стиль. По умолчанию StoreKit использует автоматический стиль, но мы можем использовать стили large, regular или compact.

struct ContentView: View {
    var body: some View {
        ProductView(id: "55667744")
            .productViewStyle(.compact)
    }
}

Можно также включить показ изображения, если оно загружено на серверы App Store. Инициализатор ProductView имеет еще один параметр, называемый prefersPromotionalIcon. Его можно использовать для отображения иконки продвигаемого товара.

struct ContentView: View {
    var body: some View {
        ProductView(id: "55667744", prefersPromotionalIcon: true)
    }
}

Если вместо изображения для товара требуется нарисовать пользовательское представление SwiftUI, то это возможно с помощью перегрузки другого инициализатора ProductView.

ProductView(id: "55667744") { _ in
    Image(systemName: "crown")
        .resizable()
        .scaledToFit()
    } placeholderIcon: {
        ProgressView()
    }
    .productViewStyle(.large)

Как видно из приведенного примера, можно обрабатывать различные состояния загрузки рекламного изображения и при необходимости заменять его собственным представлением SwiftUI.

Другой вариант — построить полностью индивидуальное представление товара, введя собственный стиль. В этом случае мы должны создать тип, соответствующий протоколу ProductViewStyle.

struct CustomProductStyle: ProductViewStyle {
    func makeBody(configuration: Configuration) -> some View {
        switch configuration.state {
        case .loading:
            ProgressView()
        case .success(let product):
            Button {
                configuration.purchase()
            } label: {
                VStack {
                    Text(verbatim: product.displayName)
                        .font(.headline)
                    Text(verbatim: product.displayPrice)
                }
            }
            .buttonStyle(.borderedProminent)
        default:
            Text("Something goes wrong...")
        }
    }
}

struct ContentView: View {
    var body: some View {
        ProductView(id: "55667744")
            .productViewStyle(CustomProductStyle())
    }
}

Тут мы определяем тип CustomProductStyle в соответствии с протоколом ProductViewStyle. Протокол ProductViewStyle имеет единственное требование — это функция makeBody. Функция makeBody имеет параметр типа ProductViewStyleConfiguration, предоставляющий нам всю необходимую информацию о товаре, состоянии загрузки и функциональности покупки.

Мы можем использовать различные стили продукта для построения нужной нам схемы. Давайте сделаем пейвол, отображающий варианты подписки и пожизненных покупок в приложении.

struct ContentView: View {
    var body: some View {
        ScrollView {
            ProductView(id: "55667744") { _ in
                Image(systemName: "crown")
                    .resizable()
                    .scaledToFit()
            } placeholderIcon: {
                ProgressView()
            }
            .productViewStyle(.large)
            
            VStack(spacing: 16) {
                ForEach(["123456789", "987654321"], id: \.self) { id in
                    ProductView(id: id)
                        .productViewStyle(.compact)
                }
            }
            .padding()
        }
    }
}

Как видите, мы реализуем различные варианты отображения для списка доступных покупок всего в нескольких строках кода. А созданный нами пользовательский интерфейс поддерживает покупки и автоматически отслеживает возврат средств. Но представления StoreKit в SwiftUI на этом не заканчиваются. Он также дает нам представление StoreView, отображающее коллекцию товаров в различных макетах в зависимости от доступного пространства.

struct ContentView: View {
    var body: some View {
        ScrollView {
            ProductView(id: "55667744") { _ in
                Image(systemName: "crown")
                    .resizable()
                    .scaledToFit()
            } placeholderIcon: {
                ProgressView()
            }
            .productViewStyle(.large)
            
            StoreView(
                ids: [
                    "123456789",
                    "987654321"
                ]
            )
            .productViewStyle(.compact)
        }
    }
}

StoreView отображает макет коллекции товаров. Например, в tvOS StoreView использует сетку для отображения товаров. Вы можете настроить внешний вид продуктов, отображаемых в StoreView, применив к нему модификатор вида productViewStyle.

struct ContentView: View {
    var body: some View {
        ScrollView {
            ProductView(id: "55667744") { _ in
                Image(systemName: "crown")
                    .resizable()
                    .scaledToFit()
            } placeholderIcon: {
                ProgressView()
            }
            .productViewStyle(.large)
            
            StoreView(
                ids: [
                    "123456789",
                    "987654321"
                ]
            )
            .productViewStyle(.compact)
            .storeButton(.visible, for: .restorePurchases)
        }
    }
}

Кроме того, StoreView предоставляет набор кнопок, таких как кнопки восстановления транзакций или отмены, прямо “из коробки”. Вы можете управлять видимостью конкретной кнопки с помощью модификатора вида storeButton.

Сегодня мы познакомились с представлениями SwiftUI, которые StoreKit 2 предоставляет нам для создания пейволов в наших приложениях. Надеюсь, вам понравился этот пост. Спасибо, что прочитали, и до новых встреч!