Báo cáo bài tập lớn học phần công nghệ web và dịch vụ trực tuyến đề tài xây dựng extension cho trình duyệt

ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG - 🙡 🕮 🙣 - Báo cáo tập lớn Học phần: Công nghệ Web dịch vụ trực tuyến Đề tài: Xây dựng extension cho trình duyệt Giảng viên: TS.Đỗ Bá Lâm TS.Đào Thành Chung Nhóm 41 Mã lớp: 141328 Nhóm sinh viên thực hiện: STT Họ tên MSSV Nguyễn Quang Trung 20194194 Phạm Đức Trung 20190082 Thái Bảo Trung 20204858 Lại Quốc Trung 20204696 Hà Nội, tháng năm 2023 Mục lục CHƯƠNG MÔ TẢ ĐỀ TÀI Nội dung đề tài Kịch sử dụng Các tác nhân hệ thống Các hoạt động người dùng với hệ thống 4.1 Tiện ích lưu video 4.2 Web lưu trữ CHƯƠNG ĐẶC TẢ YÊU CẦU BÀI TOÁN .6 I.Phân tích yêu cầu chức Xác định tác nhân hệ thống Sơ đồ ca sử dụng tổng quan hệ thống Đặc tả ca sử dụng II.Phân tích yêu cầu phi chức 12 Yêu cầu bảo mật 12 Yêu cầu hiệu .12 Yêu cầu giao diện 12 Yêu cầu khác .12 CHƯƠNG PHÂN TÍCH THIẾT KẾ BÀI TỐN 13 I Mơ hình hóa tương tác 13 Các biểu đồ trình tự .13 II.Thiết kế chi tiết lớp 18 1.Sơ đồ lớp 18 1.2 Sơ đồ gói lớp Model 19 2.Mô tả lớp 21 III Thiết kế liệu 28 Sơ đồ quan hệ bảng liệu 28 2.Đặc tả sở liệu .28 CHƯƠNG 4: CÔNG NGHỆ SỬ DỤNG 31 I Các công nghệ sử dụng 31 Front-end .31 Back-end Server .34 Database: NoSQL .36 CHƯƠNG 5: KẾT QUẢ CHƯƠNG TRÌNH .37 I Chương trình minh họa 37 II Giao diện người dùng 37 CHƯƠNG 6: TỔNG KẾT .37 I Khó khăn học .37 II Phân công công việc 38 III Kết luận 38 TÀI LIỆU THAM KHẢO .38 LỜI NĨI ĐẦU Trong với bối cảnh cơng nghệ nay, việc áp dụng tiến độ khoa học công nghệ vào học tập , làm việc, thảo luận, khơng cịn q xa lạ Nhưng áp dụng chưa đủ, áp dụng cơng nghệ nhận rằng: Để công việc hay học tập trở nên hiệu ln cần tay phụ để trợ giúp cho Những cánh tay phụ người, cỗ máy, AI trợ giúp hay đơn giản tiện ích phụ trợ Tiện ích cơng cụ hỗ trợ kèm với thiết bị hay khuyến mại thêm sử dụng dịch vụ Nó giúp cơng việc trở nên nhanh gọn dễ dàng Trong phạm vi tập lớn học phần Công nghệ Web dịch vụ trực tuyến này, nhóm 41 chúng em chọn đề tài làm tiện ích cho trình duyệt Cụ thể tiện ích record hình máy tính Dưới báo cáo kết đạt nhóm em suốt trình xây dựng thời gian qua Báo cáo gồm chương: CHƯƠNG 1: MÔ TẢ ĐỀ TÀI CHƯƠNG ĐẶC TẢ YÊU CẦU BÀI TOÁN CHƯƠNG PHÂN TÍCH THIẾT KẾ BÀI TỐN CHƯƠNG 4: CƠNG NGHỆ SỬ DỤNG CHƯƠNG 5: KẾT QUẢ CHƯƠNG TRÌNH CHƯƠNG 6: TỔNG KẾT CHƯƠNG MÔ TẢ ĐỀ TÀI Nội dung đề tài Xây dựng tiện ích giúp người dùng record lại hình cần Tiện ích sử dụng trình duyệt Người dùng lựa chọn lựa chọn bật tắt mic Nếu thấy video chưa đạt yêu cầu, người dùng lựa chọn loại bỏ Người dùng tải video xuống lưu vào web lưu trữ Người dùng truy cập vào web lưu trữ hệ thống Ở người dùng xem lại video Ngồi ra, người dùng xem video người khác Kịch sử dụng Người dùng sử dụng tiện ích, ghi lại tồn hình lưu lại Người dùng đăng nhập vào web lưu trữ, xem lại video video người khác Các tác nhân hệ thống Những người thêm tiện ích vào trình duyệt Đối với web lưu trữ, người dùng đăng nhập vào hệ thống Các hoạt động người dùng với hệ thống 4.1 Tiện ích lưu video Quay lại hình Lựa chọn tắt hay bật mic Lưu lại video vừa quay Xoá video vừa quay 4.2 Web lưu trữ Đăng nhập Xem thông tin tài khoản Xem danh sách video Xem lại video Quản lý video Xem video người khác Xem thơng tin video người khác Comment video CHƯƠNG ĐẶC TẢ YÊU CẦU BÀI TỐN I.Phân tích u cầu chức Xác định tác nhân hệ thống Hệ thống có tác nhân chính: User User sử dụng chức hệ thống record video, xem video có database, tìm kiếm video, comment, … Sơ đồ ca sử dụng tổng quan hệ thống Đặc tả ca sử dụng 3.1 Đặc tả “UC001-Đăng nhập” Mã use case UC001 Tác nhân User Mục đích sử dụng User đăng nhập hệ thống Sự kiện kích hoạt User chọn chức đăng nhập hệ thống Điều kiện tiên Khơng Luồng kiện (Thành công) Tên use case Đăng nhập Khách chọn chức đăng nhập Hệ thống hiển thị giao diện đăng nhập tài khoản google Khách yêu cầu đăng nhập tài khoản google Hệ thống kiểm tra tài khoản hợp lệ hay không Hệ thống thông báo đăng nhập thành công chuyển giao diện Luồng kiện ngoại lệ Không Hậu điều kiện Hệ thống thông báo đăng nhập thành công chuyển giao diện 3.2 Đặc tả “UC002-Xem danh sách video” Mã use case UC002 Tác nhân User Mục đích sử dụng Tác nhân xem danh sách video record lại Sự kiện kích hoạt Tác nhân chọn chức xem danh sách tất video Điều kiện tiên Tác nhân trang chủ hệ thống Luồng kiện (Thành cơng) Tên use case Xem danh sách video Tác nhân chọn chức xem danh sách video Hệ thống hiển thị danh sách Luồng kiện ngoại lệ Không Hậu điều kiện Tác nhân xem danh sách video record 3.3 Đặc tả “UC003-Tìm kiếm video” Mã use case UC003 Tác nhân User Mục đích sử dụng Tác nhân tìm kiếm video Sự kiện kích hoạt Tác nhân chọn chức tìm kiếm video Điều kiện tiên Khơng Luồng kiện (Thành cơng) Tên use case Tìm kiếm video Tác nhân chọn chức tìm kiếm video Hệ thống hiển thị tìm kiếm Tác nhân nhập từ khóa tìm kiếm Tác nhân yêu cầu tìm kiếm Hệ thống liệt kê danh sách video có chứa từ khóa tìm kiếm Luồng kiện ngoại lệ 5a Hệ thống thông báo lỗi: từ khóa tìm kiếm khơng hợp lệ 5b Không tồn video phù hợp Hậu điều kiện Người dùng nhìn thấy danh sách video tìm thấy (có thể danh sách rỗng) 3.4 Đặc tả “UC004-Comment” Mã use case UC004 Tác nhân User Mục đích sử dụng User bình luận video Sự kiện kích hoạt User chọn bình luận video Điều kiện tiên User xem video Luồng kiện (Thành cơng) User chọn bình luận video User soạn thảo nội dung bình luận User yêu cầu đăng bình luận Hệ thống hiển thị bình luận video Khơng Luồng kiện ngoại lệ Hậu điều kiện Tên use case Comment Bình luận video, người xem 3.5 Đặc tả “UC005-Chỉnh sửa video” Mã use case UC005 Tác nhân User Mục đích sử dụng User chỉnh sửa viết Sự kiện kích hoạt User chọn chức chỉnh sửa video Điều kiện tiên User nhìn thấy video cần sửa Luồng kiện (Thành cơng) Tên use case Chỉnh sửa video User chọn chỉnh sửa video User chỉnh sửa video User yêu cầu đăng video Hệ thống hiển thị video sau chỉnh sửa Luồng kiện ngoại lệ Không Hậu điều kiện Video chỉnh sửa, người xem 3.6 Đặc tả “UC006-Xóa video” Mã use case UC006 Tác nhân User Mục đích sử dụng User xóa video Sự kiện kích hoạt User chọn xóa video Điều kiện tiên User xem video Luồng kiện (Thành cơng) User chọn xóa video User yêu cầu xóa video Hệ thống xóa video 2a Hệ thống báo lỗi: Xóa video bị lỗi Luồng kiện ngoại lệ Hậu điều kiện Tên use case Xóa video Video bị xóa, thành viên chuyển trang chủ 3.7 Đặc tả “UC007-Xem thông tin User” Mã use case UC007 Tác nhân User Mục đích sử dụng User xem chi tiết thông tin người dùng Sự kiện kích hoạt User chọn chức xem thơng tin người dùng Điều kiện tiên User nhìn thấy tên người dùng Luồng kiện (Thành cơng) Tên use case Xem thông tin người user User yêu cầu xem người dùng Hệ thống hiển thị chi tiết thông tin người dùng Luồng kiện ngoại lệ Không Hậu điều kiện User xem chi tiết thông tin người dùng 10 thông tin người dùng getInfoById id User public Thao tác tạo lấy thông tin người dùng thông qua Id saveUser name, avatar, None email public Lưu thông tin người dùng 2.2.2 Lớp VideoController · Mô tả: quản lý thao tác liên quan đến video · Các phương thức Tên phương thức Đầu vào Đầu Phạm vi truy cập Mô tả searchVideoController title, page Video public Thao tác tìm kiếm video getAllVideoController page Video public Thao tác lấy tất video 24 getVideoController id Video public Thao tác tạo lấy video theo id deleteVideoController id Nonde public Xóa video theo id updateVideoControlle id, data r Video public Update thông tin video addVideo url, userId, title Video public Tạo video addCommentVideo userId, content Comment public Thêm comment cho video uploadVideo url Video public Lưu video vào danh sách addViewer videoId, userId None pubic Thêm người xem vào danh sách người xem deleteComment videoId, commentId None public Xóa comment cho video 2.3 Gói View 2.3.1 Lớp User · Mô tả: quản lý thao tác liên quan đến người dùng 25 · Các phương thức Tên phương thức login() Đầu vào None Đầu Phạm vi truy cập Mô tả User public Thao tác đăng nhập người dùng User public Thao tác tạo lấy thông tin người dùng thông qua Id String getInfoById id 2.2.2 Lớp VideoController · Mô tả: quản lý thao tác liên quan đến video · Các phương thức Tên phương thức Đầu vào Đầu Phạm vi truy cập Mô tả searchVideo title, page Video public Thao tác tìm kiếm video getAllVideo page Video public Thao tác lấy tất video 26 getVideo id Video public Thao tác tạo lấy video theo id deleteVideo id Nonde public Xóa video theo id updateVideo id, data Video public Update thông tin video addVideo url, userId, title Video public Tạo video addCommentVideo userId, content Comment public Thêm comment cho video uploadVideo url Video public Lưu video vào danh sách 27 III Thiết kế liệu Sơ đồ quan hệ bảng liệu 2.Đặc tả sở liệu 2.1 Model User *)Mục đích sử dụng: Lưu thông tin cá nhân người dùng STT Tên trường Kiểu liệu Nullable Mô tả email String No Email đăng nhập tài khoản người dùng name String No Tên đầy đủ người dùng 28 avatar String No Avatar người dùng createAt Date No Thời gian người dùng đăng nhập vào hệ thống 2.2.Model Video *)Mục đích sử dụng: Lưu thơng tin video STT Tên trường Kiểu liệu Nullable Mô tả url String No url chứa đường dẫn video viewers Array No Array chứa thông tin user xem video comments Array No Array chứa thông tin comment userId String No Thông tin người tạo video title String No Tiêu đề video createAt Date No Thời gian tạo video 29 2.3.Model Comment *)Mục đích sử dụng: Lưu thơng tin comment STT Tên trường Kiểu liệu Nullable Mô tả id String No Id comment author String No Thông tin người comment content String No Thông tin chứa chủ đề comment createAt Date No Thời gian tạo comment 30 CHƯƠNG 4: CƠNG NGHỆ SỬ DỤNG I Các cơng nghệ sử dụng Front-end 1.1 HTML ─ Để tạo khuôn cho trang web trao đổi lập trình, nhóm lựa chọn ngôn ngữ HTML, chữ viết tắt Hypertext Markup Language, nhờ cấu trúc thành phần trang web, phân chia đoạn văn, heading, links, blockquotes, … đáp ứng yêu cầu môn học ─ HTML không dùng để tạo thành phần có tính “động”, dùng để tạo bố cục, nhóm thảo luận đưa cách trình bày bố cục cho thật dễ nhìn, sau kết hợp với cơng cụ trình bày khác để giúp trang web đẹp “động” ─ Với kiến thức bản: Mỗi trang HTML chứa tag (hay elements), tag lại có nhiều tag khác Việc tạo khối tag bao xem việc xây dựng khối trang web Công việc giống xây dựng thư mục Nắm bắt điều đó, nhóm hiểu khơng có phần xây dựng tổng qt (gốc rễ thư mục nhánh chính) làm xong trang web khơng đồng gây phức tạp không đáng có Do trước bắt tay vào phần cụ thể, nhóm 31 tạo nên cấu trúc chung cho tất trang web, chia nhỏ thành module phân việc cụ thể cho người 1.2 CSS ─ Để trang web sinh động với bố cục xây dựng HTML đảm bảo yêu cầu môn học, nhóm chọn ngơn ngữ CSS cơng cụ thiết kế giao diện ─ CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngôn ngữ đánh dấu HTML Đây đích thực ngơn ngữ tạo phong cách cho trang web, thay đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc, … Phương thức hoạt động CSS tìm vùng trang HTML dựa tên thẻ, tên ID, class hay nhiều kiểu khác Sau áp dụng thuộc tính cần thay đổi lên vùng chọn ─ Tuy nhiên trang web mà nhóm làm có nhiều thành phần bố cục, qua phân tích thấy trình thành viên làm việc tạo file css riêng có nhiều vùng chọn thuộc tính, lại có phần header, footer cố định dù đường dẫn nữa, gây thiết đồng bộ, lủng củng phức tạp, nhóm thống tạo file css chung, phần cố định xây dựng từ đầu, thành viên bổ sung phần khác xây dựng module mà phân công không thay đổi phần cố định 32 ─ Nhờ có HTML CSS, nhóm tạo giao diện tương đối đơn giản dễ nhìn cho trang web 1.3 ReactJs ─ Nếu trang web có HTML CSS có bố cục màu sắc, trang web hồn tồn tĩnh Người dùng khơng thể thao tác với thứ hình Do đó, Javascript lựa chọn nhóm để giúp trang web thêm phần sinh động mà người dùng có tương tác (tính “động”), chẳng hạn điền vào biểu mẫu, ẩn thông báo, … ─ Đây ngôn ngữ đơn giản mà hiệu cao Là người tiếp cận với lĩnh vực Web, nhóm thấy lựa chọn học Javascript lựa chọn tốt lẽ ngôn ngữ dễ học, dùng kiến thức đủ để tăng tính “động” nhiều lần cho trang web –Reactjs hiệu quả: Reactjs tạo cho DOM ảo – nơi mà component thực tồn Điều giúp cải thiện hiệu suất nhiều Reactjs tính tốn thay đổi cần cập nhật len DOM thực chúng Điều giúp Reactjs tránh thao tác cần DOM mà nhiều chi phí 33 Back-end Server 2.1 Back-end ─ Để xây dựng trang web khơng thể thiếu phần liệu Đối với trang web với mục đích trao đổi quản lý video phần xử lý liệu thực phần quan trọng có vơ số thứ cần xử lý hiển thị video, bình luận, thơng tin người dùng, … ─ Để dễ dàng tiếp cận mở rộng dự án sau, nhóm thống sử dụng Nodejs –Nodejs tảng (Platform) phát triển độc lập xây dựng V8 JavaScript Engine – trình thơng dịch thực thi mã JavaScript giúp xây dựng ứng dụng web trang video clip, forum đặc biệt trang mạng xã hội phạm vi hẹp cách nhanh chóng dễ dàng mở rộng –Bên cạnh tốc độ khả mở rộng, việc dùng JavaScript server trình duyệt giúp cho bạn đỡ phải chuyển đổi ngôn ngữ Bạn làm thứ với ngơn ngữ –Một điểm mạnh Node cực thích hợp với JSON JSON coi lý tưởng sử dụng chương trình JavaScript Khi làm việc với Node, liệu chuyển qua tầng layer mà không cần phải reformat 34 2.2 Server –Để chạy trang web cần có server Vì khơng có điều kiện để thuê hay mua máy chủ server chuyên dụng yêu cầu với server không cao nên nhóm lựa chọn mongoDB làm cloud server –MongoDB chương trình sở liệu mã nguồn mở thiết kế theo kiểu hướng đối tượng bảng cấu trúc cách linh hoạt cho phép liệu lưu bảng không cần phải tuân theo dạng cấu trúc định Chính cấu trúc linh hoạt nên MongoDB dùng để lưu trữ liệu có cấu trúc phức tạp đa dạng không cố định (hay gọi Big Data) Lợi MongoDB so với sở liệu dạng quan hệ(RDBMS) –Ít Schema hơn: MongoDB sở liệu dựa Document, Collection giữ Document khác Số trường, nội dung kích cỡ Document khác với Document khác –Cấu trúc đối tượng rõ ràng –Khơng có Join phức tạp –Khả truy vấn sâu MongoDB hỗ trợ truy vấn động Document sử dụng ngôn ngữ truy vấn dựa Document mà mạnh mẽ SQL –MongoDB dễ dàng để mở rộng –Việc chuyển đổi/ánh xạ đối tượng ứng dụng đến đối tượng sở liệu không cần thiết –Sử dụng nhớ nội để lưu giữ phần công việc, giúp truy cập liệu nhanh 35 Database: NoSQL ─ Cuối cùng, liệu thành phần thiếu mà điển hình trang web quản lý video đề tài nhóm Hiện có nhiều hệ quản trị sở liệu từ quan hệ đến khơng quan hệ, hệ quản trị nhìn chung có điểm mạnh điểm yếu riêng –Nhóm thống sử dụng hệ quản trị liệu NoSql –Đây thuật ngữ chung cho hệ CSDL khơng sử dụng mơ hình liệu quan hệ NoSQL đặc biệt nhấn mạnh đến mơ hình lưu trữ cặp giá trị - khóa hệ thống lưu trữ phân tán Các đặc điểm NoSql: –Phi quan hệ (hay không ràng buộc): relational - ràng buộc - thuật ngữ sử dụng đến mối quan hệ bảng sở liệu quan hệ (RDBM) sử dụng mơ hình gồm loại khóa: khóa khóa phụ (primary key + foreign key) để ràng buộc liệu nhằm thể tính quán liệu từ bảng khác Non-relational khái niệm không sử dụng ràng buộc liệu cho quán liệu 36 –Lưu trữ phân tán: mơ hình lưu trữ phân tán tập tin liệu nhiều máy khác mạng LAN Internet kiểm sốt phần mềm –Nhất qn cuối: tính quán liệu không cần phải đảm bảo tức khắc sau phép ghi Một hệ thống phân tán chấp nhận ảnh hưởng theo phương thức lan truyền sau khoảng thời gian (không phải tức khắc), thay đổi đến điểm hệ thống để cuối liệu hệ thống trở lại trạng thái quán CHƯƠNG 5: KẾT QUẢ CHƯƠNG TRÌNH I Chương trình minh họa · Website xây dựng với kế hoạch Các chức Website đáp ứng tương đối tốt yêu cầu đề · Website đặt tên “Extension record hình - quản lý video record” II Giao diện người dùng CHƯƠNG 6: TỔNG KẾT I Khó khăn học Kỹ làm việc nhóm có tiến bộ, thời gian xếp lên lịch từ trước, thành viên có ý thức chuẩn bị, trình bày rõ ràng để tránh thời gian Đây điều mà buổi đầu khơng thể có được, thành viên chưa biết lập trình Web nên khó bao quát phân chia công việc hợp lý, không rõ làm làm Sau trình học tập lớp ý thức tự giác, có trách nhiệm nhận cơng việc, tập lớn hồn thành Cả nhóm cố gắng làm Website đơn giản Đây điều mà nhóm phải hồn thành, riêng đối nhóm học đồn kết, giúp đỡ sẻ chia cho Vì học kỳ có nhiều tập lớn, nhóm xây dựng lên nguyên tắc “Người rảnh giúp đỡ người bận hơn” nên công việc không bị delay nhiều kết đạt mong đợi 37 II Phân công công việc III Kết luận Khoảng 14 tuần học lý thuyết trang bị cho thành viên kiến thức lập trình Web Nhìn chung, nhóm nắm kiến thức có khả vận dụng vào tập lớn Website hoàn thành với chức thực tốt yêu cầu đề ra, không mượt mà Website thương mại Nhưng nỗ lực nhóm thành không nhỏ Từ số không, thành viên biết cách viết Web Visual Studio Code, kết hợp với sử dụng NoSql tảng MongoDB TÀI LIỆU THAM KHẢO [1]Các phần html, css, reactjs, nodejs https://www.w3schools.com/ [2]Hướng dẫn cài đặt sử dụng mongoDB https://viblo.asia/p/mongodb-p3-huong-dan-cai-dat-va-su-dungmongodb-Ny0VGdwY4PA 38