Đồ á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 1
ĐỀ 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 quá trình học tập và rèn luyện tại 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 đã được trang bị các kiến thức cơ bản, các kỹ
năng thực tế để có thể thực hiện Đồ án 1 của mình. Để hoà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 vì đã tạo điều kiện
về cơ sở vật chất với hệ thống thư viện hiện đại, đa dạng các 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ư duy và cách làm việc khoa học. Đó là những góp ý hết sức q báu
khơng chỉ trong q trình thực hiện luận văn này mà cịn là hành trang tiếp bước cho chúng
em trong quá trình học tập và lập nghiệp sau này.
Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất cả thầy cô trong khoa, bạn bè,

tập thể lớp PMCL2020.2 là những người luôn sẵn sàng sẻ chia và giúp đỡ trong học tập và
cuộc sống. Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau. Trong q trình làm Đồ án
này chúng em khơng tránh khỏi được những sai sót, chúng em kính mong nhận được sự
chỉ dẫn và góp ý của q thầy cơ để hồn thiện và phát triển đồ án hơn Khóa luận tốt nghiệp
trong tương lai. Chúng em xin chân thành cảm ơn. Xin chúc những điều tốt đẹp nhất sẽ
luôn đồng hành cùng mọi người.

TP. Hồ Chí Minh, 18 tháng 6 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ý do chọn đề tài .................................................................................................... 12
1.3 Phân tích thị trường và đố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 năng........................................................................................... 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 của recommendation system. .......................................................... 28
2.6.5 Nhược điểm của 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 và giới thiệu ........................................................................ 32
3.1.2. Chi tiết các thành phần trong hệ thống ........................................................ 33
3.2. Yêu cầu chức năng ................................................................................................ 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 khẩu .............................................................................................. 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 u thích .................................................................................. 61
3.2.4.18 Xóa phim yê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 màn hình............................................................................................... 67
5.3 Mơ tả chi tiết màn hình .......................................................................................... 67
5.3.1 Trang chính....................................................................................................... 67
5.3.2 Trang đăng ký .................................................................................................. 69
5.3.3 Trang đăng nhập .............................................................................................. 69
5.3.4 Trang quên mật khẩu ...................................................................................... 70
5.3.5 Trang tạo mật khẩu mới .................................................................................. 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 và kiểm thử ............................................................................ 77
6.2 Kết quả kiểm thử: .................................................................................................. 78
CHƯƠNG VII: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .......................................... 79
7.1 Kết quả .................................................................................................................... 79
7.2 Khó khăn ................................................................................................................. 79
7.3 Kết quả .................................................................................................................... 79
7.4 Hạn chế của đồ á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 trên mạng xạ hội của Netfix .................................................. 14
Hình 2:Diễn biến thảo luận trên mạng xạ hội của FPT PLAY .......................................... 15
Hình 3:Framework ReactJs ............................................................................................... 17
Hình 4:TailwindCss ........................................................................................................... 19
Hình 5:Framework Nodejs ................................................................................................ 21


Hình 6 :Hệ cơ sơ quản trị dữ liệu MongoDB .................................................................... 23
Hình 7: Cloudinary ............................................................................................................ 25
Hình 8: Recommendation Systems ................................................................................... 27
Hình 9:Import các thư viện ................................................................................................ 30
Hình 10: Khởi tạo dữ 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 giữa các item (Code) ......................................................... 31
Hình 13: Xử lí kết quả (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 khẩu ....................................................................... 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 u thích ................................................................ 63
Hình 35:ScreenFlow .......................................................................................................... 66
Hình 36:Trang chính .......................................................................................................... 69
Hình 37 :Trang đăng ký ..................................................................................................... 69
Hình 38:Trang đăng nhập .................................................................................................. 70
Hình 39:Trang quên mật khẩu ........................................................................................... 71
Hình 40 :Trang tạo mật khẩu mới...................................................................................... 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 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 6 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 bộ 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ý do chọn đề tài :
Ngày nay , khi chất lượng cuộc sống ngày càng chất lượng, nhu cầu giải trí ngày càng
tăng cao .Bên cạnh đời sống vật thì đời sống tinh thần ngày càng được nâng cao và
phát triển.Với sự phát triển của công nghệ và Internet,đặc biệt phim và để đáp ứng nhu
cầu xem phim phải đa dạng về nội dung,chất lượng tiện lợi người dùng có thể xem
phim mọi lúc mọi nơi, chi phí tiết kiệm .Đặc biệt khi thời điểm đại dịch covid xuất
hiện thì các hoạt động vui chơi giải trí của chúng ta đều phải tạm dựng nên nhu cầu giải
trí trên các nền tảng xem phim trực tuyến ngày càng lớn.Để đáp ứng những nhu cầu
trên,nhóm em đã quyết định phát triển một nề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 những bộ 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 và tích hợp các tính năng cơng nghệ để đảm bảo chất lượng phim tốt

nhất và tăng tốc độ xử lý trang.
• Ứng dụng quản lý các thơng tin người dùng, diễn viên, phim:
-Cho phép người quản lý có thể thêm, xóa , sửa thơng tin của người dùng, diễn
viên
-Cập nhật và thêm các phim mới vào ứng dụng
-Quản lý và tìm kiếm thơng tin của 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 về phim đã trải
nghiệm, tìm kiếm và lựa chọn những phim theo chủ đề.
• Ứng dụng gợi ý phim phù hợp theo nhu cầu và sở thích của 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 năng :
• Đối với hệ thống khuyến nghị:
-Gợi ý phim cho người dùng dựa trên lịch sử và hành vi
-Gợi ý phim dựa trên những gì người dùng đã trải nghiệm và đang trải nghiệm
-Gợi ý phim theo những người dùng tương đồng về 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 hiện một số chức năng cơ bản như đăng xuất, đăng
nhập, đăng ký, quên mật khẩu, chính 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 về bộ phim một cách chi tiết như về
đ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 những gợi ý phim phù hợp với sở thích


4.Đối tượng sử dụng:
• Tất cả người dùng sử dụng Internet có nhu cầu giải trí xem phim trực tuyến đặc

biệt là độ tuổi từ (12- 40).
5.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 đúng đắn: Ứng dụng chạy khơng lỗi.

• Tính thích nghi: Ứng dụng có thể chạy tốt trên nhiều trình duyệt, nhiều thiết bị
cấu hình phần cứng khác nhau và thiết kế kiến trúc thiết bị khác nhau.
•

Tính tiến hóa: Ứng dụng phải dễ dàng được phát triển thêm tính năng mà khơng
gây ảnh hưởng đến những tính năng đã phát triển trước đó.

• Tính bảo trì: Ứng dụng có thể thay đổi, chỉnh sửa các chức năng mà khơng gây
ảnh hưởng đến các chức năng khác.
•

Tính tương tác: Ứng dụng tạo ra môi trường tương tác giữa hệ thống và 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 2 thành viên thơng qua cả 2 phương thức online dưới sự
hướng dẫn của 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 của đối tượng người dùng.
− Nghiên cứu tài liệu các 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ị trên 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 và 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 quả 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 ý những phim phù hợp nhất với người dùng
9.Hướng phát triển của đề tài:
• Tính năng mới như livestream với cơng nghệ webRTC
• Xây dựng hệ thống khuyến nghị dựa trên Deep Learning
10.Kế hoạch làm việc
Giai đoạn 1:Hoàn thiện cơ sở dữ liệu, xây dựng các APIs cơ bản theo kế
hoạch.Gồm 3 sprint và mỗi sprint là 2 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 u cầu chức năng, xây dựng CSDL
Sprint 3: Xây dựng các APIs theo kế hoạch
Sprint

Thời gian

Cơng việc

Sprint 1

01/03/2023-14/03/2023 -Tìm hiểu cơng nghệ
-Tìm hiểu các đối thủ cạnh tranh

Sprint 2

15/03/2023-29/03/2023 -Phân tích yêu cầu và lên các kế hoạch các
chức năng cho website
-Xây dựng CSDL

Sprint 3

30/03/2023-14/04/2023 -Xây dựng các APIs cơ bản

Giai đoạn 2: Xây dựng các chức năng và giao diện website.Tích hợp thêm hệ
thống khuyến nghị .Gồm 3 sprint và mỗi sprint là 2 tuần.
Thời gian: 15/04/2023-29/05/2023


Sprint 1: Xây dựng các chức năng
Sprint 2: Xây dựng các chức năng
Sprint 3: Hoàn thiện giao diện website và dựng hệ thống khuyến nghị
Sprint

Thời gian

Công việc

Sprint 1

15/04/2023-29/04/2023 - Xây dựng các chức năng của website
-Kiểm thử các chức năng

Sprint 2

30/04/2023-14/05/2023 -Hoàn thiện các chức năng của website
-Kiểm thử các chức năng

Sprint 3

15/05/2023-29/05/2023 -Xây dựng hệ thống khuyến nghị theo
phương pháp Content-based Filtering
-Hoàn thiện giao diện website

Giai đoạn 3: Kiểm thử website và viết báo cáo.Tích hợp thêm hệ thống khuyến
nghị .Gồm 1 sprint và mỗi sprint là 2 tuần.
Thời gian :30/05/2023-14/06/2023
Sprint

Thời gian

Công việc

Sprint 1

30/05/2023-14/06/2023

-Kiểm thử website
-Viết báo cáo

11.Phân chia cơng việc
Cơng việc

Mơ tả cơng việc

Cơng việc chung

-Tìm hiểu cơng nghệ
-Lập kế hoạch
-Phân tích u cầu
Nguyễn Ngọc Đức

Cơng việc từng thành viên -Xây dựng cơ sở dữ liệu
-Lập trình Backend

Lâm Phú Sỹ
-Thiết kế giao diện
-Lập trình Frontend
-Kiểm thử website


-Xây dựng hệ thống
khuyến nghị
-Viết báo cáo

CHƯƠNG I: GIỚI THIỆU CHUNG
1.1 Tổng quan đề tài
• Tên website:Website xem phim trực tuyến và tích hợp gợi ý
• Nền tảng phát triển:Web Platform
• Kiến trúc phát triển:Client-Sever

• Tích hợp hệ thống gợi ý khuyến nghị: Content-based Filering
1.2 Lý do chọn đề tài
Ngày nay , khi chất lượng cuộc sống ngày càng chất lượng, nhu cầu giải trí ngày càng
tăng cao .Bên cạnh đời sống vật thì đời sống tinh thần ngày càng được nâng cao và phát
triển.Với sự phát triển của công nghệ và Internet,đặc biệt phim và để đáp ứng nhu cầu xem
phim phải đa dạng về nội dung,chất lượng tiện lợi người dùng có thể xem phim mọi lúc
mọi nơi, chi phí tiết kiệm .Đặc biệt khi thời điểm đại dịch covid xuất hiện thì các hoạt
động vui chơi giải trí của chúng ta đều phải tạm dựng nên nhu cầu giải trí trên các nền tảng
xem phim trực tuyến ngày càng lớn.Để đáp ứng những nhu cầu trên,nhóm em đã quyết
định phát triển một nề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 những bộ phim chất lượng phù hợp với sở thích .
1.3 Phân tích thị trường và đối thủ cạnh tranh
• Phân tích thị trường


o Theo nghiên cứu của We are Social 2023, Việt Nam có 77,93 triệu người
dùng Internet, chiếm 79,1% tổng dân số, tăng thêm 5.3 triệu người (+7.3%)
so với đầu năm 2022. Trong đó, 55.4% để xem video, phim hoặc các chương
trình trên TV. Bên cạnh đó theo nghiên cứu từ Satista về thị trường VOD tại
Việt Nam, doanh thu dự kiến sẽ đạt 221 triệu đô vào năm 2023, và sẽ tăng
với tốc độ CAGR là 11,85%, lên 345,90 triệu đô vào năm 2027. Những
nghiên cứu trên cho thấy thấy thị trường video on demand ở Việt Nam đang
phát triển mạnh mẽ, nhiều doanh nghiệp đã và đang đổ tiền vào cuộc chơi
lớn này.
o Theo số liệu từ SocialHeat – nền tảng Social Listening của YouNet Media,
từ ngày 1/1 đến ngày 15/4/2023, theo ghi nhận từ hệ thống SocialHeat, có
đến 3.108.442 thảo luận xoay quanh thị trường VOD, tăng hơn 23,17% so
với 2022, hơn 50% so với năm 2021. Trong đó, top 10 thương
hiệu chiếm 62,38% thị phần với 1.903.759 thảo luận. Đáng chú ý, Top 10
không chỉ thống trị bởi những cái tên quốc tế có tầm ảnh hướng toàn

cầu như Netflix, Apple TV+, iQIYI – thuộc tập đoàn Baidu (Trung Quốc),
mà cịn có những thương hiệu quốc nội đình đám khơng kém như FPT Play –
Cơng ty cổ phần Viễn thơng FPT (FPT Telecom), VTV Giải Trí – thuộc Đài
Truyền hình Việt Nam, Galaxy Play – thuộc hãng phim Thiên
Ngân, VieON – thuộc Đất Việt VAC, hay My K+ – Cơng ty TNHH Truyền
hình số vệ tinh Việt Nam (VSTV) sở hữu, TV360 – của nhà mạng
Viettel, MyTv – thuộc Tập đồn Bưu chính Viễn thơng Việt Nam (VNPT).
• Phân tích đối thủ
Netflix
• Thu hút hơn 7,1 triệu lượt tương tác, hơn 730.000 thảo luận, và 44.055 bài
đăng trên MXH (từ ngày 1/1/2023-15/4/2023), Netflix xuất sắc được vinh danh
ở vị trí dẫn đầu các thương hiệu ứng dụng xem phim, giải trí trực tuyến được
thảo luận nhiều nhất trên MXH


• Netflix cũng là một trong những thương hiệu làm nội dung sáng tạo và thu hút
nhất trên Social Media. Minh chứng đó là fanpage chính thức của Netflix là
nguồn thu hút thảo luận nhất cho thương hiệu này. Các đoạn cut phim, trích dẫn
những câu nói “đắt giá”, sáng tạo nội dung duyên dáng, hài hước, thú vị đã
giúp Netflix trở thành một trong những ứng dụng xem phim, giải trí online
trendy trong mắt người dùng.

Hình 1:Diễn biến thảo luận trên mạng xạ hội của Netfix
FPT Play
• Ứng dụng này giữ vị trí Top 2 Thương hiệu ứng dụng xem phim và chương
trình giải trí được quan tâm nhất MXH với 324.894 thảo luận (từ 1/1 –
15/4/2023).


Hình 2:Diễn biến thảo luận trên mạng xạ hội của FPT PLAY

• Định hướng website của nhóm
Nền tảng xem phim trực tuyến của nhóm sẽ đáp ứng các khơng những nhu cầu cơ
bản của một website mà còn khắc phục được các vấn đề tồn tại của thị trường và
đối thủ cạnh tranh
Vấn đề

Giải pháp

Tốc độ tải dữ liệu chậm

Cải thiện tốc độ dữ liệu bằng cơ chế
skip&limit và lưu trữ những hình ảnh
của website phù hợp với kích thước sử
dụng

Giao diện người dùng khó tìm kiếm,

Cải thiện responsive trên các màn hình

khơng than thiện với người dùng di

khác nhau

động
Vấn đề quảng cáo

Giảm thiểu số lượng quảng cáo tăng
trải nghiệm người dũng`

Gợi ý trên mơ hình truyền thống nên

Xây dựng hệ thống khuyến nghị trên

kết quả thiếu chính xác

mạng nơ-ron nhân tạo

1.4 Đối tượng sử dụng


• Tất cả người dùng sử dụng Internet có nhu cầu giải trí xem phim trực tuyến đặc
biệt là độ tuổi từ (12- 40).
1.5 Phạm vi nghiên cứu
1.5.1. Phạm vi mơi trường
o Mơi trường website
1.5.2 Phạm vi chức năng
• Đối với hệ thống khuyến nghị:
-Gợi ý phim theo những người dùng tương đồng về 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 hiện một số chức năng cơ bản như đăng xuất,
đăng nhập, đăng ký, quên mật khẩu, chính 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 về bộ phim một cách chi tiết như
về đ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 những gợi ý phim phù hợp với sở thích

CHƯƠNG II:CƠ SỞ LÝ THUYẾT VÀ NỀN TẢNG CÔNG NGHỆ

2.1. ReactJs


Hình 3:Framework ReactJs

• ReactJs là một framework mã nguồn mở được tạo bởi Meta Platforms, Inc. Nó
được sử dụng để phát triển các ứng dụng cho nền tảng web bằng cách cho phép
các nhà phát triển sử dụng ngôn ngữ Javascript cùng với các khả năng của nền
tảng native. Nó cũng đang được sử dụng để phát triển các ứng dụng thực tế ảo tại
Oculus.
• ReactJs chạy trong một quy trình nền (diễn giải JavaScript do các lập trình viên
viết) trực tiếp trên thiết bị đầu cuối và giao tiếp với nền tảng native thông qua dữ
liệu được tuần tự hóa qua một cầu nối khơng đồng bộ và theo lơ.
• Các thành phần React bao bọc các dịng lệnh native hiện có và tương tác với các
API native thơng qua mơ hình giao diện người dùng khai báo của React và
JavaScript.
• Mặc dù kiểu dáng React có cú pháp tương tự như CSS, nhưng nó khơng sử dụng
HTML hoặc CSS. Thay vào đó, các thơng báo từ chuỗi JavaScript được sử dụng
để thao tác các chế độ xem native.
• Ưu điểm:


-

Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các
component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất
nhiều. Reactjs cũng tính tốn những thay đổi nào cần cập nhật lên DOM và
chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trên
DOM mà nhiều chi phí.

-

Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc
biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và
Javascript. Ta có thể them vào các đoạn HTML vào trong hàm render mà
không cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển
đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến
đổi JSX.

-

Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là
tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang
đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo
và hiển thị lên. Điều này thực tế là chậm. Hoặc nếu giả sử người dung vơ
hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể
vừa render ở ngồi trình duyệt sử dụng DOM và cũng có thể render bằng
các chuỗi HTML mà server trả về.

-

Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao
diện vì virtual DOM được cài đặt hoàn toàn bằng JS.

-

Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng
cho bảo trì và sửa lỗi.

Nhược điểm:

-

Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó không
phải là một MVC framework như những framework khác. Đây chỉ là thư
viện của Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần
Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ
khơng có 2-way binding hay là Ajax.


-

Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải
cấu hình lại. - React khá nặng nếu so với các framework khác React có kích
thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular).
Trong khi đó Angular là một framework hồn chỉnh.

-

Khó tiếp cận cho người mới học Web.

2.2 Tailwind CSS

Hình 4:TailwindCss

Tailwind Css là một utility-first CSS framework, nó cũng giống như Bootstrap, nó có những
class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao gồm các thuộc
tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới ra những class
bằng chính những class của nó.
• Ưu điểm:
-

Người sử dụng có thể chẳng phải viết đến 1 dịng css nào mà vẫn có giao diện tùy
biến theo mong muốn.


-

Style, màu sắc, font chữ hiện đại, phù hợp với phong cách web hiện đại

-

Cách đặt tên class dễ hiểu, 1 class đại diện cho 1 thuộc tính. Tailwind CSS có gần
như đủ gần 85% thuộc tính css.

-

Sử dụng Flex nên rất dễ chia Layout

-

Dễ cài đặt, dễ sử dụng, document của Tailwind rất dễ hiểu. Tailwind CSS phù hợp
cho các dự án nhỏ, người dùng tuỳ biến nhiều, cần làm nhanh giao diện. Trong khi
nếu bạn Bootstrap mà không tuỳ biến gì thì trong web của bạn sẽ đúng đậm chất
Bootstrap. cịn với Tailwind thì khi mỗi người dùng sẽ ra mỗi giao diện khác nhau
mà không hề đụng hàng.

• Nhược điểm
-

Khi sử dụng tailwind thì bạn bạn đang phải sử dụng số class cực kì nhiều, số class

sẽ tương ứng với với số thuộc tính mà bạn muốn cài đặt

-

Khi dùng font-size hoặc màu sắc vẫn đang còn phải custom lại bằng css riêng.

-

Chưa có những bộ mixin khi muốn set nhiều thuộc tính cần thiết.


2.3 NodeJS

Hình 5:Framework Nodejs

• Node.js là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên
Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng
web một cách nhanh chóng và dễ dàng mở rộng. Node.js bao gồm có V8
JavaScript engine của Google, libUV, và vài thư viện khác.
• Node.js được xây dựng và phát triển bởi Ryan Dahl từ năm 2009, bảo trợ bởi
công ty Joyent, trụ sở tại California, Hoa Kỳ. Mục tiêu ban đầu của Dahl là làm
cho trang web có khả năng push như trong một số ứng dụng web như Gmail.
Sau khi thử với vài ngôn ngữ Dahl chọn Javascript vì API nhập/xuất khơng đầy
đủ. Điều này cho phép ơng có thể định nghĩa một quy ước nhập/xuất điểu khiển
theo sự kiện, non-blocking.
• Node.js có kiến trúc hướng sự kiện có khả năng nhập/xuất khơng đồng bộ. Thiết
kế này nhằm mục đích tối ưu hóa thơng lượng và khả năng mở rộng trong các
ứng dụng web với nhiều hoạt động đầu vào / đầu ra, cũng như cho các ứng dụng
web thời gian thực (ví dụ: chương trình giao tiếp thời gian thực và trị chơi trình
duyệt) Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng

nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể.


• Ưu điểm:
- Đặc điểm nổi bật của Node.js là nó nhận và xử lý nhiều kết nối chỉ với một
single-thread. Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi
không phải tạo thread mới cho mỗi truy vấn giống PHP. Ngoài ra, tận dụng ưu
điểm non-blocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên của
server mà không tạo ra độ trễ như PHP
- JSON APIs Với cơ chế event-driven, non-blocking I/O(Input/Output) và mơ
hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm
bằng JSON.
- Ứng dụng trên 1 trang( Single page Application) Nếu bạn định viết 1 ứng dụng
thể hiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm. Với khả năng xử lý
nhiều Request/s đồng thời thời gian phản hồi nhanh. Các ứng dụng bạn định viết
khơng muốn nó tải lại trang, gồm rất nhiều request từ người dùng cần sự hoạt
động nhanh để thể hiện sự chuyên nghiệp thì NodeJS sẽ là sự lựa chọn của bạn.
- Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động. Tức là
NodeJS có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất
hoạt động đạt mức tối đa nhất và tuyệt vời nhất.
- Streamming Data (Luồng dữ liệu) Các web thông thường gửi HTTP request và
nhận phản hồi lại (Luồng dữ liệu). Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn,
NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa
hoạt động cho các luồng dữ liệu khác.
- Ứng dụng Web thời gian thực Với sự ra đời của các ứng dụng di động & HTML
5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực (realtime applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook,
Twitter,…


• Nhược điểm:

- Ứng dụng nặng tốn tài nguyên Nếu bạn cần xử lý các ứng dụng tốn tài nguyên
CPU như encoding video, convert file, decoding encryption… hoặc các ứng
dụng tương tự như vậy thì khơng nên dùng NodeJS (Lý do: NodeJS được viết
bằng C++ & Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS
sẽ lâu hơn 1 chút ). Trường hợp này bạn hãy viết 1 Addon C++ để tích hợp với
NodeJS để tăng hiệu suất tối đa !
- NodeJS và ngôn ngữ khác NodeJS, PHP, Ruby, Python .NET …thì việc cuối
cùng là phát triển các App Web. NodeJS mới sơ khai như các ngôn ngữ lập trình
khác. Vậy nên bạn đừng hi vọng NodeJS sẽ không hơn PHP,Ruby,Python… ở
thời điểm này. Nhưng với NodeJS bạn có thể có 1 ứng dụng như mong đợi, điều
đó là chắc chắn !
2.4 MongoDB

Hình 6 :Hệ cơ sơ quản trị dữ liệu MongoDB


• MongoDB lần đầu ra đời bởi MongoDB Inc., tại thời điểm đó là thế hệ 10, vào
tháng Mười năm 2007, nó là một phần của sản phẩm PaaS (Platform as a
Service) tương tự như Windows Azure và Google App Engine. Sau đó nó đã
được chuyển thành nguồn mở từ năm 2009.
• MongoDB là một database hướng 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 sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một
collection sẽ các các kích cỡ và các document khác nhau. Các dữ liệu được lưu
trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.
• Ưu điểm:
- Schema linh hoạt: Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document
JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau.
Cấu trúc đối tượng rõ ràng: Tuy rằng cấu trúc của dữ liệu là linh hoạt nhưng đối

tượng của nó được xác định rất rõ ràng. Sử dụng bộ nhớ nội tại, nên truy vấn sẽ
rất nhanh.
- MongoDB rất dễ mở rộng.
- Khơng có các join: Điều này cũng góp phần tạo nên tốc độ truy vấn cực nhanh
trên mongoDB. - MongoDB phù hợp cho các ứng dụng realtime.
• Nhược điểm:
- Điều đầu tiên phải kể đến ở đây là MongoDB không có các tính chất ràng buộc
như trong RDBMS nên khi thao tác với mongoDB thì phải hết sức cẩn thận.
MongoDB sử dụng sẽ hao tốn tài nguyên của hệ thống nhiều hơn RDBMS.
Nhưng đến thời điểm hiện tại thì vấn đề này khơng cịn là điều lo ngại nữa.


2.5 Cloudinary

Hình 7: Cloudinary

• Cloudinary là một cloud-based service, nó cung cấp một giải pháp quản lý hình
ảnh bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery. Với cloudinary bạn
có thể dễ dàng upload ảnh lên cloud, tự động thực thi các thao tác với ảnh một
cách thông minh mà không cần phải cài đặt bất kỳ một phần mềm phức tạp nào
khác. Cloudinary cung cấp các APIs tồn diện và màn hình quản lý giúp chúng
ta dễ dàng tích hợp vào các trang web và ứng dụng di động.
• Ưu điểm:
- Tốc độ CDN ổn định, nếu dùng lazy load ảnh thì bạn nên sử dụng biện pháp
native để tránh độ trễ.
- Có các tùy chọn nén ảnh phù hợp nên không làm ảnh hưởng đến chất lượng
của ảnh. Trong khi các CDN miễn phí khác đều làm giảm chất lượng của ảnh dù
ít hay nhiều, điển hình như Jetpack. - Miễn phí 25GB CDN hoặc 25000 lượt
chuyển đổi, 25GB lưu trữ.
- Thao tác cài đặt tương đối đơn giản.

• Nhược điểm:
- Gói miễn phí của Cloudinary khơng phù hợp với website có lưu lượng truy
cập cao hoặc có nhiều ảnh.