Bài 04 · Xử lý popup tùy chọn

Có ngày popup phần thưởng chào bạn, có ngày không. Flow của bạn phải đúng trong cả hai trường hợp.

Bài toán

Ứng dụng thật hay chen ngang: thưởng hằng ngày, ưu đãi, thông báo. Chúng xuất hiện thi thoảng. Automation nào mặc định popup luôn có sẽ hỏng vào ngày nó vắng; mặc định nó không bao giờ có sẽ hỏng vào ngày nó hiện.

Practice App làm điều này tái hiện được: dashboard.html?popup=1 hiện popup phần thưởng, dashboard.html trơn thì không. Một flow, hai thực tại.

Bạn sẽ học được

• Rẽ nhánh nơi cả hai nhánh đều là thành công.
• Dùng timeout phát hiện ngắn như một câu hỏi, không phải một sự chờ đợi.
• Hợp nhánh lại để phần việc chính chỉ tồn tại một lần.
• Tự tạo cả hai trạng thái kiểm thử theo ý muốn.

Trước khi bắt đầu

• Hoàn thành Bài 03 — bài này dùng lại kỹ năng bắt template của nó.

Flow

Badge đánh số node theo thứ tự đọc, khớp phần Dựng flow. Để ý hình dạng: phép phát hiện tách nhánh, nhánh có popup đóng nó rồi lắng, và cả hai đường nhập lại đúng một node tiếp diễn — một flow, cả hai trạng thái.

Chú ý hình dạng: một ngã ba hợp lại. Phần việc thật (3. Carry on) tồn tại một lần — cả hai nhánh đổ về nó.

Dựng flow

1. Flow mới. Thêm Find Image tên 1. Is the reward popup showing? với template ngôi sao của popup (bắt khi đang mở ?popup=1). Timeout 2000 ms — ngắn có chủ đích.
2. Thêm Click tên 2a. Close it, vùng vẽ quanh nút Close của popup.
3. Thêm Wait tên 3a. Let it close, 600 ms, lý do close animation.
4. Thêm Click tên 3. Carry on with the real work, vùng trên nút Collect.
5. Một Stop: success, thông điệp Handled both states.
6. Nối: Success của câu hỏi → Close → Wait → Carry on; Failure của câu hỏi → thẳng Carry on. Carry on → Stop.
7. Save, Auto Layout.

Vì sao dùng từng node

Node	Vai trò	Ghi chú
Find Image (2000 ms)	Hỏi "nó có ở đây ngay lúc này không?"	Timeout ngắn: bạn không chờ nó đến
Click Close + Wait	Đường vòng chỉ-khi-có-popup	Bước chờ chặn cú chạm sau đọc khung hình đang đóng dở
Click Collect	Phần việc thật	Tồn tại một lần, sau điểm hợp
Một Stop	Hai đường kết thúc như nhau	Vì cả hai đường đều đúng như nhau

Timeout chính là quyết định thiết kế. Ở Bài 03, timeout nghĩa là "cho nó thời gian xuất hiện". Ở đây nó nghĩa là "nhìn một cái, ngắn thôi". Timeout 30 giây trên node này sẽ tốn 30 giây mỗi ngày không có popup — flow vẫn chạy đúng, và lãng phí nửa phút mỗi ngày. Timeout mã hóa ý định.

Quy ước đặt tên nhánh

Cách đánh số 2a / 3a đánh dấu đường vòng; số trơn đánh dấu đường chính. Trên canvas 20 node, quy ước này cho người đọc dựng lại cấu trúc chỉ từ tên node.

Chạy thử

Kiểm cả hai thực tại:

• Có popup — mở dashboard.html?popup=1, chạy: khớp (~300 ms) → Close → chờ → Collect → success.
• Không có — mở dashboard.html trơn, chạy: poll 2 giây, không khớp → thẳng Collect → success.

Cùng flow, cùng kết thúc, khác đường đi. Xem nhật ký chạy: bạn thấy mỗi lần chạy đi đường nào qua danh sách node đã thực thi.

Best practices

• Timeout ngắn cho phần tử tùy chọn — 1500–2500 ms. Bạn đang hỏi, không phải đợi.
• Hợp nhánh. Nhân đôi "phần việc thật" ở hai nhánh là con đường kinh điển đến lỗi bảo trì — bạn sẽ sửa một bản mà quên bản kia.
• Chờ sau khi đóng. Hành động kế tiếp không được chạy đua với hiệu ứng đóng.
• Chủ động kiểm cả hai trạng thái. Công tắc ?popup=1 tồn tại chính xác để bạn không bao giờ phải chờ vận may mới kiểm được nhánh hiếm.

Lỗi thường gặp

Lỗi	Hậu quả	Cách sửa
Timeout dài cho phép kiểm popup	Phí thời gian đó ở mọi lần chạy không popup	2000 ms là quá đủ
Nhân đôi phần việc thật trên mỗi nhánh	Hai bản sao dần lệch nhau	Hợp về một node
Không chờ sau Close	Cú chạm sau trúng lớp phủ đang đóng dở	Giữ Wait 600 ms
Coi "không popup" là thất bại	Báo động giả trong nhật ký	Cả hai kết cục là success

Khắc phục sự cố

Popup có đó mà phép kiểm trượt. Template nhiều khả năng bắt kèm nền bị làm mờ. Bắt lại riêng biểu tượng ngôi sao.

Đã bấm Close mà cú chạm sau vẫn trúng lớp phủ. Tăng chờ lên 800–1000 ms.

Flow luôn đi nhánh "không popup" dù có ?popup=1. Bạn bắt template ở mức zoom khác, hoặc thanh công cụ trình duyệt xô lệch bố cục — bắt lại trên đúng màn hình bạn chạy.

Tóm tắt

• Phần tử tùy chọn là một nhánh rẽ, không phải lỗi: kiểm ngắn, vòng qua để đóng, hợp lại.
• Độ dài timeout mã hóa ý nghĩa của phép phát hiện — đợi hay hỏi.
• Nhánh hợp lại giữ phần việc thật ở một nơi duy nhất.

Tiếp theo

Đến giờ mọi quyết định đều đến từ việc có nhìn thấy thứ gì đó hay không. Bài 05 · Đọc một con số bắt đầu ra quyết định từ nội dung màn hình nói gì — OCR đầu tiên của bạn.

Xem thêm: Find Image · If — chế độ Node outcome để rẽ nhánh trên phép kiểm này ở đoạn sau của flow