Разработка

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

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

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

2 года назад

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")
    }
}

​x
 
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)
    }
}

xxxxxxxxxx
 
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)
    }
}

xxxxxxxxxx
 
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)

xxxxxxxxxx
 
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())
    }
}

xxxxxxxxxx
 
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()
        }
    }
}

xxxxxxxxxx
 
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)
        }
    }
}

xxxxxxxxxx
 
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)
        }
    }
}

xxxxxxxxxx
 
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 предоставляет нам для создания пейволов в наших приложениях. Надеюсь, вам понравился этот пост. Спасибо, что прочитали, и до новых встреч!