(Đồ án tốt nghiệp) 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 SKL007167 Tp Hồ Chí Minh, năm 2020 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 HUỲNH THỊ TUYẾT NHI Đề 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 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 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: 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 năm 20 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) Đ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: Ưu điểm: 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 năm 20 Giáo viên phản biện (Ký & ghi rõ họ tên) Div Div Div Selec 10 Selec 11 Div 1.13.18 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 Label Input Label Input Label Input Date Label 10 File 11 Butto 12 Butto 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 STT Loại đ 66 Tab Div Div Butto 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 STT Loại đ 67 Tab Input Selec Table Selec 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 STT Loại đ 68 Chart Label Div 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 STT Loại đ 69 Butto Input Butto Butto Butto CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 1.14 CÀI ĐẶT 1.14.1 Ngơn ngữ lập trình 1.14.2 ● Xây dựng front end : HTML , CSS , Javascript, es6 ● Xây dựng Back-end : Javascript, es6 Công nghệ sử dụng ● 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 1.14.3 Hướng dẫn cài đặt ● ● 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 1.14.4 Cấu trúc thư mục Nodejs 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 1.14.5 Cấu trúc thư mục Reactjs 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 Kiểm tra màu sắc độ nét thành phần giao diện Test chuyển trang Test Đăng nhập Test đăng ký Test chức tạo dự án Test chức tạo công việc Test chức xem thông tin cá nhân Test chức cập nhập thông tin cá nhân Test chức tạo tiến trình 10 Test chức kéo thả cơng việc vào tiến trình 1.15.2 Kiểm t Id Test Name Test chức chỉnh sửa thông tin dự án Test chức thêm trạng thái dự án Test chức thêm thành viên Test chức xoá trạng thái Test chức xếp trạng thái Test chức đổi quyền thành viên Test chức xoá thành viên khỏi dự án 74 1.15.3 Kiểm tra hệ thống dành riêng cho teacher Bảng 5.3 Id Test Name Test chức xem báo cáo 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 ... 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. .. THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN - - MAI VĨNH THÀNH HUỲNH THỊ TUYẾT NHI Đề 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Ỹ... 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