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 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 Danh 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 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 Netflix
Hình 2:Diễn biến thảo luận trên mạng xã hội của FPT PLAY
Hình 3:Framework ReactJs
Hình 4:TailwindCss
Hình 5:Framework Nodejs
Hình 6 :Hệ cơ sơ quản trị dữ liệu MongoDB
Hình 7: Cloudinary

15
15
17
20
21
24
25

Hình 8: Recommendation Systems
Hình 9:Import các thư viện
Hình 10: Khởi tạo dữ liệu (Code)
Hình 11: Thiết lập ma trận TF - IDF (Code)
Hình 12: Tính độ tương đồng giữa các item (Code)
Hình 13: Xử lí kết quả (Code)
Hình 15:Sơ đồ UseCase
Hình 16:Activity Diagram Đăng ký
Hình 17:Activity Diagram Đăng nhập
Hình 18:Activity Diagram Đăng xuất
Hình 19:Activity Diagram Quên mật khẩu
Hình 20:Activity Diagram Tìm kiếm phim
Hình 21:Activity Diagram Xem phim
Hình 24:Activity Diagram Xem Bình Luận
Hình 25:Activity Diagram Bình luận
Hình 26:Activity Diagram Rating
Hình 27:Activity Diagram Thêm phim
Hình 28:Activity Diagram Xóa phim
Hình 29:Activity Diagram Sửa phim
Hình 30:Activity Diagram Thêm diễn viên
Hình 31:Activity Diagram Xóa phim
Hình 32:Activity Diagram Sửa phim
Hình 33:Activity Diagram Thêm phim u thích
Hình 34:Activity Diagram Xóa phim u thích
Hình 35:ScreenFlow
Hình 36:Trang chính
Hình 37 :Trang đăng ký
Hình 38:Trang đăng nhập

Hình 39:Trang quên mật khẩu
Hình 40 :Trang tạo mật khẩu mới
Hình 41:Trang xác thực
Hình 42:Trang chi tiết phim
Hình 43:Trang đánh giá phim
Hình 44 :Trang xem bình luận phim
Hình 45:Trang danh sách phim u thích

ĐẠI HỌC QUỐC GIA TP.HỒ CHÍ MINH

27
31
31
31
32
33
36
39
41
42
44
46
47
49
51
52
54
55
57
58

60
61
63
64
67
70
70
71
72
73
74
76
76
77
78

CƠNG HỊA XÃ HỘI CHỦ


NGHĨA VIỆT NAM
TRƯỜNG ĐẠI HỌC

Độc Lập - Tự Do - Hạnh Phúc

CÔNG NGHỆ THÔNG TIN

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ực 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.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 đú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


-Xây dựng hệ thống

-Kiểm thử website

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 Filtering
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 tồn
cầu như Netflix, Apple TV+, iQIYI – thuộc tập đồ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 đoà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 thân 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ể thêm 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 dùng 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 dùng 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ó.