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

GIỚI THIỆU CHUNG

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

Lý do chọn đề tài

Ngày nay, khi chất lượng cuộc sống được nâng cao, nhu cầu giải trí cũng tăng cao, đặc biệt trong bối cảnh đại dịch COVID-19 khiến các hoạt động vui chơi giải trí phải tạm dừng Sự phát triển của công nghệ và Internet đã tạo điều kiện cho người dùng xem phim mọi lúc, mọi nơi với chi phí tiết kiệm Để đáp ứng nhu cầu này, nhóm chúng tôi đã phát triển một nền tảng xem phim trực tuyến tích hợp hệ thống gợi ý, giúp người dùng dễ dàng lựa chọn những bộ phim chất lượng phù hợp với sở thích của mình.

Phân tích thị trường và đối thủ cạnh tranh

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ố, với 55,4% sử dụng để xem video và phim Doanh thu thị trường video on demand (VOD) dự kiến đạt 221 triệu đô vào năm 2023 và tăng trưởng với tốc độ CAGR 11,85%, đạt 345,90 triệu đô vào năm 2027 Từ ngày 1/1 đến 15/4/2023, có 3.108.442 thảo luận về thị trường VOD, tăng 23,17% so với 2022 Top 10 thương hiệu chiếm 62,38% thị phần với nhiều tên tuổi lớn như Netflix, Apple TV+, iQIYI và các thương hiệu nội địa như FPT Play, VTV Giải Trí, Galaxy Play, VieON, My K+, TV360 và MyTv.

Từ ngày 1/1/2023 đến 15/4/2023, Netflix đã thu hút hơn 7,1 triệu lượt tương tác, 730.000 thảo luận và 44.055 bài đăng trên mạng xã hội, xuất sắc giành vị trí dẫn đầu trong số các thương hiệu ứng dụng xem phim và giải trí trực tuyến được thảo luận nhiều nhất.

Netflix là một trong những thương hiệu nổi bật trong việc sáng tạo nội dung trên mạng xã hội, với fanpage chính thức thu hút nhiều thảo luận Những đoạn clip phim, trích dẫn câu nói ấn tượng và nội dung sáng tạo, hài hước đã giúp Netflix trở thành ứng dụng xem phim online được yêu thích và 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

• Ứ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 –

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 chúng tôi không chỉ đáp ứng nhu cầu cơ bản của người dùng mà còn giải quyết hiệu quả các vấn đề hiện có trên thị trường và vượt qua đối thủ cạnh tranh.

Để cải thiện tốc độ tải dữ liệu chậm, hãy áp dụng cơ chế skip&limit và tối ưu hóa lưu trữ hình ảnh trên website theo kích thước sử dụng phù hợp.

Giao diện người dùng khó tìm kiếm, không than thiện với người dùng di động

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

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 kết quả thiếu chính xác

Xây dựng hệ thống khuyến nghị trên mạng nơ-ron nhân tạo

Đố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).

Phạm vi nghiên cứu

1.5.1 Phạm vi môi trường o Môi trường website

• Đố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

Hệ thống cho phép quản lý thông tin phim một cách linh hoạt với các chức năng thêm, xóa và sửa Đồng thời, người dùng có thể thực hiện các thao tác cơ bản như đăng nhập, đăng xuất, đăng ký tài khoản, khôi phục mật khẩu và chỉnh sửa hồ sơ cá nhân để cập nhật thông tin cá nhân một cách dễ dàng.

Người dùng có thể đánh giá và bình luận về trải nghiệm xem phim, đồng thời tiếp cận thông tin chi tiết về bộ phim, bao gồm điểm số, nhận xét về diễn viên và nhà sản xuất Hơn nữa, hệ thống cũng cung cấp những gợi ý phim phù hợp với sở thích của người dùng.

SỞ LÝ THUYẾT VÀ NỀN TẢNG CÔNG NGHỆ

ReactJs

ReactJS is an open-source framework developed by Meta Platforms, Inc It enables developers to create web applications using JavaScript while leveraging native platform capabilities Additionally, ReactJS is utilized for developing virtual reality applications at Oculus.

ReactJs hoạt động trong một quy trình nền, nơi diễn giải JavaScript được viết bởi lập trình viên diễn ra trực tiếp trên thiết bị đầu cuối Nó 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 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, giúp tối ưu hóa quá trình phát triển ứng dụng.

Mặc dù React có cú pháp tương tự như CSS, nhưng nó không sử dụng HTML hay CSS Thay vào đó, React sử dụng các thông báo từ chuỗi JavaScript để thao tác với các chế độ xem native.

Reactjs mang lại hiệu quả cao nhờ vào việc tạo ra DOM ảo, nơi các component tồn tại Điều này không chỉ cải thiện hiệu suất mà còn giúp Reactjs xác định và thực hiện chỉ những thay đổi cần thiết trên DOM, từ đó giảm thiểu các thao tác tốn kém.

ReactJS giúp đơn giản hóa việc viết mã JavaScript thông qua cú pháp đặc biệt JSX (JavaScript mở rộng), cho phép kết hợp mã HTML và JavaScript một cách dễ dàng Người dùng có thể thêm các đoạn HTML trực tiếp vào hàm render mà không cần phải nối chuỗi, tạo nên sự thuận tiện trong quá trình lập trình Đặc điểm nổi bật của ReactJS là khả năng chuyển đổi HTML thành các hàm khởi tạo đối tượng HTML thông qua bộ biến đổi JSX.

Render tầng server là giải pháp quan trọng để tối ưu SEO và giảm thời gian tải trang cho các ứng dụng đơn trang Khi toàn bộ việc xây dựng và hiển thị trang diễn ra ở client, người dùng phải chờ đợi trang khởi tạo, gây ra sự chậm chạp Hơn nữa, nếu người dùng vô hiệu hóa Javascript, trải nghiệm sẽ càng bị ảnh hưởng Reactjs, với vai trò là thư viện component, cho phép render cả ở trình duyệt thông qua DOM và trả về các chuỗi HTML từ server, giúp cải thiện hiệu suất và khả năng tối ưu hóa SEO.

- 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

ReactJS chỉ đảm nhận vai trò của tầng View, không phải là một framework MVC như các framework khác Đây là thư viện do Facebook phát triển, chuyên dùng để render phần view Do đó, React không bao gồm phần Model và Controller, và cần kết hợp với các thư viện khác để hoàn thiện Ngoài ra, React cũng không hỗ trợ 2-way binding hay Ajax.

Tích hợp Reactjs vào các framework MVC truyền thống đòi hỏi phải cấu hình lại, vì React có kích thước tương đương với Angular (khoảng 35kb so với 39kb của Angular) Tuy nhiên, Angular là một framework hoàn chỉnh, trong khi React lại nhẹ hơn và linh hoạt hơn trong việc xây dựng giao diện người dùng.

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

Tailwind CSS

Tailwind CSS is a utility-first CSS framework similar to Bootstrap, offering built-in classes for easy use It features a wide range of classes that encompass various essential CSS properties, allowing for straightforward expansion and the creation of new classes using its existing ones.

- 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

Tailwind CSS dễ cài đặt và sử dụng, với tài liệu hướng dẫn rõ ràng Nó rất phù hợp cho các dự án nhỏ, cho phép người dùng tùy biến giao diện một cách nhanh chóng Trong khi Bootstrap thường tạo ra giao diện đồng nhất nếu không được tùy chỉnh, Tailwind giúp mỗi người dùng tạo ra những giao diện độc đáo, không giống nhau.

Khi sử dụng Tailwind, bạn sẽ cần sử dụng rất nhiều class, với số lượng class tương ứng với số thuộc tính mà bạn muốn thiết lập.

- 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.

NodeJS

Node.js là nền tảng phát triển độc lập dựa trên Javascript Runtime của Chrome, cho phép xây dựng ứng dụng web nhanh chóng và dễ dàng mở rộng Nền tảng này bao gồm V8 JavaScript engine của Google, libUV và một số thư viện khác.

Node.js, được phát triển bởi Ryan Dahl vào năm 2009 và được bảo trợ bởi công ty Joyent tại California, Hoa Kỳ, nhằm mục đích mang lại khả năng push cho trang web tương tự như các ứng dụng web như Gmail Sau khi thử nghiệm với nhiều ngôn ngữ khác nhau, Dahl đã chọn JavaScript vì API nhập/xuất của nó không đầy đủ, cho phép ông định nghĩa một quy ước nhập/xuất điều khiển theo sự kiện và không chặn.

Node.js là một nền tảng phát triển ứng dụng web với kiến trúc hướng sự kiện và khả năng nhập/xuất không đồng bộ, giúp tối ưu hóa thông lượng và khả năng mở rộng cho các ứng dụng có nhiều hoạt động đầu vào/đầu ra Nó đặc biệt phù hợp cho các ứng dụng web thời gian thực như trò chơi trình duyệt và chương trình giao tiếp thời gian thực Node.js lý tưởng cho các sản phẩm có lượng truy cập lớn, yêu cầu mở rộng nhanh, đổi mới công nghệ, và hỗ trợ phát triển các dự án Startup một cách nhanh chóng.

Node.js nổi bật với khả năng xử lý nhiều kết nối chỉ bằng một single-thread, giúp tiết kiệm RAM và tăng tốc độ hoạt động so với việc tạo thread mới cho mỗi truy vấn như PHP Bên cạnh đó, Node.js tận dụng ưu điểm non-blocking I/O của Javascript, tối ưu hóa tài nguyên server mà không gây ra độ trễ như PHP.

JSON APIs, utilizing an event-driven and non-blocking I/O mechanism, combined with JavaScript, are an excellent choice for web services built with JSON.

Ứng dụng trên 1 trang (Single Page Application) là lựa chọn lý tưởng cho những ai muốn phát triển ứng dụng như Gmail, và NodeJS là công nghệ phù hợp để thực hiện điều này Với khả năng xử lý nhiều yêu cầu đồng thời và thời gian phản hồi nhanh, NodeJS giúp tạo ra trải nghiệm mượt mà mà không cần tải lại trang Nếu bạn cần xây dựng ứng dụng với nhiều yêu cầu từ người dùng và mong muốn thể hiện sự chuyên nghiệp, NodeJS sẽ là sự lựa chọn tối ưu.

Unix shelling tools in NodeJS maximize the capabilities of Unix, allowing NodeJS to handle thousands of processes simultaneously This efficient processing results in optimal performance and exceptional operational effectiveness.

Luồng dữ liệu trong các ứng dụng web thường sử dụng HTTP request và nhận phản hồi Khi cần xử lý một luồng dữ liệu lớn, NodeJS có khả năng xây dựng các Proxy để phân vùng các luồng dữ liệu, từ đó tối ưu hóa hiệu suất 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

Node.js is highly effective for building real-time applications, such as chat applications and social networking services like Facebook and Twitter.

NodeJS không phù hợp cho các ứng dụng tốn tài nguyên CPU như encoding video hay chuyển đổi file, vì nó cần thông qua trình biên dịch, gây chậm trễ Để tối ưu hiệu suất, bạn nên phát triển một Addon C++ tích hợp với NodeJS.

NodeJS, giống như các ngôn ngữ lập trình khác như PHP, Ruby, Python và NET, đều hướng tới việc phát triển ứng dụng web Mặc dù NodeJS vẫn còn mới mẻ so với những ngôn ngữ này, nhưng bạn không nên kỳ vọng nó sẽ vượt trội hơn PHP, Ruby hay Python ngay lúc này Tuy nhiên, với NodeJS, bạn hoàn toàn có thể xây dựng một ứng dụng đáp ứng mong đợi của mình.

MongoDB

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

MongoDB was first introduced by MongoDB Inc in October 2007 as part of the 10th generation of products, functioning as a Platform as a Service (PaaS) similar to Windows Azure and Google App Engine It transitioned to an open-source model in 2009.

MongoDB là một cơ sở dữ liệu NoSQL theo hướng tài liệu, sử dụng cấu trúc lưu trữ dữ liệu dạng JSON với schema linh hoạt gọi là BSON Khác với các cơ sở dữ liệu quan hệ, MongoDB cho phép lưu trữ nhiều kích cỡ và loại tài liệu khác nhau trong mỗi collection Nhờ vào việc sử dụng document kiểu JSON, truy vấn dữ liệu trong MongoDB diễn ra nhanh chóng và hiệu quả.

MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON, cho phép mỗi collection có kích thước và các document khác nhau, mang lại tính linh hoạt cao Mặc dù cấu trúc dữ liệu linh hoạt, nhưng các đối tượng trong MongoDB được xác định một cách rõ ràng, giúp tối ưu hóa truy vấn với tốc độ nhanh nhờ vào việc sử dụng bộ nhớ nội tại.

- 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

MongoDB không có các tính chất ràng buộc như RDBMS, do đó người dùng cần cẩn thận khi thao tác Mặc dù MongoDB tiêu tốn nhiều tài nguyên hệ thống hơn RDBMS, nhưng vấn đề này hiện nay không còn là mối lo ngại lớn.

Cloudinary

Cloudinary là dịch vụ dựa trên đám mây cung cấp giải pháp quản lý hình ảnh toàn diện, bao gồm upload, lưu trữ, thao tác, tối ưu hóa và phân phối Với Cloudinary, người dùng có thể dễ dàng tải ảnh lên đám mây và thực hiện các thao tác thông minh mà không cần cài đặt phần mềm phức tạp Dịch vụ này cung cấp các API đầy đủ và giao diện quản lý giúp tích hợp dễ dàng vào trang web và ứng dụng di động.

- 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ó nhiều tùy chọn nén ảnh hiệu quả mà không làm giảm chất lượng hình ảnh, khác với các CDN miễn phí khác như Jetpack, thường làm giảm chất lượng ảnh Người dùng được cung cấp miễn phí 25GB băng thông CDN, 25GB lưu trữ, hoặc 25,000 lượt chuyển đổi.

- Thao tác cài đặt tương đối đơn giản

- 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

- Tên miền tùy chỉnh dạng cdn.ten-mien.com chỉ có ở gói Advanced, không có ở gói miễn phí nên có thể sẽ ảnh hưởng đến chất lượng SEO

- Cloudinary không thiết lập canonical header cho ảnh.

Hệ thống khuyến nghị

Hệ thống khuyến nghị là công cụ phần mềm quan trọng trong khoa học dữ liệu, giúp cung cấp các đề xuất về nội dung cho người dùng Chúng hỗ trợ quá trình ra quyết định trong nhiều tình huống, chẳng hạn như lựa chọn hàng hóa, nhạc nghe, hoặc tin tức đọc.

Các website thương mại điện tử như sách, phim, nhạc và báo sử dụng hệ thống gợi ý để hỗ trợ người dùng trong việc lựa chọn sản phẩm Những gợi ý này dựa trên số lượng sản phẩm đã bán, thông tin cá nhân của người dùng, và phân tích hành vi mua sắm trước đó để dự đoán xu hướng mua hàng trong tương lai Các hình thức gợi ý bao gồm sản phẩm được đề xuất cho người tiêu dùng, thông tin sản phẩm cá nhân hóa, tổng hợp ý kiến cộng đồng, và chia sẻ, đánh giá từ người dùng khác liên quan đến nhu cầu và mục đích của khách hàng.

Các Recommendation Systems thường được chia thành 4 loại chính:

Hệ thống gợi ý đơn giản (Simple Recommenders) cung cấp những đề xuất chung cho tất cả người dùng, dựa trên mức độ phổ biến và thể loại sản phẩm Nguyên tắc cơ bản của hệ thống này là những bộ phim nổi tiếng và được đánh giá cao từ giới phê bình có khả năng cao hơn để thu hút sự yêu thích từ khán giả đại chúng.

Hệ thống dựa trên nội dung đánh giá các đặc tính của các mục được gợi ý Chẳng hạn, nếu một người dùng thường xuyên xem các bộ phim hình sự, hệ thống sẽ gợi ý cho họ một bộ phim có đặc điểm tương tự từ cơ sở dữ liệu, như phim "Người phán xử" Cách tiếp cận này đòi hỏi việc phân loại các mục vào từng nhóm hoặc xác định các đặc trưng của từng mục Tuy nhiên, có những mục không thuộc nhóm cụ thể, và việc xác định nhóm hoặc đặc trưng của chúng đôi khi là điều không khả thi.

Hệ thống gợi ý dựa trên phương pháp collaborative filtering hoạt động bằng cách phân tích sự tương quan giữa các người dùng và/hoặc các mục Cụ thể, một mục sẽ được gợi ý cho một người dùng dựa trên hành vi tương tự của những người dùng khác Chẳng hạn, nếu người dùng A, B, C đều yêu thích các bài hát của Noo Phước Thịnh, và người dùng B, C cũng thích các bài hát của Bích Phương, hệ thống sẽ gợi ý Bích Phương cho người dùng A mặc dù chưa có thông tin về sở thích của A đối với nghệ sĩ này.

C, hệ thống có thể dự đoán rằng A cũng thích Bích Phương và gợi ý các bài hát của ca sĩ này tới A

Hybrid recommenders combine Content-based Filtering and Collaborative Filtering to enhance recommendation systems This flexible approach allows the system to utilize Content-based Filtering when Collaborative Filtering lacks user behavior data, such as ratings Conversely, when Content-based Filtering lacks essential features for evaluation, the system switches to Collaborative Filtering as an alternative.

2.6.4 Ưu điểm của recommendation system

• Tăng trải nghiệm người dùng

• Tăng doanh số và doanh thu

• Tối ưu hóa tỷ lệ chuyển đổi

• Tiết kiệm thời gian và công thức cho người dùng tạo trải nghiệm tốt nhất cho người dùng

• Tạo sự độc đáo và cạnh tranh

2.6.5 Nhược điểm của recommendation system

• Vấn đề người dùng mới

• Vấn đề sản phẩm/đối tượng mới

• Chất lượng phụ thuộc vào độ lớn dữ liệu lịch sử thao tác của người sử dụng

• Vấn đề sở thích của người dùng

• Vấn đề riêng tư và bảo mật

Phương pháp mạng neural network cho phép tận dụng đồng thời thông tin về sản phẩm và khách hàng, mang lại mức độ cá nhân hóa cao hơn so với các phương pháp truyền thống Việc sử dụng đa dạng các trường thông tin cá nhân hóa giúp tăng độ chính xác của các khuyến nghị sản phẩm Mô hình này không chỉ tiếp nhận các biến số và danh mục mà còn xử lý các kiểu dữ liệu đặc biệt như hình ảnh và văn bản mô tả sản phẩm, góp phần quan trọng trong việc nâng cao chất lượng khuyến nghị Các phương pháp nhúng hình ảnh và văn bản giúp tích hợp dễ dàng vào mô hình, và nghiên cứu cho thấy thuật toán sử dụng dữ liệu hình ảnh và mô tả sản phẩm mang lại kết quả tốt hơn Nhờ vào những ưu điểm trong việc đa dạng hóa dữ liệu từ người dùng và sản phẩm, mô hình recommendation dựa trên mạng neural network ngày càng được ưa chuộng hơn so với các phương pháp cũ.

2.6.6 Content-based recommendation system Đề xuất các mặt hàng tương tự dựa trên một mặt hàng cụ thể Hệ thống này sử dụng siêu dữ liệu mục, chẳng hạn như thể loại, đạo diễn, mô tả, diễn viên, v.v cho phim, để đưa ra các đề xuất này Ý tưởng chung đằng sau các hệ thống giới thiệu này là nếu một người thích một mặt hàng cụ thể, họ cũng sẽ thích một mặt hàng tương tự với nó Và để khuyến nghị điều đó, nó sẽ sử dụng siêu dữ liệu mục trước đây của người dùng Một ví dụ điển hình có thể là YouTube, nơi dựa trên lịch sử của bạn, nó gợi ý cho bạn những video mới mà bạn có thể xem Đây là một hệ thống gợi ý dựa trên nội dung học một hồ sơ cá nhân về sở thích của người sử dụng dựa trên các đặc điểm xuất hiện trong chính các đối tượng người sử dụng đã đánh giá (rated) Schafer, Konstan & Riedl gọi gợi ý theo nội dung là "tương quan đối tượng với đối tượng" (item-to-item correlation) Hồ sơ người sử dụng của một hệ thống gợi ý theo nội dung phụ thuộc vào phương pháp học máy được dùng

• Sử dụng để xử lý và tính toán đặc trưng của văn bản từ hai phương thức TfidfVectorizer và linear_kernel

Hình 9:Import các thư viện

Utilize product input data from a database that contains film information Employ the Pandas library's read_csv module to read the file and store it as a dataframe.

Hình 10: Khởi tạo dữ liệu (Code)

2 Thiết lập ma trận TF - IDF:

• Khởi tạo đối tượng TfidfVectorizer với stop_words được thiết lập thành

• Điền các gia trị thiếu trong cột ‘overview’ của DataFrame df_movies bằng các chuỗi rỗng (“ ”) sử dụng hàm fillna(“ “)

• Sử dụng phương thức fit_transform() của đối tượng TfidfVectorizer lên cột overview để tính toán ma trận đặc trưng TF-IDF

Hình 11: Thiết lập ma trận TF - IDF (Code)

3.Tính độ tương đồng giữa các phim

Sử dụng phương thức linear_kernel từ sklearn.metrics.pairwise, chúng ta có thể tính toán độ tương đồng cosine giữa các cặp văn bản trong ma trận đặc trưng tfidf_matrix.

Sử dụng phương thức pd.Series từ thư viện pandas, bạn có thể tạo một Series mang tên indices, trong đó chỉ mục là các tiêu đề gốc của bộ phim và giá trị tương ứng là chỉ số của bộ phim trong df_movies.

Hình 12: Tính độ tương đồng giữa các item (Code)

Hàm get-recommendations được định nghĩa để lấy các bộ phim gợi ý dựa trên tiêu đề của một bộ phim đã cho Tham số title là tiêu đề bộ phim mà chúng ta muốn tìm kiếm gợi ý, trong khi tham số cosine_sim được đặt mặc định là ma trận độ tương đồng cosine similarity đã được tính trước Khi chạy hàm với tiêu đề mong muốn, sẽ xuất hiện 10 bộ phim được gợi ý, sắp xếp theo điểm tương đồng từ cao nhất đến thấp nhất.

Hình 13: Xử lí kết quả (Code)

THIẾT KẾ HỆ THỐNG

Kiến trúc hệ thống: Mô hình Client – Server

3.1.1 Sơ đồ tổng quan và giới thiệu

Tổng quan kiến trúc được tổ chức theo mô hình Client-Server và được tách thành ba lớp phân bố ở cả hai phía

Lớp Presentation của Client đóng vai trò quan trọng trong việc tương tác với người dùng thông qua giao diện web Đây là nơi tiếp nhận các input từ người dùng và hiển thị output từ các lớp khác, tạo ra trải nghiệm người dùng mượt mà và hiệu quả.

Còn phía Server sẽ có hai lớp:

• BLL (Business Logic Layer): đây là lớp xử lý logic nghiệp vụ, nhận các input từ GUI, xử lý và trả kết quả về cho GUI để hiển thị

Lớp Truy xuất Dữ liệu (DAL) đóng vai trò quan trọng trong việc tương tác trực tiếp với cơ sở dữ liệu, nơi thực hiện các thao tác kiểm tra, quản lý và thay đổi dữ liệu.

3.1.2 Chi tiết các thành phần trong hệ thống

HTTPClient Gửi HTTP Request đến SERVER thông qua API do server cung cấp

APIs Module định nghĩa các API cho các Routers sử dụng

Routers Router dùng để điều hướng request tương ứng với API đến các

Controllers để xử lý và nhận lại kết quả từ controllers, phản hồi lại cho API tương ứng mà HTTPClient gọi từ phía Client

Controllers Các Controllers tiếp nhận requests được điều phối từ các

Routers và xử lý chúng thông qua việc truy xuất dữ liệu đã được xử lý từ các Models

Models Các Models tiếp nhận yêu cầu truy xuất dữ liệu của các

Các Controller sẽ truy xuất trực tiếp từ cơ sở dữ liệu để lấy dữ liệu thô, sau đó xử lý dữ liệu này thành bộ dữ liệu phù hợp với yêu cầu của từng Controller tương ứng.

Database Cơ sở dữ liệu, nơi lưu trữ thông tin

Yêu cầu chức năng

1 Admin Administrator của hệ thống website xem phim

2 User Người dùng (Guest + Customer)

STT Tên chức năng Mô tả

1 Đăng ký Người dùng đăng kí tài tài khoản mới

2 Đăng nhập Người dùng hoặc người quản lý đăng nhập

3 Quên mật khẩu Người dùng đổi mật khẩu

4 Tìm kiếm phim Người dùng tìm kiếm phim phù hợp

5 Xem phim Người dùng xem trang chủ theo từng chủ để phim

6 Đổi chủ đề Theme Người dùng có thể đổi chủ đề theme phù hợp

Người dùng có thể xem bình luận của bộ phim

8 Bình luận Người dùng có thể bình luận khi xem phim

9 Rating Người dùng rating bộ phim

10 Thêm phim Admin thêm phim vào trang web

11 Xóa phim Admin có thể xóa phim

12 Sửa phim Admin sửa thông tin của phim

13 Thêm diễn viên Admin thêm diễn viên mới

14 Xóa diễn viên Admin xóa diễn viên phim

15 Sửa diễn viên Admin sửa thông tin diễn viên phim

16 Xem thống kê phim Admin xem thống kê của phim (Mới phát hành, điểm rating)

17 Thêm phim yêu thích Người dùng thêm các bộ phim yêu thích vào danh sách riêng

18 Xóa phim yêu thích Người dùng xóa các bộ phim ra khỏi danh sách phim yêu thích

3.2.4 Mô tả chi tiết Use Case

Goal Đăng ký tài khoản thành công

Pre-condition Tác nhân phải được xác thực

Main flow 1 Nhấp vào biểu tượng đăng ký

2 Hệ thống sẽ chuyển hướng đến trang đăng ký

3 Người dùng nhập thông tin của họ

4 Người dùng nhấp vào nút đăng ký

5 Hệ thống sẽ xử lý Thực thi

6 Hệ thống thông báo đăng ký thành công

Post-condition Hệ thống đã sẵn sàng cho hoạt động tiếp theo

Exception 6E:Nếu thông tin nhập vào không có hợp lệ, website hiển thị thông báo lỗi và yêu cầu người dùng nhập lại

Hình 15:Activity Diagram Đăng ký

Goal Đăng nhập tài khoản thành công

Pre-condition Tác nhân phải được xác thực

Main flow 1 Nhấp vào biểu tượng Login

2 Hệ thống sẽ chuyển hướng đến trang đăng nhập

3 Người dùng nhập thông tin của họ

4 Người dùng nhấp vào nút đăng nhập

6 Hệ thống thông báo đăng nhập thành công

Post-condition Hệ thống đã sẵn sàng cho hoạt động tiếp theo

Exception 6E:Nếu thông tin nhập vào không có hợp lệ, website hiển thị thông báo lỗi và yêu cầu người dùng nhập lại

Hình 16:Activity Diagram Đăng nhập

Goal Đăng xuất tài khoản thành công

Pre-condition Tác nhân đã đăng nhập

Main flow 1 Nhấp vào biểu tượng Logout

2 Hệ thống sẽ chuyển hướng về trang chủ

4 Hệ thống thông báo đăng xuất thành công

Post-condition Chuyển về trang chủ và chỉ thực hiện được những chức năng public

Hình 17:Activity Diagram Đăng xuất

Goal Đăng nhập thành công

Pre-condition Tác nhân đã xác thực

Main flow 1.Người dùng chuyển đến màn hình quên mật khẩu

2.Nhập email đã được dùng để đăng ký tài khoản 3.Click nút ‘Gửi’

4.Hiển thị màn hình nhập mã xác nhận 5.Nhập mã xác nhận đã được gửi thông qua email 6.Click nút ‘Confirm’

7.Hiển thị màn hình thiết lập mật khẩu mới 8.Nhập mật khẩu mới và xác nhận mật khẩu mới 9.Click vào nút ‘save’

10.Hiển thị thông báo thành công

Sau khi chuyển về trang chủ, người dùng sẽ đăng nhập thành công vào website bằng mật khẩu mới Nếu mã xác nhận nhập vào không chính xác, website sẽ hiển thị thông báo lỗi và gửi lại mã xác nhận cho người dùng.

10E: Nếu mật khẩu mới và mật khẩu được xác nhận lại không trùng khớp nhau,website thông báo lỗi

Hình 18:Activity Diagram Quên mật khẩu

Goal Người dùng tìm kiếm phim thông qua tên phim

Main flow 1 Nhấp vào thanh tìm kiếm ở trên thanh navbar

2 Nhập tên phim cần tìm kiếm vào thanh tìm kiếm

3 Hiển thị danh sách phim với cặp từ khóa liên quan

Post-condition Hiển thị danh sách phim và sẵn sàng cho tác vụ tiếp theo

Exception 3E: Nếu không có phim phù hợp màn hình sẽ thông báo không có phim phù hợp

Hình 19:Activity Diagram Tìm kiếm phim

Goal Xem tổng quát các bộ phim theo chủ đề

Main flow 1 Hệ thống hiển thị dang sách phim theo chủ đề

Post-condition Hiển thị danh sách phim và sẵn sàng cho tác vụ tiếp theo

Hình 20:Activity Diagram Xem phim

Name Đổi chủ đề Theme

Goal Đổi background của trang web

Main flow 1.Nhấp vào biểu tượng ‘đèn’ trên thông công cụ

2.Background sẽ chuyển từ màu tối sang sáng và ngược lại

Post-condition Sẵn sàng cho các tác vụ tiếp theo

Goal Xem tất cả bình luận của bộ phim

2 Nhấp vào phim muốn xem bình luận

3 Nhấp vào ‘ Xem bình luận’

4 Hiển thị trang danh sách bình luận

Post-condition Hiển thị danh sách bình luận

Exception Nếu không có bình luận thì thông báo chưa có bình luận

Hình 21:Activity Diagram Xem Bình Luận

2 Nhấp vào phim muốn bình luận

4 Hiển thị màn hình bình luận

Post-condition Thêm vào danh sách bình luận

Hình 22:Activity Diagram Bình luận

2 Nhấp vào phim muốn bình luận

4 Hiển thị màn hình bình luận

5 Nhập điểm rating theo sao hiển thị

Post-condition Thêm điểm rating đã rating vào bộ phim và hiển thị điểm rating mới

Goal Thêm phim vào trang website

Main flow 1 Hệ thống hiển thị dashboard

2 Nhấp vào nút ‘add movie’

3 Hiển thị màn hình nhập thông tin phim

5 Nhập thông tin chi tiết phim

6 Nhấp vào nút thêm phim

Post-condition Thông báo thêm phim thành công và sẵn sàn cho tác vụ khác

Exception 6E:Nhập thiếu thông tin hoặc thông tin không phù hợp hệ thống sẽ thông báo

Hình 24:Activity Diagram Thêm phim

Goal Xóa phim mà admin muốn xóa trong website

Main flow 1 Hệ thống hiển thị dang sách phim dashboard

2 Nhấp vào nút xóa của phim muốn xóa

4 Nhấp ‘đồng ý’ sẽ xóa phim

5 Hiển thị thông báo xóa thành công

Post-condition Xóa phim thành công và sẵn sàn tác vụ khác

Hình 25:Activity Diagram Xóa phim

Goal Sửa thông tin phim

2 Nhấp vào phim muốn sửa thông tin

3 Hiển màn hình tất cả thông tin phim

6 Hiển thị thông báo cập nhật thành công

Post-condition Thông phim đã được cập nhận và sẵn sẵn sàn cho tác vụ tiếp theo Exception 5E: Thông tin không phù hợp hệ thống sẽ thông báo

Hình 26:Activity Diagram Sửa phim

Goal Thêm diễn viên vào trang website

Main flow 1 Hệ thống hiển thị dashboard

2 Nhấp vào nút ‘add actor’

3 Hiển thị màn hình nhập thông tin diễn viên

4 Nhập thông tin diễn viên

5 Nhấp vào nút thêm diễn viên

Post-condition Thông báo thêm diễn viên thành công và sẵn sàn cho tác vụ khác

Exception 6E:Nhập thiếu thông tin hoặc thông tin không phù hợp hệ thống sẽ thông báo

Hình 27:Activity Diagram Thêm diễn viên

Goal Xóa diễn viên mà admin muốn xóa trong website

Main flow 1 Hệ thống hiển thị dang sách diễn viên dashboard

2 Nhấp vào nút xóa của diễn viên

4 Nhấp ‘đồng ý’ sẽ xóa diễn viên

5 Hiển thị thông báo xóa thành công

Post-condition Xóa diễn viên thành công và sẵn sàn tác vụ khác

Hình 28:Activity Diagram Xóa phim

Goal Sửa thông tin diễn viên

Main flow 1 Hệ thống hiển thị dang sách diễn viên theo chủ đề

2 Nhấp vào diễn viên muốn sửa thông tin

3 Hiển màn hình tất cả thông tin diễn viên

4 Sửa thông tin diễn viên

5 Nhấn cập nhật diễn viên

6 Hiển thị thông báo cập nhật thành công

Post-condition Thông diễn viên đã được cập nhận và sẵn sẵn sàn cho tác vụ tiếp theo Exception 5E: Thông tin không phù hợp hệ thống sẽ thông báo

Hình 29:Activity Diagram Sửa phim

Name Thêm phim yêu thích

Goal Xem các bộ phim yêu thích của người dùng vào một danh sách riêng để người dùng dễ tìm kiếm và lưu trữ

Main flow 1 Điều hướng đến trang chủ

2 Người dùng điều hướng đến trang phim cần thêm vào danh sách yêu thích

3 Nhấn nút thêm phim vào danh sách yêu thích

4 Phim đã được thêm vào danh sách phim yêu thích

Post-condition Hiển thị danh sách phim yêu thích và chờ tác vụ tiếp theo

Hình 30:Activity Diagram Thêm phim yêu thích

Name Xóa phim yêu thích

Goal Xóa các phim người dùng dã thêm vào danh sách phim yêu thích

Main flow 1 Điều hướng đến trang chủ

2 Người dùng điều hướng đến trang phim cần thêm vào danh sách yêu thích

3 Nhấn nút xóa phim khỏi danh sách yêu thích

4 Phim đã được xóa khỏi danh sách phim yêu thích

Post-condition Hiển thị danh sách phim yêu thích và chờ tác vụ tiếp theo

Hình 31:Activity Diagram Xóa phim yêu thích

KẾ CƠ SỞ DỮ LIỆU

Bảng Actor

STT Tên thuộc tính Loại

Bảng Emailverificationtoken

Bảng Movies

Bảng passwordresettokens

Bảng reviews

Bảng users

Bảng favorites

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

Screen Flow

Mô tả chi tiết màn hình

Trang chính sẽ tập hợp tất cả nội dung liên quan đến các thể loại phim, nhằm hỗ trợ người dùng thao tác dễ dàng Nội dung sẽ bao gồm các thể loại phim hấp dẫn và những bộ phim mới nhất Mỗi phim sẽ được đánh giá bằng điểm rating, giúp người dùng dễ dàng chọn lựa phim phù hợp với sở thích của mình.

Màn hình đăng ký cho phép người dùng tạo tài khoản mới bằng cách nhập thông tin cá nhân như họ tên, địa chỉ email, mật khẩu và xác nhận mật khẩu Nếu người dùng đã có tài khoản, họ có thể dễ dàng quay lại trang Đăng nhập bằng cách nhấn vào nút “Sign in”.

Trang đăng nhập người dùng bao gồm hai phần chính là Email và mật khẩu Người dùng cũng có thể dễ dàng điều hướng đến màn hình Quên mật khẩu bằng cách nhấn vào ‘Forget password’ hoặc chuyển đến trang đăng ký qua nút ‘Sign up’.

Hình 36:Trang quên mật khẩu

Trang quên mật khẩu bao gồm thông tin Email của tài khoản Ngoài ra, người dùng có thể chuyển hướng đến trang đăng nhập khi nhấn vào nút ‘Sign in’ hoặc đến trang đăng ký khi nhấn vào nút ‘Sign up’.

5.3.5 Trang tạo mật khẩu mới

Hình 37 :Trang tạo mật khẩu mới

Khi người dùng truy cập vào Email đăng ký tài khoản, họ sẽ nhận được đường link để đổi mật khẩu Điều này giúp người dùng dễ dàng thiết lập lại mật khẩu mới bằng cách nhập và xác nhận mật khẩu mới của mình.

Khi người dùng đăng ký tài khoản, hệ thống sẽ chuyển hướng đến trang xác thực Tại đây, người dùng cần nhập mã xác thực được gửi đến email đã đăng ký để hoàn tất quá trình xác minh tài khoản.

Hình 39:Trang chi tiết phim

Trang chi tiết phim cung cấp thông tin đầy đủ về bộ phim đã chọn, bao gồm tên phim, số lượng đánh giá, điểm rating và các thông tin chi tiết như tác giả, diễn viên, và ngày phát hành Người dùng có thể dễ dàng xem phim hoặc thực hiện đánh giá ngay tại đây.

Hình 40:Trang đánh giá phim

Trang đánh giá phim cho phép người dùng đánh giá sản phẩm bằng cách chọn số sao tương ứng với số điểm và bình luận của mình về phim

5.3.9 Trang xem bình luận phim

Hình 41 :Trang xem bình luận phim

Trang xem bình luận phim cung cấp cho người dùng tất cả các đánh giá liên quan đến bộ phim Người dùng có thể dễ dàng tìm kiếm bình luận của mình và thực hiện việc sửa hoặc xóa đánh giá bằng cách nhấn vào nút ‘Tìm’.

5.3.10 Trang danh sách phim yêu thích

Hình 42:Trang danh sách phim yêu thích

Trang danh sách phim yêu thích hiển thị những phim người dùng đã thêm vào danh sách.Danh sách phim sẽ hiện điểm rating và tiêu đề.

ĐẶT VÀ KIỂM THỬ

Môi trường cài đặt và kiểm thử

-Cài đặt ngôn ngữ lập trình JavaScript, NodeJS

-Chạy câu lệnh ‘ npm i ’ để cài đặt các packages

-Chạy câu lệnh ‘ npm start’ để kích hoạt trang web

-Cài đặt ngôn ngữ lập trình JavaScript, NodeJS

-Chạy câu lệnh ‘ npm i ’ để cài đặt các packages -Chạy câu lệnh ‘ npm start’ để kích hoạt phần backend

Thiết bị cài đặt :Laptop, PC

Kết quả kiểm thử

STT Tên chức năng Mức độ hoàn thiện

12 Xem thông tin diễn viên 100%

Tiêu đề	Xây Dựng Website Xem Phim Tích Hợp Hệ Thống Khuyến Nghị
Tác giả	Nguyễn Ngọc Đức, Lâm Phú Sỹ
Người hướng dẫn	Ths. Nguyễn Thị Thanh Trúc
Trường học	Trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM
Chuyên ngành	Khoa Công nghệ Phần Mềm
Thể loại	Đề Tài
Năm xuất bản	2023
Thành phố	TP Hồ Chí Minh

Định dạng
Số trang	81
Dung lượng	2,84 MB