Xây dựng trang website xem phim với các tiện ích hỗ trợ người dùng (chatbot, khuyến nghị) (khóa luận tốt nghiệp)

Với sự phát triển công nghệ ngày nay, đặc biệt trong lĩnh vực máy học, học sâu, nhóm chúng em quyết định xây dựng mô hình máy học phân loại thể loại cho các bộ phim theo mô tả với ngôn n

ĐẠ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

NGUYỄN ANH HÀO - 18520716

CHÂU MINH QUANG – 18521290

BUILD A MOVIE WATCHING WEBSITE WITH MOVIE

RECOMMENDATION SYSTEM AND CHATBOT

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ

PHẦN MỀM

NGUYỄN ANH HÀO - 18520716

CHÂU MINH QUANG – 18521290

XÂY DỰNG TRANG WEB XEM PHIM ONLINE KẾT HỢP

HỆ THỐNG GỢI Ý VÀ CHAT BOT

BUILD A MOVIE WATCHING WEBSITE WITH MOVIE RECOMMENDATION SYSTEM AND CHATBOT

THÔNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆP

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số……… ngày ……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin

1 – Chủ tịch 2 – Thư ký

3 – Ủy viên

4 – Ủy viên

ĐẠ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… tháng… năm……

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận: XÂY DỰNG TRANG WEB XEM PHIM ONLINE KẾT HỢP HỆ THỐNG GỢI Ý VÀ CHAT BOT Nhóm SV thực hiện: Cán bộ hướng dẫn: Nguyễn Anh Hào 18520716 ThS Mai Trọng Khang Châu Minh Quang 18521290 Đánh giá Khóa luận 1 Về cuốn báo cáo: Số trang _ Số chương _ Số bảng số liệu _ Số hình vẽ _ Số tài liệu tham khảo _ Sản phẩm _ Một số nhận xét về hình thức cuốn báo cáo: ………

………

………

………

………

2 Về nội dung nghiên cứu: ………

………

………

………

………

………

………

………

………

………

………

3 Về chương trình ứng dụng: ………

………

………

………

………

………

………

………

4 Về thái độ làm việc của sinh viên: Đánh giá chung: ……… ………

………

………

………

………

………

………

………

Điểm từng sinh viên:

Nguyễn Anh Hào:……… /10

Châu Minh Quang:……… /10

Người nhận xét

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

Mai Trọng Khang

ĐẠ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… tháng… năm……

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ PHẢN BIỆN) Tên khóa luận: XÂY DỰNG TRANG WEB XEM PHIM ONLINE KẾT HỢP HỆ THỐNG GỢI Ý VÀ CHAT BOT Nhóm SV thực hiện: Cán bộ phản biện: Nguyễn Anh Hào 18520716 Châu Minh Quang 18521290 Đánh giá Khóa luận 1 Về cuốn báo cáo: Số trang _ Số chương _ Số bảng số liệu _ Số hình vẽ _ Số tài liệu tham khảo _ Sản phẩm _ Một số nhận xét về hình thức cuốn báo cáo: ………

………

………

………

………

2 Về nội dung nghiên cứu: ………

………

………

………

………

………

………

………

………

………

………

3 Về chương trình ứng dụng: ………

………

………

………

………

………

………

………

4 Về thái độ làm việc của sinh viên: ………

………

………

………

………

………

………

Đánh giá chung:

……… ………

………

………

………

………

………

………

………

………

… Điểm từng sinh viên: Nguyễn Anh Hào:……… /10

Châu Minh Quang:……… /10

Người nhận xét

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

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ể hoàn thành Khóa luận tốt nghiệp của mình

Để hoàn thành khóa luậ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 thầy Mai Trọng Khang đã 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 quý báu không chỉ trong quá 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 KTMT 2018 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 quá trình làm khóa luậ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 quý thầy cô để khóa luận được hoàn thiện hơn

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

Thành phố Hồ Chí Minh, ngày 15 tháng 6 năm 2022

Sinh viên thực hiện

NGUYỄN ANH HÀO

CHÂU MINH QUANG

TP.Hồ Chí Minh, ngày 15 tháng 06 năm 2022

ĐẠ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

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: XÂY DỰNG TRANG WEB XEM PHIM ONLINE KẾT HỢP HỆ THỐNG GỢI Ý VÀ CHAT BOT

TÊN ĐỀ TÀI (TIẾNG ANH): BUILD A MOVIE WATCHING WEBSITE WITH MOVIE RECOMMENDATION SYSTEM AND CHATBOT

Cán bộ hướng dẫn: ThS MAI TRỌNG KHANG

Thời gian thực hiện: Từ ngày 21/02/2022 đến ngày 11/06/2022

Sinh viên thực hiện:

NGUYỄN ANH HÀO – 18520716

CHÂU MINH QUANG – 18521290

Nội dung đề tài: (Lý do chọn đề tài, các vấn đề của một số ứng dụng hiện nay, mô tả chi tiết

mục tiêu, phạm vi, đối tượng sử dụng, điểm nổi bật của ứng dụng, phương pháp thực hiện, nền tảng công nghệ, các tiêu chí khác)

Lý do chọn đề tài:

Ngày nay, phim ảnh xuất hiện mọi ngóc ngách, pha trộn nhiều màu sắc, nội dung tạo thêm

phần đa dạng phong phú Và theo đó nhu cầu thưởng thức phim ảnh hay xem phim

của con người ngày càng lớn Đó cũng là lý do các web xem phim ra

đời, tiêu biểu là Netflix, Disney, HBO…

Tuy nhiên với số lượng phim ảnh càng ngày càng lớn thì việc phân loại để sắp xếp và

quản lý càng ngày càng phức tạp đối với hệ thống lưu trữ phim ảnh số Điều ngày cho thấy

việc phân loại phim tự động rất cần thiết để phục vụ cho việc phân loại và từ đó

khuyến nghị cho người dùng có trải nghiệm tốt hơn

Thông thường để xác định một bộ phim thuộc thể loại thì cần dựa vào kỹ năng người

xem và tìm hiểu xem nội dung của bộ phim đó được thể hiện ở mô tả một cách ngắn gọn Với các thể loại đặc trưng như phim tình cảm hay kinh dị thì có thể dễ phân biệt được Nhưng một số thể loại như hành động, kịch tính, hay chiến tranh, phim tài liệu thì việc phân loại trở nên phức tạp hơn do các thể loại này hao hao giống nhau Đôi khi một bộ phim chiến tranh và tài liệu cùng kể về 1 sự kiện lịch

sử

Với sự phát triển công nghệ ngày nay, đặc biệt trong lĩnh vực máy học, học sâu, nhóm

chúng em quyết định xây dựng mô hình máy học phân loại thể loại cho các bộ phim theo mô tả với ngôn ngữ là tiếng anh kết hợp với hệ thống chat bot trong một trang web xem phim

Trang web sử dụng những công nghệ mới, phù hợp đáp ứng khả năng mở rộng và tương tác cao

Trang web có giao diện trực quan, phù hợp với nhu cầu của đối tượng người dùng

Trang web gợi ý phim một cách phù hợp cho người dùng

Ứng dụng chat bot giúp hỗ trợ khách hàng giải quyết các vấn đề phát sinh trước và sau khi đăng ký trở thành thành viên

Kết hợp hệ thống khuyến nghị phim giúp khách hàng có trải nghiệm tốt và phù hợp nhất khi đến với trang web

Phạm vi:

Phạm vi môi trường: Web

Phạm vi chức năng:

− Đối với chatbot:

+ Có khả năng giải đáp và trả lời các câu hỏi phổ biến mà khách hàng thường hỏi nhằm

tư vấn cho khách hàng trong việc xem phim

+ Cung cấp thông tin chi tiết về các phim kèm hình ảnh minh họa

+ Nhận biết, hiểu và trả lời tương đối ngôn ngữ tự nhiên dạng văn bản cũng như âm thanh

+ Tích hợp Wikidata API để trả lời trong trường hợp khách hàng đặt các câu hỏi ngoài phạm vi

− Đối với ứng dụng Web:

- Tích hợp đăng nhập, đăng kí cũng như đăng nhập nhanh thông qua Google, Facebook

và dịch vụ gửi link kích hoạt tài khoản khi đăng ký thông qua mail

-Cho phép tra cứu, tìm kiếm với nhiều thể loại, danh mục tùy chọn và xem phim trực tuyến

-Cung cấp hệ thống thu thập bình luận, đánh giá người dùng về phim

-Cung cấp chức năng yêu thích phim cũng như lưu danh mục phim yêu thích

-Cho phép thay đổi thông tin người dùng

-Cung cấp giao diện admin quản lý với các chức năng thêm/xóa/sửa tương ứng với các loại đối tượng tồn tại trong website (phim, danh mục phim, thể loại phim, người dùng, diễn viên, đạo diễn, mã giảm giá, hóa đơn)

-Hỗ trợ thống kê về các đối tượng tồn tại trong hệ thống thông qua biểu đồ

− Đối với hệ thống gợi ý: hệ thống bao gồm gợi ý dựa trên nội dung ( content based ) của một phim từ đó tích hợp vào các phần khác nhau trên trang web để tối ưu hóa khả năng

hỗ trợ cho người dùng.

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

- Đối tượng trong phạm vi đề tài hướng đến: Khách hàng có nhu cầu tìm kiếm và xem phim Không giới hạn độ tuổi truy cập của đối tượng

Điểm nổi bật của ứng dụng:

Trang web được xây dựng với giao diện đẹp mắt giúp thu hút người dùng

Trang web sẽ có thêm chatbot tự động trả lời cho người dùng còn những ứng dụng nổi bật hiện nay hầu như không có chatbot hoặc có chat mà người trực tiếp nói chuyện với người dùng Đặc biệt, có hỗ trợ voice chat giúp tiết kiệm thời gian trong suốt quá trình tương tác.

Hệ thống đăng nhập, đăng ký và mua gói giúp khách hàng dễ dàng hơn trong việc sử dụng dịch vụ

Trang web sẽ có hệ thống gợi ý giúp người dùng tìm thấy phim mình thích nhanh hơn

và gợi ý này được cá nhân hóa

Kế hoạch thực hiện:

Thời gian thực hiện từ ngày 21/02/2022 đến ngày 11/06/2022

Nhóm chia thành 4 giai đoạn cụ thể:

Giai đoạn 1 : Hoàn chỉnh trang web hiện tại Giai đoạn này gồm 2 sprint:

Thời gian: 21/02/2022 – 28/03/2022 (5 tuần)

Sprint 1: Lên kế hoạch chi tiết về các sửa đổi, cập nhật cần thiết cho trang web hiện tại

Sprint 2: Triển khai chỉnh sửa ở phía Backend (database, server, ) và ở phía Frontend (update UI, cải thiện UX, loading, )

Sprint 1 21/02/2022 – 28/02/2022 - Tìm hiểu công nghệ thêm

NodeJS và MongoDB để hiệu chỉnh lại các model của database

- Lên kế hoạch cho những hạng mục cần sửa chữa, cập nhật

Sprint 2 01/03/2022 – 28/03/2022 - Xây dựng CSDL và

RESTful API mới

- Triển khai các chỉnh sửa cần thiết sau khi lên kế hoạch

Giai đoạn 2: Hoàn thành ChatBot Giai đoạn này gồm 2 sprint:

Thời gian: 29/03/2022 – 11/04/2022 (2 tuần)

Sprint 1: Lên kế hoạch cho kịch bản chatbot mới và thực hiện việc training cho chatbot Sprint 2: Triển khai trang web và kết hợp chatbot vào trang web

Sprint 1 29/03/2022 – 05/04/2022 - Lên kế hoạch cho kịch

bản mới

- Lên danh sách các thông tin dùng cho việc training

- Thực hiện training

Sprint 2 06/04/2022 – 11/04/2022 - Triển khai trang web lên

heroku để có thể tích hợp chatbot vào trong trang web

Giai đoạn 3 : Hoàn thành module hệ thống gợi ý Giai đoạn này gồm 3 sprint:

Thời gian: 12/04/2022 – 12/06/2022 (8 tuần)

Sprint 1: Lên kế hoạch chi tiết tìm hiểu về hệ thống gợi ý cũng như đưa ra phương hướng phát triển của hệ thống

Sprint 2: Thiết kế hệ thống cũng như thu thập hoặc thiết kế data dùng để sử dụng cho hệ thống

Sprint 3: Triển khai hệ thống tích hợp vào những phần gợi ý phim đã có trên trang web

Sprint 1 12/04/2022 – 19/04/2022 - Lên kế hoạch chi tiết tìm

hiểu về hệ thống gợi ý cũng như đưa ra phương hướng phát triển của hệ thống

Sprint 2 20/04/2022 – 27/05/2022 -Thiết kế hệ thống cũng

như thu thập hoặc thiết kế data dùng để sử dụng cho hệ thống theo kế hoạch

Sprint 3 28/05/2022 – 12/06/2022 - Triển khai hệ thống tích

hợp vào những phần gợi ý phim đã có trên trang web

Giai đoạn 4: Hoàn thành tổng hợp document cho toàn bộ dự án Chuẩn bị script, slide cho buổi trình bày và Đóng dự án Giai đoạn này gồm 1 sprint:

Thời gian: 13/06/2022 – 19/06/2022 (1 tuần)

Sprint 1: Tổng hợp document cho toàn bộ dự án Chuẩn bị script, slide cho buổi trình bày

Sprint 1 13/06/2022 – 19/06/2022 - Tổng hợp document cho

toàn bộ dự án Chuẩn bị script, slide cho buổi trình bày

LỜI NÓI ĐẦU

Ngày nay, phim ảnh xuất hiện mọi ngóc ngách, pha trộn nhiều màu sắc, nội dung tạo thêm phần đa dạng phong phú Và theo đó nhu cầu thưởng thức phim ảnh hay xem phim của con người ngày càng lớn

Đó cũng là lý do các web xem phim ra đời, tiêu biểu là Netflix, Disney, HBO…

Tuy nhiên với số lượng phim ảnh càng ngày càng lớn thì việc phân loại để sắp xếp và quản lý càng ngày càng phức tạp đối với hệ thống lưu trữ phim ảnh số Điều ngày cho thấy việc phân loại phim tự động rất cần thiết để phục vụ cho việc phân loại và từ đó khuyến nghị cho người dùng có trải nghiệm tốt hơn Thông thường để xác định một bộ phim thuộc thể loại thì cần dựa vào kỹ năng người xem và tìm hiểu xem nội dung của bộ phim đó được thể hiện ở mô tả một cách ngắn gọn Với các thể loại đặc trưng như phim tình cảm hay kinh dị thì có thể dễ phân biệt được Nhưng một số thể loại như hành động, kịch tính, hay chiến tranh, phim tài liệu thì việc phân loại trở nên phức tạp hơn do các thể loại này hao hao giống nhau Đôi khi một bộ phim chiến tranh và tài liệu cùng kể về 1 sự kiện lịch sử

Với sự phát triển công nghệ ngày nay, đặc biệt trong lĩnh vực máy học, học sâu, nhóm chúng tôi quyết định xây dựng mô hình máy học phân loại thể loại cho các bộ phim theo mô tả với ngôn ngữ là tiếng anh

kết hợp với hệ thống chat bot trong một trang web xem phim và thực hiện đồ án với đề tài “XÂY DỰNG

TRANG WEB XEM PHIM ONLINE KẾT HỢP HỆ THỐNG GỢI Ý VÀ CHAT BOT”

Với sự hướng dẫn tận tình của thầy Mai Trọng Khang và những lời góp ý chân thành từ thầy, chúng

em đã có những cải thiện tích cực và hoàn thành kịp thời đồ án này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhưng chắc rằng khó tránh khỏi những thiếu sót Nhóm chúng em mong nhận được sự thông cảm và góp ý từ quý thầy cô Nhóm chúng em xin chân thành cảm ơn

Nhóm sinh viên thực hiện

Nguyễn Anh Hào Châu Minh Quang

2.1.2 Cấu trúc mô hình MVC 4

2.1.3 Tại sao dùng mô hình MVC 5

2.2.2 Tạo sao chọn NodeJS để phát triển server 7 2.2.3 Các đặc tính của NodeJS 7 2.2.4 ExpressJS (Framework của NodeJS): 8

2.2.4 Áp dụng vào đề tài 8 2.3 Hệ quản trị cơ sở dữ liệu MongoDB 9

2.3.2 Ưu điểm của MongoDB 9 2.3.3 Nhược điểm của MongoDB 10

2.4.2 Những khái niệm cơ bản 11

2.4.3 Ưu nhược điểm của ReactJS 13

2.5.2 Tại sao nên sử dụng Flask 15

CHƯƠNG 4 XÂY DỰNG HỆ THỐNG GỢI Ý 35 4.1 Tìm Hiểu Về Machine Learning 35 4.1.1 Machine learning là gì? 35 Machine learning Workflow 35 4.1.2 Phân loại Machine learning 36

4.1.3 Một số khái niệm cơ bản 37 4.1.4 Ứng dụng của Machine learning 38 4.2 Tổng quan bài toán phân loại mô tả 39 4.3 Quá trình thu thập dữ liệu 40 4.3.1 Xác định API dùng cho việc lấy thông tin phim 41 4.4 Quá trình xây dựng Model 43 4.4.2 Xây dựng Model Doc2Vec 43 4.4.3 Xây dựng Model CNN 45

Giới thiệu về CNN(Convolutional Neural Network): 46

Một số khái niệm trong CNN: 47

4.3.4 Huấn luyện mô hình và đánh giá 50

4.6 Tích hợp vào hệ thống web 51

CHƯƠNG 5 XÂY DỰNG HỆ THỐNG 55 5.1 Xây dựng kiến trúc hệ thống: 55 5.1.1 Kiến trúc hệ thống Website 55

5.2.5 Phân tích, thiết kế CSDL: 85 5.3 Thiết kế giao diện web 97 5.3.1 Danh sách màn hình: 97

Màn hình quản lý user 121

CHƯƠNG 6 KẾT LUẬN- HƯỚNG PHÁT TRIỂN 128

DANH MỤC CÁC HÌNH

Hình 2.1: Mô hình MVC 4Hình 2.2: Cách NodeJS hoạt động so với những server khác 6Hình 2.3: Logo Express js 8Hình 2.4: Sự phát triển và độ phổ biến của MongoDB 9Hình 2.5: ReactJS 10Hình 2.6: Vòng đời component ReactJS 12Hình 2.7: Cách Flask Framework hoạt động 14Hình 2.8 Logo Heroku 15Hình 2.9 Cấu trúc Heroku 16Hình 2.10 ảnh minh họa 17Hình 2.11 Keras backend 19Hình 3.1 Cách thức hoạt động của chatbot 20Hình 3.2 Thống kê lượng người dùng của các ứng dụng nhắn tin 21Hình 3.3 Các service platforms phục vụ cho chatbot 22Hình 3.4 Lượng người sử dụng Facebook Messenger theo thời gian 23Hình 3.5 Chatbot Facebook Messenger 24Hình 3.6 Cách hoạt động của Chatbot liên kết với Messenger 25Hình 3.7 Graph API 26Hình 3.8 Facebook API 27Hình 3.9 Wit.ai 28Hình 3.10 Utterances Wit.ai 29Hình 3.11 Intent Wit.ai 29Hình 3.12 Entities Wit.ai 30Hình 3.13 Chi tiết một entity trong Wit.ai 30Hình 3.14 Ảnh minh họa 31Hình 3.15 Mô tả nguyên lý hoạt động voice bot 32Hình 3.16 Mô tả quá trình xử lý với Wikipedia API 33Hình 4.1 Quá trình tạo một mô hình máy học 35Hình 4.2 Ảnh minh họa mô hình 37Hình 4.3 Ảnh minh họa mô hình 37Hình 4.4 Các bước xây dựng hệ thống phân loại phim 40Hình 4.5 Dữ liệu về phim sau khi thu thập và lưu trữ 42

Hình 4.6 Dữ liệu về phim sau khi thu thập và lưu trữ 42Hình 4.7 Dữ liệu về phim sau khi thu thập và lưu trữ theo thể loại 43Hình 4.8 Một số khái niệm trong CNN 47Hình 4.9 Lớp tích chập 48Hình 4.10 Bước nhảy 48Hình 4.11 Padding 49Hình 4.12 ReLU layer 49Hình 4.13 Cấu trúc mô hình của nhóm 50Hình 4.14 đánh giá val loss 51Hình 4.15 categorical accuracy 51Hình 4.16 Nội dung code API 52Hình 4.17 Nội dung code API 52Hình 4.18 Nội dung code API 53Hình 4.19 Quy trình gợi ý phim cho người dùng 54Hình 5.1 Kiến trúc hệ thống chat bot 55Hình 5.2 Kiến trúc hệ thống chat bot 56Hình 5.3 Kiến trúc hệ thống tổng quát 57Hình 5.4 Sơ đồ các tác nhân 58Hình 5.5 Sơ đồ các tác nhân 58Hình 5.6 Sơ đồ lớp 85Hình 5.7 Giao diện landing page 1 100Hình 5.8 Giao diện landing page 2 101Hình 5.9 Giao diện landing page 3 101Hình 5.10 Giao diện trang chủ 1 102Hình 5.11 Giao diện trang chủ 2 102Hình 5.125.13 Giao diện trang chủ 3 103Hình 5.14 Giao diện trang chủ 4 103Hình 5.15 Giao diện trang chủ 5 104Hình 5.16 Giao diện phim lẻ 1 104Hình 5.17 Giao diện phim lẻ 2 105Hình 5.18 Giao diện danh sách yêu thích 105Hình 5.19 Giao diện chi tiết phim 1 106

Hình 5.20 Giao diện chi tiết phim 2 106

Hình 5.21 Giao diện chi tiết phim 3 107

Hình 5.22 Giao diện chi tiết phim 4 107

Hình 5.23 Giao diện xem phim 1 108Hình 5.24 Giao diện xem phim 2 108Hình 5.25 Giao diện mua gói bước 1 ( 1 ) 109Hình 5.26 Giao diện mua gói bước 1 ( 2 ) 109Hình 5.27 Giao diện mua gói bước 2 110Hình 5.28 Giao diện mua gói bước 2 ( 2 ) 110Hình 5.29 Giao diện mua gói bước 3 ( 1 ) 111Hình 5.30 Giao diện mua gói bước 3 ( 2 ) 111Hình 5.31 Giao diện chọn thể loại yêu thích 112Hình 5.32 Giao diện đăng nhập 112Hình 5.33 Giao diện đăng ký 113Hình 5.34 Giao diện thông tin nghệ sĩ 1 113Hình 5.35 Giao diện thông tin nghệ sĩ 2 114Hình 5.36 Giao diện quản lý tài khoản user 114Hình 5.37 Giao diện quản lý phim 1 115Hình 5.38 Giao diện quản lý phim 2 115Hình 5.39 Giao diện quản lý thể loại phim 1 116Hình 5.40 Giao diện quản lý thể loại phim 2 116Hình 5.41 Giao diện quản lý danh sách phim 1 117Hình 5.42 Giao diện quản lý danh sách phim 2 118Hình 5.43 Giao diện quản lý diễn viên 1 119Hình 5.44 Giao diện quản lý diễn viên 2 119Hình 5.45 Giao diện quản lý diễn viên 3 120Hình 5.46 Giao diện quản lý gói dịch vụ 120

Hình 5.47 Giao diện quản lý user 121

Hình 5.48 Giao diện chat bot 1 122Hình 5.49 Giao diện chat bot 2 123Hình 5.50 Giao diện chat bot 3 124Hình 5.51 Giao diện chat bot 4 125Hình 5.52 Giao diện chat bot 5 126Hình 5.53 Giao diện chat bot 6 127

DANH MỤC CÁC BẢNG

Bảng 5.1 Danh sách các actors 59Bảng 5.2 Danh sách các use cases 63Bảng 5.3 Đặc tả use-case đăng ký 64Bảng 5.4 Đặc tả use-case xác thực tài khoản 65Bảng 5.5 Đặc tả use-case mua gói 66Bảng 5.6 Đặc tả use-case sử dụng mã giảm giá 66Bảng 5.7 Đặc tả use-case đăng nhập 67Bảng 5.8 Đặc tả use-case đăng xuất 68Bảng 5.9 Đặc tả use-case quản lý người dùng 69Bảng 5.10 Đặc tả use-case quản lý Playlist phim 70Bảng 5.11 Đặc tả use-case quản lý thể loại 71

Bảng 5.12 Đặc tả use-case quản lý danh mục phim 72

Bảng 5.13 Đặc tả use-case quản lý thông tin cá nhân 73Bảng 5.14 Đặc tả use-case quản lý danh mục yêu thích 74Bảng 5.15 Đặc tả use-case Tìm kiếm phim 74Bảng 5.16 Đặc tả use-case Xem danh mục phim 75Bảng 5.17 Đặc tả use-case Bình luận, đánh giá 76Bảng 5.18 Đặc tả use-case Like, Dislike 77Bảng 5.19 Đặc tả use-case Chat với bot 78Bảng 5.20 Đặc tả use-case Bảng xếp hạng 78Bảng 5.21 Đặc tả use-case Gợi ý phim 79Bảng 5.22 Đặc tả use-case Lịch sử thanh toán 80

Bảng 5.23 Đặc tả use-case Thống kê 80 Bảng 5.24 Đặc tả use-case Quản lý mã giảm giá 81 Bảng 5.25 Đặc tả use-case Quản lý diễn viên 82

Bảng 5.26 Đặc tả use-case Quản lý đạo diễn 83

Bảng 5.27 Đặc tả use-case Quản lý hóa đơn 84

Bảng 5.28 Danh sách lớp đối tượng 86Bảng 5.29 Mô tả chi tiết từng đối tượng 87Bảng 5.30 Mô tả bảng Movie 89

Bảng 5.31 Mô tả bảng Genre 90

Bảng 5.32 Mô tả bảng Package 91

Bảng 5.33 Mô tả bảng List 91

Bảng 5.34 Mô tả Payment 92Bảng 5.35 Mô tả bảng Discount 93Bảng 5.36 Mô tả bảng Comment 93Bảng 5.37 Bảng Like, Dílike 94Bảng 5.38 Mô tả bảng Like 94Bảng 5.39 Mô tả bảng Notify 95Bảng 5.40 Mô tả bảng Directcor 96Bảng 5.41 Mô tả bảng Actcor 97

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

STT Tên Viết Tắt Tên Đầy Đủ

CHƯƠNG 1 GIỚI THIỆU CHUNG

1.1 Lý do chọn đề tài

Một trang web xem phim là lựa chọn tốt cho chúng em trong việc thiết kế giao diện và học tập những kiến thức mới Ngoài ra, với sự phát triển của công nghệ AI như hiện nay thì những ứng dụng được tích hợp AI ngày càng phổ biến và giúp cho việc giải quyết bài toán gợi ý các sản phẩm phim đến đúng người, đúng thời điểm trở nên khả thi hơn bao giờ hết Vì thế, nhóm quyết định kết hợp thêm chat bot và hệ thống gợi ý vào trang web để phục vụ tốt hơn cho người dùng cũng như cho nhóm một cơ hội để tìm hiểu sâu hơn về lĩnh vực này

Với tinh thần đó, nhóm thực hiện quyết định xây dựng “XÂY DỰNG TRANG WEB XEM PHIM ONLINE KẾT HỢP HỆ THỐNG GỢI Ý VÀ CHAT BOT” nhằm mục đích mang đến trải nghiệm xem phim cho người dùng cùng với việc hỗ trợ của chat bot để giúp người dùng dễ dàng hơn trong việc sử dụng và giúp cho trang web thu hút được nhiều người dùng hơn

Dựa vào hệ thống gợi ý cá nhân hóa tới từng người dùng, khách hàng chỉ cần với những thao tác đơn giản là có thể những bộ phim phù hợp với nhu cầu của mình

1.2 Tính năng khác biệt

Các trang web hiện nay đa số đều có ý tưởng và phương thức hoạt động tương đồng ở hầu hết các chức năng như: Tìm kiếm, đánh giá, bình luận, … và không có gì khác biệt cho khách hàng trải nghiệm ở ứng dụng ngoài trừ kết hợp với những trang web khác

Sau quá trình khảo sát thực tế và lắng nghe ý kiến của người dùng, giải pháp nhóm đề ra là thiết kế trang web khác biệt so với các trang web hiện nay nhưng phải dễ nhìn, dễ sử dụng và thể hiện được những thông tin cần thiết cho người dùng

Chọn lọc các chức năng tiện dụng nhất của top các ứng dụng lớn hiện nay để đưa vào trang web của mình

Sau khi khảo sát, tìm hiểu và dùng thử một số trang web như: ZingTV , phimchill … và nhận thấy một

số khuyết điểm của những trang web ấy:

Về phần giao diện và chức năng:

- ZingTV: Giao diện không có quá nhiều khác biệt ở các phần khác nhau ( sử dụng chung một thành phần lặp lại)

- phimchill: quá nhiều quảng cáo, không có hệ thống đăng nhập

⇨ Điều này đã làm dẫn đến sự hạn chế trong việc thoải mái lựa chọn và mua sắm của người dùng

Về phần chatbot:

- ZingTV: Không có chatbot

- phimchill: Không có chatbot

Về phần hệ thống gợi ý:

- Netflix: Không có hệ thống gợi ý Chỉ đơn thuần đưa ra các phim mới, các phim nổi bật trong tuần cho tất cả người dùng

- phimchill: Không có hệ thống gợi ý Chỉ có bảng xếp hạng phim dựa trên lượt xem

⇨ Vì muốn tạo ra sự khác biệt so với các ứng dụng sẵn có hiện nay, nhóm đã quyết định thêm chatbot

có thể nhận dạng và xử lý được cả thông tin dạng văn bản lẫn âm thanh nhằm đáp ứng mong muốn của người dùng được chatbot tư vấn tự động về các bộ phim phù hợp cũng như xây dựng một hệ thống có thể

đề xuất các gợi ý mang tính cá nhân hóa tới từng người dùng

1.3 Đối tượng nghiên cứu

Khóa luận này hướng đến nghiên cứu các đối tượng sau:

- Các công nghệ:

+Front-end: ReactJS

+Back-end: NodeJS, ExpressJS

+Database: MongoDB

+Cào dữ liệu phim: TMDB, 2Embed

+Chatbot Facebook Messenger

+IDE: Visual Studio Code

- Đối tượng trong phạm vi đề tài hướng đến: Khách hàng có nhu cầu tìm kiếm và xem phim Không giới hạn độ tuổi truy cập của đối tượng

+ Có khả năng giải đáp và trả lời các câu hỏi phổ biến mà khách hàng thường hỏi nhằm tư vấn cho khách hàng trong việc xem phim

+ Cung cấp thông tin chi tiết về các phim kèm hình ảnh minh họa

+ Nhận biết, hiểu và trả lời tương đối ngôn ngữ tự nhiên dạng văn bản và âm thanh

+ Tích hợp Wikidata API để trả lời trong trường hợp khách hàng đặt các câu hỏi ngoài phạm vi

− Đối với ứng dụng Web:

- Tích hợp đăng nhập, đăng kí cũng như đăng nhập nhanh thông qua Google, Facebook và dịch vụ gửi link kích hoạt tài khoản khi đăng ký thông qua mail

-Cho phép tra cứu, tìm kiếm với nhiều thể loại, danh mục tùy chọn và xem phim trực tuyến

-Cung cấp hệ thống thu thập bình luận, đánh giá người dùng về phim

-Cung cấp chức năng yêu thích phim cũng như lưu danh mục phim yêu thích

-Cho phép thay đổi thông tin người dùng

-Cung cấp giao diện admin quản lý với các chức năng thêm/xóa/sửa tương ứng với các loại đối tượng tồn tại trong website (phim, danh mục phim, thể loại phim, người dùng, diễn viên, đạo diễn, mã giảm giá, hóa đơn)

-Hỗ trợ thống kê về các đối tượng tồn tại trong hệ thống thông qua biểu đồ

− Đối với hệ thống gợi ý: hệ thống bao gồm gợi ý dựa trên nội dung ( content based ) của một phim từ đó tích hợp vào các phần khác nhau trên trang web để tối ưu hóa khả năng

hỗ trợ cho người dùng.

1.5 Phương pháp thực hiện

Cách tiếp cận: ứng dụng được xây dựng dựa theo mô hình MVC

Nhóm đã sử dụng các phương pháp như sau:

Phương pháp nghiên cứu:

- Phương pháp đọc tài liệu

- Phương pháp phân tích các ứng dụng xem phim liên quan phổ biến hiện nay

- Phương pháp thực nghiệm

2.1.2.2 Tầng logic dữ liệu – Model

Tầng logic dữ liệu - Model là bộ phận có chức năng lưu trữ toàn bộ dữ liệu của ứng dụng Bộ phận này

là một cầu nối giữa 2 thành phần bên dưới là View và Controller Model thể hiện dưới hình thức là một

cơ sở dữ liệu hoặc có khi chỉ đơn giản là một file XML bình thường Model thể hiện rõ các thao tác với

cơ sở dữ liệu như cho phép xem, truy xuất, xử lý dữ liệu,…

2.1.2.3 Tầng giao diện – View

Tầng giao diện - View là phần giao diện (theme) dành cho người sử dụng Nơi mà người dùng có thể lấy được thông tin dữ liệu của MVC thông qua các thao tác truy vấn như tìm kiếm hoặc sử dụng thông qua các website

Thông thường, các ứng dụng web sử dụng MVC View như một phần của hệ thống, nơi các thành phần HTML được tạo ra Bên cạnh đó, View cũng có chức năng ghi nhận hoạt động của người dùng để tương tác với Controller Tuy nhiên, View không có mối quan hệ trực tiếp với Controller, cũng không được lấy

dữ liệu từ Controller mà chỉ hiển thị yêu cầu chuyển cho Controller mà thôi

2.1.3 Tại sao dùng mô hình MVC

MVC đang là mô hình được ứng dụng rất nhiều trong lập trình

Hệ thống MVC phát triển tốt sẽ cho phép phát triển front – end, back – end cùng trên hệ thống mà không có sự can thiệp, chia sẻ, chỉnh sửa các tập tin trong khi một hoặc hai bên vẫn đang làm việc Việc sử dụng mô hình tương đối đơn giản Chỉ cần hiểu rõ quy trình vận hành, nắm được các chức năng của từng bộ phận thì việc triển khai mô hình MVC tương đối dễ dàng

Mô hình MVC có ưu điểm với sự phát triển của ứng dụng như:

Kiểm tra dễ dàng: Với MVC, bạn có thể dễ dàng kiểm tra, rà soát lỗi phần mềm trước khi tới tay người tiêu dùng, đảm bảo chất lượng và độ uy tín cao hơn

Chức năng control: Trên các nền website thì ngôn ngữ lập trình như CSS, HTML, Javascript có một vai trò vô cùng quan trọng Việc sử dụng mô hình MVC sẽ giúp bạn có một bộ control ưu việt trên nền tảng các ngôn ngữ hiện đại với nhiều hình thức khác nhau

View và size: View sẽ là nơi lưu trữ các dữ liệu Càng nhiều yêu cầu được thực hiện thì kích thước càng tập càng lớn Khi đó, đường truyền mạng cũng giảm tốc độ load Việc sử dụng mô hình MVC sẽ giúp bạn tiết kiệm được diện tích băng thông một cách tối ưu

Chức năng Soc (Separation of Concern): Chức năng này cho phép bạn phân tách rõ ràng các phần như Model, giao diện, data, nghiệp vụ

Tính kết hợp: Việc tích hợp ở mô hình MVC cho phép bạn thoải mái viết code trên nền tảng website Khi đó, server của bạn sẽ được giảm tải khá nhiều - Đơn giản: Đây là một mô hình với kết cấu tương đối đơn giản Dù bạn không có quá nhiều chuyên môn cũng có thể sử dụng được

Nhẹ, tiết kiệm băng thông: MVC không sử dụng viewstate nên khá tiết kiệm diện tích băng thông Khi

sử dụng, người dùng có thể sử dụng ứng dụng trên web cần tương tác gửi và nhận dữ liệu một cách liên tục Do đó, việc giảm băng thông giúp cho website hoạt động tốt và ổn định hơn

2.2 Tổng quan về NodeJS

2.2.1 Giới thiệu

Hình 2.2: Cách NodeJS hoạt động so với những server khác

NodeJS được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California,

Hoa Kỳ

NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, nó được sử dụng để xây dựng các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp NodeJS là một mã nguồn mở được sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác 33 nhau từ WIndow cho tới Linux, OS X nên

đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất

V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome, Opera và Vivaldi

Nó được thiết kế tập trung vào hiệu năng và chịu trách nhiệm cho việc dịch mã JavaScript sang mã máy

để máy tính có thể hiểu và chạy được Nhưng bạn cũng nên tránh nhầm lẫn rằng Node chạy trên trình duyệt Cha đẻ của Node dựa trên V8 engine, cải tiến một số tính năng chẳng hạn file system API, thư viện

HTTP và một số phương thức liên quan đến hệ điều hành Điều đó có nghĩa là Node.js là một chương trình giúp ta có thể chạy code JavaScript trên máy tính, nói cách khác nó là một JavaScript runtime Node.js có có thể làm việc với cơ sở dữ liệu như các ngôn ngữ lập trình và framework khác Và Node.js

hỗ trợ các cơ sở dữ liệu nổi tiếng khác nhau: MySql,

Sql Server, MongoDB, PostgreSQL, …

2.2.2 Tạo sao chọn NodeJS để phát triển server

NodeJS tạo ra được các ứng dụng có tốc độ xử lý nhanh, real time thời gian thực

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ể

NodeJS chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event Driven, cơ chế blocking I/O làm cho nó nhẹ và hiệu quả

non-Có thể chạy ứng dụng NodeJS ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng NodeJS rất lớn và hoàn toàn miễn phí, các package đều hoàn toàn miễn phí: https://www.npmjs.com/ Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị

2.2.3 Các đặc tính của NodeJS

Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ (non blocking), nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về Việc di chuyển máy chủ đến các API tiếp theo sau khi 34 gọi và cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime)

Chạy rất nhanh: NodeJS được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh

Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hình luồng duy nhất với sự kiện lặp

cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu Node.js sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP Server

Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu

Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License

2.2.4 ExpressJS (Framework của NodeJS):

2.2.4.1 Giới thiệu:

Hình 2.3: Logo Express js

Expressjs hay còn được viết là Express js, Express.js Đây là một framework mã nguồn mở miễn phí cho Node.js Express.js được sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng

Vì Express js chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứng dụng web và API trở nên đơn giản hơn với các lập trình viên Expressjs cũng là một khuôn khổ của Node.js, do đó, hầu hết các mã code đã được viết sẵn cho các lập trình viên có thể làm việc Express js đã giúp cho việc lập trình trong Node.js trở nên dễ dàng hơn và có nhiều tính năng mới bổ sung

2.2.4.2 Ưu điểm:

– Express hỗ trợ việc phát triển ứng dụng theo mô hình MVC, mô hình phổ biến cho việc lập trình web hiện nay

– Cho phép định nghĩa Middleware hỗ trợ cho việc tổ chức và tái sử dụng code

– Định nghĩa routes và các request method đến server một cách dễ dàng

– Hỗ trợ REST API

2.2.4 Áp dụng vào đề tài

NodeJS, ExpressJS được áp dụng để xây dựng toàn bộ hệ thống Back-end cho hệ thống giúp tăng tốc

độ load dữ liệu NodeJS, ExpressJS cung cấp những thư viện cần thiết trong quá trình phát triển hệ thống NodeJS, ExpressJS và ReactJS là sự kết hợp vô cùng tốt để phát triển hệ thống một cách tốt nhất

2.3 Hệ quản trị cơ sở dữ liệu MongoDB

2.3.1 Giới thiệu

Hình 2.4: Sự phát triển và độ phổ biến của MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở NoSQL Nó được thiết kế theo kiểu hướng đối tượng, các bảng trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ trên bảng không cần tuân theo một cấu trúc nhất định nào cả MongoDB lưu trữ dữ liệu theo hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh

2.3.2 Ưu điểm của MongoDB

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 kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái

Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

MongoDB rất dễ mở rộng (Horizontal Scalability) Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster:

Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượt truy vấn sau diễn

ra nhanh hơn mà không cần phải đọc từ ổ cứng

Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các

hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL