Đồ án xây dựng website xem phim tích hợp hệ thống khuyến nghị

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG WEBSITE XEM PHIM TÍCH HỢP HỆ THỐNG KHUYẾN NGHỊ Giảng viên hướng dẫn: Ths Nguyễn Thị Thanh Trúc Sinh viên thực hiện: Nguyễn Ngọc Đức-20521197 Lâm Phú Sỹ-20521853 TP.HỒ CHÍ MINH, 6/2023 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM chúng em trang bị kiến thức bản, kỹ thực tế để thực Đồ án Để hồn thành Đồ án này, 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 Công nghệ Thông tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thơng tin Chúng em xin gửi lời cảm ơn chân thành đến cô Nguyễn Thị Thanh Trúc tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực luận văn mà cịn hành trang tiếp bước cho chúng em trình học tập lập nghiệp sau Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất thầy cô khoa, bạn bè, tập thể lớp PMCL2020.2 người sẵn sàng sẻ chia giúp đỡ học tập sống Mong rằng, mãi gắn bó với Trong q trình làm Đồ án chúng em khơng tránh khỏi sai sót, chúng em kính mong nhận dẫn góp ý quý thầy để hồn thiện phát triển đồ án Khóa luận tốt nghiệp tương lai Chúng em xin chân thành cảm ơn Xin chúc điều tốt đẹp đồng hành người TP Hồ Chí Minh, 18 tháng năm 2023 Nhóm sinh viên thực viện Nguyễn Ngọc Đức -20521197 Lâm Phú Sỹ -20521853 MỤC LỤC CHƯƠNG I: GIỚI THIỆU CHUNG 12 1.1Tổng quan đề tài 12 1.2 Lý chọn đề tài 12 1.3 Phân tích thị trường đối thủ cạnh tranh 12 1.4 Đối tượng sử dụng 15 1.5 Phạm vi nghiên cứu 16 1.5.1 Phạm vi môi trường 16 1.5.2 Phạm vi chức 16 CHƯƠNG II:CƠ SỞ LÝ THUYẾT VÀ NỀN TẢNG CÔNG NGHỆ 16 2.1 ReactJs 16 2.2 Tailwind CSS 19 2.3 NodeJS 21 2.4 MongoDB 23 2.5 Cloudinary 25 2.6 Hệ thống khuyến nghị 26 2.6.2 Khái niệm 26 2.6.3 Phân loại recommendation system 26 2.6.4 Ưu điểm recommendation system 28 2.6.5 Nhược điểm recommendation system 28 2.6.6 Content-based recommendation system 29 2.6.7 Các bước triển khai 29 CHƯƠNG III :THIẾT KẾ HỆ THỐNG 32 3.1 Kiến trúc hệ thống: Mơ hình Client – Server 32 3.1.1 Sơ đồ tổng quan giới thiệu 32 3.1.2 Chi tiết thành phần hệ thống 33 3.2 Yêu cầu chức 35 3.2.1 Sơ đồ Usecase 35 3.2.2 Danh sách tác nhân 36 3.2.3 Danh sách Use Case 36 3.2.4 Mô tả chi tiết Use Case 37 3.2.4.1 Đăng ký 37 3.2.4.2 Đăng nhập 38 3.2.4.3 Đăng xuất 40 3.2.4.4 Quên mật 42 3.2.4.5 Tìm kiếm phim 43 3.2.4.6 Xem phim 45 3.2.4.7 Đổi chủ đề Theme 46 3.2.4.8 Xem bình luận 47 3.2.4.9 Bình luận 48 3.2.4.10 Rating 50 3.2.4.11 Thêm phim 52 3.2.4.12 Xóa phim 53 3.2.4.13 Sửa phim 55 3.2.4.14 Thêm diễn viên 56 3.2.4.15 Xóa diễn viên 58 3.2.4.16 Sửa diễn viên 59 3.2.4.17 Thêm phim yêu thích 61 3.2.4.18 Xóa phim u thích 62 CHƯƠNG IV:THIẾT KẾ CƠ SỞ DỮ LIỆU 64 4.1 Bảng Actor 64 4.2 Bảng Emailverificationtoken 64 4.3 Bảng Movies 64 4.4 Bảng passwordresettokens 65 4.5 Bảng reviews 65 4.6 Bảng users 65 4.7 Bảng favorites 66 CHƯƠNG V :THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 66 5.1 Screen Flow 66 5.2 Dánh sách hình 67 5.3 Mơ tả chi tiết hình 67 5.3.1 Trang 67 5.3.2 Trang đăng ký 69 5.3.3 Trang đăng nhập 69 5.3.4 Trang quên mật 70 5.3.5 Trang tạo mật 71 5.3.6 Trang xác thực 72 5.3.7 Trang chi tiết phim 73 5.3.8 Trang đánh giá phim 75 5.3.9 Trang xem bình luận phim 76 5.3.10 Trang danh sách phim yêu thích 76 CHƯƠNG VI:CÀI ĐẶT VÀ KIỂM THỬ 77 6.1 Môi trường cài đặt kiểm thử 77 6.2 Kết kiểm thử: 78 CHƯƠNG VII: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 79 7.1 Kết 79 7.2 Khó khăn 79 7.3 Kết 79 7.4 Hạn chế đồ án 80 7.5 Hướng phát triển 80 CHƯƠNG VIII : TÀI LIỆU THAM KHẢO 80 DANH MỤC HÌNH ẢNH Hình 1:Diễn biến thảo luận mạng xạ hội Netfix 14 Hình 2:Diễn biến thảo luận mạng xạ hội FPT PLAY 15 Hình 3:Framework ReactJs 17 Hình 4:TailwindCss 19 Hình 5:Framework Nodejs 21 Hình :Hệ sơ quản trị liệu MongoDB 23 Hình 7: Cloudinary 25 Hình 8: Recommendation Systems 27 Hình 9:Import thư viện 30 Hình 10: Khởi tạo liệu (Code) 30 Hình 11: Thiết lập ma trận TF - IDF (Code) 30 Hình 12: Tính độ tương đồng item (Code) 31 Hình 13: Xử lí kết (Code) 32 Hình 15:Sơ đồ UseCase 35 Hình 16:Activity Diagram Đăng ký 38 Hình 17:Activity Diagram Đăng nhập 40 Hình 18:Activity Diagram Đăng xuất 41 Hình 19:Activity Diagram Quên mật 43 Hình 20:Activity Diagram Tìm kiếm phim 44 Hình 21:Activity Diagram Xem phim 46 Hình 24:Activity Diagram Xem Bình Luận 48 Hình 25:Activity Diagram Bình luận 50 Hình 26:Activity Diagram Rating 51 Hình 27:Activity Diagram Thêm phim 53 Hình 28:Activity Diagram Xóa phim 54 Hình 29:Activity Diagram Sửa phim 56 Hình 30:Activity Diagram Thêm diễn viên 57 Hình 31:Activity Diagram Xóa phim 59 Hình 32:Activity Diagram Sửa phim 60 Hình 33:Activity Diagram Thêm phim u thích 62 Hình 34:Activity Diagram Xóa phim yêu thích 63 Hình 35:ScreenFlow 66 Hình 36:Trang 69 Hình 37 :Trang đăng ký 69 Hình 38:Trang đăng nhập 70 Hình 39:Trang quên mật 71 Hình 40 :Trang tạo mật 72 Hình 41:Trang xác thực 73 Hình 42:Trang chi tiết phim 75 Hình 43:Trang đánh giá phim 75 Hình 44 :Trang xem bình luận phim 76 Hình 45:Trang danh sách phim yêu thích 77 ĐẠI HỌC QUỐC GIA TP.HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN CƠNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc TP.HCM, ngày 18 tháng năm 2023 Đề cương chi tiết TÊN ĐỀ TÀI: Xây dựng website xem phim tích hợp hệ thống khuyến nghị Cán hướng dẫn :ThS.Nguyễn Thị Thanh Trúc Thời gian thực hiện: (3/2023-7/2023) Sinh viên thự hiện: Nguyễn Ngọc Đức – 20521197 Lâm Phú Sỹ -20521853 Nội dung đề tài 1.Lý chọn đề tài : Ngày , chất lượng sống ngày chất lượng, nhu cầu giải trí ngày tăng cao Bên cạnh đời sống vật đời sống tinh thần ngày nâng cao phát triển.Với phát triển công nghệ Internet,đặc biệt phim để đáp ứng nhu cầu xem phim phải đa dạng nội dung,chất lượng tiện lợi người dùng xem phim lúc nơi, chi phí tiết kiệm Đặc biệt thời điểm đại dịch covid xuất hoạt động vui chơi giải trí phải tạm dựng nên nhu cầu giải trí tảng xem phim trực tuyến ngày lớn.Để đáp ứng nhu cầu trên,nhóm em định phát triển tảng xem phim trực tuyến,có tích hợp hệ thống khuyến nghị gợi ý, giúp người dùng lựa chọn phim chất lượng phù hợp với sở thích 2.Mục tiêu đề tài : • Nền tảng xem phim trực tuyến giao diện trực quan, dễ sử dụng cho người dùng • Xây dựng tích hợp tính công nghệ để đảm bảo chất lượng phim tốt tăng tốc độ xử lý trang • Ứng dụng quản lý thông tin người dùng, diễn viên, phim: -Cho phép người quản lý thêm, xóa , sửa thông tin người dùng, diễn viên -Cập nhật thêm phim vào ứng dụng -Quản lý tìm kiếm thơng tin diễn viên, phim • Ứng dụng cho phép người dùng đánh giá,bình luận phản hồi phim trải nghiệm, tìm kiếm lựa chọn phim theo chủ đề • Ứng dụng gợi ý phim phù hợp theo nhu cầu sở thích người dùng 3.Phạm vi đề tài 3.1 Phạm vi môi trường : Website 3.2 Phạm vi chức : • Đối với hệ thống khuyến nghị: -Gợi ý phim cho người dùng dựa lịch sử hành vi -Gợi ý phim dựa người dùng trải nghiệm trải nghiệm -Gợi ý phim theo người dùng tương đồng chủ đề nội dung phim trải nghiệm • Đối với ứng dụng: -Cho phép quản lý thơng tin phim (thêm , xóa sửa) -Cho phép người dùng thực số chức đăng xuất, đăng nhập, đăng ký, quên mật khẩu, sửa hồ sơ cá nhân( chỉnh sửa thông tin cá nhân) -Cho phép người dùng đánh giá , bình luận trải nghiệm phim -Cho phép người dùng tiếp cận thông tin phim cách chi tiết điểm số,bình luận thơng tin diễn viên, nhà sản xuất … -Cho phép người dùng nhận gợi ý phim phù hợp với sở thích 4.Đối tượng sử dụng: • Tất người dùng sử dụng Internet có nhu cầu giải trí xem phim trực tuyến đặc biệt độ tuổi từ (12- 40) 5.Yêu cầu • Tính thân thiện: Ứng dụng phải dễ sử dụng, UI/UX thân thiện với người dùng • Tính đắn: Ứng dụng chạy khơng lỗi • Tính thích nghi: Ứng dụng chạy tốt nhiều trình duyệt, nhiều thiết bị cấu hình phần cứng khác thiết kế kiến trúc thiết bị khác • Tính tiến hóa: Ứng dụng phải dễ dàng phát triển thêm tính mà khơng gây ảnh hưởng đến tính phát triển trước • Tính bảo trì: Ứng dụng thay đổi, chỉnh sửa chức mà không gây ảnh hưởng đến chức khác • Tính tương tác: Ứng dụng tạo mơi trường tương tác hệ thống người dùng 6.Phương pháp thực hiện: • Phương pháp làm việc: − Làm việc nhóm thành viên thơng qua phương thức online hướng dẫn giảng viên hướng dẫn • Phương pháp nghiên cứu: − Phân tích nhu cầu sử dụng đối tượng người dùng − Nghiên cứu tài liệu cơng nghệ liên quan • Phương pháp cơng nghệ: − Tìm hiểu xây dựng hệ khuyến nghị mobile website − Xây dựng giao diện website để tương tác với người dùng − Quản lý source code thông qua Github − Sử dụng Google doc,… để quản lý tiến trình tài liệu 7.Nền tảng cơng nghệ • Front-end:ReactJs, Tailwind CSS • Back-end:Nodejs , ExpressJs • Database:MongoDB • Deployment:Vercel 8.Kết mong đợi: • Website hoạt động ổn định, trang web truyền tải video tốt… • Hệ thống gợi ý khuyến nghị gợi ý phim phù hợp với người dùng 9.Hướng phát triển đề tài: • Tính livestream với cơng nghệ webRTC • Xây dựng hệ thống khuyến nghị dựa Deep Learning 10.Kế hoạch làm việc Giai đoạn 1:Hoàn thiện sở liệu, xây dựng APIs theo kế hoạch.Gồm sprint sprint tuần Thời gian: 01/03/2023-14/04/2023 Sprint 1: Tìm hiểu cơng nghệ Sprint 2: Phân tích yêu cầu chức năng, xây dựng CSDL Sprint 3: Xây dựng APIs theo kế hoạch Sprint Thời gian Cơng việc Sprint 01/03/2023-14/03/2023 -Tìm hiểu cơng nghệ -Tìm hiểu đối thủ cạnh tranh Sprint 15/03/2023-29/03/2023 -Phân tích yêu cầu lên kế hoạch chức cho website -Xây dựng CSDL Sprint 30/03/2023-14/04/2023 -Xây dựng APIs Giai đoạn 2: Xây dựng chức giao diện website.Tích hợp thêm hệ thống khuyến nghị Gồm sprint sprint tuần Thời gian: 15/04/2023-29/05/2023 5.2 Dánh sách hình 5.3 Mơ tả chi tiết hình 5.3.1 Trang Hình 33:Trang Mơ tả tổng quan: Trang trang chưa tất nội dung thể loại phim.Mục đích giúp người dùng thao tác trang chính.Nội dung thể loại phim phim Mỗi phim có điểm rating giúp người dùng dễ dang chọn phim phù hợp 5.3.2 Trang đăng ký Hình 34 :Trang đăng ký Mơ tả tổng quan: Màn hình đăng ký giúp người dùng tạo tài khoản cách nhập thông tin cá nhân như: họ tên, địa email, mật khẩu, xác nhận lại mật Tại hình này, người dùng có sẵn tài khoản, họ quay lại trang Đăng nhập cách nhấn vào nút “Sign in” 5.3.3 Trang đăng nhập Hình 35:Trang đăng nhập Mô tả tổng quan: Trang đăng nhập người dùng gồm nội dung Email, mật khẩu.Ngồi hình người dùng điều hướng sang hình Quên mật cách nhấn vào ‘Forget password’ trang đăng ký cách nhấn vào ‘Sign up’ 5.3.4 Trang quên mật Hình 36:Trang quên mật Mô tả tổng quan: Trang quên mật gồm nội dùng Email tải khoản.Ngoài cịn có chuyển hướng trang đăng nhập nhấn vào nút ‘Sign in’ trang đăng ký nhấn vào nút ‘ Sign up’ 5.3.5 Trang tạo mật Hình 37 :Trang tạo mật Mơ tả tổng quan: Màn hình chuyển hướng người dùng vào Email đăng ký tài khoản nhận đường link đổi mật Giups người dùng thiết lập lại mật cho tài khoản cách nhập mật xác nhận lại mật 5.3.6 Trang xác thực Hình 38:Trang xác thực Mơ tả tổng quan: Khi đăng kí tài khoản hình chuyển hướng sang trang xác thực tài khoản Người dùng nhập dãy số xác thực gửi vào email đăng kí tài khoản để xác tài khoản 5.3.7 Trang chi tiết phim Hình 39:Trang chi tiết phim Mô tả tổng quan: Trang chi tiết phim hiển thị phim người chọn, tên phim, số lượng review, điểm rating, thông tin chi tiết phim tác giả , diễn viên, ngày phát hành…Tại người dùng xem phim đánh giá phim 5.3.8 Trang đánh giá phim Hình 40:Trang đánh giá phim Mô tả tổng quan: Trang đánh giá phim cho phép người dùng đánh giá sản phẩm cách chọn số tương ứng với số điểm bình luận phim 5.3.9 Trang xem bình luận phim Hình 41 :Trang xem bình luận phim Mơ tả tổng quan: Trang xem bình luận phim giúp người xem tất đánh giá phim.Và người dùng tìm bình luận sửa xóa đánh giá nhấn vào nút ‘Find My Review’ 5.3.10 Trang danh sách phim u thích Hình 42:Trang danh sách phim u thích Mơ tả tổng quan: Trang danh sách phim yêu thích hiển thị phim người dùng thêm vào danh sách.Danh sách phim điểm rating tiêu đề CHƯƠNG VI:CÀI ĐẶT VÀ KIỂM THỬ 6.1 Môi trường cài đặt kiểm thử Mơi trường cài đặt: • Front end -Cài đặt ngơn ngữ lập trình JavaScript, NodeJS -Chạy câu lệnh ‘ npm i ’ để cài đặt packages -Chạy câu lệnh ‘ npm start’ để kích hoạt trang web • Backend -Cài đặt ngơn ngữ lập trình JavaScript, NodeJS -Chạy câu lệnh ‘ npm i ’ để cài đặt packages -Chạy câu lệnh ‘ npm start’ để kích hoạt phần backend Thiết bị cài đặt :Laptop, PC 6.2 Kết kiểm thử: STT Tên chức Mức độ hoàn thiện Đăng ký 100% Đăng nhập 100% Quên mật 100% Tìm kiếm phim 100% Xem phim 100% Xem phim chi tiết 100% Đổi chủ đề Theme 100% Xem rating 100% Xem bình luận 100% 10 Bình luận 100% 11 Rating 100% 12 Xem thông tin diễn viên 100% 13 Thêm phim 100% 14 Xóa phim 100% 15 Sửa phim 100% 16 Thêm diễn viên 100% 17 Xóa diễn viên 100% 18 Sửa diễn viên 100% 19 Xem thống kê phim 100% 20 Thêm phim u thích 100% 21 Xóa phim u thích 100% CHƯƠNG VII: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.1 Kết -Xây dựng ứng dụng xem phim có UI/UX thân thiện dễ sử dụng với người dùng -Ứng dụng phim có tích hợp khuyến nghị nên phải có sở liệu đủ lớn để thực hiện,có thể đưa gợi ý phim dựa nội dung hành vi họ -Phân tích thiết kế tính trước thực code -Lên kế hoạch chi tiết đầy đủ để hoàn thành chức năng, sản phẩm thời gian hợp lý 7.2 Khó khăn -Nhóm gặp khó khăn nghiên cứu hệ thống khuyến nghị để tích hợp vào ứng dụng liệu triển khai hệ thống khuyến nghị -Nhóm chưa có kinh nghiệm sử dụng công nghệ -Phần giao diện chưa thống thiết kế - Khi tái cấu trúc lại code gặp nhiều vấn đề 7.3 Kết -Đã hoàn thành kế hoạch đề -Hiểu cách hoạt động hệ thống khuyến nghị tích hợp với website -Tái cấu trúc lại code cách hợp lý 7.4 Hạn chế đồ án -Giao diện chưa tối ưu, thân thiện -Hệ thống khuyến nghị chưa tối ưu dựa thuật tốn Content-base recommendation -Dữ liệu chưa đủ lớn 7.5 Hướng phát triển -Nâng cấp chức người dùng đăng kí tài khỏan có thời gian xem phim tháng, tháng, năm -Nâng cấp hệ thống khuyến nghị gợi ý -Nâng cấp chức ứng dụng xem phim dài tập -Xây dựng ứng dụng tảng di động -Chia video phát trực tiếp CHƯƠNG VIII : TÀI LIỆU THAM KHẢO - https://younetmedia.com/netflix-dan-dau-top-10-ung-dung-xem-phim-duoc-quan-tamnhat-tren-mang-xa-hoi-dau-2023/ Phân tích ứng dụng xem phim quan tâm mạng xã hội đầu năm 2023 -https://nodejs.org/en/docs - NodeJs -https://legacy.reactjs.org/docs/getting-started.html -ReactJs - https://tailwindcss.com/docs/installation -Tailwind Css - https://www.mongodb.com/docs/v5.0/ - MongoDB - https://cloudinary.com/ -Cloudinary - https://mailtrap.io/blog/send-emails-with-nodejs/ -MailTrap