Trong thế giới số hóa ngày nay, việc xem phim trực tuyến đã trở thành một phần không thể thiếu của cuộc sống hàng ngày. Với sự tiện lợi và đa dạng về thể loại, các website xem phim trực tuyến đã mang đến cho người dùng trải nghiệm xem phim tuyệt vời ngay tại nhà. Bài báo cáo này sẽ khám phá và phân tích về các yếu tố quan trọng tạo nên sự thành công của các website xem phim trực tuyến, từ giao diện người dùng, chất lượng nội dung, đến cách thức quảng cáo và thu hút người dùng. Mục tiêu của bài báo cáo là cung cấp cái nhìn sâu sắc về ngành công nghiệp xem phim trực tuyến, đồng thời đưa ra những gợi ý và khuyến nghị để cải thiện và phát triển hơn nữa trong tương lai.
TRƯỜNG ĐẠI HỌC PHENIKA KHOA CÔNG NGHỆ THÔNG TIN Báo Cáo Dự Án Học Phần Đồ Án Cơ Sở Đề tài: Website xem phim online Thành viên Giảng viên hướng dẫn: - Nguyễn Như Bắc– 21012038 - Nguyễn Thái Việt Huy-21012500 - Nguyễn Lê Minh-21012884 - Đỗ Minh Quân-20010879 Vũ Minh Đức Hà Nội, tháng 11 năm 2023 Mục lục Giới thiệu 1.1 Đặt vấn đề 1.2 Các giải pháp có 1.3 Giải pháp đề xuất 1.4 Giới thiệu vài cơng nghệ sử dụng 1.5 Các tính SCSS 17 1.5.1 Xếp chồng (Nested Rules) – SCSS gì? 17 1.5.2 Biến (Variable): 17 1.5.3 Quy tắc Mixin – SCSS gì? 17 1.5.4 Kế thừa (Extends): 17 1.5.5 Import: 17 Thiết kế triển khai 18 2.1 Các yêu cầu chức 18 2.2 Các yêu cầu phi chức 18 2.3 Các ràng buộc (Constraints) 19 2.3.1 Các ràng buộc triển khai 19 2.3.2 Các ràng buộc kinh tế 20 2.3.3 Các ràng buộc đạo đức 20 2.4 Mơ hình hệ thống / Thiết kế giải pháp 21 2.4.1 Các kịch hệ thống (Use-cases) 21 2.4.2 Mơ hình Use-case 22 2.4.3 Các biểu đồ 27 2.4.4 Các hình giao diện người dùng 31 Một số thành phần khác đồ án 36 3.1 Kế hoạch dự án 36 3.2 Đảm bảo thực làm việc nhóm 37 i 3.3 Các vấn đề đạo đức làm việc chuyên nghiệp 38 3.4 Tác động xã hội 39 3.5 Kế hoạch cho kiến thức kế hoạch học tập 40 Tài liệu tham khảo 41 ii LỜI MỞ ĐẦU Trong giới số hóa ngày nay, việc xem phim trực tuyến trở thành phần thiếu sống hàng ngày Với tiện lợi đa dạng thể loại, website xem phim trực tuyến mang đến cho người dùng trải nghiệm xem phim tuyệt vời nhà Bài báo cáo khám phá phân tích yếu tố quan trọng tạo nên thành công website xem phim trực tuyến, từ giao diện người dùng, chất lượng nội dung, đến cách thức quảng cáo thu hút người dùng Mục tiêu báo cáo cung cấp nhìn sâu sắc ngành cơng nghiệp xem phim trực tuyến, đồng thời đưa gợi ý khuyến nghị để cải thiện phát triển tương lai iii Giới thiệu 1.1 Đặt vấn đề Dữ liệu lớn phức tạp: Quản lý sở liệu lớn với thông tin hàng ngàn phim, diễn viên, đạo diễn nhiều loại liệu khác thách thức Bản quyền cấp phép: Thu thập thông tin chi tiết phim, bao gồm hình ảnh video, liên quan đến vấn đề quyền cần phải có chế cấp phép phù hợp Tương tác người dùng: Xây dựng trải nghiệm người dùng cách mượt mà, tránh giật lag, giao diện ưu nhìn để khơng cảm thấy nhàm chán Tính tương thích đa tảng: Đảm bảo trang web hoạt động trơn tru nhiều trình duyệt thiết bị khác thách thức kỹ thuật Tối ưu hóa tốc độ trang web: Làm để đảm bảo trang web hoạt động nhanh mượt, không làm khách hàng lỗi trang tải trang chậm? Dữ liệu liên kết cập nhật liên tục: Liên tục cập nhật trì liệu, bao gồm thông tin phim thông tin nghệ sĩ, để đảm bảo trang web cung cấp thơng tin xác ● Tìm kiếm lọc thơng tin: Cung cấp chế tìm kiếm mạnh mẽ khả lọc thông tin giúp người dùng dễ dàng tìm kiếm xem thơng tin mà họ quan tâm ● Tích hợp xã hội: Kết nối với tảng mạng xã hội để người dùng chia sẻ thơng tin phim tương tác với cộng đồng cách dễ dàng ● Responsive Design: thiết kế triển khai trang web để hoạt động mượt mà máy tính điện thoại di động? ● Đa ngơn ngữ văn hóa: Xây dựng giao diện hỗ trợ nhiều ngơn ngữ văn hóa làm cho trang web hấp dẫn đối tượng rộng lớn người dùng toàn giới 1.2 Các giải pháp có ● Thiết kế giao diện trải nghiệm người dùng: Áp dụng nguyên tắc thiết kế UX/UI để đảm bảo trải nghiệm tốt cho người xem ● Phân trang Tải trước: Sử dụng React Router để phân trang danh sách phim Tối ưu hóa hình ảnh sử dụng kỹ thuật tải trước để giảm thời gian tải trang ● Xử lý video: Sử dụng thư viện React Video để phát video cách linh hoạt Tích hợp API YouTube API Vimeo API để phát video từ nguồn bên ngồi ● Tìm kiếm Lọc Phim: Sử dụng thư viện ReactJS React-Select để xây dựng giao diện tìm kiếm lọc đa dạng ● Đề xuất Phim: Sẽ đề xuất phim theo danh mục mà tất người dùng xem trước ● Thẻ Danh mục Phim: Sử dụng Redux để quản lý trạng thái thẻ danh mục Tạo component tái sử dụng cho thẻ danh mục để giảm lặp code ● Bảo mật mạnh mẽ: Sử dụng mã hóa SSL, kiểm sốt truy cập theo dõi vấn đề bảo mật để bảo vệ thông tin người dùng liệu trang web ● Responsive Design: Sử dụng media queries responsive design để tối ưu hóa trang web cho thiết bị di động 1.3 Giải pháp đề xuất ● Tích hợp Dịch vụ Phim Nổi tiếng: Sử dụng API từ dịch vụ IMDb TMDB để lấy thông tin chi tiết đánh giá Hiển thị thông tin cách thân thiện quán trang web bạn ● Đa Ngôn ngữ: Sử dụng thư viện react-i18next để hỗ trợ đa ngôn ngữ quản lý chuỗi ngôn ngữ ● Chia sẻ Bình luận: Sử dụng API chia sẻ xã hội ShareThis để tích hợp chức chia sẻ ● Tích hợp đa ngơn ngữ: Hỗ trợ nhiều ngơn ngữ văn hóa để mở rộng đối tượng người dùng toàn giới ● Chế độ Tối Chế độ Ban Ngày: Sử dụng thư viện React Context để quản lý trạng thái chế độ tối/ban ngày Tích hợp chế lưu trữ cục để lưu trạng thái chế độ tối/ban ngày người dùng ● Tích hợp xã hội: Kết nối với tảng mạng xã hội cung cấp tính chia sẻ để tăng tương tác lan truyền thông tin ● Đánh giá Đánh giá Phim: Sử dụng thư viện React Rating để tạo giao diện đánh giá dễ sử dụng ● Hỗ trợ Nền tảng đa phương tiện: Sử dụng thư viện react-player để tích hợp video từ nhiều nguồn khác Kết hợp với API YouTube API Vimeo API để phát video từ dịch vụ phổ biến ● Tối ưu hóa hiệu suất: Sử dụng kỹ thuật tối ưu hóa hình ảnh, tải liệu theo đợt, sử dụng Content Delivery Network (CDN) để cải thiện tốc độ tải trang 1.4 Giới thiệu vài công nghệ sử dụng o ReactJS ReactJS thư viện Javascript xây dựng kỹ sư Facebook, nhiều công ty tiếng sử dụng để phát triển sản phẩm họ Yahoo, Airbnb tất nhiên nội Facebook, Instagram Nó phù hợp với dự án lớn có tính mở rộng dự án nhỏ Tư tưởng ReactJS xây dựng lên components có tính tái sử dụng, dễ dàng cho việc chia nhỏ vấn đề, testing Nó giúp dễ dàng quản lý, mở rộng hệ thống, điều Angular địi hỏi cấu trúc, cách viết code phải thật tối ưu.ReactJS giữ components trạng thái stateless khiến ta dễ dàng quản lý chẳng khác trang HTML tĩnh Bản thân components khơng có trạng thái (state) nhận đầu vào từ bên ngồi thị dựa vào đầu vào đó, điều lý giải lại mang tính tái sử dụng dễ dàng cho việc bảo trì ReactJS thư viện hiển thị view ý đến hiệu năng(performanceminded) Rất nhiều đối thủ nặng ký framework MVVM (Model-ViewViewModel)mất thời gian lớn để hiển thị lượng liệu lớn, trường hợp hiển thị danh sách tương tự Nhưng React khơng cịn vấn đề, hiển thị thay đổi.Một điểm mạnh ReactJS virtual DOM - thứ nằm ẩn bên view lí khiến cho React đạt hiệu tốt Khi view yêu cầu gọi, tất thứ đưa vào ảo DOM Sau việc gọi hoàn thành, React tiến hành phép so sánh DOM ảo DOM thật, thực thay đổi phép so sánh Ví dụ: xem danh sách có 20 sản phẩm hiển thị ReactJS, thay đổi sản phẩm thứ 2, sản phẩm hiển thị lại,và 19 sản phẩm cịn lại giữ ngun (khơng cần hiển thị lại hay reload lại trang).React dùng gọi “virtual DOM” để tăng hiệu cách xuất hiển thị ảo, sau kiểm tra khác biệt hiển thị ảo có DOM tạo vá Giới thiệu Redux Khi làm việc với React hay dự án ứng dụng Single Page nói chung, có vấn đề đau đầu quản lý trạng thái ứng dụng Sau xem qua giới thiệu số thư viện hỗ trợ công việc này, em định chọn Redux Redux thư viện Javascript giúp tạo thành lớp quản lý trạng thái ứng dụng.Redux xây dựng dựa tảng tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook giới thiệu Do Redux thường đơi kết hợp hồn hảo với React Tuy nhiên hồn tồn sử dụng với framework khác Angular,Backbone ReactJS thư viện Javascript giúp xây dựng giao diện người dùng, xây dựng xung quanh component (thành phần) nhỏ ghép lại với nhau, có hai kiểu liệu React state props State trạng thái, mang tính private, thay đổi component Cịn props mang tính external, khơng bị kiểm sốt component, truyền từ component cao (cha) đến component thấp (con) ReactJS xây dựng lên single-page-app, tức render trang, tất thành phần ứng dụng lưu trữ Vì thế, ứng dụng phức tạp lên theo thời gian, việc quản lý state ngày lớn dần Sự khác biệt với việc sử dụng Redux khơng sử dụng Redux miêu tả hình vẽ đây: Giới thiệu JSX JSX cú pháp mở rộng cho JavaScript, kết hợp JavaScript XML Nó chuyển đổi cú pháp dạng gần XML thành JavaScript, giúp code ReactJS cú pháp XML thay phải dùng JavaScript Thay phải truy xuất đến thẻ HTML thơng qua thuộc tính id, class, name ta thoải mái sử dụng thẻ HTML code JavaScript Tất ta cần làm viết đống thẻ html sau đặt chúng vào biến, function class chẳng hạn Ví dụ: 2.4.2.7 Use-case Đổi mật Hình Use-case Đổi mật Mô tả: Khi người dùng nhấn vào mục đổi mật giao diện đổi mật lên Người dùng cần phải nhập mật tại, mật mới, nhập lại mật sau nhấn ok Nếu mật cũ hai mật trùng hiển thị thơng báo thành cơng Nếu khơng u cầu người dùng nhập lại 2.4.3 Các biểu đồ 2.4.3.1 Biểu đồ cho Use-case Đăng nhập Hình Biểu đồ cho Use case Đăng nhập 27 2.4.3.2 Biểu đồ cho Use-case Tìm kiếm Hình 10 Biểu đồ cho Use-case Tìm kiếm 2.4.3.3 Biểu đồ cho Use-case Xem phim Hình 11 Biểu đồ cho Use-case Xem phim 28 2.4.3.4 Biểu đồ cho Use-case Theme Hình 12 Biểu đồ cho Use-case Theme 2.4.3.5 Biểu đồ cho Use-case Yêu thích Hình 13 Biểu đồ cho Use-case Yêu thich 29 2.4.3.6 Biểu đồ cho Use-case Đánh giá Hình 14 Biểu đồ cho Use-case Đánh giá 2.4.3.7 Biểu đồ cho Use-case Đổi mật Hình 15 Biểu đồ cho Use-case Đổi mật 30 2.4.4 Các hình giao diện người dùng Hình 16 Màn hình Hình 17 Bảng xếp hạng hình 31 Hình 18 Tìm kiếm Hình 19 Xem phim 32 Hình 20 Danh sách phim u thích Hình 21 Bình luận 33 Hình 22 Danh sách đánh giá người dùng Hình 23 Đổi mật 34 Hình 24 Đăng ký Hình 25 Đăng nhập 35 Một số thành phần khác đồ án 3.1 Kế hoạch dự án SỐ CẤU TRÚC CÔNG VIỆC TIÊU ĐỀ CÔNG VIỆC THỜI GIAN ĐỘ HOÀN THIỆN ###### 100% 14/09/23 ###### 100% Cả nhóm Quân, Huy Cả nhóm 15/09/23 15/09/23 21/09/23 ###### ###### ###### 100% 90% 100% Minh, Bắc 20/09/23 ###### 100% 25/09/23 28/09/23 02/10/23 04/10/23 06/10/23 20/10/23 ###### ###### ###### ###### ###### ###### 16 14 75% 100% 100% 100% 80% 95% NGÀY BẮT ĐẦU NGÀY ĐẾN HẠN Cả nhóm 12/09/23 Cả nhóm NGƯỜI PHỤ TRÁCH Lên ý tưởng thiết lập dự án 1.1 Đặt vấn đề, tìm kiếm giải pháp Xây dựng kế hoạch, công nghệ Xây dựng chức Xây dựng kịch hệ thống Tìm hiểu Reactjs Tìm hiểu backend MongoDB 1.2 1.3 1.1 1.2.3 Tiến hành xây dựng dự án code 2.1.1 2.1.2 2.1.4 2.2.1 2.2.2 2.3.3 Xây dựng sơ đồ usecase Thiết kế giao diện Thiết kế sở liệu Xây dựng backend Xây dựng giao diện Kết nối api tới web Kiểm Thử, sửa lỗi hoàn thiện báo cáo 3.1.2 3.1.3 3.1.4 Kiểm thử chức web Kiểm thử chức Kiểm tra độ bảo mật logic Cả nhóm Minh, Bắc Cả nhóm 30/10/23 01/11/23 02/11/23 ###### ###### ###### 1 88% 90% 100% 3.2.1 Sửa kiểm thử tính Quân, Huy 01/11/23 ###### 100% Cả nhóm 03/11/23 ###### 100% Cả nhóm 06/11/23 ###### 100% Cả nhóm 08/11/23 ###### 100% Bắc 09/11/23 ###### 100% 3.3.1 3.3.2 3.4 3.5 Viết báo cáo: công nghệ sử dụng Viết báo cáo: demo sản phẩm Kiểm tra hoàn thiện báo cáo Viết slider chuẩn bị thuyết trình Qn, Minh Cả nhóm Huy, Bắc Quân, Minh nhóm Huy Hình 26 Bảng phân chia cơng việc • Biểu đồ kế hoạch dự án 36 Figure Biểu đồ kế hoạch thực dự án 3.2 Đảm bảo thực làm việc nhóm Dự án chúng em tuân theo quy trình rõ ràng hiệu Mỗi thành viên nhóm có vai trị cụ thể, từ lãnh đạo nhóm, người quản lý dự án, đến chuyên gia kỹ thuật Chúng em xây dựng kế hoạch công việc chi tiết, bao gồm công việc cụ thể, mục tiêu thời hạn Chúng em lên lịch cho họp, meeting minutes, xây dựng phần mềm kiện quan trọng khác Công cụ truyền thông giao tiếp chúng em sử dụng Zalo tổ chức họp định kỳ để cập nhật tình trạng cơng việc giải vấn đề Thống sử dụng HTML, JavaScripts, ReactJS, MongoDB sử dụng Github để trao đổi mã nguồn Chia 37 nhỏ công việc thành phần nhỏ để thành viên dễ dàng theo dõi đóng góp Mọi người hiểu rõ cơng việc họ phụ thuộc nhiệm vụ Chúng em sử dụng Github Jira để quản lý dự án Các thành viên xác định quy trình làm việc chung, từ việc kiểm tra mã nguồn, kiểm thử, đến triển khai Tất thành viên tuân theo quy trình Chúng em đảm bảo có quy trình kiểm thử đầy đủ, chi tiết để đảm bảo không bỏ sót vấn đề sản phẩm Và thực đánh giá thành viên để kịp thời cải thiện dự án, quy trình làm việc Nhóm chúng em khuyến khích sáng tạo chia sẻ ý kiến Tạo mơi trường làm việc tích cực thoải mái để người làm việc hiệu Với nguyên tắc quy trình này, hy vọng đạt mục tiêu dự án cách hiệu kịp thời 3.3 Các vấn đề đạo đức làm việc chuyên nghiệp Nhóm chúng em xin đảm bảo điều sau: • Bản quyền sở hữu trí tuệ: Đảm bảo tất phim nội dung video khác website tuân thủ quy định quyềnĐây vấn đề lớn xây dựng trang web xem phim tuân thủ quy định quyền • Quyền riêng tư người dùng: Đảm bảo thông tin cá nhân người dùng bảo vệ không tiết lộ khơng có đồng ý họ • Chất lượng nội dung: Đảm bảo nội dung cung cấp đáp ứng u cầu chất lượng hình ảnh • Đạo đức kinh doanh: Đảm bảo thơng tin xác sản phẩm dịch vụ, không lừa dối khách hàng tuân thủ quy định pháp luật • Chuyên nghiệp: Đảm bảo trang web dễ dàng sử dụng, giao diện thân thiện cung cấp trải nghiệm tốt cho người dùng • Văn hóa chuẩn mực xã hội: Đảm bảo tơn trọng giá trị văn hóa, không đăng tải nội dung phân biệt đối xử xúc phạm 38 Chúng cam đoan đồ án tự làm, nội dung tham khảo, trich dẫn luận văn đề cập đầy đủ mục tham khảo Chúng cam đoan không sử dụng sản phẩm đồ án để thực việc trái pháp luật, đạo đức, gây anh hưởng xấu đến cộng đồng, xã hội Ký tên Bắc Minh Huy Quân 3.4 Tác động xã hội Nội dung: Website cung cấp cho người dùng khả truy cập vào lượng lớn nội dung giải trí Điều tạo hội cho người dùng khám phá thể loại phim mới, văn hóa khác quan điểm sáng tạo Tương tác xã hội: Cung cấp tính tương tác xã hội cho phép người dùng bình luận, thảo luận phim Điều tạo hội cho người dùng kết nối với qua sở thích chung Sức khỏe tâm thần: Việc xem phim trực tuyến mức dẫn đến vấn đề sức khỏe tâm thần, bao gồm cảm giác đố kỵ, thua hài lòng với sống Nghiên cứu cho thấy việc xem phim trực tuyến mức dẫn đến triệu chúng ADHD, trầm cảm, lo âu thiếu ngủ Vấn đề quyền: Việc xem phim trực tuyến dẫn đến vấn đề quyền, đặc biệt phim phát sóng mà chưa cho phép người sở hữu quyền 39 Tác động đến ngành công nghiệp phim điện ảnh: Xem phim trực tuyến tạo hội cho ngành cơng nghiệp phim điện ảnh, tạo thách thức cạnh tranh với dịch vụ trực tuyến 3.5 Kế hoạch cho kiến thức kế hoạch học tập Trong trình thực dự án xây dựng website xem phim trực tuyến, thành viên nhóm có nhiều hội để học hỏi phát triển kỹ Một số thành viên học ngơn ngữ lập trình JavaScript ReactJS từ nguồn học trực tuyến để phát triển front-end Một thành viên nhóm có kinh nghiệm với kiến trúc MVC, anh chia sẻ kiến thức với người cịn lại nhóm back-end Chúng em sử dụng Node.js phần back-end, tất thành viên back-end tìm hiểu Node.Jstrực tuyến Ngồi ra, nhóm chúng em nỗ lực nâng cao kiến thức thiết kế kiến trúc cho dự án Chúng em dự định học hỏi từ anh chị khóa trên, tự học từ nguồn trực tuyến Nhóm back-end học JavaScripts từ nguồn học trực tuyến Udemy để chúng em giúp gỡ lỗi phát triển dự án cách hiệu Với hỗ trợ công nghệ công cụ này, hy vọng nhóm chúng em hồn thành dự án cách thành công 40 Tài liệu tham khảo https://react-icons.github.io/react-icons/ https://www.npmjs.com/package/react-infinite-scroll-component https://www.npmjs.com/package/react-select https://www.npmjs.com/package/react-tag-autocomplete https://sass-lang.com/ https://redux-toolkit.js.org/ https://legacy.reactjs.org/docs/react-dom.html https://www.npmjs.com/package/react-circular-progressbar https://www.npmjs.com/package/react-lazy-load-image-component https://www.npmjs.com/package/react-player https://www.npmjs.com/package/react-router-dom github: iBihari/DACS_G6: nah (github.com) 41