Sau khi thêm thư viện Adapty làm dependency cho dự án FlutterFlow, đã đến lúc xây dựng flow lấy dữ liệu paywall và sản phẩm từ Adapty rồi hiển thị trên paywall bạn đã thiết kế trong FlutterFlow.

Trước tiên, chúng ta cần nhận dữ liệu paywall từ Adapty. Chúng ta sẽ bắt đầu bằng cách yêu cầu paywall của Adapty, sau đó lấy các sản phẩm liên quan, và cuối cùng kiểm tra xem dữ liệu đã được nhận thành công chưa. Nếu thành công, chúng ta sẽ hiển thị tiêu đề sản phẩm và giá trên trang paywall. Ngược lại, chúng ta sẽ hiển thị thông báo lỗi.

Trước khi tiếp tục, hãy đảm bảo bạn đã hoàn thành các bước sau:

1. Tạo ít nhất một paywall và thêm ít nhất một sản phẩm vào đó trong Adapty Dashboard.
2. Tạo ít nhất một placement và thêm paywall của bạn vào đó trong Adapty Dashboard.

Hãy bắt đầu!

Bước 1.1. Yêu cầu paywall từ Adapty

Như đã đề cập, để hiển thị dữ liệu trên paywall FlutterFlow, trước tiên chúng ta cần lấy dữ liệu đó từ Adapty. Bước đầu tiên là lấy chính paywall của Adapty. Đây là cách thực hiện:

1. Mở màn hình paywall của bạn và chuyển sang phần Actions ở thanh bên phải. Tại đó, mở Action Flow Editor.

2. Trong cửa sổ Select Action Trigger, chọn On Page Load.

3. Nhấn Add Action. Sau đó, tìm kiếm custom action getPaywall và chọn nó.

4. Trong phần Set Actions Arguments, nhập ID thực của placement bạn đã tạo trong Adapty Dashboard có chứa paywall. Trong ví dụ này là monthly. Hãy chắc chắn sử dụng ID placement thực của bạn!

5. Nếu bạn đã bản địa hóa paywall của mình trong Adapty dashboard, bạn cũng có thể thiết lập tham số locale.

6. Trong Action Output Variable Name, tạo một biến mới và đặt tên là getPaywallResult. Chúng ta sẽ dùng biến này ở bước tiếp theo để tham chiếu đến paywall Adapty và yêu cầu các sản phẩm của nó.

Bước 1.2. Yêu cầu sản phẩm từ paywall Adapty

Tuyệt! Chúng ta đã lấy được paywall Adapty. Bây giờ, hãy lấy các sản phẩm liên quan đến paywall này:

1. Nhấn + bên dưới action vừa tạo và chọn Add Action. Action này sẽ nhận các sản phẩm từ paywall Adapty. Để làm điều này, tìm kiếm và chọn getPaywallProducts.

2. Trong phần Set Actions Arguments, chọn biến getPaywallResult đã tạo trước đó.

3. Điền vào các trường khác như sau:

• Available Options: Data Structured Field
• Select Field: value
• Available Options: No further changes

4. Nhấn Confirm.
5. Trong Action Output Variable Name, tạo một biến mới và đặt tên là getPaywallProductsResult. Chúng ta sẽ dùng biến này để liên kết paywall bạn đã thiết kế trong FlutterFlow với dữ liệu paywall Adapty.

Bước 1.3. Thêm kiểm tra xem paywall đã tải thành công chưa

Trước khi tiếp tục, hãy xác minh rằng paywall Adapty đã được nhận thành công. Nếu có, chúng ta có thể cập nhật paywall với dữ liệu sản phẩm. Nếu không, chúng ta sẽ xử lý lỗi. Đây là cách thêm kiểm tra:

1. Nhấn + và nhấn Add Conditional.

2. Trong phần Action Output, chọn biến output của action đã tạo trước đó (getPaywallResult trong ví dụ của chúng ta).

3. Để xác minh rằng paywall Adapty đã được nhận, kiểm tra sự hiện diện của một trường có giá trị. Điền vào các trường như sau:

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

4. Nhấn Confirm để hoàn tất điều kiện.

Bước 1.4. Ghi log lượt xem paywall

Để đảm bảo analytics của Adapty theo dõi lượt xem paywall, chúng ta cần ghi log sự kiện này. Nếu không có bước này, lượt xem sẽ không được tính trong analytics. Đây là cách thực hiện:

1. Nhấn + bên dưới nhãn TRUE và nhấn Add Action.
2. Trong trường Select Action, tìm kiếm và chọn logShowPaywall.

3. Nhấn Value trong khu vực Set Action Arguments và chọn biến getPaywallResult chúng ta đã tạo. Biến này chứa dữ liệu paywall.
4. Điền vào các trường như sau:

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

5. Nhấn Confirm.

Bước 1.5. Hiển thị lỗi nếu không nhận được paywall

Nếu paywall Adapty không được nhận, bạn cần xử lý lỗi. Trong ví dụ này, chúng ta sẽ chỉ đơn giản hiển thị một thông báo cảnh báo.

1. Thêm action Informational Dialog vào nhãn FALSE.

2. Trong trường Title, thêm văn bản bạn muốn hiển thị làm tiêu đề dialog. Trong ví dụ này là Error.

3. Nhấn Value trong ô Message.

4. Điền vào các trường như sau:

• Set Variable: biến getPaywallProductResult chúng ta đã tạo
• Available Options: Data Structure Field
• Select Field: error
• Available Options: Data Structure Field
• Select Field: errorMessage

5. Nhấn Confirm.
6. Thêm action Terminate vào flow FALSE.

7. Nhấn Close ở góc trên bên phải.

Chúc mừng! Bạn đã nhận thành công dữ liệu sản phẩm. Bây giờ, hãy liên kết nó với paywall bạn đã thiết kế trong FlutterFlow.