ĐẠ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
ĐỒ ÁN 1
XÂY DỰNG WEBSITE CHIA SẺ KIẾN THỨC HỖ TRỢ VIDEO
SHARING
GV HƯỚNG DẪN:
Nguyễn Thị Thanh Trúc
SV THỰC HIỆN:
Lâm Tấn Phát – 20520682
Hồ Minh Tuệ - 20520850
TP. HỒ CHÍ MINH, 2023
LỜI CẢM ƠN
Lời đầu tiên, em xin gửi lời cảm ơn chân thành nhất đến Ths. Nguyễn Thị
Thanh Trúc, giảng viên đã hướng dẫn chúng em trong bộ môn Đồ án 1.
Trong quá trình học tập và thực hiện đồ án, em đã nhận được sự quan tâm
giúp đỡ, hướng dẫn rất tận tình của Cơ. Q trình thực hiện đồ án 1 là một
quá trình đầy thử thách, địi hỏi phải dành nhiều thời gian, cơng sức để
nghiên cứu, tìm tịi và xây dựng. Vì thế, đây cũng là cơ hội để em được
rèn luyện, hồn thiện bản thân bằng những kĩ năng tích lũy được trong
suốt q trình học. Chính nhờ những sự góp ý, động viên hết sức q báu
khơng chỉ là động lực trong quá trình thực hiện đồ án mơn học này mà cịn
là hành trang để em có thể vững bước sau này.
Do vốn kiến thức vẫn còn nhiều hạn chế và khả năng tiếp thu cịn nhiều
giới hạn, em khơng tránh khỏi có những thiếu sót. Em rất mong nhận được
những góp ý, sự quan tâm đến từ Cô để đồ án của em được hoàn thiện hơn.
Lời cuối cùng, chúng em xin chân thành cảm ơn Cơ và xin kính chúc Cô
nhiều sức khỏe, hạnh phúc và thành công trên con đường sự nghiệp giảng
dạy.
Hồ Minh Tuệ
Lâm Tấn Phát
MỤC LỤC
● Chương 1: GIỚI THIỆU ĐỀ TÀI .......................................................................................... 6
○ Mô tả đề tài ............................................................................................................................ 6
○ Lý do chọn đề tài .................................................................................................................. 6
○ Tìm hiểu .................................................................................................................................. 6
● Chương 2: KIẾN THỨC VÀ CÔNG NGHỆ SỬ DỤNG .................................................. 9
○ React JS ................................................................................................................................... 9
○ Node JS ................................................................................................................................. 10
○ Express................................................................................................................................. 11
○ MongoDB ............................................................................................................................ 12
○ Google Drive ...................................................................................................................... 12
○ CDN ........................................................................................................................................ 13
○ Dynamic Adaptive Streaming over HTTP ............................................................ 14
○ HLS ........................................................................................................................................ 15
● Chương 3: XÂY DỰNG ỨNG DỤNG ............................................................................... 16
○ Cơ sở lý thuyết ................................................................................................................... 16
■ Lưu trữ: ........................................................................................................................... 16
■ Hiển thị video: .............................................................................................................. 17
■ Xử lý, xác thực video: ............................................................................................... 17
■ Cân bằng tải: ................................................................................................................. 17
■ Xác thực người dùng ................................................................................................. 17
○ Triển Khai: .......................................................................................................................... 18
■ Đăng ký tài khoản: .................................................................................................... 18
■ Đăng nhập: ................................................................................................................... 18
■ Quản lý tài khoản cá nhân: .................................................................................... 19
■ Xem bài viết: ................................................................................................................ 19
■ Đăng bài: ....................................................................................................................... 20
■ Quản lý bài viết: ......................................................................................................... 20
○ Phân tích hệ thống .......................................................................................................... 21
● Chương 4: GIAO DIỆN ỨNG DỤNG ............................................................................... 24
● Chương 5: KẾT LUẬN ......................................................................................................... 26
○ Nhận xét .............................................................................................................................. 26
○ Hướng phát triển đồ án ................................................................................................ 26
TÓM TẮT ĐỒ ÁN
Đồ án bao gồm tìm hiểu, phân tích các kỹ thuật, quy tắc của các nền
tảng Q&A và video sharing, các kỹ thuật sử dụng của các nền tảng hiện
nay và tạo dựng lại website có ứng dụng lại các kỹ thuật trên, với quy mô
nhỏ hơn và phù hợp nhu cầu sử dụng. Đồ án sử dụng các nền tảng có sẵn
mà ai cũng có, nhưng cũng có thể nâng cấp lên như Google Drive,
MongoDB. Ngoài ra website phải đáp ứng được nhu cầu sử dụng đó chính
là người dùng đăng tải được các nội dung mang tính chất giáo dục, kiến
thức bổ ích cho người khác. Từ đó có thể tạo dựng 1 cồng đồng chia sẻ
kinh nghiệm sống lớn mạnh hơn, giúp đỡ những người muốn tìm hiểu lĩnh
vực nào đó.
● Chương 1: GIỚI THIỆU ĐỀ TÀI
○ Mô tả đề tài
Thời đại công nghệ phát triển nhanh chóng, đời sống liên tục được tác
động bởi cơng nghệ mới. Mỗi ngày đều có nhiều công nghệ mới được tạo ra
và áp dụng vào đời sống. Những thủ thuật mới được áp dụng vào cơng việc, sẽ
có trường hợp khơng phổ cập kịp những kiến thức mới để phục vụ trong công
việc.
Nhưng nhiều người trong đời sống dễ dàng gặp khó khăn trong những
việc nhỏ, thiếu kinh nghiệm sống nên thường cần giúp đỡ, tìm kiếm thơng tin
trên mạng. Và trên mạng đã có sẵn nhiều diễn đàn trợ giúp. Nhưng những diễn
đàn này dành cho những người đã có lượng kiến thức nhất định về lĩnh vực,
chủ đề của diễn đàn.
Nhưng đối với những người khơng chun thì họ sẽ gặp khó khăn trong
việc tìm hiểu những kiến thức mới, dễ dàng mắc phải những lỗi rất là cơ bản,
nhưng được lặp đi lặp lại liên tục bởi nhiều người. Và những người này đều có
các lý do khách quan khơng thể tốn thời gian để tìm hiểu các kiến thức căn
bản như khơng có thời gian, khơng biết nên tìm hiểu phần nào, do khơng có
nhu cầu lâu dài…
○ Lý do chọn đề tài
Chúng em muốn xây dựng nền tảng chia sẻ kiến thức, tài liệu, thủ thuật
có video hỗ trợ việc truyền tải nội dung. Nội dung video giới thiệu hoặc hướng
sẽ giúp giảm những sai sót cơ bản dành cho những người chưa có kinh nghiệm
trong lĩnh vực mới. Đồng thời cũng tạo điều kiện cho những người có nhu đầu
chia sẻ kiến thức của mình cho cộng đồng được thoải mái, mang tính chất xây
dựng mơi trường lành mạnh hơn.
○ Tìm hiểu
Hiện tại cũng đã có nhiều nền tảng video sharing, nền tảng Q&A đã sẵn
có.
Youtube
Youtube có từ rất sớm và đang dẫn đầu trong các nền tảng về video
sharing. Lượng kiến thức, nội dung trên đây cực kỳ dồi dào và được nhiều
người tin cậy để đăng tải nội dung mình lên. Nội dung video cũng được kiểm
sốt kĩ lưỡng nhờ vào các thuật toán cũng như các cơng nghệ tiên tiến nhất.
Trải nghiệm người dùng thì liên tục nâng cao nhờ vào chất lượng video sắc
nét.
Reddit
Là diễn đàn online, đa dạng chủ đề và cộng đồng của từng chủ đề cũng
đông đảo. Cộng đồng hỏi đáp phản ứng nhanh chóng, đầy đủ, lượng kiến thức
đến từ nhiều người khác nhau. Các bài đăng được đánh giá bằng điểm do cộng
đồng, khiến độ tin cậy tăng cao và nội dung được đảm bảo.
Stackoverflow
Là cộng đồng hỏi đáp chuyên sâu về cơng nghệ. Các câu hỏi phổ biến đều
có sẵn. Cộng đồng là các kỹ sư, người có kinh nghiệm cao trong ngành và
được đánh giá lẫn nhau qua chất lượng câu trả lời, tăng điểm uy tín của người
dùng.
Facebook
Mạng xã hội đông đảo, nội dung sáng tạo từ người dùng đa dạng. Lượng
người tham gia vào 1 bài đăng và đóng góp ý kiến lẫn nhau. Các hội nhóm
được phân chia rạch rịi nhưng cũng khơng kém phần linh hoạt khi cần hỏi
đáp. Người dùng được tạo điều kiện để tạo nội dung chia sẻ lẫn nhau.
Các blog của các cá nhân khác
Ngồi ra cịn nhiều blog cá nhân khác dùng để chia sẻ kiến thức của họ
cũng như tự quyết định nội dung trên trang web như howkteam, xuanthulab,
codekarle,… Các blog này thường do cá nhân hoặc 1 nhóm quản lý các nội
dung được đăng tải lên và kiến thức chuyên sâu 1 mảng.
Về nền tảng video sharing như youtube thì các chủ đề quá rộng rãi, lượng
kiến thức từ cơ bản đến nâng cao đều có nhưng khơng được phân loại theo các
chủ đề tìm hiểu. Kiến thức, nội dung video nếu khơng bị dính bản quyền thì sẽ
bị kiểm sốt lỏng lẻo, đánh giá từ người dùng thì khách quan và thường không
được chú ý đến. Đều này khiến cho nội dung chia sẻ kiến thức mất đi uy tín.
Cịn các nền tảng hỏi đáp như stackoverflow thì địi hỏi lượng kiến thức nhất
định mới có thể hỏi và hiểu câu trả lời. Điều này thì gây bất lợi cho những
người chưa có kiến thức nền hoặc khơng có nhu cầu kiến thức chun sâu, chỉ
muốn tìm hiểu sơ qua. Và cách tiếp cận nội dung của các nền tảng này là chữ,
nên người mới khó có thể hình dung. Cịn những người đăng tải nội dung cũng
khó tiếp cận với người xem hơn do nhiều ý kiến trái chiều, phản cảm từ những
người lợi dụng quyền tự do ngôn luận để quấy phá, đùa giỡn.
=>Giải pháp: Xây dựng nền tảng video sharing, cho phép người dùng
đăng tải nội dung chia sẻ kiến thức của bản thân đã học được hoặc kinh
nghiệm cá nhân. Người dùng có thể đánh giá bằng hình thức bình luận và
“thích” bài đăng, tăng điểm uy tín của người sáng tạo nội dung. Phân loại các
video thành các chủ đề khác nhau như Kỹ thuật, Đời sống, Mỹ thuật, Ẩm thực
và Du lịch để người dùng dễ dàng xác định nội dung, kiến thức
● Chương 2: KIẾN THỨC VÀ CƠNG NGHỆ SỬ DỤNG
○ React JS
Hình 2.1: Biểu tượng React
ReactJS là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, ra
mắt vào 2013. ReactJS hỗ trợ việc xây dựng những thành phần trên website có
tính tương tác cao, có trạng thái và có thể sử dụng lại được.
JSX:
JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta
dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản.
Virtual DOM:
Hình 2.2: Minh họa Virtual DOM
Khi sử dụng JSX, cây DOM cập nhật cho chính DOM đó, ReactJS đã khởi tạo một
thứ gọi là Virtual DOM (DOM ảo). Virtual DOM là bản copy của DOM thật trên
trang đó, và ReactJS sử dụng bản copy đó để tìm kiếm đúng phần mà DOM thật cần
cập nhật khi bất kỳ một sự kiện nào đó khiến thành phần trong nó thay đổi.
Với việc cập nhật đúng chỗ như vậy, khỏi phải nói nó tiết kiệm cho chúng ta rất nhiều
tài nguyên cũng như thời gian xử lý. Ở các website lớn và phức tạp như thương mại
điện tử, đặt món ăn, … việc này là vơ cùng cần thiết và quan trọng để làm tăng trải
trải nghiệm của khách hàng và performance được cải thiện đáng kể.
○ Node JS
Hình 2.3: Biểu tượng NodeJS
Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8
JavaScript Engine – trình thơng dịch thực thi mã JavaScript.
NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới.
NodeJS có các điểm mạnh như NPM, Non-blocking I/O, Event Loop.
Non Blocking IO:
Là phương pháp để xử lý đồng thời nhiều request trên một luồng đơn (single thread)
mà khơng cần đợi hồn thành xử lý của request trước rồi mới xử lý request sau.
NodeJS sử dụng cơ chế Event loop để xử lý Non-blocking tất cả các request để tăng
tốc độ xử lý nhưng chúng ta vẫn có thể xử lý đồng bộ.
Package Manager:
Package Manager là một kho lưu trữ những xuất bản (publishing) của các
package/module để người khác có thể sử dụng và một bộ dòng lệnh (command line)
để cài đặt, quản lý phiên bản, quản lý các gói phụ thuộc, gỡ cài đặt các
package/module có trên kho lưu trữ. Hiện tại có rất nhiều package manager được sử
dụng nhưng thông dụng nhất vẫn là npm, yarn.
Event Loop:
Event Loop là cơ chế giúp Javascript có thể thực hiện nhiều thao tác cùng một lúc
(concurrent model), trước giờ vẫn nghe nói NodeJs có thể xử lý cả hàng ngàn
request cùng một lúc mặc dù nó chỉ dùng một thread duy nhất (Single Threaded).
○ Express
Hình 2.4: Biểu tượng Express
Express.js 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. Express hỗ trợ các phương thức HTTP và middleware tạo ra một API vô cùng
mạnh mẽ và dễ sử dụng.
Vì Express js chỉ 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 và nhà phát triển.
Expressjs cũng là một phần của công nghệ giúp quản lý các ứng dụng web một cách
dễ dàng hơn hay còn được gọi là ngăn xếp phần mềm MEAN.Nhờ có thư viện
Javascript của Express js đã giúp cho các nhà lập trình xây dựng nên các ứng dụng
web hiệu quả và nhanh chóng hơn.
Phát triển máy chủ nhanh chóng:
Expressjs cung cấp nhiều tính năng dưới dạng các hàm để dễ dàng sử dụng ở bất kỳ
đâu trong chương trình. Điều này đã loại bỏ nhu cầu viết mã từ đó tiết kiệm được thời
gian.
Phần mềm trung gian Middleware:
Đây là phần mềm trung gian có quyền truy cập vào cơ sở dữ liệu, yêu cầu của khách
hàng và những phần mềm trung gian khác. Phần mềm Middleware này chịu trách
nhiệm chính cho việc tổ chức có hệ thống các chức năng của Express.js.
Định tuyến - Routing:
Express js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website với sự trợ
giúp của URL.
Tạo mẫu - Templating:
Các công cụ tạo khuôn mẫu được Express.js cung cấp cho phép các nhà xây dựng nội
dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía máy chủ.
Gỡ lỗi - Debugging:
Để phát triển thành công các ứng dụng web không thể thiết đi việc gỡ lỗi. Giờ đây với
Expressjs việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng xác định chính xác các
phần ứng dụng web có lỗi.
○ MongoDB
Hình 2.5: Biểu tượng MongoDB
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql. Với
CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL
hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ
dùng khái niệm là collection thay vì bảng
Mongodb chính là một database hướng tài liệu, nên khi đó mọi dữ liệu sẽ được lưu trữ
trong document theo kiểu JSON thay vì lưu theo dạng bảng như CSDL quan hệ nên
việc truy cập vấn sẽ nhanh chóng hơn.
Với các CSDL quan hệ thì chúng ta sẽ có khái niệm bảng, khi đó các cơ sở dữ liệu
quan hệ sẽ sử dụng các bảng để có thể lưu trữ dữ liệu, cịn với Mongodb thì bạn cần
phải sử dụng khái niệm collection thay cho bảng.
Với các collection có trong Mongodb thường sẽ được cấu trúc rất linh hoạt nên nó cho
phép các dữ liệu được lưu trữ mà không cần phải tuân theo bất kỳ một cấu trúc nhất
định nào.
Các thơng tin có liên quan đều sẽ được lưu trữ cùng với nhau để người dùng có thể
truy cập truy vấn nhanh hơn thông qua các ngôn ngữ truy vấn MongoDB.
○ Google Drive
Hình 2.6: Biểu tượng Google Drive
Google Drive là dịch vụ lưu trữ đám mây và đồng bộ hóa tệp cho Google phát triển.
Người dùng Google Drive sẽ lưu trữ tệp (hình ảnh, tài liệu, video, file nhạc,…) trực
tuyến và có thể truy cập chúng bất kỳ lúc nào, bằng các thiết bị di động được kết nối
internet như điện thoại thông minh, máy tính bảng, laptop,… trên nhiều hệ điều hành
như Android, iOS, Windows,...
Google Drive còn cung cấp các API phục vụ các tác vụ lưu trữ tự động và truy xuất
dữ liệu.
Hình 2.7: Phương thức hoạt động của Google Drive API
Các API cung cấp qua giao thức OAuth. Về cơ bản, OAuth là một phương thức xác
thực giúp một ứng dụng bên thứ 3 có thể được ủy quyền bởi người dùng để truy cập
đến tài nguyên người dùng nằm trên một dịch vụ khác.
Bạn có thể dùng Drive API để:
- Đăng tải và tải file lên Google drive.
- Tìm kiếm file và folder trên drive. Có thể dùng các lệnh truy vấn để trả về kết
quả theo nhu cầu tìm kiếm.
- Chia sẻ, cho phép truy cập các file hoặc thư mục cho người dùng khác.
○ CDN
Hình 2.8: Mạng lưới CDN
Mạng phân phối nội dung (CDN) là một mạng lưới gồm các máy chủ được kết nối với
nhau giúp tăng tốc độ tải trang web cho các ứng dụng tiêu tốn nhiều dữ liệu. Nếu
người dùng ở xa máy chủ đó, thì sẽ mất nhiều thời gian để tải một tệp lớn, chẳng hạn
như video hoặc hình ảnh trên trang web. Thay vào đó, nội dung trang web được lưu
trữ trên các máy chủ CDN gần hơn với vị trí của người dùng theo khu vực địa lý để
q trình chuyển đến máy tính của họ được nhanh hơn nhiều. CDN có thể giảm thời
gian tải trang, giảm băng thông truy cập các file lớn, tăng tính có sẵn ở các vị trí địa lý
khác nhau và tăng tính bảo mật, quản lý website.
Cách hoạt động của CDN:
Lưu bộ nhớ đệm:
Lưu bộ nhớ đệm là quá trình lưu trữ nhiều bản sao của cùng một dữ liệu để truy cập
dữ liệu nhanh hơn. Trong công nghệ CDN, thuật ngữ này dùng để chỉ quá trình lưu trữ
nội dung tĩnh của trang web trên nhiều máy chủ trong mạng. Hoạt động lưu bộ nhớ
đệm trong CDN hoạt động như sau:
- Khách truy cập trang web từ xa theo vị trí địa lý sẽ thực hiện yêu cầu đầu tiên
đối với nội dung web tĩnh từ trang web.
- Yêu cầu đó sẽ chuyển đến máy chủ gốc. Máy chủ gốc sẽ gửi phản hồi cho khách
truy cập từ xa đó. Đồng thời, máy chủ gốc cũng gửi một bản sao phản hồi tới
máy chủ của CDN ở vị trí địa lý gần nhất cho khách truy cập đó. Máy chủ của
CDN sẽ lưu trữ bản sao ở dạng tệp được lưu trong bộ nhớ đệm.
- Vào lần tới, khi khách truy cập này hoặc bất kỳ khách truy cập nào khác ở vị trí
đó, đưa ra yêu cầu tương tự, máy chủ lưu bộ nhớ đệm sẽ gửi phản hồi.
Tăng tốc động:
Tăng tốc động là quá trình giúp giảm thời gian phản hồi của máy chủ đối với các yêu
cầu về nội dung web động nhờ có máy chủ CDN trung gian. Việc lưu bộ nhớ đệm sẽ
không dễ thực hiện với nội dung web động vì nội dung có thể thay đổi theo mọi yêu
cầu của người dùng. Máy chủ CDN phải kết nối lại với máy chủ gốc khi có bất kỳ yêu
cầu động nào, tuy nhiên, việc này lại giúp tăng tốc quá trình bằng cách tối ưu hóa kết
nối giữa chính các máy chủ này với máy chủ gốc. Các máy chủ tối ưu hóa bằng các
phương pháp:
- Các thuật tốn định tuyến thơng minh
- Vùng lân cận theo vị trí địa lý với máy chủ gốc
- Khả năng xử lý yêu cầu của máy khách, giúp làm giảm kích thước của u cầu
đó
○ Dynamic Adaptive Streaming over HTTP
Hình 2.9: Cơ chế DASH
Dynamic Adaptive Streaming trên HTTP (DASH), còn được gọi là MPEG-DASH, là
một kỹ thuật streaming bitrate thích ứng cho phép streaming nội dung đa phương tiện
chất lượng cao qua Internet được phân phối từ các máy chủ web HTTP thông thường.
MPEG-DASH hoạt động bằng cách chia nội dung thành một chuỗi các “gói” của tập
tin dựa trên HTTP để phát phương tiện truyền thông. Mỗi gói tập tin có thể được đặt
thành một tốc độ bit khác nhau để mã hoá để đáp ứng các yêu cầu mạng của những
người khác nhau. Trong khi video đang được phát bởi một client MPEG-DASH, client
sẽ tự động chọn từ các lựa chọn khác của phân khúc tiếp theo để tải xuống và phát dựa
trên các điều kiện mạng hiện tại. Như vậy, một client MPEG-DASH có thể liên tục
thích nghi với các điều kiện mạng thay đổi và cung cấp chất lượng phát cao hơn với
dung lượng ít hơn.
○ HLS
Hình 2.10: Cơ chế HLS
HLS là viết tắt của HTTP Live Streaming. HLS là một giao thức dựa trên HTTP thích
ứng được sử dụng để truyền dữ liệu video và âm thanh từ các máy chủ phương tiện
đến thiết bị của người dùng cuối.
HLS giống với MPEG-DASH ở chỗ nó hoạt động bằng cách chia luồng tổng thể thành
một chuỗi các tệp tải xuống dựa trên HTTP, mỗi lần tải xuống tải một đoạn ngắn của
một luồng truyền tải tổng thể có khả năng không bị ràng buộc. Một danh sách các
luồng khả dụng, được mã hóa ở các tốc độ bit khác nhau, được gửi đến máy khách
bằng cách sử dụng danh sách phát các gói m3u mở rộng.
Dựa trên các giao dịch HTTP tiêu chuẩn, HLS có thể đi qua bất kỳ tường lửa hoặc
máy chủ proxy nào cho phép lưu lượng HTTP tiêu chuẩn. Điều này cũng cho phép nội
dung được cung cấp từ các máy chủ HTTP thông thường và được phân phối trên các
CDN dựa trên HTTP có sẵn rộng rãi.
● Chương 3: XÂY DỰNG ỨNG DỤNG
○ Cơ sở lý thuyết
Hình 3.1: Mơ hình Video Streaming của Youtube
- Người dùng có thể đăng video.
- Người xem có thể xem dưới nhiều định dạng khác nhau.
- Người dùng có thể tìm kiếm bài đăng thơng qua tiêu đề.
- Người dùng có thể like, dislike bài đăng
- Hệ thống lưu trữ số like, bình luận và hiển thị cho người dùng.
Ngồi ra cịn có các yêu cầu phi chức năng như :
- Không lưu trữ trong bộ nhớ đệm của người dùng, giúp cho người dung có trải nghiệm
mượt mà hơn.
- Hệ thống phải có độ trễ thấp, độ khả dụng cao. Ngồi ra cịn có tính nhất qn giữa video
mới do người dùng đăng tải.
- Video phải nguyên vẹn. Khi người dùng đăng tải không nên làm mất nội dung video.
- Hệ thống phải có tính mở rộng khi lượng người dùng tăng lên.
■ Lưu trữ:
Hệ thống lưu trữ video là lưu trữ đám mây, để đảm bảo xử lý lưu lượng lớn hằng ngày, liên tục.
Video đăng tải lên sẽ được lưu ở google drive, trong khi đó thơng tin video như ngày đăng, số
like,... sẽ được lưu ở MongoDB, đính kèm dường dẫn đến video.
■ Hiển thị video:
Khi chiếu video, có thể chiếu tồn bộ 1 file video nguyên vẹn, nhưng có cách khác tối ưu hơn,
tránh việc người dùng phải lưu trữ toàn bộ 1 file lớn ở bộ nhớ đệm. Đó là chia nhỏ video thành
những “mảnh nhỏ” (chunk), tiết kiệm thời gian để xử lý và hiển thị video. Khi chia nhỏ, người
dùng có thể xem mà khơng cần phải tải hết toàn bộ video. Khi người dùng xem 1 chunk, client
sẽ tự gửi yêu cầu chunk kế tiếp, khiến cho hiện tượng lag giảm đáng kể.
■ Xử lý, xác thực video:
Vì việc đăng tải, truy xuất video liên tục và rất nhiều từ người dùng, nên có 1 hàng chờ xử lý
các tác vụ đó. Các tác vụ được lấy từ hàng chờ và đưa vào các luồng song song để thực thi đồng
thời với nhau. Đồng thời có quy định khơng được đăng các file có định dạng lạ, dung lượng
vượt quá 300MB.
■ Cân bằng tải:
Hình 3.2: Cân bằng tải
Server nhận nhiều request cho nhiều chức năng tương ứng. Nên có 1 bộ cân bằng tải để điều
hướng request và trả về dữ liệu hợp lý mà không gây quá tải server, đồng thời tăng tính chịu lỗi.
■ Xác thực người dùng
Sử dụng token được tạo ra khi đăng nhập và lưu ở bên phía client. Token chứa ID của
người dùng để xác nhận người dùng, phân quyền cũng như tác vụ của người dùng trong hệ
thống.
○ Triển Khai:
■ Đăng ký tài khoản:
Hình 3.3: Use case đăng ký
Người dùng nhập email, username, password (yêu cầu nhập lại), chọn avatar (khơng bắt
buộc).
■ Đăng nhập:
Hình 3.4: Use case đăng ký
Người dùng nhập tên đăng nhập và mật khẩu để đăng nhập vào hệ thống. Nếu quên mật
khẩu có thể nhận code xác thực email và đặt lại mật khẩu.
■ Quản lý tài khoản cá nhân:
Hình 3.5: Use case quản lý tài khoản
Cập nhật thông tin cá nhân (email, username, avatar, password), xóa tài khoản, xin cấp
quyền content creator.
■ Xem bài viết:
Hình 3.6: Use case xem bài viết
Người dùng truy cập vào bài viết để chuyển hướng đến bài viết muốn xem, có thể like, bình
luận về bài viết.
■ Đăng bài:
Hình 3.7: Use case đăng bài viết
Creator có thể tạo và upload bài viết mới (yêu cầu video). Nội dung chính bài viết yêu cầu:
tiêu đề, nội dung chính, video.
■ Quản lý bài viết:
Hình 3.8: Use case quản lý bài viết
Creator có thể quan sát số lượt view, like, dislike, tổng comment của một hoặc tất cả bài
viết đã đăng, cập nhật, xóa bài viết đã tạo.
○ Phân tích hệ thống
Hình 3.9: Use case tồn bộ hệ thống
Việc upload video cho từng bài thread là bắt buộc vì chủ đề chính của trang web là chia sẻ kiến
thức dựa trên content và video của bài viết.
Hình 3.10: Sơ đồ tuần tự của chức năng đăng bài viết
User có thể thích bài đăng, đánh dấu để xem lại sau hoặc comment góp ý bên dưới bài đăng.
Ngồi ra có thể báo lỗi, tố cáo các bài đăng vi phạm quy luật.
Content creator có thể đăng bài viết, chỉnh sửa để phù hợp với người xem hơn và nhận những
đánh giá về bài viết đã đăng. Đồng thời nhận được thông báo xấu về bài viết.
Hình 3.11: Sơ đồ tuần tự của chức năng thích, đăng bình luận và báo xấu về bài đăng
Admin có quyền chỉnh sửa hoặc nhắn cho content creator chỉnh sửa bài viết. Ngoài ra nhận
thông báo xấu từ user để phản hồi lại cho content creator. Admin có đặc quyền nhận thơng báo
muốn nâng cấp từ user lên content creator, kiểm duyệt và nâng cấp user.
● Chương 4: GIAO DIỆN ỨNG DỤNG
Hình 4.1: Giao diện trang chủ
Hình 4.2: Giao diện bài viết
Hình 4.3: Giao diện quản lý thơng tin cá nhân
Hình 4.4: Quản lý các bài viết đã đăng
● Chương 5: KẾT LUẬN
○ Nhận xét
● Ưu điểm đồ án:
○ Người dùng có thể dễ dàng đăng tải các nội dung chia sẻ kiến thức, luồng hoạt
động của website tường mình, dễ hiểu.
○ Giao diện thân thiện, dễ sử dụng.
○ Có sự tương tác giữa người xem và người đăng.
● Nhược điểm đồ án:
○ Chức năng còn đơn giản, chỉ đáp ứng đủ nhu cầu cơ bản.
○ Chức năng báo xấu nội dung để admin xử lý chưa hoàn thiện.
● Thuận lợi:
○ Giảng viên hướng dẫn tận tình, ln hỗ trợ và chia sẻ, góp ý trong q trình thực
hiện đồ án.
○ Ý tưởng, cơ sở lý thuyết đồ án được xây dựng từ đầu và được đầu tư kỹ lưỡng.
● Khó khăn:
○ Quản lý thời gian chưa hiệu quả.
=> Kết luận: Đồ án vẫn còn đơn giản, nhưng có nhiều ý tưởng để mở rộng, triển khai. Quá trình
tìm hiểu đề tài đã cho thấy những vấn đề mọi người thường gặp phải và khá phổ biến. Nhờ đó
mà chúng em có thể nghĩ ra phương thức giải quyết tốt nhất có thể.
○ Hướng phát triển đồ án
- Củng cố vai trò của admin trong việc kiểm duyệt nội dung.
- Tăng tính tương tác giữa người xem và người chia sẻ kiến thức, giữa người dùng và
admin quản lý trang web.
- Áp dụng các thuật toán cao hơn để quản lý, chống vi phạm bản quyền người dung, mở
rộng thưởng tiền cho người có tương tác cao.
TÀI LIỆU THAM KHẢO
[1] Dương Anh Sơn (2016), Lập trình React thật đơn giản, VNTALKING
[2] Dương Anh Sơn (2017), Lập trình NodeJS thật đơn giản, VNTALKING
[3] NodeJS website (2023):
[4] ReactJS website (2023):
[5] Stackoverflow (2023):
[6] Udemy (2023):
[7] AWS (2023):
[8] Viblo (2023): a/
[9] Medium (2023):
[10] ScaleYourApp (2023):
● Chương 1: GIỚI THIỆU ĐỀ TÀI
○ Mô tả đề tài
○ Lý do chọn đề tài
○ Tìm hiểu
● Chương 2: KIẾN THỨC VÀ CÔNG NGHỆ SỬ DỤNG
○ React JS
○ Node JS
○ Express
○ MongoDB
○ Google Drive
○ CDN
○ Dynamic Adaptive Streaming over HTTP
○ HLS
● Chương 3: XÂY DỰNG ỨNG DỤNG
○ Cơ sở lý thuyết
■ Lưu trữ:
■ Hiển thị video:
■ Xử lý, xác thực video:
■ Cân bằng tải:
■ Xác thực người dùng
○ Triển Khai:
■ Đăng ký tài khoản:
■ Đăng nhập:
■ Quản lý tài khoản cá nhân:
■ Xem bài viết:
■ Đăng bài:
■ Quản lý bài viết:
○ Phân tích hệ thống
● Chương 4: GIAO DIỆN ỨNG DỤNG
● Chương 5: KẾT LUẬN
○ Nhận xét
○ Hướng phát triển đồ án