Báo cáo project 2 đề tài thiết kế website xem phim

Các nhà cung cấp dịch vụ phim giảitrí lớn nhất phải kể đến như Disney, Netflix, Hulu, Amazon Prime,… Mặc dù có thể kiếm được danh thu khủng hằng năm nhờ vào việc cung cấp các dịch vụ xem

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

- &□□

□□ -BÁO CÁO PROJECT 2

Đề tài: Thiết kế website xem phim

Giảng viên hướng dẫn: ThS Lê Đức Trung

Viện: Công nghệ thông tin và truyền thông

Sinh viên thực hiện Hoàng Hữu Phúc - 20194818

HÀ NỘI, tháng 7, năm 2022

MỤC LỤC

LỜI MỞ ĐẦU 3

CHƯƠNG I GIỚI THIỆU 4

1.1 Đề tài 4

1.2 Ngôn ngữ và công nghệ sử dụng 4

1.2.1 Thư viện React 4

1.2.2 Framework Next.js 4

1.2.3 TypeROM 5

1.2.4 Postgres 5

1.2.5 Express 5

1.2.6 Redis 5

CHƯƠNG II PHÂN TÍCH BÀI TOÁN 7

2.1 Phân tích yêu cầu 7

2.2 Đặc tả phần mềm 7

2.3 Sơ đồ Use-Case 10

2.3.1 Sơ đồ Use-case tổng quan 10

2.3.2 Use-case chi tiết 11

CHƯƠNG III THIẾT KẾ VÀ XÂY DỰNG PHẦN MỀM 15

3.1 Giao diện 15

3.1.1 Giao diện Trang Chủ 15

3.1.2 Giao diện đăng nhập 17

3.1.3 Trang thông tin phim 17

3.1.4 Trang xem phim 18

3.2 Cơ sở dữ liệu 19

3.2.1 Sơ đồ bảng quan hệ 19

3.3 Thiết kế API 19

3.3.1 API xác thực 19

3.3.2 API phim 19

CHƯƠNG IV TỔNG KẾT ĐÁNH GIÁ VÀ HƯỚNG PHÁT TRIỂN 21

4.1 Những điểm chương trình đã làm được 21

4.2 Những điểm chưa làm được 21

4.3 Hướng phát triển của chương trình 21

LỜI MỞ ĐẦU

Hiện nay trên thị trường đã xuất hiện nhiều phần mềm giải trí giúp người dùng thư giãn Đặc biệt là mảng phim điện ảnh và hoạt hình thu hút rất nhiều người xem và ghé thăm các trang website cung cấp dịch vụ này Các nhà cung cấp dịch vụ phim giảitrí lớn nhất phải kể đến như Disney, Netflix, Hulu, Amazon Prime,…

Mặc dù có thể kiếm được danh thu khủng hằng năm nhờ vào việc cung cấp các dịch vụ xem phim cho người dùng, các công ty này lại gặp một nhược điểm đó là họ cung cấp phim trên các nền tảng riêng lẻ Người dùng muốn trải nghiệm hết tất cả các phim thì phải đăng ký nhiều tài khoản khác nhau Việc lại chính là rào cản lớn để một khách hàng nào đó sẵn sảng bỏ tiền vào dịch vụ của họ

Và các trang web của họ lại chỉ cung cấp một dịch vụ duy nhất đó là xem phim

mà bỏ qua một nỗi khao khát lớn của người xem – đó là nêu ra cảm nghĩ, bình phẩm của cá nhân sau khi đã thưởng thức một bộ phim nào đó Cũng như gắn kết các người dùng trên hệ thống với nhau Để thỏa mãn việc này thì người dùng đã tạo ra các hội nhóm trên mạng xã hội như Facebook – thứ đã làm rất tốt công việc này

Nên mong muốn của em khi nghiên cứu và lập trình ra ứng dụng này, thứ nhất là thỏa mãn niềm đam mê với điện ảnh Thứ hai là viết thêm vào những tính năng độc nhất của website – thứ mà các nền tảng kia chưa có Và cuối cùng là nếu mai sau trong tương lai sản phẩm của em có thể góp mặt trên thị trường thì mong nó sẽ mang đến trải nghiệm tốt nhất cho những người xem như em

Vì các công nghệ và ngôn ngữ em sử dụng đều rất mới lạ với em, nên em mới chỉlàm được đến mức độ này Em sẽ cố gắng hoàn thiện tất cả các chức năng để sản phẩm trở nên tốt hơn

CHƯƠNG I GIỚI THIỆU

1.2 Ngôn ngữ và công nghệ sử dụng

1.2.1 Thư viện React

ReactJS được hiểu là một thư viện trong đó có chứa nhiều JavaScript mã nguồn

mở và cha đẻ của ReactJS đó chính là một ông lớn với cái tên ai cũng biết đó chính là Facebook Mục đích của việc tạo ra ReactJS là để tạo ra những ứng dụng website hấp dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu Và mục đích chủ chốt của ReactJS đó chính là mỗi website khi đã sử dụng ReactJS thì phải chạy thật mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện

1.2.2 Framework Next.js

a) Giới thiệu

Next.js là một framework front-end React được phát triển dưới dạng source bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo trang web static Next.js xây dựng dựa trên thư viện React, có nghĩa là các ứng dụng Next.js

open-sử dụng core của React và chỉ thêm các tính năng bổ sung Việc triển khai ứng dụng SSR cho phép máy chủ truy cập tất cả dữ liệu được yêu cầu và xử lý JavaScript cùng nhau để hiển thị trang Sau đó, trang được gửi lại toàn bộ cho trình duyệt và ngay lập tức được hiển thị SSR cho phép các trang web load trong thời gian nhỏ nhất và tăng trải nghiệm người dùng với khả năng phản hồi nhanh hơn

b) Tại sao lại sử dụng Next.js ?

Ưu điểm chính của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO Với tất cả thông tin trên server, nó sẽ xử lý để generate ra thông tin HTML của trang/ Sau đó Client có thể gửi một yêu cầu đến Server và nhận toàn bộ trang HTML thay vì yêu cầu từng thành phần riêng lẻ với Client Render

1.2.3 TypeROM

TypeORM là một ORM có thể chạy trên các nền tảng NodeJS, Browser,

Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo và Electron và còn dùng

được với TypeScript và JavaScript (ES5, ES6, ES7, ES8) Công cụ ra đời nhằm hỗ trợcác tính năng JavaScript mới nhất, và cung cấp các tính năng bổ sung giúp bạn phát triển ứng dụng tích hợp cơ sở dữ liệu – từ các ứng dụng nhỏ với chỉ vài table đến các ứng dụng doanh nghiệp quy mô lớn có nhiều cơ sở dữ liệu.

1.2.4 Postgres

PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ-đối tượng relational database management system) có mục đích chung, hệ thống cơ sở dữ liệu

(object-mã nguồn mở tiên tiến nhất hiện nay

PostgreSQL không yêu cầu quá nhiều công tác bảo trì bởi có tính ổn định cao

Do đó, nếu bạn phát triển các ứng dụng dựa trên PostgreSQL, chi phí sở hữu sẽ thấp hơn so với các hệ thống quản trị dữ liệu khác

PostgreSQL sở hữu một hệ tính năng đa dạng giúp hỗ trợ các nhà phát triển xâydựng app, các nhà quản trị bảo vệ toàn vẹn dữ liệu, và tạo ra một môi trường chịu lỗi fault-tolerant giúp bạn quản lý dữ liệu bất kể tập dữ liệu lớn hay nhỏ Bên cạnh hệ thống nguồn mở và miễn phí, PostgreSQL cũng có khả năng mở rộng tuyệt vời Ví dụ,bạn có thể định nghĩa các kiểu dữ liệu riêng của bạn, xây dựng các hàm tùy chỉnh, hayviết mã từ các ngôn ngữ lập trình khác nhau mà không cần biên dịch lại cơ sở dữ liệu!

1.2.5 Express

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

Trên thực tế, nếu không sử dụng Express.js, bạn sẽ phải thực hiện rất nhiều bước lập trình phức tạp để xây dựng nên một API hiệu quả 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

1.2.6 Redis

Redis là một cơ sở dữ liệu giá trị quan trọng thường được xếp vào nhóm cơ sở

dữ liệu NoSQL Redis là một cơ sở dữ liệu trong bộ nhớ, có nghĩa là dữ liệu được lưu trữ trên bộ nhớ RAM của máy chủ lưu trữ Điều này làm cho Redis nhanh bởi vì nó không phải chờ cho ổ cứng truyền thống tìm kiếm và đọc nhiều lần

Là một cơ sở dữ liệu NoSQL, Redis cho phép bạn tạo cấu trúc dữ liệu ít lược

đồ phù hợp với nhu cầu ứng dụng của bạn Bạn có thể sử dụng Redis cho những cái đơn giản, như tạo một bộ đếm lượng khách truy cập, hoặc để biết thêm thông tin, như lưu trữ thông tin người dùng

Redis hữu dụng khi bạn cần một cái gì đó thật sự rất nhanh Redis có thể được

sử dụng cho Caching, Queuing, Pub/Sub và Machine learning

CHƯƠNG II PHÂN TÍCH BÀI TOÁN

2.1 Phân tích yêu cầu

a Về phía người dùng

- Trang web cho phép người dùng tạo tài khoản và đăng nhập vào tài khoản

đã tạo Tài khoản giúp định danh người dùng và lưu trữ các thông tin liên quan đến người dùng

- Trang web cung cấp thông tin về các bộ phim như tên phim, ngày phát hành, mô tả ngắn gọn, …

- Người dùng có thể xem phim trên trang web của hệ thống

- Người dùng có thể kết bạn với người khác và lưu họ vào danh sách bạn bè

Sẽ có kênh chat cũng như nhóm chat để người dùng có thể giao tiếp

- Người dùng tạo các nhóm để thảo luận và bàn về các chủ để liên quan đến phim

- Người dùng có thể tra cứu lịch sử xem phim sau khi đã đăng nhập thành công vào web

b Về phía người quản trị

- Cho phép người quản trị thêm phim mới vào kho dữ liệu

- Sửa và cập nhật các thông tin của từng phim nếu cần thiết

- Theo dõi lượng người xem của từng phim trong kho dữ liệu

+ Module nhận email và mật khẩu nhập và gửi cho bên server

+ Server sẽ kiểm tra email, mật khẩu và trả về thông báo

- Đầu ra:

+ Thông báo đăng nhập thành công và chuyển về trang chủ

+ Thông báo đăng nhập thất bại khi người dùng nhập sai tài khoản hoặc mật khẩu

+ Thông báo tài khoản không tồn tại và yêu cầu người dùng đăng ký tài khoản

+ Thêm phim vào danh sách ưu thích:

- Người dùng thêm phim vào danh sách ưu thích

- Đầu vào: id của một bộ phim

- Quá trình xử lý:

+ Module nhận id gửi đến cho server

+ Server thêm id của bộ phim đó vào bảng dữ liệu lịch sử của người dùng

- Đầu ra:

+ Thông báo đã thêm thành công

+ Tra cứu lịch sử xem phim:

- Người dùng xem lịch sử các phim đã xem

- Đầu vào: token được lưu trong cookie của trình duyệt

- Quá trình xử lý:

+ Server nhận cookie và tách token từ cookie

+ Server trích xuất thông tin người dùng từ cookie và lấy dữ liệu xem phim của người dùng đó

+ Module nhận email và mật khẩu nhập và gửi cho bên server

+ Server sẽ kiểm tra email, mật khẩu và trả về thông báo

- Đầu ra:

+ Thông báo đăng nhập thành công và chuyển về trang chủ

+ Thông báo đăng nhập thất bại khi người dùng nhập sai tài khoản hoặc mật khẩu

+ Thông báo tài khoản không tồn tại và yêu cầu người dùng đăng ký tài khoản

+ Tìm kiếm:

- Người dùng tìm kiếm phim dựa trên tên của bộ phim

- Đầu vào: tên hoặc cụm từ nếu người dùng không nhớ tên

- Quá trình xử lý:

+ Module nhận ký tự thanh tìm kiếm

+ Server sẽ tìm kiếm phim dựa trên cụm từ mà module gửi đến

- Người dùng gửi lời kết bạn với người dùng khác trên website

- Đầu vào: id của người muốn kết bạn

- Quá trình xử lý:

+ Module nhận id của người mà người dùng muốn kết bạn

+ Server gửi thông báo muốn xác nhận kết bạn với người kia và chờ xác nhận

2.3 Sơ đồ Use-Case

2.3.1 Sơ đồ Use-case tổng quan

2.3.2 Use-case chi tiết

a Use-case Quản lý kho phim

Tên use-case Quản lý kho phim

Tác nhân Quản trị viên

Mô tả Quản trị viên thêm, sửa xóa dữ liệu của phim

Điều kiện đầu

vào Quản trị viên đăng nhập thành công vào trang quản trị

Kết quả đầu ra Thêm, sửa, xóa thành công

Luồng sự kiện

chính

STT Tác nhân Hành động

1 Quản trị viên Chọn chức năng quản lý kho phim

2 Quản trị viên Tùy chọn chức năng thêm, sửa, xóa trên giao

b Use-case Tìm kiếm

Tên use-case Tìm kiếm

Tác nhân Người dùng

Mô tả Người dùng tìm phim

Điều kiện đầu

vào Người dùng nhập cụm từ để tìm kiếm phim

Kết quả đầu ra Người dùng tìm được bộ phim mong muốn

Luồng sự kiện

chính

STT Tác nhân Hành động

1 Người dùng Nhập từ khóa vào ô tìm kiếm

2 Website Trả về danh sách tên phim có chứa từ khóa

3 Người dùng Chọn kết quả mà mình muốn

4 Website Trả về trang thông tin của bộ phim mà người

dùng chọn

Luồng ngoại lệ STT Tác nhân 2a Website Hành động Không tìm thấy bộ phim nào có tên tương ứng

với từ khóa được nhập

Tần suất sử

vào Người dùng cần đăng nhập thành công vào trang web

Kết quả đầu ra Thao tác thành công các chức năng mà trang Bạn bè cung cấp

Luồng sự kiện

chính

STT Tác nhân Hành động

1 Người dùng Vào xem trang Bạn bè trên website

2 Người dung Người dùng có thể thực hiện 3 chức năng:

thêm bạn mới, tìm kiếm bạn bè và xóa bạn bèkhỏi danh sách

3 Người dùng - Nếu người dùng thêm bạn bè thì phải đợi đến

khi người bên kia chấp nhận lời kết bạn

- Nếu người dùng tìm kiếm bạn bè thì website sẽ hiển thị danh sách các người dùng có tên trùng với cụm từ mà người dùng nhập vào

- Nếu người dùng muốn xóa ai đó khỏi danh sáchbạn bè thì website sẽ gửi thông báo xác nhận

Tần suất sử

dụng Bình thường

d Use-case Quản lý bài đăng

Tên use-case Quản lý bài đăng

Tác nhân Người dùng

Mô tả Người dùng thực hiện các chức năng như đăng bài viết về một bộ phim nào đó, sửa xóa thông tin bài đăngĐiều kiện đầu

vào Người dùng đăng nhập vào tài khoản thành công

Kết quả đầu ra Đăng bài, sửa bài viết hoặc xóa bài viết thành công

CHƯƠNG III THIẾT KẾ VÀ XÂY DỰNG

PHẦN MỀM

3.1 Giao diện

3.1.1 Giao diện Trang Chủ

- Sau khi đã đăng nhập vào tài khoản

- Thanh tìm kiếm

- Danh sách các phim sắp được công chiếu

3.1.2 Giao diện đăng nhập

3.1.3 Trang thông tin phim

- Danh sách các diễn viên cùng với tên nhân vật họ đảm nhận trong phim

3.1.4 Trang xem phim

3.2 Cơ sở dữ liệu

3.2.1 Sơ đồ bảng quan hệ

sẽ hiện thông báo lỗi hoặc yêu cầu đăng ký.

- Thêm vào đó, server sẽ tạo token dựa trên tài khoản đăng nhập và gửi lại cho máy của người dùng Trình duyệt sẽ lưu token này trong cookie và được dùng để xác thực

- Nếu token hết hạn thì người dùng phải đăng nhập lại

- Một số API được sử dụng:

+ /movie/id/credits: lấy danh sách dàn diễn viên, đội ngũ sản xuất của phim.+ /movie/upcoming: lấy danh sách các phim sắp khởi chiếu

+ /trending/all/week: lấy danh sách các phim trending trong tuần

+ /movie/top_rated: lấy danh sách phim có điểm đánh giá cao nhất

CHƯƠNG IV TỔNG KẾT ĐÁNH GIÁ VÀ

HƯỚNG PHÁT TRIỂN

4.1 Những điểm chương trình đã làm được

1 Cho phép người dùng tạo tài khoản, đăng nhập và xác thực

2 Người dùng có thể xem chi tiết thông tin của một bộ phim

3 Người dùng có thể xem được các danh sách phim mà mình mong muốn

4 Người dùng có thể tim kiếm tên phim thông qua cụm từ nhập vào thanh tìm kiếm

4.2 Những điểm chưa làm được

1 Cơ sở dữ liệu của phim vẫn chưa hoàn thiện

2 Chưa hoàn thành trang quản trị kho dữ liệu phim

3 Chưa có chức năng bạn bè và cộng đồng

4 Chức năng tìm kiếm vẫn còn đơn giản

5 Trang xem phim còn đơn giản

6 Load ảnh lớn còn hơi chậm

4.3 Hướng phát triển của chương trình

1 Đầu tiên là cải thiện các điểm nêu trên

2 Thứ hai, tối ưu hóa code front-end cũng như back-end của website.

TÀI LIỆU THAM KHẢO

[1] David Choi “Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with Hooks and GraphQL” Packt Publishing, 2020