Giao diện Flow Builder
Giao diện chÃnh của Flow Builder bao gồm tất cả các công cụ cần thiết để thêm các thà nh phần trá»±c quan, chỉnh sá»a thuá»™c tÃnh của chúng và thay đổi logic của flow ngÆ°á»i dùng. Bà i viết nà y trình bà y từng khu vá»±c của giao diện: chức năng và vị trà của chúng.
Muốn tìm hiểu thêm vỠcách xây dựng flow? Xem các video hướng dẫn từng bước trong danh sách phát YouTube của chúng tôi.
Các Ä‘iá»u khiển dá»± án và phÃm tắt hữu Ãch (thanh công cụ trên cùng)
- Close : Thoát khá»i trình chỉnh sá»a flow và quay lại trang danh sách flows.
- App name : Xác định ứng dụng mà flow thuá»™c vá».
- All flows : Mở danh sách tất cả các flows của ứng dụng nà y.
- Flow status: Biểu tượng bên trái tên flow cho biết trạng thái flow hiện tại:
- Draft
- Publishing (vòng xoay đang tải)
- Failed
- hoặc Live .
- Rename the flow: Nhấp và o tên flow để đổi tên. Nhiá»u flows có thể có cùng tên — hãy đặt tên riêng cho má»—i flow má»›i.
- View mode toggle: Chuyển đổi giữa chế độ xem thiết kế và chế độ xem remote config.
- Undo/Redo: Nhấp và o các biểu tượng mũi tên để hoà n tác hoặc là m lại các thay đổi trong flow. Bạn cũng có thể dùng ⌘Z / Ctrl+Z để hoà n tác.
- Save draft / Publish: Nhấp Save draft để lÆ°u tiến trình mà không phát hà nh (⌘ / Ctrl+S). Mở menu thả xuống để truy cáºp nút Publish. Bạn chỉ có thể thêm flow và o placement sau khi đã phát hà nh.
Khu vực xem trước (trung tâm)
Khu vá»±c trung tâm của không gian là m việc mô phá»ng giao diện flow của bạn trên thiết bị di Ä‘á»™ng.
- Äể chá»n má»™t phần tá» và chỉnh sá»a thuá»™c tÃnh của nó, hãy nhấp và o phần tỠđó. Äể chá»n phần tá» con bên trong má»™t container, hãy nhấp và o container trÆ°á»›c, rồi nhấp và o phần tá» con.
- Äể chỉnh sá»a thuá»™c tÃnh của chÃnh mà n hình, hãy nhấp ra ngoà i bất kỳ phần tá» nà o, hoặc chá»n mà n hình trong bảng Screens and Layers.
- Äể thay đổi thứ tá»± của má»™t phần tá», kéo mục đó lên hoặc xuống trong bảng Screens and Layers.
Trình chỉnh sá»a flow được thiết kế để tạo layout responsive. Vì váºy, bạn không thể thay đổi vị trà của các phần tá» theo cách thủ công — bạn chỉ có thể thay đổi thứ tá»± của chúng. Cà i đặt layout của má»—i container sẽ quyết định cách các phần tá» bên trong được phân bổ.
Thanh mà n hình Ä‘ang hoạt Ä‘á»™ng (phÃa trên khung xem trÆ°á»›c thiết bị)
- Screen name — viên nhãn hiển thị tên mà n hình hiện tại.
- Toggle animations — báºt hoặc tắt xem trÆ°á»›c animation của các phần tá»; animation chạy liên tục cho đến khi được tắt. Chỉ hiển thị khi mà n hình Ä‘ang active có Ãt nhất má»™t animation. Không ảnh hưởng đến việc animation có hiển thị trên thiết bị thá»±c hay không.
- Add element — mở thÆ° viện phần tá» tại mà n hình hiện tại. TÆ°Æ¡ng Ä‘Æ°Æ¡ng vá»›i nút + ở đầu bảng Screens and Layers — hữu Ãch khi bảng đó Ä‘ang bị thu gá»n.
Äiá»u khiển hiển thị (thanh công cụ phÃa dÆ°á»›i)
Các công cụ trong thanh công cụ phÃa dÆ°á»›i giúp bạn Ä‘iá»u khiển chế Ä‘á»™ xem trÆ°á»›c.
- Device: Chá»n má»™t trong các mẫu iPhone hoặc Android có sẵn để thay đổi kÃch thÆ°á»›c viewport và viá»n thiết bị.
- Screen orientation: Chuyển đổi giữa chế Ä‘á»™ dá»c và ngang để xem trÆ°á»›c flow của bạn ở các hÆ°á»›ng khác nhau.
- Color scheme: Chuyển đổi giữa chế Ä‘á»™ sáng và tối để xem thiết kế của bạn thÃch nghi vá»›i các theme khác nhau nhÆ° thế nà o.
- Locale: Chá»n má»™t locale để xem trÆ°á»›c flow của bạn vá»›i ná»™i dung đã được bản địa hóa.
- View options: Báºt hoặc tắt viá»n thiết bị và hÆ°á»›ng dẫn vùng an toà n.
Thuá»™c tÃnh mà n hình và thà nh phần (bảng bên phải)
Cà i đặt mà n hình và bố cục
Bà i viết chÃnh: Mà n hình và Layer
Khi không có phần tá» nà o được chá»n, bảng bên phải cho phép bạn Ä‘iá»u chỉnh các thuá»™c tÃnh của mà n hình flow Ä‘ang hoạt Ä‘á»™ng, bao gồm:
- Tương tác với giao diện hệ thống (và dụ: thanh trạng thái có hiển thị hay không)
- Quy tắc bố cục tự động
- Ná»n (mà u sắc, hình ảnh hoặc video)
- KÃch thÆ°á»›c padding
- Hà nh vi cuá»™n dá»c Nếu mà n hình chứa má»™t số thà nh phần nhất định, chẳng hạn nhÆ° câu há»i tÆ°Æ¡ng tác, danh sách nà y sẽ được mở rá»™ng vá»›i các thuá»™c tÃnh liên quan.
Thuá»™c tÃnh của phần tá»
Khi bạn chá»n má»™t phần tá», bảng bên phải cho phép bạn thay đổi style và các thuá»™c tÃnh tÆ°Æ¡ng tác của nó.
Thuá»™c tÃnh thiết kế
Tìm hiểu thêm: Bố cục và vị trÃ, Style và giao diện
Tab Design cho phép bạn cấu hình giao diện trá»±c quan và bố cục của phần tỠđược chá»n:
- Visibility: Hiển thị hoặc ẩn phần tá». Báºt Conditional visibility để đặt các quy tắc xác định khi nà o phần tá» sẽ hiển thị.
- Position: Chá»n giữa Relative, Absolute, hoặc Fixed positioning.
- Content (chỉ dà nh cho phần tá» văn bản): Chỉnh sá»a ná»™i dung văn bản của phần tá», chèn biến, và quản lý bản địa hóa.
- Typography (chỉ dà nh cho phần tá» văn bản): Cấu hình font, Ä‘á»™ Ä‘áºm, kÃch thÆ°á»›c, mà u sắc, căn chỉnh, trang trà và cắt bá»›t văn bản.
- Spacing: Äặt margin và padding cho phần tá».
- Effects: Thêm drop shadow, inner shadow, background blur, hoặc layer blur.
- Animation: Thêm hiệu ứng Ä‘á»™ng (và dụ: Pulse) và cấu hình thá»i gian cÅ©ng nhÆ° cÆ°á»ng Ä‘á»™ của chúng.
- Appearance: Äiá»u chỉnh Ä‘á»™ má» và góc xoay.
- Layout: Chá»n hÆ°á»›ng bố cục (dá»c hoặc ngang) và xác định cách phân bố các phần tá» con.
Thuá»™c tÃnh tÆ°Æ¡ng tác
Tìm hiểu thêm: Actions, Navigation and Interaction
Tab Interactions cho phép bạn định nghÄ©a Ä‘iá»u gì xảy ra khi ngÆ°á»i dùng tÆ°Æ¡ng tác vá»›i phần tỠđã chá»n. Má»—i tÆ°Æ¡ng tác bao gồm má»™t trigger và má»™t hoặc nhiá»u actions:
- Triggers (KÃch hoạt) định nghÄ©a khi nà o Ä‘iá»u gì đó xảy ra — và dụ: On Tap (ngÆ°á»i dùng nhấn và o phần tá»).
- Actions (Hà nh Ä‘á»™ng) định nghÄ©a Ä‘iá»u gì xảy ra — và dụ: Ä‘iá»u hÆ°á»›ng đến mà n hình khác hoặc thay đổi giá trị của má»™t biến. Thêm nhiá»u hà nh Ä‘á»™ng và o má»™t trigger để thá»±c hiện chúng theo thứ tá»±.
Bạn có thể thêm nhiá»u trigger và o cùng má»™t phần tỠđể thá»±c thi nhiá»u hà nh Ä‘á»™ng liên tiếp nhau.
Bảng bên trái
Bảng bên trái thay đổi chức năng dá»±a trên nút nà o Ä‘ang được chá»n. Bạn có thể chá»n giữa:
Screens and Layers
Bà i viết chÃnh: Screens and Layers
Nút layers mở Screens and Layers (được hiển thị mặc định khi bạn mở flow builder).
Nó hiển thị từng mà n hình dưới dạng cây các layer. Mỗi thà nh phần trên một mà n hình là một layer, và các container có các thà nh phần con lồng bên trong. Bạn có thể kéo và thả các layer để sắp xếp lại chúng.
Chá»n thà nh phần
Bà i viết chÃnh: Elements
Nếu bạn nhấn và o nút plus , bảng bên trái hiển thị danh sách các thà nh phần UI có sẵn và các biến thể của chúng. Nhấn và o một mục để thêm nó và o mà n hình hiện tại dưới dạng một layer mới.
Products
Bà i viết chÃnh: Products
Nút products mở danh sách sản phẩm. Nó hiển thị các sản phẩm nà o được gán cho từng mà n hình trong flow của bạn.
Danh sách nà y chỉ để xem. Äể gán sản phẩm cho má»™t mà n hình, hãy thêm thà nh phần Product và cấu hình nó trong bảng bên phải. Äể tạo hoặc chỉnh sá»a sản phẩm, hãy sá» dụng trang Products trên Adapty Dashboard.
Kiểu đã lưu
Tìm hiểu thêm:
Nút Styles mở Saved Styles.
Tại đây, bạn có thể chỉnh sá»a và quản lý các kiểu toà n cục. Nếu nhiá»u phần tá» trong flow của bạn dùng chung kiểu chữ hoặc mà u sắc, hãy lÆ°u dữ liệu đó thà nh má»™t kiểu toà n cục. Sau đó bạn có thể tái sá» dụng nó chỉ bằng má»™t cú nhấp. Hiện tại, Flow Builder há»— trợ hai loại global style — Font styles và Color styles. Má»—i Color style có thể tùy chá»n đặt giá trị riêng cho chế Ä‘á»™ Dark mode.
Biến
Bà i viết chÃnh: Biến
Nút dấu ngoặc mở phần Biến.
Tại đây, bạn có thể tạo và quản lý các biến cho flow của mình. Khi chạy, SDK sẽ thay thế các placeholder biến bằng giá trị thá»±c tế — thuá»™c tÃnh ngÆ°á»i dùng, giá sản phẩm, chuá»—i đã được bản địa hóa, và nhiá»u hÆ¡n nữa.
Các biến được nhóm thà nh hai tab:
- Custom: Biến do bạn tạo và kiểm soát thông qua các action.
- Elements: Giá trị được xác định bởi tÆ°Æ¡ng tác của ngÆ°á»i dùng — chẳng hạn nhÆ° câu trả lá»i quiz, trạng thái toggle, hay lá»±a chá»n tab.
Các biến sản phẩm — giá, tên và các dữ liệu sản phẩm khác — không được liệt kê trong panel nà y. Hãy tham chiếu trá»±c tiếp đến chúng khi chỉnh sá»a má»™t phần tá» văn bản.
Dùng biến để:
- Liên kết văn bản: Hiển thị nội dung động thay vì chuỗi tĩnh.
- Kiểm soát hiển thị: Hiển thị hoặc ẩn các phần tá» dá»±a trên Ä‘iá»u kiện (và dụ: ẩn nút nâng cấp đối vá»›i ngÆ°á»i dùng premium).
- TÆ°Æ¡ng tác vá»›i ngÆ°á»i dùng: Truy cáºp dữ liệu từ các trÆ°á»ng nháºp liệu, chẳng hạn nhÆ° biểu mẫu hoặc bà i kiểm tra.
Bản địa hóa
Bà i viết chÃnh: Bản địa hóa
Giao diện Localization cho phép bạn quản lý toà n bộ nội dung có thể dịch trong flow của mình. Nó hiển thị bảng gồm tất cả các chuỗi văn bản và hình ảnh, được sắp xếp theo mà n hình, với các cột tương ứng cho từng locale. Từ giao diện nà y, bạn có thể:
- Thêm locale má»›i và chỉnh sá»a các chuá»—i đã dịch trá»±c tiếp.
- Theo dõi trạng thái dịch — mỗi hà ng được đánh dấu là Done hoặc Missing.
- Lá»c theo mà n hình hoặc chỉ hiển thị những bản dịch còn thiếu.
- Dùng AI Translate để tự động dịch nội dung, hoặc Import/Export bản dịch hà ng loạt.
