(Đồ án hcmute) xây dựng website quản lý và phân chia công việc sử dụng vue3 và nestjs

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 KHĨA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE QUẢN LÝ VÀ PHÂN CHIA CÔNG VIỆC SỬ DỤNG VUE3 VÀ NESTJS GVHD: TS LÊ VĂN VINH SVTH: NGUYỄN TRƯỜNG THỊNH NGUYỄN QUANG DUY SKL009504 Tp.Hồ Chí Minh, năm 2022 h TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MƠN CƠNG NGHỆ PHẦN MỀM -🙞🙜🕮🙞🙜 - NGUYỄN TRƯỜNG THỊNH – 18110372 NGUYỄN QUANG DUY – 18110261 Đề Tài: XÂY DỰNG WEBSITE QUẢN LÝ VÀ PHÂN CHIA CÔNG VIỆC SỬ DỤNG VUE3 VÀ NESTJS KHÓA LUẬN TỐT NGHIỆP GIẢNG VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2018-2022 h TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MƠN CƠNG NGHỆ PHẦN MỀM -🙞🙜🕮🙞🙜 - NGUYỄN TRƯỜNG THỊNH – 18110372 NGUYỄN QUANG DUY – 18110261 Đề Tài: XÂY DỰNG WEBSITE QUẢN LÝ VÀ PHÂN CHIA CÔNG VIỆC SỬ DỤNG VUE3 VÀ NESTJS KHÓA LUẬN TỐT NGHIỆP GIẢNG VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2018-2022 h ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA 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: Nguyễn Trường Thịnh MSSV 1: 18110372 Họ tên Sinh viên 2: Nguyễn Quang Duy MSSV 2: 18110261 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website quản lý phân chia công việc sử dụng Vue3 NestJs Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh 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 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) h ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA 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: Nguyễn Trường Thịnh MSSV 1: 18110372 Họ tên Sinh viên 2: Nguyễn Quang Duy MSSV 2: 18110261 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website quản lý phân chia công việc sử dụng Vue3 NestJs Họ tên Giáo viên phản biện: ThS Nguyễn Hữu Trung 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 2022 Giáo viên phản biện (Ký & ghi rõ họ tên) h LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm chúng em học tập, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh nhóm chúng em xin gửi đến thầy Lê Văn Vinh lời cảm ơn sâu sắc Trải qua trình dài học tập thực đề tài thời gian qua Thầy tận tâm bảo nhiệt tình nhóm chúng em suốt trình từ lúc bắt đầu kết thúc đề tài Nhờ có tảng kiến thức chuyên ngành vững cộng thêm với kinh nghiệm yêu cầu thực tế xã hội thông qua việc học trường thực tập công ty Tập thể thầy cô Khoa Công Nghệ Thông Tin đặc biệt thầy Lê Văn Vinh tặng cho chúng em khối lượng kiến thức kinh nghiệm khổng lồ chuyên ngành công việc tương lai Đặc biệt điều giúp thơi thúc chúng em hồn thành đề tài Đây hành trang vô lớn chúng em trước bước sống Tuy nhiên lượng kiến thức vô tận với khả hạn hẹp chúng em cố gắng để hồn thành cách tốt Chính việc xảy thiếu sót điều khó tránh khỏi Chúng em hi vọng nhận góp ý tận tình q thầy (cơ) qua chúng em rút học kinh nghiệm hoàn thiện cải thiện nâng cấp lại sản phẩm cách tốt Chúng em xin chân thành cảm ơn! Nhóm thực Nguyễn Trường Thịnh - 18110372 Nguyễn Quang Duy – 18110261 h Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa Cơng nghệ Thơng tin ĐỀ CƯƠNG KHĨA LUẬN TỐT NGHIỆP Họ tên Sinh viên 1: Nguyễn Trường Thịnh MSSV 1: 18110372 Họ tên Sinh viên 2: Nguyễn Quang Duy MSSV 2: 18110261 Chuyên ngành: Công nghệ phần mềm Tên khóa luận: Xây dựng website quản lý phân chia công việc sử dụng Vue3 NestJs Thời gian làm khóa luận: Từ 23/03/2022 đến 10/07/2022 (15 tuần) Họ tên Giáo viên hướng dẫn: TS Lê Văn Vinh Nhiệm vụ khóa luận: Lý thuyết: Các cơng nghệ Restful APIs, NestJS, Vue3, Postgresql Thực hành: ● Sử dụng NestJS, Restful APIs để viết module, APIs hệ thống ● Sử dụng Postgresql để lưu trữ liệu hệ thống ● Vue3 để thiết kế giao diện xử lý tác vụ người dùng hệ thống ● Sử dụng Json Web Token để xác thực người dùng hệ thống ● Tích hợp kết nối đồng với lịch người dùng Google Calendar Đề cương viết khóa luận: PHẦN MỞ ĐẦU TÍNH CẤP THIẾT CỦA ĐỀ TÀI ĐỐI TƯỢNG NGHIÊN CỨU PHẠM VI NGHIÊN CỨU MỤC TIÊU CỦA ĐỀ TÀI KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT NESTJS h RESTFUL APIs VUEJS TYPESCRIPT POSTGRESQL CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HĨA U CẦU KHẢO SÁT HIỆN TRẠNG XÁC ĐỊNH U CẦU MƠ HÌNH HỐ U CẦU CHƯƠNG 3: THIẾT KẾ PHẦN MỀM LƯỢC ĐỒ LỚP CHI TIẾT BẢNG DỮ LIỆU LƯỢC ĐỒ TUẦN TỰ THIẾT KẾ GIAO DIỆN CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ CÀI ĐẶT ỨNG DỤNG KIỂM THỬ ỨNG DỤNG PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC ƯU ĐIỂM NHƯỢC ĐIỂM HƯỚNG PHÁT TRIỂN TÀI LIỆU THAM KHẢO h KẾ HOẠCH THỰC HIỆN Tuần 1+2 Ngày 23/3 – 6/4 Nhiệm vụ(Công việc dự kiến) Sản phẩm - Khảo sát trạng - Thiết kế usecase mơ hình hóa u cầu - Thiết kế sở liệu 3+4+5 7/4 – 29/4 - Tìm hiểu VueJS cho Website - Tìm hiểu NestJS để phát triển API 6+7+8 30/4 – 20/5 - Tìm hiểu cách xây dựng Restful API - Tìm hiểu Postgresql để áp dụng lưu trữ liệu hệ thống + 10 21/5 – 4/6 - Tiến hành phát triển API cho hệ thống dựa kiến thức tìm hiểu 11 + 12 5/6 – 18/6 - Kết hợp phần xây dựng lại với (UI, API, Database) 13 19/6 – 25/6 - Tìm hiểu sửa đổi hồn thiện hệ thống 14 26/6 – 2/7 - Kiểm thử chương trình tiến hành sửa lỗi (nếu có) - Chỉnh sửa tổng hợp báo cáo 15 3/7 – 10/7 Giáo viên hướng dẫn - Hồn tất hệ thống Tp Hồ Chí Minh, ngày tháng Người viết đề cương (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) h năm 2022 Ghi MỤC LỤC ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP KẾ HOẠCH THỰC HIỆN MỤC LỤC DANH SÁCH BẢNG BIỂU 12 DANH SÁCH HÌNH 14 PHẦN MỞ ĐẦU 16 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 16 ĐỐI TƯỢNG NGHIÊN CỨU 16 PHẠM VI NGHIÊN CỨU 16 MỤC TIÊU CỦA ĐỀ TÀI 16 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 17 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 17 PHẦN NỘI DUNG 18 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 18 1.1 NestJS 18 1.1.1 NodeJS gì? 18 1.1.2 Kiến trúc NodeJS 19 1.1.3 Cách thức hoạt động NodeJS 21 1.1.4 NestJS ? 25 1.1.5 Lý sử dụng NestJS: 25 1.2 RESTFUL APIs 26 1.2.1 Các khái niệm 26 1.2.2 Cách thức hoạt động 27 1.3 VueJS 27 1.3.1 Khái niệm 27 1.3.2 Tại nên dùng VueJs ? 28 1.3.3 Ưu, nhược điểm 28 1.4 TypeScript 29 1.4.1 Khái niệm 29 1.4.2 Các kiểu liệu 29 1.4.3 Ưu, nhược điểm 30 h 3.4.10.Giao diện lịch người dùng Hình 42: Giao diện lịch người dùng Bảng 39: Mô tả giao diện lịch người dùng Số thứ tự Loại thẻ Ý nghĩa p Chọn ngày để lọc công việc Button Trở ngày trước Button Đi đến ngày Button Thực đồng lịch Div Nội dung công việc 78 h 3.4.11.Giao diện tạo công việc cửa sổ mở lên Hình 43: Giao diện tạo cơng việc cửa sổ mở lên 79 h Bảng 40: Mô tả giao diện tạo công việc cửa sổ mở lên Số thứ tự Loại thẻ Ý nghĩa Button Nút tắt giao diện tạo công việc Div Trạng thái công việc tạo Button Nút thêm người vào công việc Button Chọn ngày bắt đầu kết thúc Input Vùng nhập tên công việc Input Vùng nhập mô tả công việc Div Danh sách việc phụ công việc tạo Div Thêm công việc phụ Button Tạo công việc 3.4.12.Giao diện quản lý người dùng người quản lý Hình 44: Giao diện quản lý người dùng người quản lý Bảng 41: Mô tả giao diện quản lý người dùng người quản lý Số thứ tự Loại thẻ Ý nghĩa Button Chuyển đến danh sách tất người dùng Button Chuyển đến danh sách người dùng chờ duyệt Input Vùng nhập tên người dùng cần tìm Button Nút xố người dùng Button Nút tạo người dùng 80 h ComboBox Chọn người dùng p Số thứ tự người dùng Div Hình đại diện tên người dùng p Email người dùng 10 p Số điện thoại người dùng 11 p Ngày tạo người dùng 12 i Menu tương tác với người dùng 3.4.13.Giao diện quên mật Hình 45: Giao diện quên mật Bảng 42: Mô tả giao diện quên mật Số thứ tự Loại thẻ Ý nghĩa Button Chuyển đến trang đăng nhập Button Chuyển đến trang đăng ký Input Nhập email tài khoản cần lấy lại mật 81 h Gửi email khôi phục mật Button 3.4.14.Giao diện thay đổi ảnh đại diện Hình 46: Giao diện thay đổi ảnh đại diện Bảng 43: Mô tả giao diện thay đổi ảnh đại diện Số thứ tự Loại thẻ Ý nghĩa Button Nút tắt giao diện đổi ảnh đại diện Button Nút chọn ảnh từ máy tính 82 h Div Chọn vùng hiển thị ảnh Button Nút thoát giao diện đổi ảnh đại diện Button Lưu ảnh đại diện 3.4.15.Giao diện phân quyền cho người dùng bảng người quản trị Hình 47: Giao diện phân quyền cho người dùng bảng người quản trị Bảng 44: Mô tả giao diện phân quyền cho người dùng bảng người quản trị Số thứ tự Loại thẻ Ý nghĩa Input Vùng nhập tên người dùng để tìm kiếm Button Xố người dùng khỏi bảng Button Thêm người dùng vào bảng Button Tắt cửa sổ phân quyền ComboBox Chọn người dùng Div Ảnh đại diện tên người dùng Div Các quyền người dùng Button Chuyển phân trang Button Thoát khỏi cửa sổ phân quyền 10 Button Lưu quyền người dùng bảng 83 h 3.4.16.Giao diện danh sách lỗi Hình 48: Giao diện danh sách lỗi Bảng 45: Mô tả giao diện danh sách lỗi Số thứ tự Loại thẻ Ý nghĩa Input Vùng nhập giá trị để tìm kiếm lỗi Button Xoá báo lỗi Div Danh sách lỗi ComboBox Chọn lỗi Div Tiêu đề lỗi Button Xoá lỗi Button Chuyển phân trang 84 h 3.4.17.Giao diện báo lỗi Hình 49: Giao diện báo lỗi Bảng 46: Mô tả giao diện báo lỗi Số thứ tự Loại thẻ Ý nghĩa Input Vùng nhập tiêu đề báo lỗi Input Vùng nhập nội dung lỗi Button Gửi báo lỗi Button Tắt giao diện gửi báo lỗi 85 h CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 4.1 CÀI ĐẶT ỨNG DỤNG Để chạy ứng dụng, máy tính phải có u cầu sau: ● Phải cài đặt NodeJS phiên 14.x lts ● Phải cài đặt Docker Phải có Windows Terminal Command Prompt 4.1.1 FrontEnd: ● Bước 1: Clone download project từ link gitlab sau: https://gitlab.com/ntt118/quan-ly-du-an.git ● Bước 2: Sau clone project máy, chuột phải vào thư mục tải chọn “Open in Windows Terminal” ● Bước 3: Sau Windows Terminal ra, chạy lệnh “npm install” để cập nhật thư viện package cần thiết để project hoạt động ● Bước 4: Tiếp tục chạy lệnh “npm run dev” Windows Terminal để bắt đầu chạy front-end 4.1.2 Backend: ● Bước 1: Clone download project từ link gitlab sau: https://gitlab.com/ntt118/quan-ly-du-an-api.git ● Bước 2: Sau clone project máy, chuột phải vào thư mục tải chọn “Open in Windows Terminal” ● Bước 3: Sau Windows Terminal ra, chạy lệnh “npm install” để cập nhật thư viện package cần thiết để project hoạt động ● Bước 4: Sau tiếp tục chạy lệnh “docker-compose up -d” Windows Terminal để chạy docker cho hệ thống ● Bước 5: Tiếp tục chạy lệnh “npm run start:dev” Windows Terminal để bắt đầu chạy API cho hệ thống 86 h KIỂM THỬ ỨNG DỤNG 4.2 4.2.1 Kế hoạch kiểm thử Thực viết test plan cho toàn hệ thống gồm thành phần sau: - Định nghĩa phạm vi kiểm thử - Định nghĩa chiến lược kiểm thử - Nhận dạng rủi ro yếu tố bất ngờ - Nhận dạng hoạt động kiểm thử xây dựng lịch biểu kiểm thử - Nhận dạng môi trường kiểm thử - Thực hiệu chỉnh suốt chu kỳ kiểm thử để phản ánh thay đổi cần thiết Sau tiến hành viết testcase cho modules, thực việc kiểm thử sau dựa kế hoạch kiểm thử, sau dựa vào kế hoạch để xác định lỗi bắt nguồn từ đâu khắc phục 4.2.2 Quy trình thiết kế kiểm thử Xây dựng kế hoạch kiểm thử (TestPlan) Phân tích thiết kế kiểm thử cho chức Thực kiểm thử theo kiểm thử đưa Báo cáo (TestReport) đáng giá lỗi phát sinh Hình 42: Quy trình thiết kế kiểm thử Trong quy trình này, nhóm thực xây dựng kế hoạch ban đầu kiểm thử, thơng qua phân tích đánh giá phạm vi, chiến lược, rủi ro xảy ra, dạng kiểm thử, môi trường kiểm thử, … Dựa sở đó, tiến hành viết kiểm thử cho chức module cách kỹ lưỡng tỉ mỉ với mục tiêu tìm lỗi chức năng, module lỗi dự án Sau đó, kiểm thử tiến hành chức module cụ thể bời thành viên nhóm Trong giai đoạn chuẩn bị, thành viên dùng mẫu prototype, usecase, đặc tả chức để viết testcase cho bước 87 h Thành viên phải liên tục trì tạo báo cáo lỗi q trình thực hiện, sau báo cáo kết kiểm thử cho trưởng nhóm Trưởng nhóm tạo bảng tổng kết đánh giá hoạt động kiểm thử, xác định xem đạt tiêu chí thành cơng hồn thành kiểm thử chưa Thành viên nhóm bố trí cơng việc nhóm trưởng để thực kiểm thử theo quy trình cụ thể sau: - Thi hành kiểm thử theo kiểm thử cho module cụ thể - Chạy lại case bị failed trước để xác nhận lỗi sửa hay chưa - So sánh kết ghi nhận thực thi với kết mong đợi - Đánh giá kết kiểm thử (Passed/Failed) cho trường hợp kiểm thử - Viết báo cáo lỗi cho trường hợp kết ghi nhận kết mong đợi không giống 88 h PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC Sau thời gian nghiên cứu thực đề tài “Xây dựng website quản lý phân chia công việc sử dụng Vue3 NestJs”, nhóm chúng em đạt kết sau 1.1 Kiến thức tìm hiểu Nắm bắt kiến thức vấn đề liên quan việc xây dựng Wed API NestJS Nắm bắt công nghệ framework VueJs, áp dụng vào thực tế để xây dựng UI cho đề tài 1.2 Chương trình làm Xây dựng hồn chỉnh phần mềm với chức sau: - Xây dựng chức trang web quản lý dự án: đăng nhập, tạo tài khoản người dùng; tạo, xố, chỉnh sửa dự án; xem, tìm kiếm công việc, phân quyền quyền người dùng - Áp dụng công nghệ phổ biến sử dụng nhiều vào khóa luận tốt nghiệp nhóm ƯU ĐIỂM - Người dùng hệ thống sử dụng cách dễ dàng - Phần Core System xây dựng APIs hỗ trợ tốt cho việc xây dựng giao diện người dùng đa tảng - Chia component cho việc bảo trì dễ dàng - Hoạt động ứng dụng diễn cách trơn tru xác, khơng xảy tình trạng xung đột module hệ thống NHƯỢC ĐIỂM - Phần mềm hạn chế thời gian phát triển nhân lực có hạn 89 h HƯỚNG PHÁT TRIỂN - Tiếp tục hoàn thiện thêm chức dựa trải nghiệm người dùng - Xây dựng tảng mobile Android IOS - Cải thiện trải nghiệm, tốc độ website cho người dùng 90 h TÀI LIỆU THAM KHẢO [1] Thống kê Internet Việt Nam năm 2021 Link: https://vnetwork.vn/vi/news/thong-ke-tinh-hinh-internet-viet-nam-nam-2021 [2] Giới thiệu NodeJS Link: https://nodejs.org/en/ [3] Giới thiệu NestJS Link: https://nestjs.com/ [4] Giới thiệu VueJS Link: https://vuejs.org/ [5] Tìm hiểu Typescript Link: https://viblo.asia/p/tim-hieu-typescript-va-kien-thuc-co-ban-PmeRQpnyGoB [6] Giới thiệu Postgresql? Link: https://viblo.asia/p/tim-hieu-he-quan-tri-co-so-du-lieu-postgresqlm68Z0eLdlkG 91 h S h K L 0