CHƯƠNG 3 : KIẾN TRÚC CHUNG HỆ THỐNG
3.3. Xây dựng module FE
Bài tốn: Sau khi đã hồn thiện mơ phỏng máng lợn thông minh trên nền tảng gama desktop và hệ thống Restful API để phục vụ cho các thao tác của user và kết nối đến gama server, tôi tiến hành xây dựng giao diện người dùng [15] để người dùng có dễ dàng sử dụng hệ thống mà khơng cần có q nhiều kĩ năng về kĩ thuật như là api hoặc GAMA. Công nghệ sử dụng: ReactJS
Hình 3.33: Workflow của ứng dụng web
59
- Khi người dùng đã có tài khoản có thể đăng nhập vào hệ thống.
- Sau khi đăng nhập vào màn hình chính, người dùng có thể nhập thanh tìm kiếm để tìm project hoặc file.
- Hoặc người dùng có thể quản lý thơng tin người dùng: cập nhật thông tin, thay đổi password,…
- Người dùng có thể thêm, sửa, xóa project. Mỗi project sẽ có mặc định 2 folder được tạo là models(chứa các file script mô phỏng như .gaml) và includes(chứa các file thư viện dùng cho mô phỏng như là .csv, .dbf,…)
- Người dùng có thể thêm, sửa, xóa file. Khi sửa file sẽ xuất hiện nút lưu để lưu các thay đổi. Đối với file .gaml sẽ có thêm nút chạy mơ phỏng khi nhấn vào sẽ hiện cửa sổ nhập tham số và output cố định của mô phỏng.
- Khi chạy mơ phỏng người dùng có thể cho chạy, dừng và load lại q trình mơ phỏng.
- Sau khi chạy mơ phỏng, người dùng có thể quay lại trang quản lý project và chạy lại kết quả mô phỏng gần nhất.
- Bên cạnh đó, người dùng có thể download kết quả mô phỏng gần nhất dưới dạng video.
60 Biểu đồ use-case
61