Một flow nhiều màn hình trong Flow Builder là một chuỗi các màn hình được kết nối bằng các hành động điều hướng. Flow có thể chạy tuyến tính, hoặc phân nhánh dựa trên dữ liệu đầu vào của người dùng thu thập ở màn hình trước. Hướng dẫn này đi qua toàn bộ quy trình — tạo màn hình, xây dựng nội dung, kết nối điều hướng và thêm phân nhánh có điều kiện — sử dụng onboarding bốn màn hình làm ví dụ minh họa.

Ví dụ sử dụng:

• Nhập tên để lưu tên người dùng thành biến dùng cho cá nhân hóa.
• Quiz chọn một đáp án mà câu trả lời sẽ quyết định màn hình tiếp theo người dùng thấy.
• Hai nhánh với nội dung được tùy chỉnh riêng cho từng nhóm đối tượng.
• Paywall là màn hình cuối cùng.

Mẫu này áp dụng cho bất kỳ flow nào cá nhân hóa nội dung dựa trên dữ liệu người dùng nhập vào.

Bạn thích xem video? Hướng dẫn quickstart này đi qua cùng một quy trình từ đầu đến cuối:

Trước khi bắt đầu

• Tạo sản phẩm trong Adapty Dashboard. Flow ví dụ sử dụng hai sản phẩm — gói đăng ký Hàng năm và Hàng tháng.
• Kết nối Adapty với App Store và Google Play.

1. Thiết lập style dùng lại

Style dùng lại cho phép bạn áp dụng typography và màu sắc nhất quán trên mọi màn hình chỉ với một cú nhấp. Style màu sắc có biến thể Light và Dark, để flow tự động hỗ trợ cả hai giao diện.

Để xem hướng dẫn đầy đủ, xem Tùy chỉnh element — Style dùng lại.

Để thiết lập style:

1. Trong bảng bên trái, mở bảng Styles .
2. Ở tab Colors, nhấp Create style và thêm các màu bạn sẽ dùng lại. Với mỗi màu, chọn giá trị Light, chuyển sang tab Dark và chọn giá trị Dark.

3. Ở tab Text, nhấp vào một style hiện có để chỉnh font, độ đậm và kích thước, hoặc nhấp Create style để thêm preset tùy chỉnh.

2. Tạo các màn hình

Một flow là một chuỗi các màn hình. Cấu hình màn hình đầu tiên với nền tảng chung — bố cục, nền và safe area — sau đó nhân bản nó cho các màn hình còn lại. Như vậy, mọi màn hình đều có cùng nền tảng và bạn chỉ cần thiết lập một lần.

Để tìm hiểu thêm về quản lý màn hình, xem Màn hình và Layer — Quản lý màn hình.

Để thiết lập các màn hình:

1. Nhấp vào vùng trống trên canvas của màn hình đầu tiên để mở cài đặt màn hình.
2. Trong System UI, tắt Safe area để nền và các element căn theo cạnh có thể kéo dài đến mép màn hình.
3. Trong Fill, chọn loại nền và cấu hình nó — ví dụ: Image hiển thị phía sau mọi màn hình của flow.
4. Trong Layout, đặt hướng thành Vertical và chọn cách phân bổ phù hợp với thiết kế của bạn.

5. Trong phần Screens của bảng bên trái, nhấp menu ba chấm trên màn hình đầu tiên và chọn Duplicate. Lặp lại cho đến khi có bốn màn hình — nhánh thứ hai sẽ được thêm sau bằng cách nhân bản từ nhánh đầu tiên.
6. Đổi tên mỗi màn hình theo vai trò của nó — trong ví dụ: Welcome, Quiz, Rock path và Paywall.

3. Xây dựng màn hình giới thiệu

Màn hình đầu tiên thường tạo ấn tượng ban đầu — tiêu đề, danh sách tính năng và lời kêu gọi hành động dẫn vào phần còn lại của flow. Trong ví dụ, đây là màn hình Welcome.

Nhấp màn hình Welcome trong bảng Screens, sau đó thêm các element:

1. Thêm ảnh chính. Nhấp + > Media > Image, tải ảnh lên và điều chỉnh margin nếu cần.

2. Thêm tiêu đề: nhấp + > Text, chọn style heading từ các text style đã lưu, và chỉnh trường Content.

3. Thêm danh sách tính năng. Nhấp + > List > Icon Cards, sau đó chỉnh icon và nhãn trong mỗi card.

4. Thêm nút điều hướng chính ở phía dưới. Nút này sẽ được gán hành động ở bước điều hướng.

4. Xây dựng màn hình nhập liệu và quiz

Màn hình thứ hai thu thập dữ liệu từ người dùng. Trong ví dụ, nó hỏi tên và một câu trả lời chọn một quyết định người dùng sẽ thấy nhánh nào tiếp theo.

Để tìm hiểu thêm về nhập liệu và quiz, xem Nhập liệu và form và Khảo sát và quiz.

Nhấp màn hình Quiz trong bảng Screens, sau đó thêm các element. Mỗi nhóm trên màn hình — intro, câu hỏi + nhập liệu, câu hỏi + quiz — nằm trong Vertical Container riêng để các element liên quan gắn kết trực quan.

1. Thêm tiêu đề và nội dung intro. Nhấp + > Text > H1 cho tiêu đề và + > Text > Body cho phần nội dung hỗ trợ.
2. Nhóm phần intro. Nhấp + > Layout > Vertical Container, kéo container mới lên đầu cây layer, sau đó kéo H1 và body vào bên trong.

3. Thêm câu hỏi đầu tiên và nhập liệu. Nhấp + > Text cho caption câu hỏi, sau đó nhấp + > Inputs > Text cho trường nhập.
4. Đặt Element ID của trường nhập trong tab Design — trong ví dụ là name. Điều này giúp giá trị được lưu thành biến mà các màn hình khác có thể tham chiếu.

5. Nhóm caption và trường nhập trong Vertical Container tương tự như phần intro.
6. Thêm câu hỏi thứ hai và quiz. Nhấp + > Text cho caption, sau đó nhấp + > Quiz và chọn preset bố cục như Icon Options. Cấu hình các lựa chọn — trong ví dụ là Rock và Hip hop.
7. Nhóm caption và quiz trong Vertical Container tương tự.
8. Đặt ID cho các lựa chọn. Chọn từng lựa chọn quiz, mở tab Interactions, và đặt Element ID của nó. Các ID này được tham chiếu trong điều hướng có điều kiện sau này.

9. Chuyển quiz sang chọn một: nhấp vùng trống trên canvas để mở Screen settings, kéo xuống Selectable Groups, nhấp tên nhóm quiz, và đặt loại thành Single choice.

10. Thêm nút chính ở phía dưới — đây là nút Next kích hoạt phân nhánh.

5. Xây dựng nhánh đầu tiên

Mỗi màn hình nhánh tùy chỉnh nội dung cho một nhóm đối tượng. Trong ví dụ, nhánh Rock có nội dung tập trung vào rock — playlist, nghệ sĩ và gợi ý.

Để tìm hiểu thêm về biến, xem Biến.

Để xây dựng màn hình:

1. Trong bảng Screens, nhấp màn hình Rock path.
2. Thêm tiêu đề. Đặt con trỏ vào trường Content ở vị trí muốn cá nhân hóa, nhấp icon biến , và mở tab Elements. Chọn màn hình chứa trường nhập — trong ví dụ là Quiz — sau đó chọn biến giá trị của trường nhập. Bộ chọn sẽ tự động phân giải thành <elementId>.value — trong ví dụ là name.value. Khi chạy, tiêu đề sẽ hiển thị nội dung người dùng đã nhập.

3. Thêm nội dung body dưới dạng các element text bổ sung, được điều chỉnh cho nhóm đối tượng của nhánh này.
4. Thêm nút chính ở phía dưới.

6. Xây dựng nhánh thứ hai

Các màn hình nhánh thường có cùng bố cục — chỉ thay đổi nội dung. Nhân bản màn hình nhánh đầu tiên và cập nhật nội dung.

Để nhân bản và cập nhật:

1. Trong bảng Screens, chọn màn hình nhánh đầu tiên và nhấn ⌘D / Ctrl+D để nhân bản. Bản sao xuất hiện ở cuối danh sách màn hình.
2. Đổi tên bản sao — trong ví dụ là Hip hop path — và kéo nó đến đúng vị trí trong danh sách màn hình, để nó nằm cạnh màn hình gốc.

3. Cập nhật nội dung body cho nhóm đối tượng kia. Tiêu đề cá nhân hóa vẫn hoạt động — biến được giữ nguyên.

7. Xây dựng paywall

Màn hình cuối cùng là paywall — nơi người dùng có thể đăng ký. Để xem hướng dẫn chi tiết hơn về cơ chế paywall, xem Tạo màn hình paywall cơ bản. Phiên bản dưới đây tóm tắt hướng dẫn đó.

Nhấp màn hình Paywall trong bảng Screens, sau đó thêm các element:

1. Thêm Horizontal Container ở trên cùng và thêm nút Close vào bên trong. Preset Close đã được cấu hình sẵn.
2. Thêm ảnh chính, tiêu đề (dùng cùng biến cá nhân hóa như trên các màn hình nhánh), và subheading làm nội dung hỗ trợ.

3. Thêm sản phẩm: nhấp + > Products và chọn Vertical List. Gán từng card một sản phẩm từ dropdown trong tab Design.
4. Nhấp card của sản phẩm mặc định và bật Set as default product để nó được chọn sẵn khi màn hình tải.

5. Thêm nút mua. Nhấp + > Buttons và chọn preset. Trong tab Interactions, nhấp Add trigger > On tap > Add action và đặt Action thành Purchase với Product là products.selectedProduct.

6. Thêm template Button > Links vào màn hình. Nó bao gồm ba link ở footer: Restore Purchases, Terms of Use và Privacy Policy.

   Link Restore đã được cấu hình sẵn. Để cấu hình các link còn lại, chọn element nút, mở tab Interactions, và đặt đích cho hành động Open URL.

8. Kết nối điều hướng giữa các màn hình

Các màn hình không tự động kết nối với nhau. Dùng trigger On tap và hành động Navigate to để kết nối nút chính của mỗi màn hình với màn hình tiếp theo. Màn hình phân nhánh dựa trên dữ liệu người dùng sẽ dùng Conditional action thay thế.

Để tìm hiểu thêm về điều hướng và hành động có điều kiện, xem Điều hướng và tương tác và Hành động — Hành động có điều kiện.

Để kết nối điều hướng cho flow ví dụ:

1. Điều hướng tĩnh từ màn hình giới thiệu. Mở màn hình Welcome, chọn nút chính, và chuyển sang tab Interactions. Nhấp Add trigger > On tap > Add action, đặt Action thành Navigate to, và chọn màn hình tiếp theo — trong ví dụ là màn hình Quiz.

2. Điều hướng có điều kiện từ quiz. Mở màn hình Quiz, chọn nút Next, và thêm trigger On tap với Conditional action. Thiết lập quy tắc IF/ELSE:
   • Trong bộ chọn biến, mở tab Elements, chọn màn hình Quiz, và chọn quiz.selectedOptionId.
   • Dùng toán tử Equals và so sánh với ID của một trong các lựa chọn — trong ví dụ là lựa chọn Rock.
   • IF điều kiện khớp, kích hoạt Navigate to và chọn màn hình nhánh đầu tiên.
   • ELSE, kích hoạt Navigate to và chọn màn hình nhánh thứ hai.

3. Điều hướng tĩnh từ mỗi nhánh đến paywall. Lặp lại mẫu từ bước 1 trên mỗi màn hình nhánh, với paywall là đích đến.

Các bước tiếp theo

• Lưu và xuất bản flow.
• Thêm flow vào placement để bắt đầu hiển thị cho người dùng.
• Để có flow riêng cho từng đối tượng (thay vì phân nhánh trong flow), hãy tạo phân khúc đối tượng và gán các flow khác nhau trên trang Placement.