Quy trình làm việc của ứng dụng web

Trong AppMaster Web Designer, bạn có thể định cấu hình logic nghiệp vụ cho các ứng dụng web ở phía Frontend ngoài logic Backend . Tính năng mạnh mẽ này cho phép bạn tạo các ứng dụng web động, phức tạp phù hợp với nhu cầu kinh doanh cụ thể.

Trong ngữ cảnh ứng dụng web, quy trình kinh doanh có thể bao gồm xác thực người dùng, xử lý dữ liệu, giao dịch trực tuyến, quản lý nội dung, hoạt động dịch vụ khách hàng và tùy chỉnh các thành phần giao diện người dùng tùy theo điều kiện.

Ba cấp độ logic nghiệp vụ trong AppMaster Web Designer:

• Trình kích hoạt ứng dụng: Đây là các trình kích hoạt cấp cao phản hồi các sự kiện hoặc trạng thái trên toàn ứng dụng, khởi động các quy trình kinh doanh cụ thể.
• Quy trình kinh doanh chung: Đây là các tập hợp hoạt động được xác định trước có thể được áp dụng trên nhiều phần khác nhau của ứng dụng, tự động hóa các tác vụ và hợp lý hóa quy trình công việc.
• Trình kích hoạt phần tử: Chi tiết hơn trình kích hoạt ứng dụng, chúng được liên kết với các phần tử giao diện người dùng cụ thể, kích hoạt quy trình kinh doanh dựa trên tương tác với các phần tử này.

Bằng cách tận dụng các cấp độ logic kinh doanh này, AppMaster Web Designer cho phép bạn tạo ra các ứng dụng web không chỉ hấp dẫn về mặt hình ảnh mà còn thông minh và đáp ứng nhu cầu cũng như hành vi của người dùng.

🔔 Điều quan trọng là phải tải lại bản xem trước đang chạy sau khi thêm bất kỳ logic nghiệp vụ mới nào để khởi chạy BP.

Trình kích hoạt ứng dụng

Trình kích hoạt ứng dụng trong AppMaster Web Designer là trình kích hoạt cấp cao phản hồi các sự kiện hoặc trạng thái trên toàn ứng dụng chạy thực thi các quy trình kinh doanh cụ thể để nâng cao chức năng và trải nghiệm người dùng.

AppMaster cung cấp nhiều Trình kích hoạt ứng dụng khác nhau, mỗi Trình kích hoạt ứng dụng được thiết kế cho các tình huống cụ thể:

• Khi khởi chạy ứng dụng: Được kích hoạt khi ứng dụng khởi động, lý tưởng cho các quy trình thiết lập ban đầu.
• Điều hướng trên ứng dụng: Kích hoạt trong khi điều hướng giữa các phần khác nhau của ứng dụng.
• Làm mờ trên ứng dụng: Được kích hoạt khi ứng dụng mất tiêu điểm, hữu ích để tạm dừng hoặc lưu hành động.
• Trên tiêu điểm ứng dụng: Thực thi khi ứng dụng lấy lại tiêu điểm, rất phù hợp để tiếp tục hoặc cập nhật nội dung.
• On App Hidden: Kích hoạt khi ứng dụng được thu nhỏ hoặc không hiển thị trên màn hình.
• Hiển thị trên ứng dụng: Kích hoạt khi ứng dụng hiển thị lại, hữu ích để làm mới nội dung.
• Khi hủy ứng dụng: Thực thi trong quá trình tắt ứng dụng.
• Trên ứng dụng trực tuyến: Được kích hoạt khi ứng dụng phát hiện trạng thái trực tuyến, hoàn hảo để đồng bộ hóa dữ liệu.
• Trên ứng dụng ngoại tuyến: Kích hoạt khi ứng dụng ngoại tuyến, bật các chức năng ngoại tuyến.
• Yêu cầu xác thực trên ứng dụng: Kích hoạt khi nhận được phản hồi "401 (Không được phép)", nhắc người dùng xác thực lại.
• Trên ứng dụng bị cấm: Kích hoạt phản hồi "403 (Bị cấm)", thường được sử dụng để kiểm soát quyền truy cập và quyền.

Danh sách chính xác các trình kích hoạt Ứng dụng có thể được mở rộng bằng cách tạo Điểm cuối WebSocket ở cấp Phần cuối của ứng dụng của bạn.

Những trình kích hoạt này có thể được sử dụng để quản lý ủy quyền người dùng khi khởi chạy, xác minh quyền truy cập, định cấu hình chuyển hướng khi thay đổi ủy quyền, xử lý lỗi, v.v., khiến chúng không thể thiếu trong việc tạo ra một ứng dụng web an toàn và phản hồi nhanh.

Quy trình kinh doanh chung

Quy trình kinh doanh chung trong AppMaster Web Designer được thiết kế đặc biệt để gói gọn các hoạt động lặp đi lặp lại và logic dư thừa thành các luồng riêng biệt. Sau khi được tạo, các quy trình kinh doanh này có thể được tích hợp liền mạch dưới dạng các khối riêng biệt vào bất kỳ cấp độ nào trong quy trình kinh doanh của ứng dụng web của bạn.

Các tính năng chính:

• Quản lý quy trình làm việc hiệu quả: Bằng cách chuyển các tác vụ phổ biến vào Quy trình kinh doanh chung, bạn giảm đáng kể sự trùng lặp và hợp lý hóa quy trình làm việc của ứng dụng.
• Chức năng giao diện người dùng: Trong khi phản chiếu chức năng của các quy trình kinh doanh phụ trợ, các quy trình kinh doanh chung được thực thi duy nhất trên Giao diện người dùng . Điều này cho phép tương tác nhanh hơn và phản hồi ngay lập tức trong giao diện người dùng.

Dễ dàng tái sử dụng:

Để sử dụng Quy trình kinh doanh chung trong khi xây dựng logic, chỉ cần kéo khối mong muốn từ nhóm BP do người dùng tạo vào khung vẽ của bạn.

🔔 Xem xét hiệu suất: Điều quan trọng cần lưu ý là đối với các tác vụ phức tạp và tốn nhiều tài nguyên, chúng tôi khuyên bạn nên thực thi các quy trình này ở phía máy chủ (Phần cuối). Cách tiếp cận này đảm bảo hiệu suất và hiệu quả tốt hơn, đặc biệt đối với các hoạt động đòi hỏi tính toán cao hoặc yêu cầu xử lý an toàn dữ liệu nhạy cảm.

Trình kích hoạt phần tử

Trình kích hoạt thành phần trong AppMaster Web Designer rất cần thiết để thêm tính tương tác vào các ứng dụng web của bạn. Các trình kích hoạt này được gắn với các thành phần giao diện người dùng cụ thể, kích hoạt các quy trình kinh doanh được xác định trước để đáp ứng các tương tác của người dùng. Mỗi thành phần trong ứng dụng của bạn có một bộ trình kích hoạt có thể được tùy chỉnh để tạo trải nghiệm người dùng năng động và hấp dẫn:

• Trình kích hoạt chung: Các thành phần chia sẻ một tập hợp các trình kích hoạt tiêu chuẩn như onCreate , onDestroy , onShow và onHide , phản hồi các thay đổi về vòng đời và khả năng hiển thị của thành phần.
• Trình kích hoạt cụ thể: Ngoài các trình kích hoạt thông thường, các thành phần còn có các trình kích hoạt duy nhất được điều chỉnh theo chức năng của chúng. Ví dụ: Nút có thể có trình kích hoạt onClick , Bảng có thể phản hồi onUpdateData và Tab có thể có trình kích hoạt onTabSelect .

Bất chấp sự đa dạng, nguyên tắc cơ bản vẫn nhất quán: một sự kiện sẽ kích hoạt một quy trình kinh doanh tương ứng. Bằng cách sử dụng hiệu quả Trình kích hoạt thành phần, bạn có thể tạo một ứng dụng web tương tác và phản hồi nhanh, phản ứng với thông tin đầu vào của người dùng trong thời gian thực, nâng cao trải nghiệm người dùng tổng thể và làm cho ứng dụng của bạn trực quan và thân thiện hơn với người dùng.

Truy cập trình kích hoạt

Để xem và định cấu hình trình kích hoạt của một thành phần, hãy chọn thành phần đó trên canvas và điều hướng đến tab 'Quy trình làm việc' ở thanh bên bên phải. Tại đây, bạn sẽ tìm thấy danh sách các trình kích hoạt có sẵn. Nhấp vào một cái cho phép bạn đính kèm quy trình kinh doanh mong muốn của mình vào đó. Trình kích hoạt có logic đính kèm được đánh dấu bằng màu xanh lam để dễ nhận biết.

Tạo quy trình kinh doanh

Việc thiết lập quy trình công việc cho trình kích hoạt thành phần tuân theo cách tiếp cận tương tự với việc tạo quy trình công việc phụ trợ, như đã thấy trong Mô-đun 4. Bạn sẽ sử dụng một canvas chung trong đó các khối đại diện cho các hành động khác nhau được thêm vào. Các kết nối giữa các khối này xác định chuỗi hành động, cho phép bạn xây dựng các quy trình công việc phức tạp một cách trực quan.

Xây dựng quy trình làm việc của ứng dụng

Hãy tạo một quy trình công việc như vậy cho nút Tính toán. Đầu tiên, hãy quyết định xem chúng ta cần làm gì khi nhấp vào nút:

• Tìm giá trị X và Y. Nhận chúng từ các trường đầu vào tương ứng.
• Khởi chạy điểm cuối để tính toán và truyền tham số X và Y cho điểm cuối đó.
• Hiển thị vùng chứa kết quả.
• Đặt kết quả tính toán vào các trường Nhãn bắt buộc.

Chọn phần tử Nút Calc của chúng tôi trong khung vẽ và nhấp vào Trình kích hoạt onClick .

Trình chỉnh sửa quy trình công việc sẽ được mở. Ở đây chúng ta sẽ xây dựng quy trình kinh doanh cho nút.

Nhận giá trị từ đầu vào

Bước đầu tiên là lấy các giá trị do người dùng nhập. Đối với nó, AppMaster cung cấp khối Lấy dữ liệu nổi đầu vào, có 'Khóa phần tử' làm tham số đầu vào và xuất ra 'Giá trị', về cơ bản là đọc các giá trị hiện tại từ thành phần được chỉ định.

Vì chúng tôi có hai trường riêng biệt (đại diện cho giá trị X và Y), nên bạn sẽ cần sử dụng hai khối 'Input Float Get Data' - một khối cho mỗi trường đầu vào.

Để thiết lập nó:

• Kéo hai Khối dữ liệu nổi đầu vào vào khung vẽ của bạn cho từng trường đầu vào.
• Đặt Khóa phần tử cho mỗi khối tương ứng với Đầu vào nổi tương ứng. Điều này liên kết khối với thành phần giao diện người dùng chính xác, đảm bảo nó đọc đúng dữ liệu.

Nếu trước đây bạn đã đổi tên các thành phần của mình trong Trình thiết kế giao diện người dùng trong khi tạo giao diện thì việc định vị và chọn thành phần cần thiết cho mỗi khối sẽ trở nên đơn giản.

☝️ Việc đổi tên các thành phần trong giai đoạn thiết kế sẽ giúp dễ dàng xác định chúng sau này trong quá trình cấu hình logic nghiệp vụ.

Khởi chạy điểm cuối

Sau khi truy xuất thông tin đầu vào của người dùng, giai đoạn tiếp theo trong quy trình làm việc của ứng dụng web của bạn là khởi tạo Điểm cuối . Bước quan trọng này thiết lập kết nối giữa Frontend (giao diện người dùng) và Backend (quy trình phía máy chủ) của ứng dụng web của bạn và lệnh tính toán được truyền từ trình duyệt đến máy chủ.

Điểm cuối trong AppMaster được thể hiện dưới dạng các khối quy trình công việc riêng biệt trong ứng dụng. Để sử dụng điểm cuối của chúng tôi, chỉ cần chọn điểm cuối thích hợp từ danh sách khối quy trình công việc và kéo nó vào khung vẽ của bạn.

Trong mô-đun 5 , chúng tôi đã định cấu hình điểm cuối bằng phương thức GET và gán cho nó URL cơ sở "module4-basic" . Bạn sẽ thấy nó được liệt kê dưới dạng - Yêu cầu máy chủ GET /module4-basic/ và kéo nó vào canvas.

Không giống như các thành phần, điểm cuối AppMaster không yêu cầu cài đặt ID của chúng vì nó được xác định trước. Tính năng này hợp lý hóa quá trình tích hợp điểm cuối vào logic nghiệp vụ của bạn.

Bước cuối cùng là nhập giá trị X và Y bạn thu được từ bước trước vào Điểm cuối. Điều này cho phép phần phụ trợ nhận và xử lý các đầu vào này, thực hiện các phép tính cần thiết.

Trạng thái của các thành phần giao diện người dùng

Bước tiếp theo trong quy trình làm việc ứng dụng web của bạn là quản lý mức độ hiển thị của vùng chứa - cụ thể là hiển thị vùng chứa hiển thị kết quả và ẩn vùng chứa chứa gợi ý.

Đây là cách để đạt được điều này:

1. Bắt đầu bằng cách kéo hai khối Thuộc tính cập nhật Flex vào khung vẽ của bạn.
2. Đối với mỗi khối Thuộc tính cập nhật Flex , hãy gán tham số Khóa phần tử tương ứng với các vùng chứa tương ứng – một cho vùng chứa kết quả và một cho vùng chứa gợi ý.
3. Định cấu hình tham số hiển thị trong các khối này. Đặt tham số Hiển thị thành True cho vùng chứa kết quả, đảm bảo thông số này hiển thị sau khi tính toán. Ngược lại, đặt tham số này thành Sai cho vùng chứa gợi ý để ẩn nó sau khi hoàn thành phép tính.

Bằng cách thực hiện các bước này, bạn sẽ tạo ra phản hồi động trong giao diện ứng dụng của mình. Sau hành động của người dùng, chẳng hạn như nhấp vào nút để thực hiện các phép tính, ứng dụng sẽ tự động ẩn vùng chứa gợi ý và hiển thị vùng chứa kết quả.

Điều này không chỉ nâng cao trải nghiệm người dùng mà còn giữ cho giao diện ứng dụng của bạn sạch sẽ và tập trung vào thông tin liên quan ở từng giai đoạn tương tác.

Xem trước thời gian thực

Để đánh giá tiến độ của quy trình kinh doanh, bạn có thể dễ dàng xem trước các kết quả trung gian:

1. Trước tiên, hãy nhấp vào nút Lưu & Thoát trong trình chỉnh sửa quy trình công việc. Hành động này sẽ lưu quy trình làm việc hiện tại của bạn và đóng trình chỉnh sửa quy trình công việc.
2. Chạy bản xem trước thời gian thực của ứng dụng web của bạn để kiểm tra sự tương tác với ứng dụng như thể nó đang hoạt động.
3. Kiểm tra chức năng bằng cách nhấp vào nút Tính toán .

Nếu quy trình công việc của bạn đã được thiết lập chính xác, bạn sẽ thấy phản hồi động: vùng chứa gợi ý sẽ bị ẩn và đồng thời, vùng chứa hiển thị kết quả sẽ được hiển thị.

Phương pháp kiểm tra này cung cấp một cách thực tế và ngay lập tức để đảm bảo rằng quy trình kinh doanh của bạn hoạt động như dự định, cho phép bạn thực hiện bất kỳ điều chỉnh cần thiết nào trước khi hoàn tất đơn đăng ký của mình.

Kết xuất dữ liệu

Khi bạn đã kiểm tra thành công logic của ứng dụng, đã đến lúc tinh chỉnh thêm logic kinh doanh của bạn.

Bước cuối cùng liên quan đến việc hiển thị kết quả tính toán trong giao diện ứng dụng web của bạn. Chúng tôi sẽ ánh xạ dữ liệu đầu ra của quy trình công việc phụ trợ của chúng tôi tới các thành phần giao diện người dùng có liên quan trong ứng dụng web của bạn.

Do kết quả từ phần phụ trợ được trả về theo thứ tự định trước, nhiệm vụ của bạn là căn chỉnh từng phần dữ liệu (phần tử mảng) với phần tử Khối văn bản chính xác trong giao diện người dùng của bạn.

Để xử lý dữ liệu, chúng ta sẽ sử dụng các khối sau:

• Phần tử mảng : sử dụng các phần tử này để truy cập các phần tử riêng lẻ trong mảng kết quả. Bạn sẽ cần một khối cho mỗi chỉ mục, nằm trong khoảng từ 0 đến 4.
• To Text: vì dữ liệu của bạn ở định dạng Float, hãy sử dụng khối này để chuyển đổi các giá trị Float này thành định dạng văn bản phù hợp để hiển thị.
• Dữ liệu cập nhật khối văn bản: khối này rất cần thiết để điền các khối văn bản trong giao diện người dùng của bạn với dữ liệu văn bản đã chuyển đổi.

Các khối này sẽ trích xuất dữ liệu từ mảng kết quả, chuyển đổi dữ liệu thành định dạng văn bản, sau đó cập nhật các khối văn bản tương ứng trong giao diện người dùng của bạn.

Đây là cách thiết lập nó:

1. Đặt các khối này trên khung vẽ.
2. Trong khối Phần tử mảng , nhập mảng nhận được từ điểm cuối của bạn (bắt đầu từ 0).
3. Đặt Chỉ mục để nhắm mục tiêu phần tử thích hợp trong mảng.
4. Kết nối Giá trị đầu ra của Phần tử mảng với khối To Text .
5. Chỉ định Khóa phần tử trong Dữ liệu cập nhật khối văn bản cho phần tử giao diện người dùng của bạn nơi bạn muốn hiển thị dữ liệu.
6. Kết nối các khối một cách tuần tự.

Sao chép chuỗi khối này cho từng phần tử trong mảng bạn muốn hiển thị. Điều chỉnh chỉ mục trong mỗi khối “Phần tử mảng” để tương ứng với các phần tử khác nhau của mảng.

Đảm bảo các khối này cũng được kết nối theo trình tự.

Kết quả cuối cùng

Điều này hoàn thành việc tạo ra quy trình kinh doanh.

Lưu quy trình kinh doanh của bạn và kiểm tra kết quả cuối cùng trong bản xem trước. Chạy Bản xem trước ứng dụng trên kế hoạch triển khai mà bạn đã xuất bản điểm cuối của mình trong Mô-đun 5 .

🎉 Xin chúc mừng thành tích tuyệt vời này!

Bạn đã phát triển thành công một ứng dụng web đầy đủ chức năng với logic nghiệp vụ và giao diện người dùng tương tác. Nếu mọi thứ hoạt động như dự định thì giờ đây bạn đã sẵn sàng thực hiện bước cuối cùng tiếp theo là xuất bản ứng dụng của mình và chia sẻ ứng dụng đó với người dùng.

Nhưng cuộc hành trình không dừng lại ở đây. Có rất nhiều cơ hội để tinh chỉnh ứng dụng của bạn hơn nữa! Bạn có thể nâng cao sự hấp dẫn trực quan và trải nghiệm người dùng bằng cách tùy chỉnh giao diện của các thành phần giao diện người dùng hoặc mở rộng logic ứng dụng web của bạn. Ví dụ: bạn có thể tạo các trường bắt buộc và thêm nút để đặt lại các trường mà không cần xóa từng mục nhập theo cách thủ công.