Интеграция Varioqub UI SDK

Varioqub UI SDK позволяет добавлять интерактивные виджеты и управлять ими через эксперименты Varioqub.

Основные функциональные характеристики

  • Отображение динамических UI-компонентов, созданных с помощью DivKit
  • Управление содержимым виджетов удаленно через интерфейс Varioqub
  • A/B тестирование UI-элементов
  • Отображение виджетов как через флаги конфигурации, так и по прямым URL

Требования к системе

  • iOS версия 13 и выше.
  • Xcode 14.1 и выше.

Шаг 1. Подключение библиотеки в проект

Varioqub UI SDK можно подключить несколькими способами. Выберите удобный способ подключения — через CocoaPods или Swift Package Manager.

Откройте файл Podfile в вашем проекте и добавьте туда зависимость:

pod 'VarioqubUI', '~> 0.8'

Затем выполните команду для установки:

pod install

Для подключения библиотеки, добавьте следующие зависимости в файл Package.swift вашего проекта:

targets: [
  .target(
    name: "MyTarget",
    dependencies: [
      .product(name: "VarioqubUI", package: "varioqub-sdk-ui-ios"),
    ]
  )
]
dependencies: [
  .package(url: "https://github.com/appmetrica/varioqub-sdk-ui-ios", "0.8"..<"2.0.0"),
]

Шаг 2. Инициализация Varioqub

Прежде чем использовать UI-компоненты, необходимо инициализировать сам Varioqub SDK.

Следуйте инструкциям из статьи Интеграция SDK.

Шаг 3. Использование Varioqub UI с SwiftUI

SwiftUI — фреймворк для создания пользовательских интерфейсов. Varioqub UI SDK интегрируется с SwiftUI с помощью компонента VarioqubSwiftUIView.ViewModel.

Создаем кастомный виджет

import Varioqub
import VarioqubUI
import DivKit

struct CustomContentView: View {
    
    // VarioqubSwiftUIView.ViewModel управляет состоянием виджета
    @ObservableObject var varioqubUIVM: VarioqubSwiftUIView.ViewModel

    init(varioqubUIVM: VarioqubSwiftUIView.ViewModel) {
        self.varioqubUIVM = varioqubUIVM
    }

    var body: some View {
        VarioqubSwiftUIView(viewModel: varioqubUIVM)
    }
}

Настраиваем VarioqubSwiftUIView.ViewModel и показываем виджет

import DivKit
import VarioqubUI

// Создаем флаг для виджета
let widgetFlag = VarioqubFlag(rawValue: "widget_flag")

// Настраиваем DivKit компоненты
let divComponent = DivKitComponents()

// Создаем VarioqubSwiftUIView.ViewModel для управления виджетом
let varioqubUIVM = VarioqubSwiftUIView.ViewModel(
    divComponents: divComponents,
    cardId: DivCardID(rawValue: "div_id") // Уникальный ID карточки
)

// Показываем виджет пользователю
VarioqubUI.shared.applyWidget(
    widgetName: widgetFlag,           // Имя флага из конфигурации
    widgetApplier: varioqubUIVM,      // Созданная VarioqubSwiftUIView.ViewModel
    extraParams: nil                  // Дополнительные параметры (опционально)
)

Показываем виджет по URL с дополнительными параметрами

Иногда виджет нужно показать не через флаг конфигурации, а по прямой ссылке. Это удобно для deep linking или показа контента по внешним ссылкам:

// Функция для показа виджета по URL
func openWidgetFromUrl(url: URL, isEncrypted: Bool) {
    varioqubUIVM.applyWidget(
        widgetName: widgetFlag,
        widgetApplier: varioqubUIVM,
        url: url,
        paramName: "url_query_parameter", // Имя параметра в URL для данных виджета
        isEncrypted: isEncrypted          // Зашифрованы ли данные в URL
    )
}

// Пример 1: Передаем зашифрованные данные через URL

// JSON с дополнительными параметрами
let urlQueryParameter = "{ \"extra1\": \"value1\" }"

// Кодируем в Base64
let urlQueryParameterBase64 = urlQueryParameter.data(using: .utf8)?.base64EncodedString() ?? ""

// Формируем URL и открываем виджет
openWidgetFromUrl(
    url: URL(string: "https://example.com/widget?url_query_parameter=\(urlQueryParameterBase64)")!,
    isEncrypted: true
)

// Пример 2: Передаем открытые данные через URLComponents

// Создаем URL с помощью URLComponents
let urlComponents = URLComponents(string: "https://example.com/widget")
urlComponents.queryItems = [ URLQueryItem(name: "url_query_parameter", value: urlQueryParameter) ]

// Открываем без шифрования
openWidgetFromUrl(url: urlComponents.url, isEncrypted: false)

Шаг 4. Использование Varioqub UI с UIKit

UIKit — фреймворк для разработки графического интерфейса пользователя в приложениях для iOS.

Если вы используете UIKit, Varioqub UI SDK также предоставляет удобные инструменты для интеграции.

import Varioqub
import VarioqubUI

// Создаем флаг для виджета
let widgetFlag = VarioqubFlag(rawValue: "widget_flag")

class CustomViewController: UIViewController {

    let varioqubUIVM = VarioqubSwiftUIView.ViewModel(
        divComponents: divComponent,
        cardId: DivCardID(rawValue: "div_id")
    )

    @IBOutlet private var parentView: UIView!

    // Создаем специальный адаптер для UIKit
    private lazy var varioqubUIKitApplier = VarioqubUIKitViewApplier(
        parentView: parentView,               // Родительский контейнер для виджета
        divComponents: DivKitComponents(),    // Компоненты для рендеринга
        cardId: DivCardID(rawValue: "div_id") // ID карточки
    ) 

    override func viewDidLoad() {
        super.viewDidLoad()

        variqubUIKitApplier.applyWidget(
            widgetName: widgetFlag,
            widgetApplier: varioqubUIKitApplier,
            extraParams: nil
        )
    }
    // Функция для показа виджета по URL
    func openWidgetFromUrl(url: URL, isEncrypted: Bool) {
        VarioqubUI.shared.applyWidget(
            widgetName: widgetFlag,
            widgetApplier: varioqubUIKitApplier,
            url: url,
            paramName: "url_query_parameter",
            isEncrypted: isEncrypted 
        )
    }

}

Показываем виджет по URL с дополнительными параметрами

// Зашифрованные параметры
let urlQueryParameter = "{ \"extra1\": \"value1\" }"
let urlQueryParameterBase64 = urlQueryParameter.data(using: .utf8)?.base64EncodedString() ?? ""

viewController.openWidgetFromUrl(url: URL(string: "https://example.com/widget?url_query_parameter=\(urlQueryParameterBase64)")!, isEncrypted: true)

// Незашифрованные параметры
let urlComponents = URLComponents(string: "https://example.com/widget")
urlComponents.queryItems = [ URLQueryItem(name: "url_query_parameter", value: urlQueryParameter) ]
viewController.openWidgetFromUrl(url: urlComponents.url, isEncrypted: false)
Предыдущая
Интеграция SDK для библиотек
Следующая
Миграция на Varioqub 1.0.1