Đặc tả chức năng 1: Quản lý thành viên 3.4.1.1 Thêm thành viên vào lab Đầu đề Tên chức năng Thêm thành viên vào lab Đầu vào Thông tin thành viên mới, tên thành viên, email, password,...
GIỚI THIỆU ĐỀ TÀI
K HẢO SÁT HIỆN TRẠNG
Trong những năm qua, công cuộc chuyển đổi số là mục tiêu được quan tâm hàng đầu của chính phủ cũng như là các tổ chức, doanh nghiệp Tầm quan trọng của việc chuyển đổi hình thức quản lý truyền thống sang quản lý bằng cách áp dụng những công nghệ mới là rất thiết thực Chuyển đổi số không chỉ là ứng dụng các phần mềm số hóa vào vận hành để giảm sức người, tối ưu chi phí mà còn thay đổi tư duy vận hành của người quản lý, giúp dễ dàng truy xuất thông tin, cung cấp dữ liệu nhanh chóng và hơn hết là nâng cao trải nghiệm của người sử dụng dịch vụ Từ đó, chúng em nhận thấy rằng trong các trường đại học cũng có rất nhiều các phòng thí nghiệm cần quản lý nhân lực,cũng như là quản lý tiến độ, dự án mà tổ chức đang triển khai một cách hiệu quả Chúng em nghiên cứu và phát triển một trang web không chỉ hiển thị thông tin của lab mà còn giúp người điều hành cũng như là các thành viên có thể quản lý lab dễ dàng hơn rất nhiều so với cách quản lý truyền thống.
M ỤC TIÊU CỦA DỰ ÁN
1.2.1 Đối tượng hướng tới Đối tượng hướng tới của dự án chính là những phòng nghiên cứu có số lượng thành viên đông, các dự án triển khai phức tạp, trang thiết bị máy móc phục vụ lớn, cần quản lý tài chính, chi tiêu cho lab Trang web được sử dụng bởi các quản lý, thành viên của phòng lab
Y ÊU CẦU CỦA DỰ ÁN
1.3.1 Yêu cầu về chức năng
Phần mềm cần có những chức năng sau:
• Thêm, xóa, cập nhật thông tin thành viên của Lab
• Tìm kiếm thành viên theo tên, theo bộ lọc
• Tạo mới, xóa, cập nhật thông tin của nhóm
• Thêm, xóa thành viên trong nhóm
• Tìm kiếm nhóm theo tên, theo bộ lọc
• Tạo mới, xóa, cập nhật thông tin của dự án
• Thêm, xóa, cập nhật thông tin của thành viên (đã thuộc một nhóm) trong dự án
• Thêm, xóa, cập nhật thông tin các chi phí của dự
• Tìm kiếm dự án theo tên, theo bộ lọc
• Quản lý chi tiêu 1.3.2 Yêu cầu về phi chức năng
• Hệ thống phải nhẹ, không tốn nhiều dung lượng bộ nhớ Hỗ trợ 24/24 và 365/365 ngày
• Xử lý được lượng thông tin lớn của người dùng
• Hệ thống phản hồi nhanh chóng,ổn định
• Giao diện đơn giản đẹp mắt, thân thiện với người dùng Màu nhẹ nhàng, không quá nổi bật
• Phải đăng nhập mới có thể truy cập
• Chỉ quản lý mới có thể thay đổi thông tin
-Ngôn ngữ: Gồm cả tiếng Anh và tiếng Việt
1.3.3 Yêu cầu về dữ liệu
• Dữ liệu được hiển thị rõ ràng để thành viên có thể quan sát
• Dữ liệu từng mục được liên kế hợp lí với nhau
• Dữ liệu rõ ràng, mạch lạc tương ứng với vai trò
• Dữ liệu được phân biệt với nhau qua ID, không trùng lặp
C ÁC CÔNG CỤ SỬ DỤNG
- Redux toolkit, Redux persist, ReactJS Debugger, Async storage
1.4.2 Các công cụ hỗ trợ
Báo cáo : MS Word, MS Powerpoint
Quản lý mã nguồn: Git, Github
Quản lý công việc: Teams, Trello, Messenger
XÁC LẬP DỰ ÁN
B ẢNG PHÂN CÔNG CÔNG VIỆC
Bảng phân chia công việc
Sinh viên Nhiệm vụ Công việc
Phạm Văn An 20213790 -Font-end
-Back-end -Nội dung thuyết trình
-Back-end: thêm thông tin chi tiết cho thành viên, lấy thông tin chi tiết từng thành viên -Font-end: thiết kế font-end cho web
-Làm nội dung cho các buổi báo cáo
Phạm Viết Chuyên -Trưởng nhóm
-Phân chia công việc cho từng thành viên và kiểm tra tiến độ công việc
-Viết Back-end cho toàn bộ các chức năng của trang web -Thuyết trình, làm báo cáo các buổi trình bày
Lê Minh Long -Front-end
-Back-end -Thiết kế cơ sở dữ liệu
-Back-end: Lấy thông tin chi tiết từng project
-Front-end: Làm chức năng sửa, xóa, hiển thị chi tiết project
-Cơ sở dữ liệu: Thiết kế sơ đồ ERD
-Làm nội dung cho các buổi báo cáo
Lã Hồng Quân -Back-end
-Viết backend cho các chức năng của trang web
-Chuẩn bị slide, báo cáo cho các buổi trình bày
B ẢNG KẾ HOẠCH THỰC HIỆN
Bảng kế hoạch thực hiện
TT Tên công việc Bắt đầu Kết thúc Tài nguyên
1 Khảo sát hiện trạng thu thập thông tin
2 Xác định mục tiêu 1/10/2023 10/10/2023 MS
Các mục tiêu hướng tới
11 chức năng và phi chức năng
3 Phân tích hệ thống 10/10/2023 25/10/2023 UML Sơ đồ chức năng, sơ đồ luồng dữ liệu
4 Thiết kế CSDL 10/10/2023 25/10/2023 Sơ đồ
Hoàn thành 4.1 Nhận diện thực thể của hệ thống, liệt kê thuộc tính, lập từ điển dữ liệu
4.2 Đưa ra các giả thiết hợp lý về các phụ thuộc hàm cần có
4.3 Chuẩn hóa CSDL 10/10/2023 25/10/2023 Hoàn thành 4.4 Vẽ sơ đồ thực thể liên kết của hệ thống
10/10/2023 25/10/2023 Mô hình thực thể liên kết
Hoàn thành 4.6 Lập trình giao diện cho phần mềm
5 Báo cáo và ppt final
6 Kiểm thử và sửa lỗi 29/12/2023 8/1/2024 Postma n
7 Bàn giao sản phẩm 10/1/2024 Hoàn thành
K HÓ KHĂN VÀ LỢI THẾ KHI TRIỂN KHAI DỰ ÁN
-Mỗi thành viên có sự nỗ lực, chăm chỉ vừa học vừa thực hiện sản phẩm Mọi người đều cố gắng hoàn thành công việc được giao đầy đủ, đúng thời hạn
-Mọi thành viên đều có ý thức tự giác, kỷ luật hoàn thành theo tiến độ đề ra
-Các thành viên làm việc, trao đổi, giúp đỡ lẫn nhau mỗi khi gặp khó khăn
-Lần đầu thực hiện sản phẩm nên còn gặp nhiều khó khăn trong việc lên ý tưởng, triển khai công việc, phân công nhiệm vụ
-Mỗi thành viên đều phải tự học kiến thức mới từ đầu nên gặp rất nhiều khó khăn, vấn đề, lỗi trong quá trình viết code
PHÂN TÍCH HỆ THỐNG
P HÂN TÍCH HỆ THỐNG VỀ CHỨC NĂNG
3.3.1 Yêu cầu của người dùng
-Người dùng bình thường: Xem thông tin thành viên lab, các project trên lab, thông tin giới thiệu về lab
-Admin: Có thể quản lý các công việc trên lab, quản viên, quản lý các team, quản lý các project
Use case diagram: Biểu diễn sơ đồ chức năng của hệ thống Mỗi use case mô tả chức năng mà hệ thống cần phải có xét từ góc độ người dùng
Sự tương tác trong biểu đồ use case có thể là:
+Cách thức mà người dùng tương tác với hệ thống
+Cách thức mà hệ thống tương tác với các hệ thống khác
3.3.3 Biểu đồ phân cấp chức năng
Hinh 3.2: Biểu đồ phân cấp chức năng
S Ơ ĐỒ LUỒNG DỮ LIỆU
Hình 3.3: Sơ đồ luồng dữ liệu
B IỂU ĐỒ HOẠT ĐỘNG
3.3.1 Biểu đồ hoạt động đăng nhập
Hình 3.4: Biểu đồ hoạt động đăng nhập
3.3.2 Biểu đồ hoạt động thêm thành viên
Hình 3.5: Biểu đồ hoạt động thêm thành viên
3.3.3 Biểu đồ hoạt động cập nhật thông tin thành viên
Hinh 3.6: Biểu đồ hoạt động cập nhật thông tin thành viên
3.3.4 Biểu đồ hoạt động xoá thành viên
Hình 3.7: Biểu đồ hoạt động xoá thành viên
3.3.5 Biểu đồ hoạt động tạo nhóm
Hình 3.8: Biểu đồ hoạt động tạo nhóm
3.3.6 Biểu đồ hoạt động tạo dự án
Hình 3.9: Biểu đồ hoạt động tạo dự án
3.3.7 Biểu đồ hoạt động thêm thành viên vào nhóm
Hình 3.10: Biểu đồ hoạt động thêm thành viên vào nhóm
3.3.8 Biểu đồ hoạt động thêm thành viên vào dự án
Hình 3.11: Biểu đồ hoạt động thêm thành viên vào dự án
Đ ẶC TẢ CHỨC NĂNG
3.4.1 Đặc tả chức năng 1: Quản lý thành viên
3.4.1.1 Thêm thành viên vào lab Đầu đề Tên chức năng
Thêm thành viên vào lab Đầu vào Thông tin thành viên mới, tên thành viên, email, password,
25 Đầu ra Tài khoản đăng nhập gồm có email, password đã được hash Thân 1 Hệ thống yêu cầu admin nhập vào thông tin thành viên mới
2 Nếu email đã có trong database sẽ phải nhập lại 3.4.1.2 Xoá thành viên khỏi lab Đầu đề Tên chức năng
Xoá thành viên khỏi lab Đầu vào ID của thành viên Đầu ra ID và thông tin thành viên được xoá khỏi bảng manage và database
Thân Admin nhấn vào biểu tượng xoá ở cột actions trong bảng thành viên để xoá nhóm 3.4.1.3 Cập nhật thông tin thành viên Đầu đề Tên chức năng
Cập nhật thông tin thành viên Đầu vào Các thông tin cần cập nhật của thành viên
(nếu không cần thay đổi thì bỏ trống trường đó) Đầu ra Thông tin thành viên được cập nhật
Thân Admin nhấn vào biểu tượng edit trong cột actions
Bảng manage member hiện ra và admin có thể sửa các thông tin của thành viên Ấn save để lưu lại 3.4.1.4 Tìm kiếm thành viên Đầu đề Tên chức năng
Tìm kiếm thành viên Đầu vào ID của thành viên( một hoặc tất cả) Đầu ra Thông tin của toàn bộ thành viên(nếu đầu vào là All) Thông tin của 1 thành viên (nếu đầu vào là
1 ID) Thân Thông tin thành viên được hiển thị bằng một danh sách
Bấm vào một thành viên bất kỳ để xem chi tiết
3.4.2 Đặc tả chức năng 2: Quản lý dự án
3.4.2.1 Tạo mới dự án Đầu đề Tên chức năng
Quản lý dự án Đầu vào Thông tin của dự án: tên, mô tả, ảnh …
27 Đầu ra Dự án được tạo
Danh sách dự án sau khi tạo Thân Admin điền tên và chọn tệp của dự án sau đó nhấn save 3.4.2.2 Thêm thành viên vào dự án Đầu đề Tên chức năng
Thêm thành viên vào dự án Đầu vào ID của dự án và ID của thành viên Đầu ra Thành viên được thêm vào dự án
Thân Admin chọn dự án và thành viên sau đó nhấn save
Nếu thành viên đã có từ trước thì hệ thống sẽ thông báo qua pop-up
3.4.2.3 Xoá dự án Đầu đề Tên chức năng
Xoá dự án Đầu vào ID của dự án Đầu ra Dự án được xoá không còn được hiển thị trong danh sách Thân Admin nhấn vào biểu tượng xoá ở cột actions trong bảng manage projects
3.4.3 Đặc tả chức năng: Quản lý Team
3.4.3.1 Thêm mới nhóm Đầu đề Tên chức năng
Thêm mới nhóm Đầu vào Thông tin nhóm: Tên nhóm, status(1 hoặc
0),thông tin chi tiết Đầu ra Nhóm đã được thêm mới và hiển thị trong danh sách
Thân Admin điền tên nhóm, thông tin nhóm
Status là 1 khi nhóm còn hoạt động và 0 khi nhóm đã ngừng hoạt động Ấn save để lưu lại
3.4.3.2 Thêm thành viên vào nhóm Đầu đề Tên chức năng
Thêm thành viên vào nhóm Đầu vào ID của nhóm và ID của thành viên Đầu ra Thành viên được thêm vào nhóm và hiển thị vào danh sách
Thân Admin chọn nhóm và thành viên sau đó nhấn save để lưu
Nếu thành viên đã có trong nhóm hệ thống sẽ thông báo qua pop-up
3.4.3.3 Xoá nhóm Đầu đề Tên chức năng
Xoá nhóm Đầu vào ID của nhóm Đầu ra Nhóm được xoá khỏi bảng manage teams
Danh sách nhóm sau khi xoá Thân Admin nhấn vào biểu tượng xoá ở cột actions trong bảng manage teams để xoá nhóm
THIẾT KẾ CƠ SỞ DỮ LIỆU
N HẬN DIỆN CÁC THỰC THỂ VÀ THUỘC TÍNH
4.1.1 Các thực thể và thuộc tính a) Thực thể users
- id: Mã của từng user, mã này là duy nhất
- email: Tên email cá nhân của user
- role: Vai trò của user trong lab
- isActive: Chỉ ra user đã được vào lab hay chưa
- password: Mật khẩu đăng nhập website của user
- createdAt: Tài khoản user được tạo ngày nào
- updatedAt: Tài khoản user được cập nhật vào ngày nào
- deleteAt: Tài khoản user được xóa (nếu có) vào khi nào trong tương lai
- image: Hình ảnh của user b) Thực thể teams
- id: Mã của từng team trong lab, mã này là duy nhất
- description: Mô tả về team
- isActive: Team đã được kích hoạt chưa
- createdAt: Team được tạo ngày nào
- updatedAt: Team được cập nhật vào ngày nào
- deleteAt: Team được xóa (nếu có) vào khi nào trong tương lai b) Thực thể projects
- id: Mã của từng project trong lab, mã này là duy nhất
- descriptionHTML: Mô tả về project (Đây là mô tả sẽ được nhúng vào trang web hiển thị)
- descriptionMarkdown: Mô tả về project (Đây là mô tả viết bằng file text bình thường)
- createdAt: Project được tạo ngày nào
- updatedAt: Project được cập nhật vào ngày nào
- deleteAt: Project được xóa (nếu có) vào khi nào trong tương lai b) Thực thể jointeams
- id: Mã của từng team được các users tham gia
- idUser: Mã của các users
- idTeam: Mã của các teams
- updatedAt: Ngày được cập nhật
- deleteAt: Ngày được xóa b) Thực thể joinprojects
- id: Mã của từng project được các users tham gia
- idUser: Mã của các users
- idProject: Mã của các projects
- updatedAt: Ngày được cập nhật
4.1.2 Xây dựng mô hình thực thể liên kết
Hình 4.1: Mô hình thực thể liên kết
Mô hình thực thể liên kết với các quan hệ kết nối với nhau
4.1.3 Chuyển mô hình thực thể liên kết sang mô hình quan hệ
Mô hình quan hệ ta chuyển các quan hệ kết nối thành các quan hệ cụ thể giữa các mảng với nhau
Hình 4.2: Mô hình quan hệ
Cơ sở dữ liệu được chuẩn hóa theo kiểu 3-NF:
• Các thuộc tính của bảng phải là nguyên tố
• Giá trị của các thuộc tính trên các hàng phải là đơn trị, không chứa nhóm lặp
• Không có một thuộc tính nào có giá trị có thể tính toán được từ một thuộc tính khác
• Loại bỏ các thuộc tính không khóa phụ thuộc vào một bộ phận khóa chính và tách ra thành một bảng riêng, khóa chính của bảng là bộ phận của khóa mà chúng phụ thuộc vào
• Các thuộc tính còn lại lập thành một quan hệ, khóa chính của nó là khóa chính ban đầu
• Loại bỏ các thuộc tính phụ thuộc bắc cầu ra khỏi quan hệ và tách chúng thành quan hệ riêng có khóa chính là thuộc tính bắc cầu
• Các thuộc tính còn lại lập thành một quan hệ có khóa chính là khóa ban đầu
4.1.5 Từ điển dữ liệu các pha thiết kế
Các thuộc tính bảng users
Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú id INT Giá trị số nguyên PK firstName VARCHAR Giá trị là chữ lastName VARCHAR Giá trị là chữ email VARCHAR Giá trị là chữ role VARCHAR Giá trị là chữ isActive VARCHAR Giá trị là chữ password VARCHAR Giá trị là chữ nhưng bị mã hóa createdAt DATE Giá trị là ngày updatedAt DATE Giá trị là ngày deleteAt DATE Giá trị là ngày image LONGBLOB Giá trị của thuộc tính là hình ảnh
Các thuộc tính bảng teams
Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú id INT Giá trị số nguyên PK name VARCHAR Giá trị là chữ description TEXT Giá trị là một đoạn văn isActive VARCHAR Giá trị là chữ createdAt DATE Giá trị là ngày updatedAt DATE Giá trị là ngày deleteAt DATE Giá trị là ngày
Các thuộc tính bảng projects
Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú id INT Giá trị số nguyên PK name VARCHAR Giá trị là chữ descriptionHTML TEXT Giá trị là một đoạn văn (Được định dạng để viết lên trang web) descriptionMarkdown TEXT Giá trị là một đoạn văn (Được định dạng để viết dưới dạng text thường) image LONGBLOB Giá trị thuộc tính là hình ảnh createdAt DATE Giá trị là ngày updatedAt DATE Giá trị là ngày
36 deleteAt DATE Giá trị là ngày
Các thuộc tính bảng jointeams
Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú id INT Giá trị số nguyên PK idUser INT Giá trị là số nguyên FK idTeam INT Giá trị là số nguyên FK createdAt DATE Giá trị là ngày updatedAt DATE Giá trị là ngày deleteAt DATE Giá trị là ngày
Các thuộc tính bảng joinprojects
Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú id INT Giá trị số nguyên PK idUser INT Giá trị là số nguyên FK idProject INT Giá trị là số nguyên FK createdAt DATE Giá trị là ngày updatedAt DATE Giá trị là ngày deleteAt DATE Giá trị là ngày
C LASS DIAGRAM
S Ơ ĐỒ ERD
THIẾT KẾ GIAO DIỆN
C ÁC CÔNG NGHỆ SỬ DỤNG
- Design component Library: MUI, CSS
- Redux toolkit, Redux persist, React Native Debugger, Async storage
C ẤU TRÚC MỤC CHƯƠNG TRÌNH
- Node_modules: quản lý các package library
- Assets: chứa tài nguyên của App như hình ảnh
- Components: chứa các component tự thiết kế để sử dụng lại (screen, icon, theme)
- Containers: chứa các component giao diện của App
-Routes: tạo các route giữa các chức chức năng của App
- Services: chứa các file lấy api từ BE
- Store: chứa cái file config API theo từng tính năng, các Slide: reducer để thao tác với redux-persist (các state khi gọi API)
-Style: Chứa các file CSS chung của chương trình
-Translation: Chứa các file tiện ích có chức năng chuyển đôi ngôn ngữ
- Utils: Chứa các file tiện ích trong quá trình viết code có tác dụng reuse code, tránh file lớn,
- index.js: File khởi chạy chương trình
- một số file config khác
G IAO DIỆN W EB
Hình 5-1: Màn hình đăng nhập
5.3.2 Giao diện Home với admin
- Đối với giao diện Home của admin sẽ có thêm chức năng Mange Member trên thanh công cụ, thanh công cụ cũng thể hiện kết nối đến 1 số giao diện
Hình 5-2: Màn hình chính với admin
5.3.3 Giao diện Home với User
- Đối với giao diện Home của User sẽ không có chức năng Manage Member, người dùng chỉ có thể xem web tại màn hình Home và các thông tin của User và Project
Hình 5-3: Màn hình chính với user
- Giao diện thể hiện thông tin của các dự án và thành viên trong Lab ở đây có
42 thể xem được thông tin chi tiết của dự án và thành viên Lab
Hình 5-5: Màn hình thành viên lab
Hình 5-6: Màn hình chân trang
5.3.5 Giao diện quản lý thành viên
- Quản lý thành viên với các chức năng thêm, xóa , sửa thành viên
Hình 5-7: Màn hình thêm thành viên
Hình 5-8: Bảng các thành viên có chức năng xóa, sửa
Hình 5-9: Màn hình sửa thông tin thành viên
5.3.6 Giao diện chi tiết người dùng
- Giao diện thông tin chi tiết của từng người dùng
Hình 5-10: Màn hình thông tin chi tiết thành viên
5.3.7 Giao diện quản lý dự án
- Quản lý dự án với các chức năng thêm, xóa ,sửa dự án
Hình 5-11: Màn hình thêm project
Hình 5-12: Màn hình sửa project
- Giao diện thêm thành viên vào dự án
Hình 5-13: Màn hình thêm thành viên vào project
5.3.8 Giao diện chi tiết dự án
- Giao diện cho biết thông tin chi tiết của dự án
Hình 5-14: Màn hình thông tin chi tiết dự án
5.3.9 Giao diện quản lý nhóm
- Quản lý nhóm với các chức năng thêm, xóa ,sửa nhóm
Hình 5-15: Màn hình thêm nhóm mới và bảng quản lý nhóm
Hình 5-16: Màn hình sửa nhóm
- Giao diện thêm thành viên vào nhóm
Hình 5-17: Màn hình thêm thành viên vào nhóm
DEMO DỰ ÁN, KIỂM THỬ, SỬA LỖI
K ẾT QUẢ
− Website bao gồm các chức năng: đăng nhập, thêm sửa xóa người dùng, thêm sửa xóa project, team, thêm thành viên vào team, project
− Xây dựng các giao diện đẹp mắt giúp , giao diện dễ sử dụng
− Xây dựng được thông tin chi tiết về project, từng thành viên của Lab
− Trang web có thể chuyển đổi ngôn ngữ giữa tiếng anh và tiếng việt
− Chưa deploy được Website, chỉ cài đặt trên localhost
− Chưa có chức năng thêm team vào project
− Thêm chức năng đăng nhập bằng các tài khoản xã hội như: Facebook,
− Deploy trang web trên một máy chủ và cài đặt một tên miền giúp mọi người dễ dàng truy cập đến trang web
− Xây dựng thêm chức năng tạo lịch họp, đóng góp ý kiến cho Lab
D EMO MỘT SỐ HOẠT ĐỘNG CỦA CHƯƠNG TRÌNH
- Demo chức năng thêm thành viên
Hình 6.2: Sau khi thêm thành viên
-Demo chức năng xóa thành viên
-Demo chức năng sửa thành viên
Hình 6.4: Trước khi sửa thông tin thành viên
Hình 6.5: Sau khi sửa thông tin thành viên
-Demo chức năng thêm thành viên vào team
Hình 6.6: Trước khi thêm thành viên vào team
Hình 6.7: Sau khi thêm thành viên vào team
M INH HỌA QUÁ TRÌNH KIỂM THỬ , LẬP TRÌNH PHÒNG NGỪA , GỠ RỐI
-Dùng các câu lệnh console.log(e) để hiện thị lỗi trên console
-Dùng hàm kiểm tra ngoại lệ
-Try and catch để bắt ngoại lệ
