Xây dựng website gợi ý phim sử dụng công nghệ Mern Stack, Phython,.Net

Chúng em cũng xin chân thành cảm ơn các thầy cô Khoa công nghệ thông tin trường Đại học Sư phạm Kỹ thuật TP.HCM đã dạy cho nhóm sinh viên báo cáo, những kỹ năng, kiến thức vô cùng quý bá

XÂY DỰNG WEBSITE GỢI Ý PHIM SỬ DỤNG CÔNG NGHỆ

MERN STACK, PYTHON, NET

TRẦN VĂN HÂN MINH ĐÍNH

GVHD: TS HUỲNH XUÂN PHỤNG SVTH: NGUYỄN THANH BẰNG

S K L 0 0 9 4 3 7

TP HỒ CHÍ MINH, tháng 6 năm 2022

Đề tài:

XÂY DỰNG WEBSITE GỢI Ý PHIM SỬ DỤNG CÔNG NGHỆ MERN STACK, PYTHON, NET

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIẢNG VIÊN HƯỚNG DẪN

TS HUỲNH XUÂN PHỤNG

KHÓA 2018 – 2022

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

-o0o -

NGUYỄN THANH BẰNG: 18110254 TRẦN VĂN HÂN MINH ĐÍNH: 18110269

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng website gợi ý phim sử dụng công nghệ mern stack

Họ và tên Giáo viên hướng dẫn: TS HUỲNH XUÂN PHỤNG

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày 16 tháng 06 năm 2022

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng website gợi ý phim sử dụng công nghệ mern stack, python, net

Họ và tên Giáo viên phản biện: TS LÊ VĨNH THỊNH

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày 16 tháng 06 năm 2022

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

Chúng em cũng xin chân thành cảm ơn các thầy cô Khoa công nghệ thông tin trường Đại học Sư phạm Kỹ thuật TP.HCM đã dạy cho nhóm sinh viên báo cáo, những kỹ năng, kiến thức vô cùng quý báu của một người lập trình viên, để chúng em có đủ kiến thức hoàn thành đề tài của chúng em cũng như là hoàn thành được một ước mơ, mục tiêu trong lòng của chúng em

Do sự hạn chế về thời gian cũng như kiến thức và còn nhiều lo lắng khác nên không thể không tránh khỏi việc mắc những sai sót, rất mong nhận được sự góp ý quý báu của quý thầy cô để bổ sung kiến thức của chúng em hoàn thiện hơn cho sau này Chúng em xin gửi cảm ơn chân thành và kính trọng to lớn như những bậc sinh thành tới TS Huỳnh Xuân Phụng nói riêng và quý thầy cô trong khoa nói chung

TP.HCM, ngày 16 tháng 06 năm 2022

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

*******

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Xây dựng website gợi ý phim sử dụng công nghệ mern stack, python, net

GV hướng dẫn: TS HUỲNH XUÂN PHỤNG

Nhiệm vụ của tiểu luận:

1 Tìm hiểu cộng nghệ MERN Stack

2 Tìm hiểu công nghệ RESTful API để xây dựng server API

3 Tìm hiểu thuật toán dự đoán phim theo phim bằng Python

4 Tìm hiểu thuật toán dự đoán phim cho người dùng bằng C#

5 Sử dụng MongoDB làm nơi lưu trữ cơ sở dữ liệu

6 Sử dụng ExpressJS để làm giao tiếp API

7 Sử dụng NodeJs làm backend cho hệ thống

8 Sử dụng ReactJs làm frontend cho hệ thống

9 Hướng dẫn cài đặt và kiểm thử

Đề cương viết luận văn :

1.4 Đối tượng, phạm vi nghiên cứu và phương pháp nghiên cứu

1.5 Kết quả đạt được

1.6 Chưa đạt được

2 Chương 2: Khảo sát thực trạng và xác định yêu cầu

2.1 Tính cấp thiết và mục tiêu của đề tài

3.6 Thuật toán dự đoán phim liên quan

3.7 Thuật toán dự đoán phim cho người dùng

4 Chương 4: Nguyên lý hoạt động

4.1 Sơ đồ hoạt động

4.2 Nguyên lý hoạt động

5 Chương 5: Phân tích và thiết kế hệ thống

5.1 Thiết kế chức năng

5.2 Thiết kế cơ sở dữ liệu

5.3 Thiết kế giao diện

6 Chương 6: Cài đặt và kiểm thử ứng dụng

1 05/03/2022 – 17/03/2022 Thay đổi chức năng tìm kiếm

2 20/03/2022 – 10/04/2022 Thêm chức năng mua phim

3 13/04/2022 – 20/04/2022 Thay đổi phương thức thanh toán

4 25/04/2022 – 05/05/2022 Chỉnh sửa giao diện Admin

5 07/05/2022 – 29/05/2022 Kiểm tra hệ thống

7 10/06/2022 – 22/06/2022 Viết báo cáo và hoàn chỉnh đồ án

Ngày 22 tháng 06 năm 2022

Người viết đề cương

Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

MỤC LỤC

DANH MỤC CÁC TỪ VIẾT TẮT VIII

CHƯƠNG 1: TỔNG QUAN 1

1 CÁC VẤN ĐỀ NGHIÊN CỨU 1

2 CÁC VẤN ĐỀ PHÁT SINH 1

3 CÁC PHƯƠNG PHÁP GIẢI QUYẾT VẤN ĐỀ 1

4 ĐỐI TƯỢNG, PHẠM VI NGHIÊN CỨU VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1

5 KẾT QUẢ ĐẠT ĐƯỢC 2

6 CHƯA ĐẠT ĐƯỢC 2

CHƯƠNG 2: KHẢO SÁT THỰC TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 3

2.1 KHẢO SÁT NHU CẦU XEM PHIM HIỆN NAY 3

2.2 CÁC TRANG WEB XEM PHIM KHẢO SÁT 3

2.3 TỔNG KẾT KHẢO SÁT 8

CHƯƠNG 3: CƠ SỞ LÝ THUYẾT 11

3.1 TỔNG QUAN VỀ MERN STACK 11

3.2 TỔNG QUAN VỀ MONGODB 11

3.3 TỔNG QUAN VỀ EXPRESSJS 11

3.4 TỔNG QUAN VỀ REACTJS 11

3.5 TỔNG QUAN VỀ NODEJS 12

3.6 THUẬT TOÁN DỰ ĐOÁN PHIM LIÊN QUAN 12

3.7 THUẬT TOÁN DỰ ĐOÁN PHIM CHO NGƯỜI DÙNG 16

CHƯƠNG 4: MÔ TẢ YÊU CẦU 21

4.1 SƠ ĐỒ HOẠT ĐỘNG 21

4.2 NGUYÊN LÝ HOẠT ĐỘNG 21

4.3 SƠ ĐỒ NGHIỆP VỤ 21

CHƯƠNG 5: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 23

5.1 THIẾT KẾ CHỨC NĂNG 23

5.1.1 Thiết kế Usecase tổng quát 23

5.1.2 Thiết kế chức năng Đăng ký 23

5.1.3 Thiết kế chức năng Đăng nhập 27

5.1.4 Thiết kế chức năng Đăng xuất 30

5.1.5 Thiết kế chức năng Quên mật khẩu 32

5.1.6 Thiết kế chức năng Xem chi tiết phim 35

5.1.7 Thiết kế chức năng Xem phim 39

5.1.8 Thiết kế chức năng Xem trailer 43

5.1.9 Thiết kế chức năng Xem thông tin cá nhân 46

5.1.10 Thiết kế chức năng Xem hoạt động gần đây 49

5.1.11 Thiết kế chức năng Xem các phim đã xem 53

5.1.12 Thiết kế chức năng Xem các phim đã bình luận 55

5.1.13 Thiết kế chức năng Bình luận 57

5.1.14 Thiết kế chức năng Tìm kiếm 61

5.1.15 Thiết kế chức năng Nâng cấp gói cước xem phim 67

5.1.16 Thiết kế chức năng Quản lý người dùng 69

5.1.17 Thiết kế chức năng Thêm người dùng mới 71

5.1.18 Thiết kế chức năng Xóa người dùng 74

5.1.19 Thiết kế chức năng Quản lý phim 78

5.1.20 Thiết kế chức năng Thêm phim mới 79

5.1.21 Thiết kế chức năng Xóa phim 83

5.1.22 Thiết kế chức năng Xem báo cáo 87

5.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 90

5.3 THIẾT KẾ GIAO DIỆN 90

5.3.1 Đăng nhập 90

5.3.2 Quên mật khẩu 91

5.3.3 Đăng kí 92

5.3.4 Trang chủ 94

5.3.5 Trang chi tiết phim 100

5.3.6 Trang thông tin cá nhân 108

5.3.7 Trang hoạt động gần đây 112

5.3.8 Trang nâng cấp gói cước 114

CHƯƠNG 6: API VÀ KIỂM THỬ ỨNG DỤNG 115

6.1 DANH SÁCH API 115

6.2 KIỂM THỬ 125

CHƯƠNG 7: KẾT LUẬN 129

TÀI LIỆU THAM KHẢO 131

DANH MỤC CÁC TỪ VIẾT TẮT

API: Application Programming Interface

MERN: MongoDB (M), ExpressJS (E), ReactJS (R) và NodeJS (N)

DOM: Document Object Model

HTTP: HyperText Transfer Protocol

ID: Identification

IDE: Integrated Development Environment

I/O: Input/output

JSON: JavaScript Object Notation

JWT: Json Web Token

UI: User Interface

HOVER: Thao tác di chuyển con trỏ chuột vào vị trí chỉ định

OBJECT: Một đối tượng trong lập trình hướng đối tượng

ADMIN: Người quản lý trang web

MODEL: Là nơi lưu trữ dữ liệu trong lập trình MVC, hoặc cũng là nơi đào tạo trong mô

hình dự đoán

USERNAME (USER): Tên đăng nhập

BACK-END: Phần xử lý cho một hành động trên giao diện web

FRONT-END: Phần giao diện của web

HEADER: Phần đầu trang, nó chủ yếu chứa một vài thông tin, tiêu đề, logo, liên hệ, … FOOTER: Phần cuối cùng ở trang webhiển thị các thông tin của cá nhân, doanh

nghiệp: địa chỉ liên hệ, bản đồ chỉ đường, thông tin bản quyền website và các đường link liên kết đến trang mạng xã hội

EMAIL: một phương tiện trao đổi thông tin thông qua mạng Internet giữa các thiết bị

điện tử như điện thoại, laptop

CHƯƠNG 1: TỔNG QUAN

1 CÁC VẤN ĐỀ NGHIÊN CỨU

- Tìm hiểu về các hệ thống tương tự, phân tích để tìm ra điểm mạnh và phù hợp để áp dụng cho đề tài

- Tìm hiểu về ReactJS để thiết kế giao diện và xử lý sự kiện

- Tìm hiểu về NODEJS, ASP NET Core để giải quyết vấn đề về API cho hệ thống dự đoán phim

- Tìm hiểu về Recommendation System (Hệ thống gợi ý) để gợi ý một số bộ phim phù hợp với từng người dùng cụ thể là ML.NET

2 CÁC VẤN ĐỀ PHÁT SINH

- Đánh giá và bình luận không real-time với nhiều người dùng

- Bảo mật là một trong những yêu cầu quan trọng nhất cho website thực tế

- MongoDB không cho phép lưu hình ảnh nên phải chuyển ảnh sang binary nên tốn không gian lưu trữ cũng như là truy xuất chậm, làm thời gian tải trang lâu hơn bình thường

3 CÁC PHƯƠNG PHÁP GIẢI QUYẾT VẤN ĐỀ

- Sử dụng thư viện Socket.io để real-time cho bình luận và đánh giá

- Băm mật khẩu và sử dụng JWT để set cookies để cải thiện yêu cầu bảo mật cho trang

2

Kến thức thực tế về quản lý và xây dựng trang web đề xuất, xem phim cho người dùng bao gồm quy trình xử lý cho người dùng xử dụng web và người quản lý web, thống kê và phân tích số liệu

4.2 Phạm vi nghiên cứu

Phạm vi nghiên cứu được đặt ra ở mức độ tổng hợp là tìm và hiểu được kiến thức chung về các nội dung nghiên cứu và vận dụng được những kiến thức đó cho các vấn đề của đề tài

5 KẾT QUẢ ĐẠT ĐƯỢC

- Hệ thống dự đoán và xem phim bao gồm: hệ thống trang web cho phía người dùng cuối (user) và hệ thống trang web cho phía người quản lý (admin)

- Giao diện dễ sử dụng, thân thiện với người dùng

- Tính cá nhân hóa cho user thông qua việc gợi ý các bộ phim có thể phù hợp

- Dễ dàng quản lý, sửa chữa và mở rộng

6 CHƯA ĐẠT ĐƯỢC

- Tăng tổng số lượt xem khi đã xem một khoảng thời gian nhất định cho từng bộ phim

- Hệ thống dự đoán chưa có độ chính xác cao do thiếu số liệu và số liệu không có độ tin cậy cao

CHƯƠNG 2: KHẢO SÁT THỰC TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

2.1 KHẢO SÁT NHU CẦU XEM PHIM HIỆN NAY

Trong thời buổi nhu cầu giải trí cao ở hiện tại Việc cung cấp một nơi để người dùng

có thế thư giãn xem phim đó là cực kì tuyệt vời Chính vì lẽ đó, ở Việt Nam chúng ta đã có rất nhiều hệ thống xem phim đáp ứng được nhu cầu đó và đã rất thành công Có thể kế đến một số trang web thịnh hành hiện nay như là: POPS, ZingTV, FPT Play, Galaxy Play, … Nhu cầu và yêu cầu của khán giả luôn thay đổi Có thể là từng ngày, hoặc có thế là từng tháng Chính vì vậy việc thu hút người dùng luôn là ưu tiên hàng đầu của các website xem phim trực tuyến Họ luôn cho ra mắt những sản phẩm phim, nội dung phim hấp dẫn để thu hút người dùng Cộng với thời buổi khó khăn về việc đi lại trong dịch Covid Thị trường phim online luôn là một miếng bánh béo bỡ của mọi nhà đầu tư

Chúng ta thấy được sự thay đổi hình thức xem phim của người dùng Nhất là khi sự phát triền của các hệ thống website xem phim đang lớn mạnh như hiện nay

Các nền tảng xem phim được sử dụng nhiều nhất[1]:

- Netflix (41,99%): là ứng dụng xem phim hàng đầu trên thế giới với hầu hết tất cả bộ phim, hình ảnh và chất lượng đều được ở mức cao nhất

- FPT Play (24,27%): FPT Play là ứng dụng xem video, xem tivi trực tuyến rất phổ biến

trên điện thoại, máy tính và nay là cả trên tivi

- VieOn (14.56%): VieON là ứng dụng giải trí hàng đầu của người Việt và cho người Việt, cung cấp bởi Dzones Network trực thuộc công ty Đất Việt VAC.Với kho giải trí khổng lồ có bản quyền cùng sự kết hợp với K+

- Zing TV (24.27%): ZING TV (tv.zing.vn ) là kênh truyền hình trực tuyến theo yêu cầu, với kho nội dung phong phú quy tụ các chương trình truyền hình, hài kịch, phim ảnh, các chương trình giáo dục, thể thao

- K + (12.62%)

- Khác (0.24%)

2.2 CÁC TRANG WEB XEM PHIM KHẢO SÁT

4

Trong thời buổi nhu cầu giải trí cao ở hiện tại Việc cung cấp một nơi để người dùng

có thế thư giãn xem phim đó là cực kì tuyệt vời Chính vì lẽ đó, ở Việt Nam chúng ta đã có rất nhiều hệ thống xem phim đáp ứng được nhu cầu đó và đã rất thành công Có thể kế đến một số trang web thịnh hành hiện nay như là: POPS, ZingTV, FPT Play, Galaxy Play, … Ngoài các yếu tố về mặt nội dung, thì hình thức trình bày của một website cũng mang tính chất quan trọng Việc người dùng truy cập vào một website xem phim với bố cục đẹp, hình ảnh sống động, dễ thao tác cũng góp phần khiến người đó nhớ tới website và truy cập

nó thường xuyên hơn Chính vì vậy việc thiết kế website làm sao cho thu hút người dùng cũng là điều đáng để lưu ý và chú trọng

2.2.1 Website ZingTV

Đây là website cung cấp dịch vụ video theo yêu cầu đã được ưu chuộng trong thời gian trước và ngày nay Zing TV đáp ứng được hầu hết các người dùng, cung cấp cho chúng

ta các chương trình YV show hấp dẫn hoặc các series phim truyền hình dài tập Bên cạnh

đó Zing Tv còn cung cấp các chương trình giáo dục bổ ích dành cho thiếu nhi và các bộ phim điện ảnh dành cho gia đình Tất cả nội dung trên đều được chọn lọc và đảm bảo về chất lượng

Hình 2.2.1.1 Trang chủ website Zing TV

Ưu điểm:

- Thiết kế giao diện đẹp, dễ nhìn và thân thiện người dùng

- Tối ưu việc trải nghiệm cho người dùng Các thao tác trên website rất dễ dàng, hỗ trợ việc xem trên điện thoại bằng ứng dụng

- Tốc độ truyền tải tốt, tạo cảm giác thoải mái cho người xem Cho hình ảnh chất lượng cao tránh trường hợp chất lượng kém và thường xuyên đứt đoạn gây ức chế người dùng

- Phim truyền hình đa dạng, cập nhật nhanh, phụ đề chuẩn

Nhược điểm:

- Chưa có tính năng xem tivi online

- Vẫn còn tồn tại số ít video chất lượng chưa cao

- Kho phim chỉ có phim bộ, không có phim lẻ

2.2.2 Website FPT Play

FPT Play là một website xem phim trực tuyến và phổ biến hiện nay Đã phát triển mạnh mẽ thành ứng dụng cho các thiết bị di động, máy tính bảng và cả tivi thông minh… Đây là hệ thống website do tập đoàn FPT Telecom nghiên cứu và sản xuất Cung cấp cho người dùng các chương trình truyền hình, phim ảnh, bóng đá, game show… với chất lượng hình ảnh cực kì sắt nét, âm thanh sống động Bên cạnh đó FPT Play còn cung cấp hệ thống kênh truyền hình ngay trong nước và nước ngoài với các nội dung hấp dẫn và các gói cước đáng mời gọi

- Tốc độ truyền tải cao giúp trải nghiệm người dùng cực cao

- Có hỗ trợ xem các kênh truyền hình trực tuyến

- Nhiều gói cước tham khảo

- Có hỗ trợ trên nền tảng di động, máy tính bảng, …

- Giao diện hiển thị cực kì bắt mắt, thu hút người dùng

Nhược điểm:

- Gói cước không quá rẻ cho người dùng

- Chất lượng phụ thuộc vào đường truyền

- Bắt buộc phải đăng nhập để xem một số chương trình

2.2.3 Website NetFlix

Netflix là dịch vụ xem video trực tuyến của Mỹ, các nội dung chủ yếu trên đó là phim và các chương trình truyền hình, rất phổ biến ở Mỹ và nhiều nước khác trên thế giới

Chính vì thế nó mang đến đa dạng các loại chương trình truyền hình, phim, phim tài liệu đoạt giải thưởng và nhiều nội dung khác trên hàng nghìn thiết bị có kết nối Internet

Giống như một số website hiện nay ở Việt Nam Netflix cung cấp một kho video cực

kỳ khổng lồ với chất lượng cao và có cả những bộ phim có bản quyền Thậm chí hỗ trợ mạnh ở nền tảng điện thoại, máy tính bảng và tivi Chính vì thế người dùng chỉ cần có kết nối internet và tài khoản của Netflix là có thể trải nghiệm nội dụng trên đó dễ dàng

Hình 2.2.3.1 Trang chủ website FPT Play

- Luôn cập nhật phim và chương trình nhanh nhất có thể

- Giao diện hình ảnh đẹp va thuận tiện thao tác cho người dùng

- Lưu thông tin phim và thời lương phim cho người xem sau khi dừng

- Chọn lọc và phân loại phim dành cho trẻ em, trẻ vị thành niên

- Các nội dung phim đều được chọn lọc kỹ càng

Nhược điểm:

- Kho phim vẫn chủ yếu xoay quanh Mỹ và ít các phim Hồng Kong, Thái Lan như các website hiện nay ở Việt Nam đang cung cấp

Nhanh Nhanh Nhanh

Tương thích với các

hệ điều hành

Tương thích với mọi hệ điều hành

Tương thích với mọi hệ điều hành

Tương thích với mọi hệ điều hành Tương thích với

nhiều trình duyệt

Tương thích với nhiều trình duyệt:

Google Chrome, Mozilla Firefox, Microsoft Edge…

Tương thích với nhiều trình duyệt:

Google Chrome, Mozilla Firefox, Microsoft Edge…

Tương thích với nhiều trình duyệt: Google Chrome, Mozilla Firefox, Microsoft Edge…

Giao diện

Bố cục, cấu trúc các chuyên mục

Bố rõ ràng thành các chuyên mục phim

Bố rõ ràng thành các chuyên mục phim

Bố rõ ràng thành các

chuyên mục phim Màu sắc Màu sắc thống

nhất, không rối mắt

Màu sắc thống nhất, không rối mắt

Màu sắc thống nhất, không rối mắt Kiểu chữ, cỡ chữ Kiểu chữ đơn

giản tối đa

Kiểu chữ đơn giản tối đa

Kiểu chữ đơn giản tối

đa Thuận tiện cho các

thao tác người dùng

Thuận tiện cho các thao tác của người dùng

Thuận tiện cho các thao tác của người dùng

Thuận tiện cho các thao tác của người dùng

Hỗ trợ truy cập di động

Hỗ trên trên di động và ipad

Hỗ trên trên di động và ipad

Hỗ trên trên

di động và ipad

Nội dung

Số lượng phim Số lương phim

khổng lồ, phải trả phí mới có thể xem những phim hay và mới

Số lương phim khổng lồ, tuy nhiên những phim

cũ thì lại không có

Số lương phim khổng

lồ, quảng cáo trên một lần xem quá nhiều Phân loại Nhiều thể loại Nhiều thể loại Nhiều thể

loại

Số lượng server chuyển đổi

Nhanh và chính xác

Nhanh và chính xác

10

Nhìn chung với 3 website được khảo sát ở trên đều có tốc độ truy cập nhanh, giao diện thu hút, nội dung khá là phong phú Song lại có những khuyết điểm về nội dung do các hình thức kinh doanh tăng thu nhập chẳn hạn như chạy quảng cáo, hay nâng cấp tài khoản, …Đặc biệt là không có nhiều server để chuyển đổi, nếu có số lượng truy cập lớn rất dễ gây giật, đứng khi xem

Nhận thấy được những khuyết điểm này cũng như là điểm mạnh của từng website nên chúng em đã chọn đề tài này để mang lại cảm giác dễ chịu nhất cho người sử dụng nói

chung và người xem phim nói riêng

CHƯƠNG 3: CƠ SỞ LÝ THUYẾT

3.1 TỔNG QUAN VỀ MERN STACK

MERN là một công nghệ mới và là sự rút gọn của MongoDB, Express, React và Node; Stack MERN là một stack Javascript được tạo ra dùng để thế kế, tạo ứng dụng web một cách thuận tiền hơn nhưng vẫn mang đầy đủ các chức năng

Tất cả bốn công nghệ này cung cấp một khuôn khổ hoàn chỉnh cho các nhà phát triển để tạo ra bất kỳ ứng dụng web nào MERN đang tuân theo kiến trúc 3 tầng truyền thống, bao gồm tầng hiển thị front-end (React.js), tầng ứng dụng (Express.js và Node.js) và tầng cơ sở dữ liệu (MongoDB)

3.2 TỔNG QUAN VỀ MONGODB

MongoDB là một kiểu database hướng về tài liệu (document), một dạng NoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB đang lưu trữ dữ liệu dưới dạng Document JSON, mỗi một collection sẽ các các kích cỡ và các document khác nhau Chính vì lưu trữ dưới kiểu JSON nên việc truy vấn dữ liệu là tương đối nhanh

3.3 TỔNG QUAN VỀ EXPRESSJS

Expressjs là một framework mã nguồn mở và nó được cung cấp miễn phí cho Node.js Nó được sử dụng trong việc thiết kế, xây dựng các ứng dụng web nhanh chóng và đơn giản hơn nhiều

ExpressJS dựa trên Javascript cho nên việc tiếp cận framework này khá dễ dàng với các lập trình viên hiện nay Nó dùng để xây dựng các ứng dụng web, API và bên cạnh đó,

nó cũng là một phần trong NodeJS cho nên đã có sẵn mọi thứ tích hợp vào trong giúp lập trình dễ dàng hơn

3.4 TỔNG QUAN VỀ REACTJS

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành

3.5 TỔNG QUAN VỀ NODEJS

Node.js là một nền tảng JavaScript cực kì mạnh mẽ được sử dụng để phát triển ác ứng dụng chat online, các trang phát video trực tiếp, các ứng dụng một trang, và rất nhiều ứng dụng web khác Được xây dựng trên JavaScript V8 Engine của Google Chrome, nó được sử dụng rộng rãi bởi cả các công ty lớn và các startup mơi nổi (Netflix, Paypal, NASA,

và Walmart)

3.6 THUẬT TOÁN DỰ ĐOÁN PHIM LIÊN QUAN

3.6.1 Tìm hiểu công nghệ và thư viện

3.6.1.1 Công nghệ sử dụng

- Python là một ngôn ngữ bậc cao cho các mục đích lập trình trình đa tính năng đặc biệt

là trong trí tuệ nhân tạo Với hình thức sáng sủa, tốc độ xử lý nhanh, hệ thống thư viện lớn và mạnh thuận tiện cho việc lập trình theo hướng trí truệ nhân tạo

- Với Python chúng ta sẽ dễ dàng tiếp cận trí tuệ nhân tạo hơn bởi vì không cần hiểu quá sâu để viết ra thuật toán, với python chúng ta có những thư viện chuyên dụng giúp đỡ

về điều đó, ở đây chúng ta chỉ cần điều chỉnh những thông số cho phù hợp Và đây cũng là lý do nhóm chúng em chọn python là công nghệ sử dụng cho phần dự đoán phim liên quan

3.6.1.2 Thư viện sử dụng

CountVectorizer: là một class của thư viện Sklearn nó giúp chuyển đổi văn bản đầu

vào thành một ma trận số của từ khóa

Cosine_similarity: Tính độ tương tự cosin giữa 2 ma trận dưới dạng tích số chấm

chuẩn hóa của 2 ma trận đó Tức là, tính góc cosin giữa 2 danh sách vector được vẽ bằng 2

ma trận đầu vào

- Ví dụ: 2 vector trùng nhau và cùng hướng thì góc hợp bởi chúng là 0 và cosin giữa chúng đạt giá trị lớn nhất là 1 Ngược lại, nếu chúng ngược chiều nhau thì góc hợp bởi chúng là 180 tất nhiên điều này sẽ làm cosin giữa chúng nhỏ nhất là -1

- Như vậy, chúng ta có thể dễ dàng trả lời câu hỏi “làm thế nào để biết 2 vector tương đồng nhau nhất?” đó chính là giá trị cosin của chúng lớn nhất

PorterStemmer: là một class của thư viện nltk nó giúp loại bỏ các yếu tố phụ của một

từ Ví dụ như Ran sẽ được chuyển thành run, hoặc stating sẽ được chuyển thành state

Pandas: về python khi nói đến xử lý mảng thì không thể không nhắc đến pandas đây

là một thư viện phân tích và thao tác dữ liệu nhanh, mạnh, linh hoạt và dễ dàng sử dụng

Flask: là một micro framework Micro không phải là thiếu chức chức năng, mà micro

ở đây là xúc tích, gói gọn Flask cung cấp cho các lập trình viên khả năng tùy biến khi phát triển ứng dụng web, nó cung cấp cho bạn các công cụ, thư viện và cơ chế cho phép bạn xây dựng một ứng dụng web nhưng nó sẽ không thực thi bất kỳ sự phụ thuộc nào hoặc

cho bạn biết dự án sẽ như thế nào

- Ứng dụng web có thể là blog, trang web thương mại hoặc một số trang web khác, nó vẫn cho phép các lập trình viên cơ hội sử dụng một số tiện ích mở rộng để thêm nhiều chức năng hơn cho ứng dụng web

3.6.2 Áp dụng và thuật toán xử lý

Thuật toán được viết dựa trên “Build a Movie Recommendation System in Python using Machine Learning”[2]

3.6.3 Xử lý dữ liệu

- Chúng ta cần lấy dữ liệu từ API sau đó lưu những dữ liệu cần thiết như diễn viên, id,

từ khóa, tên tiếng anh của phim, … vào dict của python Ở đây chúng ta dùng dict để

có thể dễ dàng truy xuất dữ liệu hơn vì dict có dạng “key” và “value” với mỗi “key” sẽ ứng với “value” mà chúng đã đặt cho nó

14

Hình 3.6.3.1: Thống kê dữ liệu nhận từ API

- Sau khi thực hiện xong dữ liệu của chúng ta sẽ có cấu trúc như sau:

Hình 3.6.3.2: Cấu trúc dữ liệu nhận từ API

- Tuy đã lấy được dữ liệu nhưng hãy chú ý đến cast, crew, keywords và genre_ids chúng

là một object gồm nhiều phần tử cho nên chúng ta cần lọc ra để lấy giá trị của chúng

❖ Thực hiện trích xuất dữ liệu từ dict

❖ Vì mỗi bộ phim có thể có nhiều đạo diễn cho nên nó được đặt ở dạng mảng

- Sau khi đã lọc dữ liệu thành công chúng ta sẽ đến với bước tiếp theo là tổng hợp những

dữ liệu của một bộ phim lại thành một phần tử của mảng

❖ Tạo mảng chứa và loại bỏ từ “phim”

Hình 3.7.1.3: Dữ liệu một phim khi được tổng hợp

❖ Chúng ta hãy chú ý tất cả dữ liệu này đang là một câu và các từ của nó chưa ở nguyên mẫu - ví dụ như “ran” và “run” trong tiếng Anh thì nó có cùng nghĩa gốc chỉ là “ran” được dùng ở quá khứ, nếu không chuyển về nguyên mẫu thì khi đưa vào mô hình dự đoán nó sẽ phân biệt hai từ đó là khác nhau cho nên sẽ có ảnh hưởng lớn đến kết quả thu được Vì vậy, việc tiếp theo chúng ta cần làm đó chính là tách những câu này ra thành từng từ, đưa nó về nguyên mẫu và loại bỏ những từ không liên quan về nghĩa (ví dụ: a, an, the trong tiếng Anh)

16

thì thư viện đã tách chúng ra Cho nên chúng ta sẽ nối những từ đơn lẻ này thành một chuỗi duy nhất

- Đưa dữ liệu dạng chữ của mỗi id phim thành dạng số và vẽ vector của chúng

- Tiếp theo chúng ta sẽ tính vector tương đồng của chúng Thuật toán được áp dụng là

tính cosin góc giữa 2 vector Hình 3.6.4.1 sẽ làm rõ điều này, giả sử có 4 bộ phim và

phim chúng ta đang xem là đường màu thì thuật toán này sẽ tính góc cosin giữa đường màu đỏ và các đường còn lại Giá trị cosin càng lớn tức là góc hợp bỏi 2 vector này

càng nhỏ cũng như là độ tương đồng của chúng càng cao Theo như hình 3.6.4.1 thì

mô hình này sẽ dự đoán cho chúng ta theo thứ tự là vector màu xanh lá, tím và cuối cùng là đen

Hình 3.6.4.1: Minh họa các vector

- Viết hàm dự đoán Ở đây chúng ta sẽ trích xuất 20 giá trị từ 1-21 là những giá trị cao nhất được tính từ thuật toán Cosine_similarity chúng ta sẽ bỏ phần tử 0 vì chúng nhất định bằng 1 do nó sẽ trùng với chính nó và đạt giá trị lớn nhất

3.6.5 Kết luận

Chúng em đã hoàn thành được hệ thống đề xuất phim dựa trên đầu vào là id phim và

đầu ra là id của 20 phim

3.7 THUẬT TOÁN DỰ ĐOÁN PHIM CHO NGƯỜI DÙNG

3.7.1 Tìm hiểu công nghệ và thư viện sử dụng

3.7.1.1 Công nghệ sử dụng

- Asp.NET Core là một nền tảng mã nguồn mở cho việc xây dựng và kết nối các công việc như xây dựng web, Internet of thing, web API

3.7.1.2 Thư viện sử dụng

- Machine Learning NET là chiếc cầu nối giữa các thư viện python và NET để NET

có thể truy cập đến các thư viện như Keras, CNTK, TensorFlow, … của python

3.7.2 Áp dụng thuật toán và xử lý

- Thuật toán được viết dựa trên “Build a movie recommender using matrix factorization with ML.NET”[3]

3.7.3 Xử lý dữ liệu

- Tạo model lưu trữ cho một phim

- Tạo model để lưu trữ danh sách một phim các phim

- Lấy dữ liệu từ API sau đó lưu vào model đã tạo

Hình 3.7.3.1: Sơ đồ nhận dữ liệu từ API

- Tạo dữ liệu cho phần đào tạo model ở đây chúng ta sẽ dùng DataView vì nó có liên kết với DataTable – một DataView có thể được tùy chỉnh để trình bày một tập hợp từ DataTable

3.7.4 Xây dựng và đào tạo model

- Đầu tiên chúng ta sẽ lấy cột username và id của phim để xác định sự biến đổi giữa chúng và chuyển đổi mỗi username ứng với mỗi id phim thành một khóa Ví dụ, xem hình 3.7.4.1

là chúng ta sẽ tìm ma trận w tương ứng với mỗi sao mà user đó đã cho

3.7.5 Sử dụng mô hình

- Đọc mô hình đã đào tạo vào tạo các mảng dữ liệu cần thiết

- Sau khi đọc mô hình bây giờ chúng ta sẽ tìm xem username được dự đoán đã xem nhiều bộ phim của những username đã được đào tạo nhất và dĩ nhiên điều này là xác định ma trận x đã được nhắc ở trên

- Sau khi đã có được username mà nó tương đồng nhất thì điều còn lại là đem từng bộ phim của toàn bộ phim để dự đoán cho username được dự đoán Tức là đi tìm từ đối số cho cho ma trận w

- Sau khi đã đầy đủ các giá trị việc còn lại chỉ là tìm xem bộ phim nào có khả năng username có khả năng nhất bằng cách tìm phần tử lớn nhất trong mảng đã tiến hành dự đoán Ở đây chúng ta sẽ lấy 36 phần tử lớn nhất ứng với 36 bộ phim

3.8 Kết luận

Dự đoán dựa trên xếp hạng (1-5) mà người dùng đánh giá cho một bộ phim cụ thể

và đề xuất bộ phim khác theo những người dùng khác mà đã xem phim đó và có khả năng thích một bộ phim khác nữa Đó là điều mà nhóm chúng em đã thực hiện được

20

Tuy nhiên, do tìm kiếm và khảo sát khó khăn trên bộ dữ liệu lớn (1974 bộ phim) và web vẫn chưa được nhiều người biết đến cũng như là cần sự tương tác lâu dài nên bộ dữ liệu cho phần này là được tạo random không sát với thực tế gây ảnh hưởng nhiều tới kết quả dự đoán

CHƯƠNG 4: MÔ TẢ YÊU CẦU

Nếu có yêu cầu lấy dữ liệu từ Front-End là React thì các API phụ trách cho chức năng phù hợp với yêu cầu sẽ trả dữ liệu dạng JSON cho Front-End

Các dữ liệu dạng chữ, số hoặc mảng sẽ được lưu tại MongoDB Riêng có dữ liệu hình ảnh là ảnh đại diện của người dùng sẽ được lưu trên Cloudinary do MongoDB không hỗ trợ lưu ảnh

4.3 SƠ ĐỒ NGHIỆP VỤ

Khi một người dùng đã đăng nhập nhưng muốn xem phim thì phải kiểm tra họ đã nâng cấp tài khoản chưa tại trang xem chi phim, nếu chưa thì ẩn khung phát phim và hiển thị thông báo, nếu người dùng tiếp tục ấn vào xem phim thì chuyển họ sang trang nâng cấp tài

khoản

CHƯƠNG 5: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

5.1 THIẾT KẾ CHỨC NĂNG

5.1.1 Thiết kế Usecase tổng quát

Hình 5.1.1.1: Lược đồ usecase tổng thể của hệ thống

5.1.2 Thiết kế chức năng Đăng ký

Pre-conditions Người dùng chọn đăng ký

Nhập đầy đủ thông tin cần thiết

Chọn đăng ký

Post-conditions Đăng ký thành công: chuyển sang trang đăng nhập

24

Đăng ký thất bại: hiển thị nguyên nhân thất bại

Flow of events

Basic flow 1 Người dùng chọn đăng ký tại các trang của khách hàng

2 Hệ thống hiển thị cửa sổ cho người dùng nhập tên đăng nhập, ảnh đại diện, email, họ và tên, mật khẩu và nhập lại mật khẩu

3 Người dùng nhập đầy đủ thông tin bước 2

4 Hệ thống kiểm tra thông tin

5 Thực hiện theo Post-conditions Nếu thất bại quay lại bước 2

Alternative flow

Extension points Người dùng chọn đăng nhập thì sẽ quay lại trang đăng nhập

Người dùng chọn icon sẽ quay về trang chủ

5.1.2.2 Business Rule Đăng ký

Hình 5.1.2.2.1 Avtivities flow đăng ký tài khoản

Bảng 5.1.2.2.1 Business rule đăng ký tài khoản

+ Hệ thống sẽ hiển thị ra trang đăng ký

5 BR 2552 Hệ thống kiểm tra xem các thông tin người dùng đã đúng hay

chưa Quy tắc Hiển thị Màn hình:

+ Nếu có thông tin nào không đúng hiển thị thông báo lỗi + Nếu không có chọn ảnh đại diện hệ thống tự đặt ảnh đại diện

mặc định

+ Kiểm tra xem thông tin người dùng đã sử dụng hay chưa, nếu

đã sử dụng thì hiển thị thông báo

+ Nếu các thông tin đã đủ và đúng thì hiển thị thông báo đăng ký

thành công và trở về trang chủ

5.1.2.3 Sequence diagram Đăng ký

26

Hình 5.1.2.3.1: Lược đồ Sequence diagram Đăng ký

5.1.2.4 Activity diagram Đăng ký

Hình 5.1.2.4.1: Sơ đồ Activity diagram Đăng ký

5.1.3 Thiết kế chức năng Đăng nhập

5.1.3.1 Đặc tả usecase Đăng nhập

Bảng 5.1.3.1.1: Đặc tả usecase đăng nhập

Brief description Người dùng đăng nhập vào hệ thống

Actor(s) Người dùng, admin

Pre-conditions Người dùng đã đăng ký tài khoản hoặc admin được cấp tài khoản

trước đó

Chọn vào đăng nhập tại thanh header của trang người dùng

Post-conditions Đăng nhập thành công:

+ Người dùng: trở về trang trước lúc đăng nhập và set cookies (thời gian lưu 12 tiếng)

+ Admin: Xác thực vào hệ thống và hiển thị trang quản lý phim Đăng nhập thất bại: Thông báo thông tin tài khoản hoặc mật khẩu sai

3 Người dùng nhập tên đăng nhập và mật khẩu

4 Hệ thống xác thực tên đăng nhập và mật khẩu

5 Hệ thống vào trang quản lí phim với admin và mở trang trước trang đăng nhập với người dùng