Đồ án xây dựng website chia sẻ kiến thức hỗ trợ video sharing

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

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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ô Quá 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, hoàn thiện bản thân bằng những kĩ năng tích lũy được trong suốt quá trình học Chính nhờ những sự góp ý, động viên hết sức quý 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 chuyên 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 soá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

Ngoà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 soá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 chuyên 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 hoà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ỉ 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 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ý để quá 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 toá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 yêu cầu