(Đồ án hcmute) 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

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CƠNG NGHỆ THƠNG TIN 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 GVHD:ThS NGUYỄN MINH ĐẠO SVTH:MAI VĨNH THÀNH MSSV:16110460 SVTH:HUỲNH THỊ TUYẾT NHI MSSV:16110409 SKL 0 7 Tp Hồ Chí Minh, năm 2020 an 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 an 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 an ĐH SƯ PHẠM KỸ THUẬT CỘNG HOÀ XÃ HỘI CHỦ NGHĨA TP.HCM VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: MAI VĨNH THÀNH MSSV 1: 16110460 Họ tên Sinh viên 2: HUỲNH THỊ TUYẾT NHI MSSV 2: 16110409 Ngành: Công nghệ Thông tin Tên đề 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 Họ tên giáo viên hướng dẫn: ThS NGUYỄN MINH ĐẠO NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: an Khuyết điểm Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an năm 20 ĐH SƯ PHẠM KỸ THUẬT CỘNG HOÀ XÃ HỘI CHỦ NGHĨA TP.HCM VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: MAI VĨNH THÀNH MSSV 1: 16110460 Họ tên Sinh viên 2: HUỲNH THỊ TUYẾT NHI MSSV 2: 16110409 Ngành: Công nghệ Thông tin Tên đề 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 Họ tên giáo viên phản biện: ThS MAI TUẤN KHÔI NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: an Ưu điểm: Khuyết điểm an Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên phản biện (Ký & ghi rõ họ tên) an năm 20 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 an ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN ⎯⎯⎯⎯⎯⎯⎯⎯⎯ ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP Họ tên SV: Mai Vĩnh Thành …………… MSSV: 16110460 Huỳnh Thị Tuyết Nhi ….……………… MSSV: 16110409 Thời gian làm khoá luận: từ: 30/03/2020 đến: 05/08/2020 Chun ngành: Cơng Nghệ Phần Mềm Tên khóa luận: Tìm hiểu công nghệ MernStack xây dựng ứng dụng website quản lý vào báo cáo đồ án GV hướng dẫn: ThS Nguyễn Minh Đạo Nhiệm vụ khóa luận: - Tìm hiểu cơng nghệ MernStack - Xây dựng website quản lý vào báo cáo đồ án Đề cương viết luận văn: Phần 1: MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Đối tượng phạm vị nghiên cứu Phương pháp nghiên cứu Phần 2: NỘI DUNG CHƯƠNG 1: CỞ SỞ LÝ THUYẾT an 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 q 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 an 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 an 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 an 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 an 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 độ hồ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 độ hoà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 an 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 an 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 an - 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 an 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 an 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 an 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 Xố thành viên khỏi Khơng thể tự xố dự án 74 an 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 an 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 an 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 an an ... Cơng Nghệ Phần Mềm Tên khóa luận: Tìm hiểu cơng nghệ MernStack xây dựng ứng dụng website quản lý vào báo cáo đồ án GV hướng dẫn: ThS Nguyễn Minh Đạo Nhiệm vụ khóa luận: - Tìm hiểu cơng nghệ MernStack. .. 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 an - Tìm hiểu nghiệp vụ... HUỲNH THỊ TUYẾT NHI MSSV 2: 16110409 Ngành: Công nghệ Thông tin Tên đề 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 Họ tên giáo viên phản biện: ThS MAI TUẤN