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

ĐẠ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 XÂY DỰNG WEBSITE CHIA SẺ VIDEO GIẢNG VIÊN HƯỚNG DẪN Thạc sĩ:Hoàng Văn Hà Sinh viên thực hiện: Nguyễn Trọng Tài-1751002 Trần Đình Thiện-17521080 TP HỒ CHÍ MINH, ngày tháng năm 2021 LỜI CẢM ƠN Trên thực tế, khơng có thành cơng mà không gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Trong suốt thời gian từ bắt đầu học tập giảng đường đại học đến nay, chúng em nhận nhiều quan tâm, giúp đỡ q thầy cơ, gia đình 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ần mềm – Trường Đại học Công nghệ thông tin, người với tri thức tâm huyết 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 trường Và đặc biệt, học kỳ này, khoa tổ chức cho em tiếp cận với môn Đồ Án 2, môn học mà theo chúng em hữu ích 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ẫn chúng em từ bước góp ý chân thành để chúng em cải thiện đồ án cách tốt Nếu khơng có lời hướng dẫn, dạy bảo thầy chúng em nghĩ đồ án khó mà hồn thành Một lần nữa, chúng em xin chân thành cảm ơn thầy Thành phố Hồ Chí Minh, ngày tháng năm 2021 Trần Đình Thiện Nguyễn Trọng Tài Nhận xét 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à Mục lục Chương Giới thiệu đề tài Hiện trạng tổ chức Giới hạn/ phạm vi a) Bài toán b) Nhận xét toán: .6 Các nội dung thực Kết hướng tới Chương Các kiến thức/ công nghệ tảng Giới thiệu công nghệ sử dụng a Framework Vuejs b Nodejs c Yarn .8 d MongoDb e Firebase storage Chương Xây dựng ứng dụng 10 Tổng quan khảo sát ứng dụng liên quan 10 Phân tích .11 Thiết kế sở liệu 24 Cài đặt phần mềm 26 Các áp dụng framework/ lib tìm hiểu vào ứng dụng 26 Chương Thử nghiệm, đánh giá 28 Môi trưởng thử nghiệm 28 Kết thực nghiệm 28 Đánh giá kết sản phẩm 28 Chương Kết luận hướng phát triển .29 Kết đạt 29 Hạn chế hướng phát triển 29 Tài liệu tham khảo .31 Chương Giới thiệu đề tài Hiện trạng tổ chức Chúng ta sống kỷ nguyên công nghệ 4.0 toàn cầu, ngày bùng nổ mạng máy tính ứng dụng nó, người nhanh chóng giao tiếp kết nối với thông qua nhiều ứng dụng Interne.Đi kèm với phát triển mạnh mẽ tảng giải trí.Trong xem video,xem live stream nhu cầu giải trí khơng thể thiếu sống ngày nay.Từ video tích lũy thêm kiến thức nhiều lĩnh vực khác có giây phút thư giãn sau làm việc căng thẳng Trên thị trường nay, có nhiều ứng dụng chia sẻ video trang web hay mạng xã hội video tiếng nhiều người tin dùng sử dụng Do đó, để tiếp nối thành cơng ấy, nhóm chúng em muốn góp phần cơng sức để tạo cộng đồng cho người có đam mê quay phim,chụp hình tạo trend nơi để người chia sẻ ý kiến cá nhân hay góp ý để phát triển hơn.Khơng trang web cịn mơi trường tuyệt vời để người tích lũy thêm kiến thức từ nhiều lĩnh vực khác từ nhiều người khác Giới hạn/ phạm vi a) Bài toán Drago Zero trang web đặc thù áp dụng công nghệ thông tin vào hoạt động: chia sẻ video qua mạng sau có xu hường mở rộng Drago Zero website dành cho nhà sáng tạo tảng giải trí hay nơi trau dồi kiến thức video.Mục tiêu việc xây dựng trang web nhằm giúp cho người dùng chia sẻ hay xem video trực tiếp từ xa thông qua mạng internet phổ biến Người dùng nhà hay cơng ty dễ dàng truy cập lựa chọn video hay bổ ích phù hợp với nhu cầu cá nhân, giúp việc giải trí chỗ cách nhanh chóng, tiện lợi, tiết kiệm thời gian, đáp ứng 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 thành viên website) hay cần vài thao tác đăng kí đơn giản người dùng dễ dàng xem video từ kênh yêu thích sáng tạo video để chia sẻ với cộng đồng b) Nhận xét toán: Phạm vi đồ án website giúp cho người dùng thực tác vụ sau:  Xem video  Tìm kiếm video  Đăng video  Like/Dislike/Comment (thể quan điểm cá nhân)  Chia sẻ Video  Live stream  Báo cáo nội dung video  Đề xuất video  Lưu trữ video  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 xóa lịch sử tìm kiếm,lịch sử theo dõi  Tạo kênh cá nhân Các nội dung thực Nội dung nghiên cứu: Xu hướng UI/UX website chia sẻ video Thực hiện: Lên kế hoạch thiết kế UI/UX cho đề tài Các chức website chia sẻ video Công nghệ VueJS Công nghệ NodeJs Công nghệ Yarn Hệ sở liệu MongoDB Lên kế hoạch thiết kế chức cho đề tài Xây dựng giao diện website Xây dựng backend cho toàn hệ thống Giúp cho việc quản lý dự án, cài đặt dễ dàng Xây dựng sở liệu cho toàn hệ thống Kết hướng tới      Giao diện thân thiện đẹp mắt,dễ nhìn Khả truy xuất cao Website có đầy đủ tính website chia sẻ video Đáp ứng đầy đủ nhu cầu người dùng Là tảng chia sẻ video nơi lưu trữ video nhiều người tin dùng Chương Các kiến thức/ công nghệ tảng Giới thiệu công nghệ sử dụng a Framework Vuejs - Vue.js, gọi tắt Vue, framework linh động dùng để xây dựng giao diện người dùng (user interfaces - UI) Khác với framework nguyên khối, Vue thiết kế từ đầu theo hướng cho phép khuyến khích việc phát triển ứng dụng theo bước Khi phát triển lớp giao diện, người dùng cần dùng thư viện lõi (core library) Vue, vốn dễ học tích hợp với thư viện dự án có sẵn Cùng lúc đó, kết hợp với kĩ thuật đại SFC (single file components) thư viện hỗ trợ, Vue đáp ứng dễ dàng nhu cầu xây dựng ứng dụng đơn trang (SPA Single Page Applications) với độ phức tạp cao b Nodejs - Nodejs môi trường chạy Javascript ( Javascript runtime environment) bên ngồi trình duyệt Nodejs bao gồm thành phần , thư viện khác để hoạt động Web Application Server c Yarn - Để quản lý dự án bạn cách dễ dàng khơng thể khơng nhắc đến yarn Yarn giúp cài đặt chia sẻ code với người khác dễ khác d MongoDb - Vue.js, gọi tắt Vue, framework linh động dùng để xây dựng giao diện người dùng (user interfaces - UI) Khác với framework nguyên khối, Vue thiết kế từ đầu theo hướng cho phép khuyến khích việc phát triển ứng dụng theo bước Khi phát triển lớp giao diện, người dùng cần dùng thư viện lõi (core library) Vue, vốn dễ học tích hợp với thư viện dự án có sẵn Cùng lúc đó, kết hợp với kĩ thuật đại SFC (single file components) thư viện hỗ trợ, Vue đáp ứng dễ dàng nhu cầu xây dựng ứng dụng đơn trang (SPA - Single Page Applications) với độ phức tạp cao NoSQL 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 Not-Only SQL CSDL phát triển Javascript Framework với kiểu liệu JSON (Cú pháp JSON “key:value”) NoSQL đời mảnh vá cho khuyết điểm thiếu xót hạn chế mơ hình liệu quan hệ RDBMS tốc độ, tính năng, khả mở rộng, memory cache, e Firebase storage - Cloud Storage xây dựng cho nhà phát triển ứng dụng, người cần lưu trữ phân phát nội dung người dùng tạo, - chẳng hạn ảnh video Cloud Storage cho Firebase dịch vụ lưu trữ đối tượng mạnh mẽ, đơn giản tiết kiệm chi phí xây dựng cho quy mơ Google SDK Firebase cho Bộ nhớ đám mây bổ sung tính bảo mật Google cho tệp tải lên tải xuống cho ứng dụng Firebase bạn, chất lượng mạng Bạn sử dụng SDK chúng tơi để lưu trữ hình ảnh, âm thanh, video nội dung người dùng tạo khác Trên máy chủ, bạn sử dụng Google Cloud Storage , để truy cập tệp giống Chương Xây dựng ứng dụng Tổng quan khảo sát ứng dụng liên quan Các ứng dụng liên quan: TikTok Kết khảo sát tổng quan:              Youtube      UI/UX đẹp mắt Có đầy đủ web mobile app Tích hợp âm nhạc vào video clip Đi đầu việc tạo xu hướng,viral Có tính chỉnh sửa video để người dùng thao tác mà khơng cần phải qua phần mềm thứ ba Tạo video ngắn có tích hợp nhạc Có tính tảng chia sẻ video like,share,comment,… Người dùng chọn lọc video hay chủ đề muốn xem Đang cộng đồng phát triển Đề xuất từ lịch sử hoạt động hay tìm kiếm người dùng UI/UX đẹp mắt Có đầy đủ web mobile app Có tính tảng chia sẻ video like,share,comment,… Có thể lưu trữ video dài chỉnh chất lượng,tốc độ,… Chuyển video thành gift Là cộng đồng lớn 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 người dùng Phân tích a) Sơ đồ usecase Primary Actor Guest Use Cases     Log In Register Forgot password Watch Video 10 b) Đặc tả usecase ID and Name: UC-1 Login Created By: Nguyễn Trọng Tài Date Created: 20/11/2020 Primary Actor: Guest Secondary Không Actors: Description: Use-case cho phép actor đăng nhập vào hệ thống với vai trò user Trigger: Guest muốn đăng nhập với vai trò user Preconditions: PRE-1: Guest muốn đăng nhập với trò User PRE-2 Tài khoản Log out Postconditions: POST-1: Tài khoản xác Normal Flow: Alternative Flows: Exceptions:  Actor chọn chức “đăng nhập ”  Hệ thống hiển thị form gồm tên đăng nhập mật  Actor chọn đăng nhập  Hệ thống kiểm tra tên đăng nhập mật khẩu, xác nhận cho phép actor đăng nhập vào hệ thống  Actor chọn chức “Connect with Google”  Hệ thống hiển thị form đăng nhập gmail  Actor chọn đăng nhập tài khoản gmail  Hệ thống yêu cầu actor xác thực gmail cho phéo actor đăng nhập vào hệ thống Nếu actor nhập tên mật không hệ thống báo lỗi Priority: High Frequency of Use: Business Rules: Other Information: Assumptions: ID and Name: UC-2 Register Created By: Nguyễn Trọng Tài Date Created: 20/11/2020 Primary Actor: Guest Secondary Không 15 Actors: Description: Use-case cho phép actor đăng ký tài khoản để trở thành user Trigger: Preconditions: Postconditions: Normal Flow: Chức 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 muốn đăng kí xác nhận Hệ thống xác thực lưu thông tin người dùng vào CSDL Alternative Không Flows: Exceptions: Không Priority: High Business Rules: Không Other Hệ thống yêu cầu người dùng phải nhập xác thơng tin nhập sai hệ thống thông báo lỗi Information: Actor bắt buộc phải đăng kí email ID and Name: UC-3 Forgot password Created By: Nguyễn Trọng Tài Date Created: 20/11/2020 Primary Actor: Guest Secondary Actors: Description: Use-case cho phép actor thực việc reset password actor gặp vấn đề tài khoản Trigger: Preconditions: Postconditions: 16 Normal Flow: Chức dùng actor cần reset password Hệ thống yêu cầu actor nhập thông tin tài khoản xác nhận “reset password” Hệ thống gửi email xác thực tài khoản email đăng kí Actor mở gmail xác thực thực điền password Hệ thống gửi mail xác nhận lưu thông tin vào CSDL Alternative Flows: Exceptions: Priority: high Business Rules: Other Nếu actor không điền đầy đủ thông tin bắt buộc không xác thực Information: email hệ thống khơng cho reset password ID and Name: UC-4 Search Created By: Nguyễn Trọng Tài Date Created: 20/10/2020 Primary Actor: User Secondary Actors: Guest Description: Use-case cho phép actor tìm kiếm videos channels website Trigger: Preconditions: Postconditions: Normal Flow: Chức sử dụng để tìm kiếm thơng tin theo u cầu actor Actor nhập thơng tin muốn tìm kiếm công cụ Hệ thống truy cập database hiển thị danh sách kết liên quan đến thông tin người dùng nhập 17 Alternative Flows: Nếu thông tin actor tìm kiếm khơng có database hệ thống thông báo “no result for data” Exceptions: Priority: High Business Rules: Other Information: Kết hiển thị videos channels Nếu actor muốn xem thông tin channels bắt buộc truy cập với vai trò user ID and Name: UC-5 Your Channel Created By: Nguyễn Trọng Tài Date Created: 20/11/2020 Primary Actor: User Secondary Actors: Description: Use-case cho phép actor truy cập vào kênh cá nhân Trigger: Preconditions: Trước use-case bắt đầu actor phải đăng nhập vào hệ thống với vai trị User Postconditions: Khơng Normal Flow: Chức cho phép actor xem video đăng lên hệ thống Có thể xem video đăng để test coi thơng tin video Alternative Actor truy cập vào “Studio Manager” từ kênh cá nhân Flows: Exceptions: Priority: High Business Rules: Other Information: ID and Name: UC-6 Subscriptions Created By: Nguyễn Trọng Tài Date Created: 20/11/2020 Primary Actor: User Secondary Không 18 Actors: Description: Use-case cho phép actor xem video từ kênh theo dõi Trigger: Actor đăng nhập vào hệ thống với vai trị user Preconditions: Postconditions: Khơng Normal Flow:  Chức cho phép actor theo dõi hoạt động từ kênh theo dõi  Actor có thẻ theo dõi video kênh theo dỗi  Actor nhấn “subscriptions” để truy cập vào kênh đăng kí Alternative Flows: Exceptions: Priority: High Business Rules: Other Information: ID and Name: UC-7 Watch Video Created By: Nguyễn Trọng Tài Date Created: 20/11/2020 Primary Actor: User Secondary Guest Actors: Description: Use-case cho phép actor xem video đăng lên thực chức có video như:tăng âm lượng,phóng to hình,pause video… Actor like,comment,share,coi thơng tin chi tiết,đăng kí kênh,dislike… Trigger: Preconditions: Postconditions: 19 Normal Flow:  Actor nhấn vào video muốn xem để coi video,actor chọn chức pause,điều chỉnh âm lượng,phóng to hình, tăng tốc độ video  Actor like video cảm tháy yêu thích cách nhấn nút “like” “dislike” thấy khơng thích video  Actor share video cách nhấn nút “share” comment reply comment để nêu ý kiến cá nhân  Actor đăng kí kênh cách nhấn nút “subscribe” hủy theo dõi cách click lại nhần Alternative Flows: Exceptions: Priority: high Business Rules: Other  Information: Nếu actor chưa đăng nhập với vai trò actor xem video thao tác chức pause,điều chỉnh âm lượng,phóng to hình, tăng tốc độ video  Cịn actor chưa đăng nhập với vai trò user mà muốn sử dụng tính like,comment,share,coi thơng tin chi tiết,đăng kí kênh,dislike…thì bị trả vể trang đăng nhập ID and Name: UC-8 Studio Manager Created By: Nguyễn Trọng Tài Date Created: 20/11/2020 Primary Actor: User Secondary Không Actors: Description: Usecase cho phép actor quản lý kênh cá nhân Trigger: Preconditions: Postconditions: 20 Normal Flow:  Actor đăng video lên website cách click vào “upload video”  Hệ thống yêu cầu actor chọn video từ nơi lưu trữ video để đăng lên kênh cá nhân  Actor xem comments lượt like video cách click vào “dashboard” click “see analyctics” “see comments” “recent subscribers” để xem thơng tin kênh đăng kí click “unsubscriber” để hủy đăng kí kênh  Actor click “videos” để xem video đăng lên tìm kiếm video  Actor thay đổi thơng tin cá nhân kênh,tài khoản cá nhân,avata cách click vào “settings”.Khi actor hoàn thành xong việc thay đổi actor nhấn vào submit để hệ thống lưu vào CSDL.Actor thay đổi password chức Alternative Flows: Exceptions: Priority: High Business Rules: Other Information: Để thay đổi password actor phải nhập password không hệ thông không cho actor thực ID and Name: UC-9 History Created By: Nguyễn Trọng Tài Date Created: 20/10/2020 Primary Actor: User Secondary Không Actors: Description: Use-case cho phép actor xem lịch sử xem tìm kiếm Trigger: Preconditions: Postconditions: Khơng Normal Flow: Actor chọn chức “Watch History” để coi video xem “Search History” để coi nội dung tìm kiếm 21 Actor chọn”Clear History” để xóa lịch sử xem tìm kiếm tùy vào nhu cầu actor Alternative Flows: Exceptions: Priority: High Business Rules: Other Information: c) Mơ hình kiến trúc hệ thống Thiết kế sở liệu a) Sơ đồ lớp 22 b) Thiết kế sở liệu 23 Cài đặt phần mềm a Cài đặt - Yarn https://yarnpkg.com/ - Một editor VScode, Intellij,… 24 - Hoặc truy cập vào link https://gitlab.com/vuetube/web để hướng dẫn chi tiết Hình Hướng dẫn cài đặt Các áp dụng framework/ lib tìm hiểu vào ứng dụng Framework/lib Vuejs + Vuetify Sử dụng Front-end Mô tả - Hỗ trợ xây dựng giao diện người dùng -Hiệu suất Vuejs so với Reactjs nhanh gấp đôi -Hỗ trợ typescript giúp cho việc bảo trì phần mềm dễ dàng nhiều Nodejs Firebase storage Back-end Lưu trữ video, ảnh Hỗ trợ viết code server Lưu trữ liệu dạng image video… 25 MongoDb Lưu trữ tất liệu 26 Đây hệ quản trị sở liệu theo chế Nosql để truy vấn Để dễ dàng phát triển đồ án lên thành sản phẩm có chức live steam lựa chọn MongoDb phù hợp Chương Thử nghiệm, đánh giá Môi trưởng thử nghiệm Windows 8GB 256GB Nvidia 1050ti 7700HQ Ram HDD VGA CPU Ubuntu 8GB 256GB Nvidia 1050ti 7700HQ Kết thực nghiệm Ứng dụng Website Kết quả: _ Website chạy mượt hệ điều hành windows _ Responsive website tốt _ Các chức thực theo phân tích thiết kế _ Website chạy mượt hệ điều hành Ubuntu _ Responsive tốt _ Các chức thực theo phân tích thiết kế Website Đánh giá kết sản phẩm  Website chạy tốt nhiều hệ điều hành khác trình duyệt     khác, Bị lỗi responsive Explore internet Giao diện đẹp mắt ,dễ nhìn Khả phản hồi nhanh,xử lý liệu ổn định Website có đầy đủ tính khơng gặp lỗi trình test Chương Kết luận hướng phát triển Kết đạt         Tìm hiểu cơng nghệ Phân tích chi tiết thiết kế đề tài theo UML Thiết kế liệu theo noSql Cài đặt chương trình Visual Code, Intellij Thiết kế giao diện dễ nhìn Phân loại video theo danh mục Hiển thị thông tin chi tiết video Cung cấp hình thức tìm kiếm theo tên video channel 27  Giúp người dùng thể quan điểm cá nhân cách like,dislike,share,comment…  Người dùng hiệu chỉnh thông tin kênh cá nhân  Phân chia chức cho guest user thông qua menu  Người dùng có quản lý video đăng lên thêm,chỉnh sửa,xóa video…  Có chức đăng kí kênh,hủy đăng kí kênh,xóa lịch sử tìm kiếm,hoạt động, chia sẻ video cho người khác,  Cơ chế limit req,… Hạn chế hướng phát triển Hạn chế  Một số tính chưa thực phân tích video,live stream,xem video like,report,trending,send feedback…  Chưa có tính nâng cao  Lưu trữ tối đa 5GB Hướng phát triển tương lai  Phát triển thêm tính live stream tính chưa hồn thiện  Phát triển thêm tính đề xuất từ lịch sử hoạt động người dùng  Phát triển thêm tính comment lúc live stream  Tăng trải nghiệm người dùng với dark mode, đa ngôn ngữ,…  Cho phép người dùng gửi mail báo cáo cần trợ giúp  Nghiên cứu thêm để đưa vào tính nâng cao 28 Tài liệu tham khảo https://vuejs.org/ https://nodejs.org/en/docs/ https://vuetifyjs.com/en/components/ https://firebase.google.com/docs/web/setup https://mongoosejs.com/docs/guide.html https://docs.mongodb.com/manual/ https://www.npmjs.com/package/vue-google-oauth2 https://www.npmjs.com/package/lodash https://www.npmjs.com/package/vuelidate 10 https://www.npmjs.com/package/axios 11 https://www.npmjs.com/package/video.js 12 https://www.npmjs.com/package/typescript-ioc 13 https://www.npmjs.com/package/express 14 https://www.npmjs.com/package/nodemailer 15 https://www.npmjs.com/package/jsonwebtoken 29 ... dùng thành viên website) hay cần vài thao tác đăng kí đơn giản người dùng dễ dàng xem video từ kênh u thích sáng tạo video để chia sẻ với cộng đồng b) Nhận xét toán: Phạm vi đồ án website giúp cho... vụ sau:  Xem video  Tìm kiếm video  Đăng video  Like/Dislike/Comment (thể quan điểm cá nhân)  Chia sẻ Video  Live stream  Báo cáo nội dung video  Đề xuất video  Lưu trữ video  Quản lý... thiện đẹp mắt,dễ nhìn Khả truy xuất cao Website có đầy đủ tính website chia sẻ video Đáp ứng đầy đủ nhu cầu người dùng Là tảng chia sẻ video nơi lưu trữ video nhiều người tin dùng Chương Các kiến