Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án

Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN -🙞🙞🙞🙞🙞 - MAI VĨNH THÀNH - 16110460 HUỲNH THỊ TUYẾT NHI - 16110409 Đề tài: TÌM HIỂU CƠNG NGHỆ MERNSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE QUẢN LÝ VÀ BÁO CÁO ĐỒ ÁN KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN MINH ĐẠO KHÓA 2016 – 2020 LỜI CẢM ƠN Để hồn thành Khóa luận tốt nghiệp chun ngành Cơng Nghệ Phần Mềm nói chung q trình tìm hiểu công nghệ để xây dựng website quản lý báo cáo đồ án, nhóm chúng em xin gửi lời cảm ơn chân thành đến: Ban giám hiệu trường Đại Học Sư Phạm Kỹ Thuật TP.HCM tạo điều kiện sở vật chất tốt, đáp ứng nhu cầu sinh viên, giảng viên với phòng học đẹp, máy chiếu, wifi để phục vụ cho việc học tập tìm kiếm thơng tin sinh viên, giảng dạy giảng viên Quý Thầy Cô Khoa Công Nghệ Thông Tin Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM tạo điều kiện thuận lợi cho nhóm chúng em thực đề tài khóa luận tốt nghiệp Giảng viên hướng dẫn Thầy Nguyễn Minh Đạo, người giảng dạy, hướng dẫn bảo tận tình, chi tiết, giải đáp thắc mắc kịp thời để chúng em hồn thành đề tài khóa luận tốt nghiêp cách tốt Xin chân thành cảm ơn anh, chị khóa bạn bè ủng hộ, giúp đỡ động viên chúng em thời gian học tập nghiên cứu khóa luận tốt nghiệp Do chưa có nhiều kinh nghiệm nên khơng thể tránh khỏi thiếu sót hạn chế, mong nhận ý kiến đóng góp từ phía thầy, để đề tài hồn thiện TP Hồ Chí Minh, ngày … tháng 08 năm 2020 Nhóm sinh viên thực MAI VĨNH THÀNH HUỲNH THỊ TUYẾT NHI Mục lục LỜI CẢM ƠN ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN PHẦN MỞ ĐẦU 12 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1.2 MỤC TIÊU CỦA ĐỀ TÀI 1.3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 1.3.1 Đối tượng nghiên cứu 1.3.2 Phạm vi nghiên cứu 1.4 PHƯƠNG PHÁP NGHIÊN CỨU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 GIỚI THIỆU MERN STACK 3 1.1.1 Khái niệm[1] 1.1.2 Đặc điểm bật Mern Stack 1.2 Giới thiệu React [2] 1.3 Giới thiệu NodeJs[3] 1.3.1 Khái niệm NodeJs 1.3.2 Đặc điểm NodeJs 1.3.3 Khái niệm RESTFUL Api[4] 1.4 Giới thiệu ExpressJs [5] 1.5 Giới thiệu MongoDb[6] 10 1.6 Kết Luận 12 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 1.7 KHẢO SÁT CÁC WEBSITE LIÊN QUAN: 13 13 1.7.1 Trang web jira 13 1.7.2 Trang web trello 13 1.8 Xác định yêu cầu 13 1.8.1 Yêu cầu chức 13 1.8.2 u cầu phi chức 15 CHƯƠNG 2: MƠ HÌNH HĨA U CẦU 16 1.9 LƯỢC ĐỒ DIAGRAM 1.10 MƠ TẢ YÊU CẦU 16 16 1.10.1 Đăng ký 16 1.10.2 Đăng nhập 18 1.10.3 Quên mật 19 1.10.4 Đổi mật 20 1.10.5 Đăng nhập gmail 21 1.10.6 Tạo dự án 22 1.10.7 Sửa thông tin cá nhân 23 1.10.8 Sửa thông tin dự án 24 1.10.9 Thêm thành viên vào dự án 25 1.10.10 Thêm trạng thái công việc 26 1.10.11 Thêm công việc vào dự án 27 1.10.11 Thêm tiến trình vào dự án 28 1.10.12.Kéo cơng việc vào tiến trình 29 1.10.13 Kéo cơng việc vào trạng thái 30 1.10.14 Sửa thông tin công việc 31 1.10.15 Sửa thơng tin tiến trình 31 1.10.16 Xóa tiến trình 32 1.10.17 Bình luận cơng việc 33 1.10.18 Sửa mô tả công việc 34 1.10.19 Tạo báo cáo 35 1.10.20 Sửa báo cáo 36 1.10.21.Xóa mục báo cáo 37 1.10.22 Thêm mục báo cáo 38 1.10.23 Xố trạng thái cơng việc 38 1.10.24 Sắp xếp trạng thái công việc 39 1.10.25 Thay đổi quyền dự án 40 1.10.26 Xem tiến độ dự án 41 1.10.27 Bắt đầu tiến trình 41 CHƯƠNG 3: THIẾT KẾ WEBSITE 43 1.11 ĐẶC TẢ WEBSTITE: 43 1.12 THIẾT KẾ CƠ SỞ DỮ LIỆU 44 1.13 THIẾT KẾ GIAO DIỆN 46 1.13.1 Đăng nhập 46 1.13.2 Đăng ký 48 1.13.3 Quên mật 49 1.13.4 Trang chủ Client 50 1.13.5 Trang thông tin người dùng 51 1.13.6 Giao diện hiển thị lịch sử hoạt động người dùng 52 1.13.7 Giao diện hiển thị danh sách dự án 53 1.13.8 Tạo dự án 54 1.13.9 Tìm kiếm dự án 55 1.13.10 Thông tin chi tiết dự án 55 1.13.11 Giao diện tạo tiến trình 57 1.13.12 Giao diện tạo cơng việc 58 1.13.13 Màn hình chỉnh sửa tiến trình cơng việc 59 1.13.14 Màn hình chỉnh sửa công việc 60 1.13.15 Xem thông tin công việc 61 1.13.16 Mô tả thông tin phân chia công việc 62 1.13.17 Giao diện hình chỉnh sửa mơ tả, để lại bình luận cơng việc, lọc cơng việc theo tiến trình, tiến độ, phân chia cơng việc 63 1.13.18 Giao diện chỉnh sửa dự án 64 1.13.19 Giao diện cho phép thêm tiến độ công việc vào dự án, cho phép kéo thả tiến độ 66 1.13.20 Giao diện thêm thành viên vào dự án 67 1.13.21 Hiển thị thống kê tiến độ hoàn thành dự án 68 1.13.22 Giao diện chỉnh sửa hình báo cáo 69 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 1.14 CÀI ĐẶT 70 70 1.14.1 Ngơn ngữ lập trình 70 1.14.2 Công nghệ sử dụng 70 1.14.3 Hướng dẫn cài đặt 70 1.14.4 Cấu trúc thư mục Nodejs 70 1.14.5 Cấu trúc thư mục Reactjs 1.15 Kiểm thử 71 71 1.15.1 Kiểm thử hệ thống user: 71 1.15.2 Kiểm tra hệ thống danh riêng cho manager 73 1.15.3 Kiểm tra hệ thống dành riêng cho teacher 75 PHẦN KẾT LUẬN 76 1.16 Kết đạt 76 1.17 Ưu điểm 76 1.18 Hạn chế 76 1.19 Hướng phát triển 76 DANH MỤC TÀI LIỆU THAM KHẢO DANH MỤC HÌNH ẢNH ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ Ảnh 1: Cấu trúc hoạt động RESTful web service Ảnh 2: Lược đồ diagram Ảnh : Thiết kế giao diện Ảnh 4: Giao diện đăng nhập người dùng Ảnh 5: Giao diện đăng ký Ảnh 6: Giao diện quên mật Ảnh 7: Trang chủ client Ảnh 8: Giao diện thông tin người dùng Ảnh 9: Giao diện thông tin người dùng Ảnh 10: Giao diện hiển thị danh sách dự án 77 ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ Ảnh 11: Giao diện tạo dự án Ảnh 12: Giao diện tìm kiếm dự án Ảnh 13: Giao diện thông tin chi tiết dự án Ảnh 14: Giao diện tạo tiến trình Ảnh 15: Giao diện cơng việc Ảnh 16 : Màn hình chỉnh sửa tiến trình cơng việc Ảnh 17 : Giao diện hình chỉnh sửa công việc Ảnh 18 : Giao diện thông tin công việc Ảnh 19 : Giao diện mô tả phân chia công việc Ảnh 20: Giao diện chỉnh sửa mơ tả, bình luận, lọc cơng việc phân chia công việc Ảnh 21 : Giao diện chỉnh sửa dự án Ảnh 22 : Giao diện thêm công việc kéo thả Ảnh 23: Giao diện thêm thành viên vào dự án Ảnh 24: Giao diện hiển thị thống kê tiến độ hoàn thành dự án Ảnh 25 : Giao diện chỉnh sửa hình báo cáo DANH MỤC BẢNG BIỂU Bảng 3.1 Mô tả Use Case Đăng ký Bảng 3.2 Mô tả Use Case đăng nhập Bảng 3.3 Mô tả Use Case quên mật Bảng 3.4 Mô tả Use Case đổi mật Bảng 3.5 Mô tả Use Case đăng nhập gmail Bảng 3.6 Mô tả Use Case tạo dự án Bảng 3.7 Mô tả Use Case sửa thông tin cá nhân Bảng 3.8 Mô tả Use case sửa thông tin dự án Bảng 3.9 Mô tả Use case thêm thành viên vào dự án Bảng 3.10 Mô tả Use case thêm trạng thái công việc Bảng 3.11 Mô tả Use case thêm công việc vào dự án Bảng 3.12 Mô tả Use case thêm tiến trình vào dự án Bảng 3.13 Mơ tả Use case kéo cơng việc vào tiến trình Bảng 3.14 Mơ tả Use case kéo công việc vào trạng thái Bảng 3.15 Mô tả Use case sửa thông tin công việc Bảng 3.16 Use case sửa thơng tin tiến trình Bảng 3.17 Mơ tả Use case xóa tiến trình Bảng 3.18 Mơ tả Use case bình luận cơng việc Bảng 3.19 Mô tả Use case sửa mô tả công việc Bảng 3.20 Mô tả Use case tạo báo cáo Bảng 3.21 Mô tả Use case sửa báo cáo Bảng 3.22 Mô tả Use case xóa báo cáo Bảng 3.23 Mơ tả Use case thêm báo cáo Bảng 3.24 Mô tả Use case xố trạng thái cơng việc Bảng 3.25 Use case xếp trạng thái công việc Bảng 3.26 Mô tả Use case xếp trạng thái công việc Bảng 3.27 Mô tả Use case xem tiến độ dự án Bảng 3.28 Mơ tả Use case bắt đầu tiến trình Bảng 4.1 Danh sách đối tượng giao diện đăng nhập người dùng Bảng 4.2 Danh sách đối tượng giao diện đăng ký thành viên Bảng 4.3 Danh sách đối tượng giao diện quên mật Bảng 4.4 Danh sách đối tượng giao diện trang chủ người dùng Bảng 4.5 Danh sách đối tượng giao diện thông tin người dùng Bảng 4.6 Danh sách đối tượng giao diện lịch sử hoạt động Bảng 4.7 Danh sách đối tượng giao diện danh sách dự án Bảng 4.8 Danh sách đối tượng giao diện tạo dự án Bảng 4.9 Danh sách đối tượng giao diện tìm kiếm dự án Bảng 4.10 Danh sách đối tượng giao diện thông tin dự án Bảng 4.11 Danh sách đối tượng giao diện tạo tiến trình Bảng 4.12 Danh sách đối tượng tạo công việc 17 18 19 20 21 22 22 23 24 25 26 27 28 28 29 30 31 31 32 33 34 34 35 36 36 37 38 38 44 45 46 47 48 49 50 51 52 53 54 55 Bảng 4.13 Danh sách đối tượng hình chỉnh sửa tiến trình 56 Bảng 4.14 Danh sách đối tượng hình chỉnh sửa công việc 57 Bảng 4.15 Danh sách đối tượng hình thơng tin cơng việc 58 Bảng 4.16 Danh sách đối tượng giao diện mô tả thông tin phân chia công việc 59 Bảng 4.17 Danh sách đối tượng giao diện sửa mô tả, để lại bình luận, lọc cơng việc phân chia cơng việc 60 Bảng 4.18 Danh sách đối tượng giao diện chỉnh sửa dự án 61 Bảng 4.19 Danh sách đối tượng giao diện thêm tiến độ công việc 63 Bảng 4.20 Danh sách đối tượng giao diện thêm thành viên vào dự án 63 Bảng 4.21 Danh sách đối tượng giao diện thống kê tiến độ hồn thành cơng việc 64 Bảng 4.22 Danh sách đối tượng giao diện chỉnh sửa hình báo cáo 65 Bảng 5.1 Bảng kiểm thử hệ thống user 71 Bảng 5.2 Kiểm tra hệ thống dành riêng cho manager 73 Bảng 5.3 Kiểm tra hệ thống dành riêng cho teacher 75 PHẦN MỞ ĐẦU TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1.1 Hiện nay, nhu cầu phát triển quản lý dự án phần mềm ngày tăng cao, đặt biệt môi trường đại học mà sinh viên ngày nhiều đồ án cuối kỳ môn học lại quản lý thời gian cơng việc để hồn thành đồ án thời gian quy định quy trình Nhu cầu cấp thiết báo cáo đồ án viết báo cáo khó khăn lớn sinh viên Các sinh viên cấu trúc báo cáo gồm phần nào, viết không với yêu cầu giáo viên đưa Với vấn đề nêu trên, nhóm chúng em định thiết kế phần mềm giải mục tiêu cách khoa học Giúp giảm tải khối lượng công việc lớn cho sinh viên, giúp tạo lượng lớn thời gian để trau chuốt cho đồ án tốt 1.2 MỤC TIÊU CỦA ĐỀ TÀI - Tìm hiểu cơng nghệ MernStack - Ứng dụng công nghệ xây dựng dựng website quản lý báo cáo đồ án - Viết báo cáo khoa học 1.3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 1.3.1 Đối tượng nghiên cứu - Công nghệ MernStack - Các cơng nghệ thư viện phía front-end như: lodash, moment, material UI - Lĩnh vực phát triển website: website quản lý báo cáo đồ án 1.3.2 Phạm vi nghiên cứu - Tìm hiểu cơng nghệ sử dụng đề tài: MernStack - Tìm hiểu nghiệp vụ quản lý dự án, SCRUM 1.13.17 Giao diện hình chỉnh sửa mơ tả, để lại bình luận cơng việc, lọc cơng việc theo tiến trình, tiến độ, phân chia công việc Ảnh 12: Giao diện chỉnh sửa mơ tả, bình luận, lọc cơng việc phân chia cơng việc Mơ tả : Màn hình cho phép người dùng lọc công việc theo tiến trình hay tiến độ, thay đổi mơ tả cơng việc, phân chia công việc cho thành viên khác dự án Danh sách đối tượng: Bảng 4.17 Danh sách đối tượng giao diện sửa mô tả, để lại bình luận, lọc cơng việc phân chia cơng việc Loại đối tượng Mô tả Label Hiển thị tên công việc Input Hiển thị mô tả công việc Button Button thực việc lưu thay đổi mô tả công STT việc Input Nơi nhập nội dung bình luận cơng việc Button Button xác nhận, gửi nội dung bình luận cơng việc 63 Div Label tên người phân chia công việc Div Hiển thị tên người phân chia công việc Div Label tên người nhận công việc phân chia Select box Hiển thị danh sách thành viên dự án, chọn thành viên để nhận công việc 10 Hiển thị danh sách tiền độ tiến trình Select cần lọc 11 1.13.18 Tên công việc sau trình lọc Div Giao diện chỉnh sửa dự án Ảnh 21 : Giao diện chỉnh sửa dự án Mô tả : Màn hình chỉnh sửa dự án Danh sách đối tượng: Bảng 4.18 Danh sách đối tượng giao diện chỉnh sửa dự án STT Loại đối tượng Mô tả 64 Tab Tab hiển thị chỉnh sửa dự án Label Hiển thị tên dự án Input Nơi nhập tên dự án cần chỉnh sửa Label Hiển thị mô tả dự án Input Nơi nhập mô tả dự án cần chỉnh sửa Label Hiển thị ngày tạo dự án Input Nơi hiển thị ngày tạo dự án Date picker Nơi chọn ngày tạo dự án Label Hiển thị hình ảnh dự án 10 File Cho phép chọn file từ máy tính để cập nhập hình ảnh cho dự án 11 Button Tiến hành xác nhận thành công chỉnh sửa 12 Button Hủy việc chỉnh sửa dự án 65 1.13.19 Giao diện cho phép thêm tiến độ công việc vào dự án, cho phép kéo thả tiến độ Ảnh 22 : Giao diện thêm công việc kéo thả Mô tả : Màn hình cho phép người dùng thêm tiến độ công việc kéo thả Danh sách đối tượng: Bảng 4.19 Danh sách đối tượng giao diện thêm tiến độ công việc Loại đối tượng Mô tả Tab Tab thêm tiến độ Div Tên tiến độ Div Tên tiến độ Button Thêm tiến độ STT 66 1.13.20 Giao diện thêm thành viên vào dự án Ảnh 23: Giao diện thêm thành viên vào dự án Mơ tả : Màn hình thêm thành viên vào dự án Danh sách đối tượng: Bảng 4.20 Danh sách đối tượng giao diện thêm thành viên vào dự án Loại đối tượng Mô tả Tab Tab thêm thành viên vào dự án Input Nơi nhập email thành viên muốn thêm Select box Hiển thị danh sách thành viên theo đầu STT vào nhập Table Hiển thị danh sách thành viên dự án Select Hiển thị danh sách quyền thành viên dự án 67 1.13.21 Hiển thị thống kê tiến độ hoàn thành dự án Ảnh 24: Giao diện hiển thị thống kê tiến độ hoàn thành dự án Mô tả : Hiển thị thống kê tiến độ hoàn thành dự án Danh sách đối tượng: Bảng 4.21 Danh sách đối tượng giao diện thống kê tiến độ hồn thành cơng việc Loại đối tượng Mơ tả Chart Mơ tả tiến độ hồn thành dự án Label Label hiển thị thống kê Div Hiển thị số lượng công việc tiến độ STT 68 1.13.22 Giao diện chỉnh sửa hình báo cáo Ảnh 25 : Giao diện chỉnh sửa hình báo cáo Mơ tả : Màn hình chỉnh sửa báo cáo Danh sách đối tượng: Bảng 4.22 Danh sách đối tượng giao diện chỉnh sửa hình báo cáo Loại đối tượng Mô tả Button Button xem báo cáo Input Nơi chỉnh sửa tên chương Button Xóa chương có sẵn hay vừa tạo Button Upload hình ảnh từ máy tính Button Thêm block vào giao diện báo cáo STT 69 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 1.14 CÀI ĐẶT Ngôn ngữ lập trình 1.14.1 ● Xây dựng front end : HTML , CSS , Javascript, es6 ● Xây dựng Back-end : Javascript, es6 Công nghệ sử dụng 1.14.2 ● NodeJS: Xây dựng back-end ● ReactJS : Xây dựng front end ● Express : Hỗ trợ tạo web server ● MongoDB: Lưu trữ liệu Hướng dẫn cài đặt 1.14.3 ● Mở thư mục bên có thư mục bao gồm: ○ Nodejs ○ Reactjs ● Mở thư mục Nodejs: vào cmd thư mục gõ lệnh npm install, đợi sau chương trình chạy hồn tất gõ lệnh npm run start ● Mở thư mục Reactjs: vào cmd thư mục gõ lệnh npm install, đợi sau chương trình chạy hồn tất gõ lệnh npm run start, sau chương trình chạy xong lên cửa sổ trình duyệt trang login Cấu trúc thư mục Nodejs 1.14.4 Thư mục chia thành thư mục con: - Model: chứa file định danh collection mongodb - Controller: chứa file truy cập vào database lấy đầu vào từ router xử lý thông tin trả kết cho api - Routes: Định danh api dự án 70 - Server.js: file để chạy chương trình - Helpers: Chứa hàm sử dụng nhiều lần - Middleware: Chứa file kiểm tra token user gửi lên kiểm tra quyền user - App.js: Tổng hợp routes, upload file - Database.js: kết nối với sở liệu Cấu trúc thư mục Reactjs 1.14.5 Thư mục chia thành thư mục con: - Public: Chứa file html, css, ảnh dự án - Src: Chứa thư mục sau: - Components: Chứa component dùng nhiều lần - Core: Chứa page trang chủ, đăng nhập, đăng xuất, … - Info User: Chứa page liên quan đến thông tin user - List Project: Chứa page liên quan đến dự án user - Project: Chứa page dự án bao gồm trang backlog, active print, info project, report, statistic, - Reducer: Chứa mẫu liệu lưu thông tin từ backend gửi lên 1.15 KIỂM THỬ 1.15.1 Kiểm thử hệ thống user: Bảng 5.1 Bảng kiểm thử hệ thống user Id Test Name Test description Output Result Kiểm tra màu sắc Mở website thay đổi Nội dung chữ , hình ảnh Pass độ nét độ sáng hình nhìn rõ từ 100% > 25% 71 thành phần giao diện Test chuyển trang Mở website , click Các trang load chuyển trang thơng nhanh chóng, địa qua button , Pass đường link có website Test Đăng nhập Mở website , đăng Đăng nhập thành công , nhập website với tài báo lỗi đăng nhập khoản user Thử sai Pass đăng nhập sai mật , sai username Test đăng ký Mở website , chuyển Đăng ký tài khoản thành đến trang đăng ký tài công khoản , nhập thông Thông báo cung cấp tin nhấn button thông tin sai sai đăng ký kiểu liệu Pass Nhập thông tin sai với yêu cầu không kiểu liệu Test chức Mở giao diện danh Xem danh sách dự tạo dự án sách dự án án tham gia Mở modal tạo Tạo thành công dự án Nhập thông tin Pass nhấn lưu Test chức Mở trang backlog tạo công việc Tạo thành công công việc thông báo 72 Pass Mở modal tạo Nếu không thành công công việc thông báo không Nhập thông tin công tạo việc Test chức Click vào button Thông tin cá nhân hiển xem thông tin cá thông tin cá nhân thị đầy đủ Test chức Click vào button cập Có thể cập nhật Pass cập nhập thông nhập Pass Pass nhân tin cá nhân 10 Test chức Mở trang backlog Tạo thành cơng cơng tạo tiến trình Mở modal tạo việc thơng báo tiến trình Nếu không thành công Nhập thông tin tiến thông báo khơng trình tạo Test chức Mở trang backlog Các công việc lưu kéo thả công việc Kéo thả cơng việc vào tiến trình tương vào tiến trình vào tiến trình ứng sau thả Pass vào 1.15.2 Kiểm tra hệ thống dành riêng cho manager Bảng 5.2 Id Test Name Test description Output Result Test chức Mở trang edit project Thay đổi thông tin dự án Pass chỉnh sửa thông Thay đổi thông tin dự tin dự án án 73 Nhấn lưu Test chức Mở trang add process Trạng thái thêm trạng thái Thêm trạng thái bên trạng dự án thái cũ Test chức Mở trang add Hiện danh sách thêm thành viên member user có gmail chứa ký tự Search gmail thành tìm viên muốn thêm Thành viên thêm vào có Chọn thành viên vào quyền developer Test chức Mở trang add process Trạng thái bị xoá khỏi xoá trạng thái Nhấn nút xoá trạng danh sách thái Khơng xố trạng Pass Pass Pass thái todo done Test chức Mở trang add process Các trạng thái sắp xếp trạng thái Kéo thả trạng thái xếp theo mong muốn Pass theo ý muốn Test chức Mở trang add Thành viên thay đổi quyền thành member đổi quyền dự án viên Chọn quyền cho Pass thành viên Test chức Mở trang add Thành viên bị xoá khỏi xoá thành viên member dự án khỏi dự án Xoá thành viên khỏi Khơng thể tự xố dự án 74 Pass 1.15.3 Kiểm tra hệ thống dành riêng cho teacher Bảng 5.3 Id Test Name Test description Output Result Test chức Mở trang báo cáo Chỉ xem báo cáo Pass xem báo cáo quyền xem 75 PHẦN KẾT LUẬN 1.16 KẾT QUẢ ĐẠT ĐƯỢC Sau thời gian nghiên cứu thực đề tài “Tìm hiểu cơng nghệ MernStack xây dựng ứng dụng quản lý báo cáo đồ án”, nhóm nắm kiến thức tảng công nghệ MernStack ứng dụng MernStack để hoàn thành trang web dự kiến Ngồi ra, nhóm cịn đạt kết sau: - Hiểu sâu javascript - Sử dụng tốt thư viện javascript materialUI, lodash - Ứng dụng node js viết web server api 1.17 ƯU ĐIỂM Ứng dụng có ưu điểm sau: - Đáp ứng chức cần thiết để quản lý dự án phần mềm - Giúp quản lý công việc, thời gian cách dễ dàng hiệu - Giao diện thân thiện dễ sử dụng 1.18 HẠN CHẾ Ứng dụng có nhược điểm sau: - Tốc độ xử lý chậm, chưa phát huy mạnh công nghệ nodejs - Chưa sâu vào vấn đề bảo mật 1.19 HƯỚNG PHÁT TRIỂN Vì thời gian nghiên cứu nguồn lực có hạn nên ứng dụng cịn nhiều thiếu sót Trong tương lai nhóm cố gắng phát triển cơng cụ theo hướng: - Tăng tốc độ xử lý - Bảo mật ứng dụng - Thêm đa dạng loại báo cáo cho môn học cụ thể 76 DANH MỤC TÀI LIỆU THAM KHẢO [1] https://techblog.vn/gioi-thieu-mern-stack [2] https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 [3] https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-ve-nodejs.html [4] https://topdev.vn/blog/restful-api-la-gi/ [5] https://techblog.vn/phan-1-tim-hieu-express-js-framework [6] https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N 77 ... vực phát triển website: website quản lý báo cáo đồ án 1.3.2 Phạm vi nghiên cứu - Tìm hiểu cơng nghệ sử dụng đề tài: MernStack - Tìm hiểu nghiệp vụ quản lý dự án, SCRUM - Tìm hiểu nghiệp vụ liên... lượng công việc lớn cho sinh viên, giúp tạo lượng lớn thời gian để trau chuốt cho đồ án tốt 1.2 MỤC TIÊU CỦA ĐỀ TÀI - Tìm hiểu công nghệ MernStack - Ứng dụng công nghệ xây dựng dựng website quản lý. .. đồ án - Thông tin công việc - Thơng tin tiến trình - Thơng tin báo cáo Truy xuất : ▪ - Danh sách đồ án - Danh sách thành viên đồ án - Danh sách công việc đồ án - Danh sách tiến trình đồ án - Báo