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.
Giới thiệu
Đặt vấn đề
Quản lý một cơ sở dữ liệu lớn chứa thông tin về hàng ngàn phim, diễn viên, đạo diễn và nhiều loại dữ liệu khác là một thách thức lớn do tính phức tạp của dữ liệu.
Việc thu thập thông tin chi tiết về phim, bao gồm hình ảnh và video, có thể gặp phải các vấn đề liên quan đến bản quyền, do đó cần thiết phải có cơ chế cấp phép phù hợp để đảm bảo tuân thủ các quy định pháp lý.
Tương tác người dùng: Xây dựng trải nghiệm người dùng một 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 và đa nền tảng là yếu tố quan trọng, đảm bảo rằng trang web hoạt động mượt mà trên nhiều trình duyệt và thiết bị khác nhau, điều này mang lại một thách thức kỹ thuật đáng kể.
Tối ưu hóa tốc độ trang web là yếu tố quan trọng để giữ chân khách hàng, vì trang web hoạt động nhanh và mượt sẽ tạo trải nghiệm tốt hơn cho người dùng Để đảm bảo trang web không gặp lỗi hoặc tải chậm, cần thực hiện các biện pháp như nén hình ảnh, giảm thiểu mã nguồn và sử dụng các công cụ kiểm tra tốc độ Việc cải thiện tốc độ tải trang không chỉ giúp tăng cường sự hài lòng của khách hàng mà còn nâng cao thứ hạng SEO, từ đó thu hút nhiều lượt truy cập hơn.
Dữ liệu liên kết và cập nhật liên tục là yếu tố quan trọng để duy trì thông tin chính xác và mới nhất trên trang web, bao gồm cả thông tin về các bộ phim mới và nghệ sĩ Việc cập nhật thường xuyên giúp người dùng luôn tiếp cận được những thông tin hữu ích và kịp thời.
Cung cấp cơ chế tìm kiếm mạnh mẽ và khả năng lọc thông tin sẽ giúp người dùng dễ dàng truy cập và xem những thông tin mà họ quan tâm.
Tích hợp xã hội cho phép người dùng kết nối với các nền tảng mạng xã hội, giúp họ dễ dàng chia sẻ thông tin về phim và tương tác với cộng đồng.
● Responsive Design: thiết kế và triển khai trang web để nó có thể hoạt động mượt mà trên cả máy tính và điện thoại di động?
Xây dựng một giao diện đa ngôn ngữ và văn hóa sẽ giúp trang web thu hút một lượng lớn người dùng toàn cầu, nâng cao tính hấp dẫn và khả năng tiếp cận của nó.
Các giải pháp đã có
● Thiết kế giao diện và trải nghiệm người dùng: Áp dụng các nguyên tắc thiết kế
UX/UI để đảm bảo trải nghiệm tốt cho người xem
Sử dụng React Router để phân trang hiệu quả giữa các danh sách phim, đồng thời tối ưu hóa hình ảnh và áp dụng kỹ thuật tải trước giúp giảm thời gian tải trang.
Sử dụng thư viện React Video để xử lý video một cách linh hoạt, đồng thời tích hợp các API như YouTube API hoặc Vimeo API nhằm phát video từ các nguồn bên ngoài.
● Tìm kiếm và Lọc Phim: Sử dụng thư viện ReactJS như React-Select để xây dựng giao diện tìm kiếm và lọc đa dạng
● Đề xuất Phim: Sẽ đề xuất phim theo từng danh mục mà tất cả người dùng đã xem trước đó
Sử dụng Redux để quản lý trạng thái của thẻ và danh mục phim giúp tối ưu hóa quy trình phát triển Bằng cách tạo ra các component tái sử dụng cho thẻ và danh mục, bạn không chỉ giảm thiểu việc lặp lại mã nguồn mà còn nâng cao hiệu quả của dự án.
Để đảm bảo an toàn cho thông tin người dùng và dữ liệu trang web, việc áp dụng bảo mật mạnh mẽ là rất cần thiết Điều này bao gồm việc sử dụng mã hóa SSL, thiết lập kiểm soát truy cập nghiêm ngặt và theo dõi thường xuyên các vấn đề bảo mật.
● Responsive Design: Sử dụng media queries và responsive design để tối ưu hóa trang web cho các thiết bị di động.
Giải pháp đề xuất
● Tích hợp Dịch vụ Phim Nổi tiếng: Sử dụng API từ các dịch vụ như IMDb hoặc
TMDB để lấy thông tin chi tiết và đánh giá Hiển thị thông tin này một cách thân thiện và nhất quán trên trang web của bạn
● Đa Ngôn ngữ: Sử dụng thư viện react-i18next để hỗ trợ đa ngôn ngữ và quản lý chuỗi ngôn ngữ
● Chia sẻ và Bình luận: Sử dụng các API chia sẻ xã hội như ShareThis để tích hợp chức năng chia sẻ
● Tích hợp đa ngôn ngữ: Hỗ trợ nhiều ngôn ngữ và văn hóa để mở rộng đối tượng người dùng trên toàn thế giới
Chế độ Tối và Chế độ Ban Ngày có thể được quản lý hiệu quả bằng thư viện React Context, giúp người dùng chuyển đổi giữa hai chế độ này một cách dễ dàng Bên cạnh đó, việc tích hợp cơ chế lưu trữ cục bộ sẽ đảm bảo rằng trạng thái chế độ tối hoặc ban ngày của người dùng được lưu trữ và phục hồi mỗi khi họ truy cập ứng dụng.
Tích hợp xã hội giúp kết nối với các nền tảng mạng xã hội, cung cấp tính năng chia sẻ nhằm tăng cường sự tương tác và lan tỏa thông tin hiệu quả.
● Đánh giá và Đánh giá Phim: Sử dụng thư viện như React Rating để tạo giao diện đánh giá dễ sử dụng
Sử dụng thư viện react-player để tích hợp video từ nhiều nguồn khác nhau, hỗ trợ nền tảng đa phương tiện hiệu quả Kết hợp với các API như YouTube API và Vimeo API, bạn có thể phát video từ các dịch vụ phổ biến một cách dễ dàng.
To enhance performance, implement image optimization techniques, utilize lazy loading for data, and leverage Content Delivery Networks (CDNs) to boost page loading speed.
Giới thiệu một vài công nghệ sử dụng chính
ReactJS là một thư viện JavaScript do các kỹ sư của Facebook phát triển, được nhiều công ty nổi tiếng như Yahoo, Airbnb và cả Facebook, Instagram sử dụng để xây dựng sản phẩm Thư viện này đặc biệt phù hợp cho các dự án lớn với khả năng mở rộng tốt hơn so với các dự án nhỏ.
Tư tưởng của ReactJS tập trung vào việc phát triển các thành phần (components) có khả năng tái sử dụng, giúp đơn giản hóa việc chia nhỏ vấn đề và kiểm thử (testing) Điều này mang lại lợi ích trong việc quản lý và mở rộng ứng dụng một cách hiệu quả.
Trong phát triển ứng dụng web, Angular yêu cầu cấu trúc và cách viết code tối ưu cho 7 hệ thống Ngược lại, ReactJS giữ các components ở trạng thái stateless, giúp quản lý dễ dàng như một trang HTML tĩnh Các components này không có trạng thái (state) mà chỉ nhận đầu vào từ bên ngoài, hiển thị dựa trên các đầu vào đó, điều này giải thích cho tính tái sử dụng và dễ bảo trì của chúng.
ReactJS là một thư viện hiển thị view chú trọng đến hiệu năng, giúp giải quyết vấn đề hiển thị dữ liệu lớn nhanh chóng Khác với các framework MVVM khác, React chỉ cập nhật những phần thay đổi, nhờ vào công nghệ virtual DOM Virtual DOM hoạt động như một bản sao ảo của DOM thật, cho phép React so sánh và thực hiện các thay đổi cần thiết một cách hiệu quả, từ đó mang lại hiệu suất tối ưu cho các ứng dụng web.
Ví dụ: nếu chúng ta đang xem một danh sách có 20 sản phẩm được hiển thị bởi
ReactJS cho phép hiển thị lại chỉ sản phẩm thứ hai khi có sự thay đổi, trong khi 19 sản phẩm còn lại giữ nguyên mà không cần reload trang Công nghệ "virtual DOM" của React giúp tăng hiệu năng bằng cách tạo ra một hiển thị ảo, sau đó so sánh sự khác biệt với DOM hiện tại và thực hiện các bản vá cần thiết.
Khi phát triển ứng dụng với React hoặc các dự án Single Page, việc quản lý trạng thái ứng dụng là một thách thức lớn Sau khi tìm hiểu về một số thư viện hỗ trợ, tôi đã quyết định chọn Redux để giải quyết vấn đề này.
Redux là thư viện JavaScript chuyên quản lý trạng thái ứng dụng, được phát triển dựa trên tư tưởng của ngôn ngữ Elm và kiến trúc Flux do Facebook giới thiệu Redux thường được sử dụng kết hợp hoàn hảo với React, nhưng cũng có thể áp dụng cho các framework khác như Angular và Backbone.
ReactJS là một thư viện Javascript chuyên dụng để phát triển giao diện người dùng, dựa trên cấu trúc các component nhỏ Trong React, có hai loại dữ liệu chính là state và props State đại diện cho trạng thái nội bộ của component, có tính chất riêng tư và chỉ có thể được thay đổi bên trong component đó Ngược lại, props là dữ liệu bên ngoài, không bị kiểm soát bởi component, và được truyền từ component cha xuống component con.
ReactJS cho phép xây dựng các ứng dụng đơn trang (single-page applications), trong đó tất cả các thành phần của ứng dụng được lưu trữ trong một trang duy nhất Khi ứng dụng trở nên phức tạp theo thời gian, việc quản lý trạng thái (state) sẽ trở nên ngày càng khó khăn hơn.
Sự khác biệt với việc sử dụng Redux và không sử dụng Redux được miêu tả bằng hình vẽ dưới đây:
JSX là cú pháp mở rộng của JavaScript, kết hợp giữa JavaScript và XML Nó cho phép chuyển đổi cú pháp gần giống XML thành JavaScript, giúp lập trình viên dễ dàng viết mã hơn.
ReactJS bằng cú pháp của XML thay vì phải dùng JavaScript
Thay vì phải truy xuất các thẻ HTML thông qua thuộc tính như id, class hay name, giờ đây bạn có thể dễ dàng sử dụng các thẻ HTML trực tiếp trong mã JavaScript.
Tất cả những gì ta cần làm đó là viết 1 đống thẻ html và sau đó đặt chúng vào trong một biến, một function hoặc một class chẳng hạn
Giới thiệu react-router-dom:
React-router-dom là thư viện quan trọng trong React, giúp quản lý các route trong ứng dụng một cách hiệu quả Nó cung cấp các thành phần dễ sử dụng để định nghĩa và chuyển đổi giữa các route, đồng thời là một phần của hệ sinh thái react-router, hỗ trợ điều hướng và quản lý URL trong ứng dụng React.
Here are some key features of react-router-dom: BrowserRouter and HashRouter BrowserRouter utilizes the HTML5 History API to monitor changes in the URL.
11 o HashRouter: Sử dụng hash URL để theo dõi các thay đổi o Route:
Định nghĩa một route trong ứng dụng React bao gồm việc chỉ định một đường dẫn cụ thể và một component tương ứng sẽ được hiển thị khi đường dẫn đó được truy cập Sử dụng Link và NavLink để điều hướng giữa các route trong ứng dụng.
Link: Dùng để tạo các liên kết giữa các route mà không làm tải lại toàn bộ trang
NavLink: Tương tự như Link, nhưng cung cấp thêm các tính năng như xác định một phong cách CSS khi route được chọn o Switch:
Switch là một thành phần quan trọng trong React Router, giúp bao bọc các Route và đảm bảo chỉ có một Route đầu tiên khớp với URL được hiển thị Điều này ngăn chặn việc hiển thị đồng thời nhiều components, tạo sự rõ ràng cho giao diện người dùng Các tham số đường dẫn và tham số truy vấn (Params và Query) cũng đóng vai trò quan trọng trong việc định nghĩa các Route và xử lý dữ liệu trong ứng dụng.
Bạn có thể định nghĩa tham số trong đường dẫn và truy vấn URL để truyền dữ liệu giữa các components o Redirect:
Các tính năng cơ bản của SCSS
SCSS cung cấp nhiều tính năng nổi bật cho người dùng, cho phép tạo ra những phong cách linh hoạt và dễ dàng hơn Những tính năng này giúp người dùng nhận ra sự khác biệt rõ rệt giữa SCSS và SASS.
1.5.1 Xếp chồng (Nested Rules) – SCSS là gì?
Tính năng nổi bật của SCSS được đánh giá cao trong lập trình, thường xuyên được sử dụng để cải thiện hiệu quả mã nguồn Bạn có thể tham khảo các đoạn code áp dụng tính năng này để nhận thấy sự khác biệt rõ rệt trong quá trình phát triển.
Sử dụng biến trong SCSS rất đơn giản; bạn chỉ cần đặt tên cho biến và bắt đầu bằng dấu $ Các biến này chứa các giá trị thường được sử dụng nhiều lần, như mã màu, font chữ và kiểu chữ.
1.5.3 Quy tắc Mixin – SCSS là gì?
Mixin là một tính năng quan trọng trong SCSS, cho phép người dùng tạo ra các hàm có thể tái sử dụng Người dùng có thể truyền tham số vào mixin để áp dụng nhiều thuộc tính đã quy ước cho bất kỳ thành phần nào Mixin được xem là một cơ chế phổ biến trong SASS, giúp tối ưu hóa mã nguồn và tăng tính linh hoạt trong thiết kế.
Khi đề cập đến tính năng này, người dùng ngay lập tức liên tưởng đến lập trình hướng đối tượng (OOP) Với OOP, các lớp (class) đã được định nghĩa sẵn, cho phép người dùng dễ dàng hoàn thiện mã nguồn bằng cách sử dụng cú pháp @extend class cho các thẻ cần thiết.
Tính năng tương tự như SCSS cũng có mặt trong SASS, cho phép bạn sử dụng cú pháp hữu ích này trong các dự án Nó hoạt động giống như việc bạn yêu cầu hoặc bao gồm các tệp vào những tệp khác.
Thiết kế và triển khai
Các yêu cầu chức năng
● Tìm kiếm và Duyệt Phim:
Công cụ tìm kiếm mạnh mẽ với khả năng lọc và sắp xếp
Trình duyệt phim dựa trên nhiều tiêu chí như thể loại, năm sản xuất, đạo diễn, và diễn viên
● Đánh Giá: Đánh giá rating từ người xem
Trang thông tin chi tiết về mỗi phim, bao gồm diễn viên, đạo diễn, thể loại, ngày phát sóng, đánh giá, và hình ảnh
● Tương Thích và Đa Nền Tảng:
Tích hợp đa nền tảng, từ máy tính đến thiết bị di động
Tương thích với nhiều trình duyệt web khác nhau
Bảng xếp hạng các phim phổ biến và được đánh giá cao
Cập nhật thông tin mới về phim, diễn viên, và movieTV,
● An Toàn và Bảo Mật:
Bảo vệ thông tin người dùng và đảm bảo an toàn về mặt bảo mật.
Các yêu cầu phi chức năng
Trang web phải phản hồi nhanh chóng và không có độ trễ lớn khi người dùng thực hiện các thao tác
Hỗ trợ một lượng lớn người dùng đồng thời
Cung cấp các biện pháp bảo mật như mã hóa dữ liệu người dùng và giải pháp chống tấn công
Đồng bộ hóa dữ liệu là quá trình quan trọng nhằm đảm bảo rằng thông tin giữa các thành phần khác nhau trong hệ thống luôn được cập nhật và nhất quán, ngăn chặn tình trạng mất mát dữ liệu.
Dự tính và triển khai cơ sở hạ tầng để có thể mở rộng hệ thống khi có nhu cầu
Hỗ trợ nhiều trình duyệt và hệ điều hành khác nhau để đảm bảo rằng nhiều người dùng có thể truy cập trang web một cách thuận lợi
● Tương Thích Trình Duyệt: Đảm bảo trang web hoạt động mượt mà và có giao diện thân thiện trên các thiết bị di động
Để đảm bảo tuân thủ pháp luật, trang web cần phải tuân thủ các quy định liên quan, đặc biệt là về bản quyền nội dung và bảo vệ thông tin cá nhân.
Các ràng buộc (Constraints)
2.3.1 Các ràng buộc về triển khai
20 Ứng dụng cần hoạt động được trên nhiều thiết bị và trình duyệt khác nhau
Tiêu Chuẩn Giao Tiếp: Sử dụng các tiêu chuẩn giao tiếp nhất định (ví dụ: RESTful API)
Để đảm bảo hiệu suất tối ưu, ứng dụng cần cung cấp khả năng phát video mượt mà, không gặp tình trạng giật lag, đặc biệt trong bối cảnh có nhiều người dùng truy cập đồng thời.
Khả năng Mở Rộng: Hệ thống phải có khả năng mở rộng khi cần thiết
Duyệt Di Động: Phải tương thích và thân thiện với các thiết bị di động
2.3.2 Các ràng buộc kinh tế
Việc phát triển và duy trì ứng dụng cần tài nguyên nhất định
2.3.3 Các ràng buộc về đạo đức
● Ràng Buộc Pháp Luật và Chuẩn Mực:
Bản Quyền: Tuân thủ các quy định bản quyền và sử dụng dữ liệu theo quy định pháp luật
An Toàn Thông Tin: Bảo vệ thông tin cá nhân theo các chuẩn mực an ninh
● Ràng Buộc Bảo mật: Ứng dụng cần bảo vệ thông tin cá nhân của người dùng, như thông tin tài khoản, lịch sử xem phim, v.v.
Mô hình hệ thống / Thiết kế giải pháp
Các công nghệ sử dụng chính:
Sử dụng ReactJS để xây dựng giao diện người dùng
Các thành phần UI như danh sách phim, chi tiết phim, tìm kiếm, và giao diện người dùng khác
Sử dụng thư viện quản lý trạng thái như Redux để quản lý trạng thái toàn cầu
Một server backend được thiết lập để xử lý các yêu cầu từ frontend, đồng thời gọi API nhằm lấy dữ liệu phim Nó cũng đảm nhiệm việc quản lý người dùng, đánh giá và cung cấp các tính năng khác liên quan.
Gọi các API từ các nguồn dữ liệu bên ngoài để lấy thông tin về phim (ví dụ: The Movie Database API)
Xây dựng các API nội bộ để xử lý các yêu cầu từ frontend
Sử dụng thư viện như Axios để thực hiện các yêu cầu HTTP đến API
Xử lý các trạng thái như loading, thành công, và lỗi khi gọi API
Sử dụng caching để giảm thời gian tải dữ liệu và cải thiện hiệu suất
Tối ưu hóa hình ảnh và tài nguyên để giảm dung lượng trang
2.4.1 Các kịch bản của hệ thống (Use-cases)
Hình 1 Biểu đồ Use-case Tổng quát 2.4.2 Mô hình Use-case
Hình 2 Use-case Đăng nhập
Khi người dùng truy cập vào trang web, họ có thể đăng nhập vào tài khoản của mình Nếu thông tin đăng nhập chính xác, hệ thống sẽ thông báo thành công và cập nhật màn hình tương tác.
Nếu nhập sai thông tin thì hệ thống sẽ báo lỗi và yêu cầu nhập lại
Hình 3 Use-case Tìm kiếm
Khi người dùng sử dụng chức năng tìm kiếm, giao diện tìm kiếm sẽ xuất hiện, cho phép họ chọn giữa Movie, TV Series hoặc People Sau khi nhập từ khóa và thực hiện tìm kiếm, hệ thống sẽ hiển thị những bộ phim phù hợp với tiêu chí đã chọn.
Nếu không tìm thấy phim phù hợp thì sẽ thông báo không tìm thấy
Hình 4 Use-case Xem Phim
Khi người dùng chọn một bộ phim, màn hình sẽ hiển thị thông tin chi tiết về phim đó, bao gồm diễn viên, tên phim, năm sản xuất và các phim đề xuất liên quan.
Người dùng có thể nhấn vào hình diễn viên để xem thông tin về diễn viên đó và các bộ phim của người đó
Khi người dùng nhấn vào lưu yêu thích thì hệ thống sẽ thêm phim này vào dữ liệu của người dùng
Khi nhấn nút “xem” thì sẽ chuyển tới phần xem video
Kéo xuống dưới là phần bình luận
Hình 5 Use-case Theme
Khi người dùng nhấn vào biểu tượng theme thì giao diện sẽ chuyển sang chủ đề sáng hoặc tối
Hình 6 Use-case Yêu thích
Khi người dùng nhấn vào "Favourist", họ sẽ được chuyển đến giao diện phim yêu thích, nơi có thể xóa phim khỏi danh sách yêu thích hoặc truy cập vào trang thông tin chi tiết của từng bộ phim.
Hình 7 Use-case Đánh giá
Khi người dùng để lại bình luận trên trang phim, dữ liệu sẽ được lưu trữ trong mục “Reviews” Bằng cách nhấn vào đây, người dùng có thể xem lại các bình luận trước đó Họ cũng có tùy chọn để xóa hoặc truy cập lại bộ phim có chứa bình luận đó.
2.4.2.7 Use-case Đổi mật khẩu
Hình 8 Use-case Đổi mật khẩu
Khi người dùng chọn đổi mật khẩu, giao diện sẽ hiển thị yêu cầu nhập mật khẩu hiện tại và mật khẩu mới Người dùng cần nhập lại mật khẩu mới và nhấn ok Nếu mật khẩu cũ chính xác và hai mật khẩu mới khớp nhau, hệ thống sẽ thông báo thành công Ngược lại, người dùng sẽ được yêu cầu nhập lại thông tin.
2.4.3 Các biểu đồ tuần tự
2.4.3.1 Biểu đồ tuần tự cho Use-case Đăng nhập
Hình 9 Biểu đồ tuần tự cho Use case Đăng nhập
2.4.3.2 Biểu đồ tuần tự cho Use-case Tìm kiếm
Hình 10 Biểu đồ tuần tự cho Use-case Tìm kiếm
2.4.3.3 Biểu đồ tuần tự cho Use-case Xem phim
Hình 11 Biểu đồ tuần tự cho Use-case Xem phim
2.4.3.4 Biểu đồ tuần tự cho Use-case Theme
Hình 12 Biểu đồ tuần tự cho Use-case Theme
2.4.3.5 Biểu đồ tuần tự cho Use-case Yêu thích
Hình 13 Biểu đồ tuần tự cho Use-case Yêu thich
2.4.3.6 Biểu đồ tuần tự cho Use-case Đánh giá
Hình 14 Biểu đồ tuần tự cho Use-case Đánh giá
2.4.3.7 Biểu đồ tuần tự cho Use-case Đổi mật khẩu
Hình 15 Biểu đồ tuần tự cho Use-case Đổi mật khẩu
2.4.4 Các màn hình giao diện người dùng
Hình 16 Màn hình chính
Hình 17 Bảng xếp hạng trong màn hình chính
Hình 20 Danh sách phim yêu thích
Hình 22 Danh sách các đánh giá của người dùng
Hình 23 Đổi mật khẩu
Một số thành phần khác của đồ án
Kế hoạch dự án
TIÊU ĐỀ CÔNG VIỆC NGƯỜI
THỜI GIAN ĐỘ HOÀN THIỆN
1 Lên ý tưởng và thiết lập dự án
1.1 Đặt vấn đề, tìm kiếm giải pháp Cả nhóm 12/09/23 ###### 2 100% 1.2 Xây dựng kế hoạch, và công nghệ Cả nhóm 14/09/23 ###### 9 100%
1.3 Xây dựng các chức năng Cả nhóm 15/09/23 ###### 6 100% Xây dựng kịch bản hệ thống Quân, Huy 15/09/23 ###### 5 90%
1.1 Tìm hiểu về Reactjs Cả nhóm 21/09/23 ###### 2 100%
2 Tiến hành xây dựng dự án và code
2.1.1 Xây dựng sơ đồ usecase Quân, Minh 25/09/23 ###### 3 75%
2.1.2 Thiết kế giao diện Cả nhóm 28/09/23 ###### 9 100%
2.1.4 Thiết kế cơ sở dữ liệu Huy, Bắc 02/10/23 ###### 2 100% 2.2.1 Xây dựng backend Quân, Minh 04/10/23 ###### 16 100% 2.2.2 Xây dựng giao diện cả nhóm 06/10/23 ###### 14 80%
2.3.3 Kết nối api tới web Huy 20/10/23 ###### 8 95%
3 Kiểm Thử, sửa lỗi và hoàn thiện báo cáo
3.1.2 Kiểm thử chức năng web Cả nhóm 30/10/23 ###### 1 88% 3.1.3 Kiểm thử chức năng Minh, Bắc 01/11/23 ###### 1 90% 3.1.4 Kiểm tra độ bảo mật và logic Cả nhóm 02/11/23 ###### 1 100% 3.2.1 Sửa và kiểm thử tính năng Quân, Huy 01/11/23 ###### 2 100%
3.3.1 Viết báo cáo: công nghệ sử dụng Cả nhóm 03/11/23 ###### 1 100%
3.3.2 Viết báo cáo: demo sản phẩm Cả nhóm 06/11/23 ###### 1 100%
3.4 Kiểm tra và hoàn thiện báo cáo Cả nhóm 08/11/23 ###### 1 100%
3.5 Viết slider và chuẩn bị thuyết trình Bắc 09/11/23 ###### 2 100%
Hình 26 Bảng phân chia công việc
• Biểu đồ kế hoạch dự án
Figure 1 Biểu đồ kế hoạch thực hiện dự án
Đảm bảo thực hiện đúng làm việc nhóm
Dự án của chúng em được triển khai theo quy trình rõ ràng và hiệu quả, với mỗi thành viên trong nhóm đảm nhận vai trò cụ thể như lãnh đạo nhóm, người quản lý dự án và chuyên gia kỹ thuật Chúng em đã xây dựng một kế hoạch công việc chi tiết, xác định các nhiệm vụ, mục tiêu và thời hạn cụ thể Đồng thời, chúng em cũng đã lên lịch cho các cuộc họp, ghi chép biên bản cuộc họp, phát triển phần mềm và tổ chức các sự kiện quan trọng khác.
Chúng em sử dụng Zalo làm công cụ truyền thông giao tiếp chính, kết hợp với việc tổ chức các cuộc họp định kỳ để cập nhật tình trạng công việc và giải quyết các vấn đề phát sinh Việc thống nhất sử dụng Zalo giúp nâng cao hiệu quả trong quá trình trao đổi thông tin và phối hợp công việc.
HTML, JavaScripts, ReactJS, MongoDB và sử dụng Github để trao đổi mã nguồn Chia
Chia nhỏ công việc thành các phần nhỏ hơn giúp từng thành viên dễ dàng theo dõi và đóng góp Điều này đảm bảo mọi người đều nắm rõ nhiệm vụ của mình cũng như các mối quan hệ phụ thuộc giữa các nhiệm vụ.
Chúng tôi sử dụng Github và Jira để quản lý dự án, với quy trình làm việc chung được xác định rõ ràng từ kiểm tra mã nguồn, kiểm thử đến triển khai Tất cả thành viên đều tuân thủ quy trình này, đảm bảo có quy trình kiểm thử đầy đủ và chi tiết nhằm không bỏ sót vấn đề nào của sản phẩm Chúng tôi cũng thực hiện đánh giá các thành viên để kịp thời cải thiện dự án và quy trình làm việc.
Nhóm chúng em khuyến khích sự sáng tạo và chia sẻ ý kiến, tạo ra một môi trường làm việc tích cực và thoải mái để mọi người có thể làm việc hiệu quả Với những nguyên tắc và quy trình này, chúng em hy vọng sẽ đạt được mục tiêu của dự án một cách hiệu quả và kịp thời.
Các vấn đề về đạo đức và làm việc chuyên nghiệp
Nhóm chúng em xin đảm bảo các điều sau:
Bản quyền và sở hữu trí tuệ là yếu tố quan trọng khi xây dựng website xem phim, đảm bảo tất cả các bộ phim và nội dung video đều tuân thủ quy định về bản quyền Việc tuân thủ các quy định này không chỉ giúp bảo vệ quyền lợi của tác giả mà còn tránh các vấn đề pháp lý cho website.
Quyền riêng tư của người dùng là rất quan trọng, vì vậy cần đảm bảo rằng thông tin cá nhân của họ được bảo vệ và không bị tiết lộ mà không có sự đồng ý.
• Chất lượng nội dung: Đảm bảo nội dung được cung cấp đáp ứng được yêu cầu về chất lượng hình ảnh
• Đạo đức kinh doanh: Đảm bảo thông tin chính xác về các sản phẩm và dịch vụ, không lừa dối khách hàng và 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 và cung cấp trải nghiệm tốt cho người dùng
• Văn hóa và chuẩn mực xã hội: Đảm bảo tôn trọng các giá trị văn hóa, không đăng tải nội dung phân biệt đối xử hoặc xúc phạm
Chúng tôi xin cam kết rằng đồ án này hoàn toàn do chúng tôi thực hiện, và tất cả các nội dung tham khảo cũng như trích dẫn trong luận văn đã được liệt kê đầy đủ trong phần tham khảo.
Chúng tôi cam kết không sử dụng sản phẩm từ đồ án vào các hoạt động trái pháp luật, vi phạm đạo đức, hoặc gây ảnh hưởng tiêu cực đến cộng đồng và xã hội.
Ký tên Bắc Minh Huy Quân
Tác động xã hội
Website này mang đến cho người dùng cơ hội truy cập vào kho tàng nội dung giải trí phong phú, giúp họ khám phá những thể loại phim mới, tìm hiểu các nền văn hóa đa dạng và tiếp cận những quan điểm sáng tạo khác nhau.
Tương tác xã hội là yếu tố quan trọng, cho phép người dùng bình luận và thảo luận về các bộ phim, từ đó tạo cơ hội kết nối giữa những người có sở thích chung.
Việc xem phim trực tuyến quá mức có thể gây ra nhiều vấn đề về sức khỏe tâm thần, như cảm giác đố kỵ và sự không hài lòng với cuộc sống Nghiên cứu cho thấy rằng thói quen này có thể dẫn đến các triệu chứng ADHD, trầm cảm, lo âu và thiếu ngủ.
Xem phim trực tuyến có thể gây ra các vấn đề về bản quyền, đặc biệt là khi các bộ phim được phát sóng mà không có sự cho phép từ chủ sở hữu bản quyền Việc này không chỉ vi phạm luật pháp mà còn ảnh hưởng đến quyền lợi của các nhà sản xuất và nghệ sĩ.
Xem phim trực tuyến đang tạo ra cơ hội mới cho ngành công nghiệp phim điện ảnh, đồng thời cũng đặt ra thách thức lớn khi phải cạnh tranh với các dịch vụ trực tuyến.
Kế hoạch cho kiến thức mới và kế hoạch học tập
Trong quá trình xây dựng website xem phim trực tuyến, các thành viên trong nhóm đã có cơ hội học hỏi và nâng cao kỹ năng Một số người đã học ngôn ngữ lập trình JavaScript và ReactJS từ các nguồn trực tuyến để phát triển phần front-end Đồng thời, một thành viên có kinh nghiệm với kiến trúc MVC đã chia sẻ kiến thức của mình cho các thành viên khác trong nhóm back-end.
Chúng em sẽ sử dụng Node.js cho phần back-end, vì vậy tất cả các thành viên trong nhóm đang tìm hiểu Node.js trực tuyến Ngoài ra, nhóm cũng đang nỗ lực nâng cao kiến thức về thiết kế kiến trúc cho dự án, dự định học hỏi từ các anh chị khóa trên và tự học từ các nguồn trực tuyến.
Nhóm back-end đang học JavaScript qua các khóa học trực tuyến trên Udemy để hỗ trợ lẫn nhau trong việc gỡ lỗi và phát triển dự án hiệu quả Với sự trợ giúp từ các công nghệ và công cụ hiện đại, nhóm hy vọng sẽ hoàn thành dự án thành công.