ĐỒ án xây DỰNG WEBSITE CHIA sẻ VIDEO

Hiện trạng tổ chức Chúng ta đang sống trong kỷ nguyên công nghệ 4.0 toàn cầu, đang ngày càng bùng nổ về mạng máy tính và các ứng dụng của nó, con người có thể nhanh chóng giao tiếp và kế

Trang 1

ĐẠ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 2 XÂY DỰNG WEBSITE CHIA SẺ VIDEO GIẢNG VIÊN HƯỚNG DẪN

Trang 2

LỜI CẢM ƠN

Trên thực tế, không có sự thành công nào mà không gắn liền với những sự hỗ trợ, giúp đỡ

dù ít hay nhiều, dù trực tiếp hay gián tiếp của người khác Trong suốt thời gian từ khi bắt đầuhọc tập ở giảng đường đại học đến nay, chúng em đã nhận được rất nhiều sự quan tâm, giúp

đỡ của quý thầy cô, gia đình và bạn bè

Với lòng biết ơn sâu sắc nhất, chúng em xin gửi đến quý thầy cô ở khoa Công nghệ phầnmềm – Trường Đại học Công nghệ thông tin, những người đã cùng với tri thức và tâm huyếtcủa mình đã truyền đạt lại vốn kiến thức quý báu cho chúng em suốt thời gian học tập tạitrường Và đặc biệt, trong học kỳ này, khoa đã tổ chức cho em được tiếp cận với môn Đồ Án

2, môn học mà theo chúng em là rất hữu ích đối với khoa Công nghệ phần mềm

Chúng em xin chân thành cảm ơn Ths Hoàng Văn Hà, người thầy đã tận tâm hướng dẫnchúng em từ những bước đi đầu tiên cũng như những góp ý chân thành để chúng em có thểcải thiện đồ án một cách tốt nhất Nếu không có những lời hướng dẫn, dạy bảo của thầy thìchúng em nghĩ đồ án này sẽ khó mà hoàn thành được Một lần nữa, chúng em xin chân thànhcảm ơn thầy

Thành phố Hồ Chí Minh, ngày 9 tháng 1 năm 2021

Trần Đình ThiệnNguyễn Trọng Tài

Trang 3

Nhận xét của giáo viên hướng dẫn

………

Tp.HCM, ngày tháng năm 2021

Giáo viên hướng dẫn

Th.S Hoàng Văn Hà

3

Trang 4

Mục lục

Chương 1 Giới thiệu đề tài 5

1 Hiện trạng tổ chức 5

2 Giới hạn/ phạm vi 6

a) Bài toán 6

b) Nhận xét bài toán: 6

3 Các nội dung thực hiện 7

4 Kết quả hướng tới 7

Chương 2 Các kiến thức/ công nghệ nền tảng 8

1 Giới thiệu công nghệ sử dụng 8

a Framework Vuejs 8

b Nodejs 8

c Yarn 8

d MongoDb 8

e Firebase storage 9

Chương 3 Xây dựng ứng dụng 10

1 Tổng quan khảo sát các ứng dụng liên quan 10

2 Phân tích 11

3 Thiết kế cơ sở dữ liệu 24

4 Cài đặt phần mềm 26

Trang 5

5 Các áp dụng chính của framework/ lib đã tìm hiểu vào trong ứng dụng 26

Chương 4 Thử nghiệm, đánh giá 28

1 Môi trưởng thử nghiệm 28

2 Kết quả thực nghiệm 28

3 Đánh giá kết quả sản phẩm 28

Chương 5 Kết luận và hướng phát triển 29

1 Kết quả đạt được 29

2 Hạn chế và hướng phát triển 29

Tài liệu tham khảo 31

Chương 1 Giới thiệu đề tài

1 Hiện trạng tổ chức

Chúng ta đang sống trong kỷ nguyên công nghệ 4.0 toàn cầu, đang ngày càng bùng

nổ về mạng máy tính và các ứng dụng của nó, con người có thể nhanh chóng giao tiếp

và kết nối với nhau thông qua nhiều ứng dụng trên Interne.Đi kèm với đó là sự phát triển mạnh mẽ của các nền tảng giải trí.Trong đó xem video,xem live stream là những nhu cầu giải trí không thể thiếu trong cuộc sống ngày nay.Từ những video chúng ta có thể tích lũy thêm kiến thức về nhiều lĩnh vực khác nhau cũng như có những giây phút thư giãn sau những giờ làm việc căng thẳng

Trên thị trường hiện nay, có rất nhiều ứng dụng chia sẻ video cũng như những trang web hay mạng xã hội video rất nổi tiếng được rất nhiều người tin dùng và sử dụng

Do đó, để tiếp nối thành công ấy, nhóm chúng em cũng muốn được góp phần công sức của mình để tạo ra một cộng đồng cho những người có đam mê về quay

phim,chụp hình tạo trend và cũng là một nơi để mọi người cùng nhau chia sẻ ý kiến

cá nhân hay những góp ý để cùng nhau phát triển hơn.Không những vậy trang web còn là một môi trường tuyệt vời để mọi người có thể tích lũy thêm kiến thức từ nhiều lĩnh vực khác nhau từ nhiều con người khác nhau

5

Trang 6

2 Giới hạn/ phạm vi

a) Bài toán

Drago Zero là một trong những trang web đặc thù áp dụng công nghệ thông tin vào hoạt động: chia sẻ video qua mạng và sau này sẽ có xu hường mở rộng Drago Zero là một website dành cho những nhà sáng tạo cũng như là một nền tảng giải trí hay một nơitrau dồi kiến thức bằng những video.Mục tiêu của việc xây dựng trang web này nhằm giúp cho người dùng có thể chia sẻ hay xem những video trực tiếp từ xa thông qua mạng internet phổ biến Người dùng ở nhà hay tại công ty vẫn có thể dễ dàng truy cập lựa chọn những video hay bổ ích phù hợp với nhu cầu cá nhân, giúp việc giải trí tại chỗ một cách nhanh chóng, tiện lợi, tiết kiệm thời gian, đáp ứng được nhu cầu thực tế Hệ thống tìm kiếm dễ dàng, giao diện thân thiện Chỉ cần đăng nhập vào hệ thống với tài khoản đã có (nếu người dùng đã là thành viên của website) hay chỉ cần vài thao tác đăng kí đơn giản là người dùng có thể dễ dàng xem những video mới nhất từ các kênh mình yêu thích cũng như sáng tạo ra những video để có thể chia sẻ với cộng đồng

 Quản lý kênh cá nhân (xem,sửa,xóa,tìm kiếm)

 Đăng kí/Hủy đăng kí kênh

 Xem và xóa lịch sử tìm kiếm,lịch sử theo dõi

 Tạo kênh cá nhân

Trang 7

3 Các nội dung thực hiện

Xu hướng UI/UX của các website chia

sẻ video hiện nay

Lên kế hoạch thiết kế UI/UX cho đề tài

Các chức năng của một website chia sẻ

video

Lên kế hoạch thiết kế chức năng cho đề tài

Công nghệ NodeJs Xây dựng backend cho toàn hệ thốngCông nghệ Yarn Giúp cho việc quản lý dự án, cài đặt dễ

dàng hơn

Hệ cơ sở dữ liệu MongoDB Xây dựng cơ sở dữ liệu cho toàn hệ

thống

4 Kết quả hướng tới

 Giao diện thân thiện đẹp mắt,dễ nhìn

 Khả năng truy xuất cao

 Website có đầy đủ các tính năng cơ bản của một website chia sẻ video

 Đáp ứng đầy đủ nhu cầu của người dùng

 Là một nền tảng chia sẻ video cũng như một nơi lưu trữ video được nhiều người tin dùng

7

Trang 8

Chương 2 Các kiến thức/ công nghệ nền tảng

1 Giới thiệu công nghệ sử dụng

a Framework Vuejs

- Vue.js, gọi tắt là Vue, là một framework linh động dùng để xây dựnggiao diện người dùng (user interfaces - UI) Khác với các framework nguyên khối, Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo các bước Khi phát triển lớp giao diện, người dùng chỉ cần dùng thư viện lõi (core library) củaVue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng đơn trang (SPA - Single Page Applications) với độ phức tạp cao

b Nodejs

- Nodejs là một môi trường chạy Javascript ( Javascript runtime environment) bên ngoài trình duyệt Nodejs cũng bao gồm các thành phần , thư viện khác để nó có thể hoạt động như một Web

Application Server

c Yarn

- Để có thể quản lý dự án của bạn một cách dễ dàng thì không thể không nhắc đến yarn Yarn giúp chúng ta cài đặt và chia sẻ code của mình với người khác dễ khác

d MongoDb

- Vue.js, gọi tắt là Vue, là một framework linh động dùng để xây dựnggiao diện người dùng (user interfaces - UI) Khác với các framework nguyên khối, Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo các bước Khi phát triển lớp giao diện, người dùng chỉ cần dùng thư viện lõi (core library) củaVue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng

Trang 9

được dễ dàng nhu cầu xây dựng những ứng dụng đơn trang (SPA - Single Page Applications) với độ phức tạp cao

- NoSQL là 1 dạng CSDL mã nguồn mở không sử dụng Transact-SQL

để truy vấn thông tin NoSQL viết tắt bởi: None-Relational SQL, hay

có nơi thường gọi là Not-Only SQL CSDL này được phát triển trên Javascript Framework với kiểu dữ liệu JSON (Cú pháp của JSON là

“key:value”) NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quan hệ RDBMS về tốc độ, tính năng, khả năng mở rộng, memory cache,

e Firebase storage

- Cloud Storage được xây dựng cho các nhà phát triển ứng dụng, những người cần lưu trữ và phân phát nội dung do người dùng tạo, chẳng hạn như ảnh hoặc video

- Cloud Storage cho Firebase là một dịch vụ lưu trữ đối tượng mạnh

mẽ, đơn giản và tiết kiệm chi phí được xây dựng cho quy mô của Google SDK Firebase cho Bộ nhớ đám mây bổ sung tính năng bảo mật của Google cho các tệp tải lên và tải xuống cho ứng dụng

Firebase của bạn, bất kể chất lượng mạng như thế nào Bạn có thể sử dụng SDK của chúng tôi để lưu trữ hình ảnh, âm thanh, video hoặc nội dung do người dùng tạo khác Trên máy chủ, bạn có thể sử dụng Google Cloud Storage , để truy cập các tệp giống nhau

9

Trang 10

 Có đầy đủ cả web và mobile app

 Tích hợp âm nhạc vào video clip

 Đi đầu trong việc tạo xu hướng,viral

 Có các tính năng chỉnh sửa video để người dùng có thể thao tác mà không cần phải qua một phần mềm thứ ba

 Đang là một trong những cộng đồng phát triển nhất hiện nay

 Đề xuất từ lịch sử hoạt động hay tìm kiếm của người dùng

Youtube

 UI/UX đẹp mắt

 Có đầy đủ cả web và mobile app

 Có những tính năng cơ bản của một nền tảng chia sẻ video như like,share,comment,…

 Có thể lưu trữ những video dài cũng như chỉnh chất lượng,tốc độ,…

 Chuyển video thành gift

 Là một cộng đồng lớn và lâu đời

 Có nhiều chủ đề cho người dùng lựa chọn

 Đề xuất từ lịch sử hoạt động hay tìm kiếm của người dùng

Trang 11

User  Watch Video

Dependency

Include use case

Extend use case

11

Trang 12

Hình 1.Sơ đồ usecase tổng quát

Trang 13

Hình 2.Sơ đồ usecase xem video

13

Trang 14

Hình 3.Sơ đồ usecase quản lý kênh cá nhân

Hình 4.Sơ đồ usecase xem lịch sử tìm kiếm và hoạt động

Trang 15

b) Đặc tả usecase

ID and Name: UC-1 Login

Created By: Nguyễn Trọng Tài Date Created: 20/11/2020

Actors:

Không Description: Use-case cho phép actor đăng nhập vào hệ thống với vai trò là user

Trigger: Guest muốn đăng nhập với vai trò là user

Preconditions: PRE-1: Guest muốn đăng nhập với trò là User

PRE-2 Tài khoản đã được Log outPostconditions: POST-1: Tài khoản chính xác

Normal Flow:  Actor chọn chức năng “đăng nhập ”

 Hệ thống hiển thị form gồm tên đăng nhập và mật khẩu

 Actor chọn chức năng “Connect with Google”

 Hệ thống hiển thị form đăng nhập bằng gmail

 Actor chọn đăng nhập bằng tài khoản gmail của mình

 Hệ thống yêu cầu actor xác thực gmail và cho phéo actor đăng nhập vào hệ thống

Exceptions: Nếu actor nhập tên và mật khẩu không đúng thì hệ thống sẽ báo lỗi.Priority: High

ID and Name: UC-2 Register

15

Trang 16

Normal Flow: Chức năng giúp actor đăng kí để trở thành tài khoản user

Actor nhấn “Sign up” để đăng ký tài khoản Actor điền thông tin tài khoản mình muốn đăng kí và xác nhận

Hệ thống xác thực và lưu thông tin người dùng vào CSDLAlternative

Actor bắt buộc phải đăng kí bằng email của mình

ID and Name: UC-3 Forgot password

Trang 17

Normal Flow: Chức năng này được dùng khi actor cần reset password

Hệ thống yêu cầu actor nhập thông tin tài khoản và xác nhận “resetpassword”

Hệ thống sẽ gửi email xác thực về tài khoản email đã đăng kíActor mở gmail và xác thực đó là mình và thực hiện điền password mới

Hệ thống gửi mail về xác nhận và lưu thông tin vào CSDL

ID and Name: UC-4 Search

Actors:

GuestDescription: Use-case cho phép actor tìm kiếm videos và channels trên website

Trigger:

Preconditions:

Postconditions:

17

Trang 18

Normal Flow: Chức năng này được sử dụng để tìm kiếm thông tin theo yêu cầu của

actorActor nhập thông tin mình muốn tìm kiếm trên thanh công cụ

Hệ thống truy cập database và hiển thị danh sách kết quả liên quan đếnthông tin người dùng nhập

Alternative Flows: Nếu như thông tin actor tìm kiếm không có trong database thì hệ thống sẽ

hiện thông báo “no result for data”

Exceptions:

Priority: High

Business Rules:

Other Information: Kết quả chỉ được hiển thị là videos và channels

Nếu actor muốn xem thông tin channels sẽ bắt buộc truy cập với vai trò user

ID and Name: UC-5 Your Channel

Normal Flow: Chức năng này cho phép actor xem các video đã được đăng lên hệ thống

Trang 19

ID and Name: UC-6 Subscriptions

Actors:

Không

Description: Use-case này cho phép actor xem những video từ các kênh mình đã theo

dõiTrigger: Actor đăng nhập vào hệ thống với vai trò là user

Preconditions:

Postconditions: Không

Normal Flow:  Chức năng này cho phép actor theo dõi được các hoạt động

mới nhất từ các kênh đang theo dõi

 Actor có thẻ theo dõi những video mới nhất của kênh mìnhtheo dỗi

 Actor nhấn “subscriptions” để truy cập vào các kênh mình

đã đăng kíAlternative

ID and Name: UC-7 Watch Video

Actors:

Guest

Description: Use-case cho phép actor xem các video được đăng lên cũng như thực hiện

các chức năng có trong video như:tăng âm lượng,phóng to màn hình,pause video…

19

Trang 20

Actor cũng có thể like,comment,share,coi thông tin chi tiết,đăng kí kênh,dislike…

Trigger:

Preconditions:

Postconditions:

Normal Flow:  Actor nhấn vào video mình muốn xem để coi video,actor có thể

chọn các chức năng pause,điều chỉnh âm lượng,phóng to màn hình,tăng tốc độ video

 Actor có thể like video nếu cảm tháy yêu thích bằng cách nhấn nút

“like” hoặc “dislike” nếu như thấy không thích video

 Actor có thể share video bằng cách nhấn nút “share” cũng nhưcomment hoặc reply comment để nêu ý kiến cá nhân của mình

 Actor có thể đăng kí kênh bằng cách nhấn nút “subscribe” hoặc hủytheo dõi bằng cách click lại nhần nữa

ID and Name: UC-8 Studio Manager

Actors:

Không Description: Usecase này cho phép actor quản lý kênh cá nhân

Trang 21

 Actor có thể click “videos” để xem các video mình đã đăng lêncũng như tìm kiếm các video của mình

 Actor có thể thay đổi thông tin cá nhân của kênh,tài khoản cánhân,avata bằng cách click vào “settings”.Khi actor hoàn thànhxong việc thay đổi actor nhấn vào submit để hệ thống lưu vàoCSDL.Actor cũng có thể thay đổi password trong chức năng này Alternative

Để thay đổi password actor phải nhập đúng password hiện tại nếu không

hệ thông sẽ không cho actor thực hiện

ID and Name: UC-9 History

Trang 22

Postconditions: Không

Normal Flow: Actor chọn các chức năng “Watch History” để coi các video mình đã từng

xem và “Search History” để coi các nội dung mình đã tìm kiếm

Actor chọn”Clear History” để xóa lịch sử xem hoặc tìm kiếm tùy vào nhucầu của actor

Trang 23

3 Thiết kế cơ sở dữ liệu

a) Sơ đồ lớp

23

Trang 24

b) Thiết kế cơ sở dữ liệu

Trang 25

4 Cài đặt phần mềm

a Cài đặt

- Yarn https://yarnpkg.com/

- Một editor bất kì như VScode, Intellij,…

- Hoặc có thể truy cập vào link https://gitlab.com/vuetube/web để được hướng dẫn chi tiết

25

Trang 26

-Hỗ trợ typescript giúp cho việc bảo trì phần mềm sẽ dễ dàng hơn rất nhiều.

Firebase storage Lưu trữ video, ảnh Lưu trữ dữ liệu dạng image

và video…

MongoDb Lưu trữ tất cả dữ liệu Đây là hệ quản trị cơ sở dữ

liệu theo cơ chế Nosql để truy vấn Để có thể dễ dàng phát triển đồ án lên thành một sản phẩm có chức năng live steam thì lựa chọn MongoDb là phù hợp

Trang 27

Chương 4 Thử nghiệm, đánh giá

1 Môi trưởng thử nghiệm

hành Ubuntu_ Responsive tốt_ Các chức năng thực hiện đúng theo những gì đã phân tích thiết kế

 Khả năng phản hồi nhanh,xử lý dữ liệu ổn định

 Website có đầy đủ các tính năng cơ bản cũng như không gặp lỗi trong quá trình test

Chương 5 Kết luận và hướng phát triển

1 Kết quả đạt được

 Tìm hiểu được các công nghệ mới

 Phân tích chi tiết và thiết kế đề tài theo UML

 Thiết kế dữ liệu theo noSql

 Cài đặt chương trình trên Visual Code, Intellij

 Thiết kế giao diện dễ nhìn

27

Định dạng
Số trang	30
Dung lượng	1,11 MB