Xây dựng ứng dụng nhắc lịch công tác hiệu quả

Các thuật ngữ liên quan tới ứng dụng

 Tagging (nhãn đang gắn cho 1 task): Một task được gắn 1 hay nhiều tag, hoặc không có tag nào. 1 task của một cá nhân sẽ được gắn tag từ danh sách tag của cá nhân đó, 1 task của một board sẽ được gắn tag từ danh sách tag của board đó.  Reminder: Là một thuộc tính của task, là nơi người dùng có thể tùy chỉnh việc thông báo của 1 task.

Bất kì cá nhân nào cũng có thể tạo board và mời người khác vào board của mình để bắt đầu làm việc. Ở mục workspace của mỗi tài khoản chỉ hiện lên những board thuộc sở hữu hoặc được người khác mời vào. Section mục đích chính dùng để phân loại task trong board theo ý muốn của người dùng.

Section khác với tag ở chỗ, task sẽ được biểu diễn theo danh sách từng section. Mặt khác, task có thể được phân loại và biểu diễn theo thời gian, hoặc theo người được giao task đó.  Default view: Những màn hình xem cơ bản sẵn có của mỗi người dùng, ở default view có thể xem công việc của cá nhân, hoặc công việc được giao ở workspace (tức là ở tất cả các board tham gia).

 Custom view: Màn hình xem không sẵn có, được tạo ra tùy theo mục đích và ý muốn của người dùng. Custom view lấy nguồn từ các board mà cá nhân đó tham gia, có thể tùy chọn xem board nào, section nào. Các task trong custom view thường được phân loại theo thời gian, theo board/section, hoặc theo những người tham gia các board đó tùy theo lựa chọn người dùng.

Các sơ đồ thiết kế

(Sơ đồ hoạt động có rất nhiều ảnh nên phần này chỉ để một số ảnh đặc trưng cho từng nhóm chức năng lớn). Kiến trúc phần mềm bao gồm một application server được host chung với database server, có thể monitor được thông qua Supabase dashboard và kết nối với desktop client.

Môi trường

• Môi trường triển khai ứng dụng

Chọn và cài đặt .NET MAUI workload ở Visual Studio Installer để có được bộ SDK phát triển ứng dụng. Bước 4: Chọn project “WorkScheduleReminder.MAUIBlazor” làm startup project và chọn framework để chạy ứng dụng là net7.0-windows10.0.19041.0. Bước 1: Theo đường dẫn ./WorkScheduleReminder.MAUIBlazor/Properties/, mở file launchSettings.json và thay giá trị của trường “commandName” từ “Project”.

Bước 2: Theo đường dẫn ./WorkScheduleReminder.MAUIBlazor, mở file WorkScheduleReminder.MAUIBlazor.csproj và comment lại hoặc bỏ đi dòng code. Ngoài ra, từ đây nhà phát triển có thể theo đường dẫn này để đóng gói và publish ứng dụng. (Khuyến cáo: nhà phát triển không nên sử dụng Visual Studio để publish ứng dụng do lỗi từ phía nhà phát triển của .NET MAUI và Visual Studio, thay vào đó nhà phát triển nên sử dụng build tool bằng dòng lệnh trực tiếp là “dotnet” hoặc. “msbuild” để publish ứng dụng).

Bước 1: Truy cập đường dẫn sau để cài đặt Microsoft Edge WebView2 Runtime (nếu trên thiết bị của người dùng cuối chưa cài đặt sẵn, phần lớn các thiết bị cài đặt hệ điều hành Windows 10 đều đã được cài đặt tự động sẵn runtime này). Bước 2: Truy cập vào đường dẫn sau và tải về folder installer (work_schedule_reminder_installer_windows_10_x64.zip) từ bản release mới nhất. Tải file nén .zip chứa folder installer bản mới nhất từ Github Release trên repository của project.

(WorkScheduleReminder.MAUIBlazor_x.x.x.x_x64.cer) để chấp nhận giấy phép, sau đó chọn file .msix (WorkScheduleReminder.MAUIBlazor_x.x.x.x_x64.msix) để tiến hành cài đặt. Cài đặt bước 2, người dùng có thể chọn “Current User” (tương ứng với active user profile hiện tại) hoặc “Local Machine” (tương ứng với toàn bộ user profile có trên máy tính), sau đó chọn “Next”. Cài đặt bước 4, các bước tùy chọn đã xong, chọn “Finish” để hoàn thành cài đặt giấy phép.

Danh sách màn hình và các thành phần

Màn hình đăng nhập, bao gồm tính năng đăng nhập bằng email username – password (sau khi điền đầy đủ thông tin, nhấn “Log in” để đăng nhập), đăng nhập bằng OAuth (sử dụng tài khoản Google hoặc Facebook để đăng nhập) và quên mật khẩu (Nhấn “Forgot password?”) cũng như đăng ký tài khoản mới (Nhấn “Sign up”). Màn hình đăng ký tài khoản email username – password mới, người dùng cần nhập đẩy đủ các thông tin: địa chỉ email người dùng muốn đăng ký, mật khẩu cho tài khoản và nhập lại lần nữa mật khẩu để xác nhận mật khẩu đó đúng theo mong muốn của người dùng. Màn hình MyDay thể hiện danh sách todo người dùng cần làm trong hôm nay, người dùng có thể soạn danh sách todo của mình bằng cách thêm bằng các task ở thanh drawer ở bên phải màn hình hoặc thêm hẳn một task mới bằng cách nhập nội dung ở thanh text field bên dưới màn hình rồi nhấn bàn phím “Enter”.

Màn hình Next 7 days thể hiện các task có deadline là trong 7 ngày tiếp theo tính từ ngày hôm nay, người dùng có thể thêm task có deadline theo từng cột bằng cách nhập nội dung ngay text field “Add task” ở mỗi cột rồi nhấn bàn phím “Enter”. Màn hình All my tasks thể hiện tổng hợp các task có deadline là trong quá khứ cho đến tương lai, người dùng có thể thêm task có deadline theo từng cột bằng cách nhập nội dung ngay text field “Add task” ở mỗi cột rồi nhấn bàn phím “Enter”. Màn hình làm việc 1 board ở chế độ kanban, để hiển thị nội dung ở chế độ kanban, người dùng nhấn vào mục “View” ở thanh top bar trên màn hình và sau đó chọn.

Màn hình làm việc 1 board theo chế độ table, để hiển thị nội dung ở chế độ table, người dùng nhấn vào mục “View” ở thanh top bar trên màn hình và sau đó chọn. Màn hình làm việc 1 board theo chế độ calendar, để hiển thị nội dung ở chế độ calendar, người dùng nhấn vào mục “View” ở thanh top bar trên màn hình và sau đó chọn “Calendar”. Hộp thoại chi tiết task, chi tiết của 1 task bao gồm ghi chú (note), các task con (subtask), đính kèm (attachments), cài đặt thông báo trong hộp thoại reminder (deadline/remind me), cài đặt hộp thoại danh sách các nhãn (tag), hộp thoại phân công công việc cho thành viên trong board (assign), hộp thoại di chuyển task hiện tại sang section khác (section) và hộp thoại chat dành riêng cho task (chat).

Hộp thoại chọn section cho 1 task trong board cho phép người dùng di chuyển task hiện tại sang một board khác, chỉ cần tick vào section người dùng muốn di chuyển task hiện tại đến. Hộp thoại chat cho phép người dùng trao đổi thông tin trực tiếp trong ứng dụng với các member khác trong board, nội dung chat ở mỗi task được phạm vi hóa trong chính task đó. Khi nhấn vào từng lựa chọn trong hộp thoại và chọn các ngày, các task ở view hiện tại sẽ được lọc để chỉ thể hiện đúng những task có deadline trong khoảng đã chọn, đặc biệt, khi nhấn “Remove filter”, trạng thái lọc sẽ được reset về ban đầu (không có tag nào được chọn để lọc).

Khi nhấn vào từng lựa chọn trong hộp thoại, các task ở view hiện tại sẽ được lọc để chỉ thể hiện đúng những task được gán cho member đã chọn, đặc biệt, khi nhấn “Remove filter”, trạng thái lọc sẽ được reset về ban đầu (không có tag nào được chọn để lọc). Khi nhấn vào từng lựa chọn trong hộp thoại, các task ở view hiện tại sẽ được lọc để chỉ thể hiện đúng những task được gắn tag đã chọn, đặc biệt, khi nhấn “Remove filter”, trạng thái lọc sẽ được reset về ban đầu (không có tag nào được chọn để lọc).