После добавления библиотеки Adapty в качестве зависимости в ваш проект FlutterFlow, пора создать флоу, который получает данные пейвола и продуктов Adapty и отображает их на пейволе, разработанном в FlutterFlow.

Сначала нужно получить данные пейвола от Adapty. Начнём с запроса пейвола Adapty, затем связанных с ним продуктов и проверки успешности получения данных. Если всё прошло успешно — отобразим название продукта и цену на странице пейвола. В противном случае покажем сообщение об ошибке.

Прежде чем продолжить, убедитесь, что вы выполнили следующее:

1. Создали хотя бы один пейвол и добавили в него хотя бы один продукт в дашборде Adapty.
2. Создали хотя бы один плейсмент и добавили в него свой пейвол в дашборде Adapty.

Приступим!

Шаг 1.1. Запрос пейвола Adapty

Как уже упоминалось, для отображения данных на пейволе FlutterFlow сначала нужно получить их от Adapty. Первый шаг — получить сам пейвол Adapty. Вот как это сделать:

1. Откройте экран пейвола и перейдите в раздел Actions на правой панели. Там откройте Action Flow Editor.

2. В окне Select Action Trigger выберите On Page Load.

3. Нажмите Add Action. Затем найдите кастомное действие getPaywall и выберите его.

4. В разделе Set Actions Arguments введите реальный ID плейсмента, который вы создали в дашборде Adapty и который включает нужный пейвол. В примере это monthly. Обязательно используйте свой реальный ID плейсмента!

5. Если вы локализовали свой пейвол в дашборде Adapty, вы также можете задать аргумент locale.

6. В поле Action Output Variable Name создайте новую переменную и назовите её getPaywallResult. Она понадобится на следующем шаге для обращения к пейволу Adapty и запроса его продуктов.

Шаг 1.2. Запрос продуктов пейвола Adapty

Отлично! Мы получили пейвол Adapty. Теперь запросим продукты, связанные с ним:

1. Нажмите + под созданным действием и выберите Add Action. Это действие получит продукты пейвола Adapty. Для этого найдите и выберите getPaywallProducts.

2. В разделе Set Actions Arguments выберите созданную ранее переменную getPaywallResult.

3. Заполните остальные поля следующим образом:

• Available Options: Data Structured Field
• Select Field: value
• Available Options: без изменений

4. Нажмите Confirm.
5. В поле Action Output Variable Name создайте новую переменную и назовите её getPaywallProductsResult. С её помощью мы свяжем разработанный в FlutterFlow пейвол с данными пейвола Adapty.

Шаг 1.3. Добавление проверки успешной загрузки пейвола

Прежде чем двигаться дальше, проверим, что пейвол Adapty был получен успешно. Если да — обновим пейвол данными продуктов. Если нет — обработаем ошибку. Вот как добавить эту проверку:

1. Нажмите + и выберите Add Conditional.

2. В разделе Action Output выберите созданную ранее переменную результата действия (getPaywallResult в нашем примере).

3. Чтобы проверить, что пейвол Adapty получен, убедитесь в наличии поля со значением. Заполните поля следующим образом:

• Available Options: Has Field
• Field (AdaptyGetPaywallResult): value

4. Нажмите Confirm, чтобы завершить создание условия.

Шаг 1.4. Логирование просмотра пейвола

Чтобы аналитика Adapty фиксировала просмотры пейвола, нужно залогировать это событие. Без этого шага просмотр не будет учтён в аналитике. Вот как это сделать:

1. Нажмите + под меткой TRUE и выберите Add Action.
2. В поле Select Action найдите и выберите logShowPaywall.

3. Нажмите Value в области Set Action Arguments и выберите созданную переменную getPaywallResult. Эта переменная содержит данные пейвола.
4. Заполните поля следующим образом:

• Available Options: Data Structured Field
• Select Field: value

5. Нажмите Confirm.

Шаг 1.5. Отображение ошибки при неполучении пейвола

Если пейвол Adapty не получен, необходимо обработать ошибку. В этом примере мы просто покажем диалоговое окно с сообщением.

1. Добавьте действие Informational Dialog к метке FALSE.

2. В поле Title введите текст, который хотите видеть в качестве заголовка диалога. В этом примере — Error.

3. Нажмите Value в поле Message.

4. Заполните поля следующим образом:

• Set Variable: переменная getPaywallProductResult, которую мы создали
• Available Options: Data Structure Field
• Select Field: error
• Available Options: Data Structure Field
• Select Field: errorMessage

5. Нажмите Confirm.
6. Добавьте действие Terminate action во флоу FALSE.

7. Нажмите Close в правом верхнем углу.

Поздравляем! Вы успешно получили данные продуктов. Теперь давайте свяжем их с пейволом, разработанным в FlutterFlow.