Đồ án tìm hiểu brave vivaldi và xây dựng ứng dụng tương tự

ĐẠ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 TÌM HIỂU BRAVE, VIVALDI VÀ XÂY DỰNG ỨNG DỤNG TƯƠNG TỰ GIẢNG VIÊN HƯỚNG DẪN HUỲNH HỒ THỊ MỘNG TRINH SINH VIÊN THỰC HIỆN NGUYỄN XUÂN TÀI – 20520744 NGUYỄN THANH TUẤN – 20520846 TP HỒ CHÍ MINH, 2023 LỜI CẢM ƠN Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Cơng Nghệ Phần Mềm giúp cho nhóm chúng em có kiến thức làm tảng để thực dự án Đặc biệt, nhóm chúng em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới Cô Huỳnh Hồ Thị Mộng Trinh giúp nhóm chúng em hồn thành tốt báo cáo đồ án Trong thời gian thực đề tài, nhóm chúng em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, nhóm chúng em vận dụng tối đa thu thập để hồn thành báo cáo đồ án tốt Tuy nhiên, trình thực hiện, nhóm chúng em khơng tránh khỏi thiếu sót Chính vậy, nhóm chúng em mong nhận góp ý chân thành từ Cơ nhằm hồn thiện phần kiến thức mà nhóm chúng em học tập hành trang để nhóm chúng em thực tiếp đề tài khác tương lai Nhóm chúng em xin chân thành cảm ơn Cơ! MỤC LỤC Chương MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục đích 1.3 Đối tượng phạm vi nghiên cứu Chương TÌM HIỂU VỀ BRAVE VÀ VIVALDI 2.1 Brave 2.1.1 Tổng quan 2.1.2 Các điểm bật 2.1.3 Hạn chế 11 2.2 Vivaldi 12 2.2.1 Tổng quan 12 2.2.2 Công nghệ 13 2.2.3 Thị phần 14 2.2.4 Các tính bật 14 2.2.5 Hạn chế 19 2.3 So sánh Brave, Vivaldi 20 2.3.1 Một số điểm tương đồng Brave Vivaldi 20 2.3.2 Điểm khác Brave Vivaldi 20 2.3.3 So sánh Brave, Vivaldi với Chrome 21 Chương XÂY DỰNG EXTENSION TODO-LIST 23 3.1 Giới thiệu ứng dụng 23 3.2 Khảo sát ứng dụng tương tự 23 3.3 Cơng nghệ, thuật tốn sử dụng 24 3.4 Phân tích thiết kế ứng dụng 25 3.4.1 Thiết kế hệ thống 25 3.4.2 Thiết kế liệu 26 3.4.3 Sơ đồ use case 28 3.4.4 Sơ đồ Activity Diagram 34 3.4.5 Thiết kế giao diện 36 3.5 Triển khai 45 3.5.1 Cài đặt 45 3.5.2 Kiểm thử 46 3.6 Kết 46 3.6.1 Ưu điểm 46 3.6.2 Nhược điểm 46 Chương Tổng kết 47 4.1 Kết đạt 47 4.2 Đề xuất hướng phát triển 47 Chương Tài liệu tham khảo 48 Chương MỞ ĐẦU 1.1 Lý chọn đề tài Hiện nay, trình duyệt web đóng vai trị quan trọng sống kỹ thuật số đại ngày, dùng trình duyệt web khác vào công việc, sống ngày giải trí Việc tìm hiểu Brave Vivaldi giúp hiểu rõ cơng nghệ tính mới., từ ta so sánh đánh giá trình duyệt giúp lựa chọn phù hợp với nhu cầu cá nhân Brave Vivaldi trình duyệt mã nguồn mở, khuyến khích phát triển cộng đồng, việc tìm hiểu xây dựng ứng dụng tương tự mang lại hội chia sẻ kiến thức tiếp thu từ cộng đồng mã nguồn mở 1.2 Mục đích ̶ Nghiên cứu hiểu rõ trình duyệt web phổ biến Brave Vivaldi, bao gồm cơng nghệ, tính cách thức hoạt động ̶ So sánh đánh giá Brave Vivaldi để hiểu rõ điểm mạnh, điểm yếu ưu điểm độc đáo trình duyệt ̶ Xây dựng ứng dụng tương tự nhằm áp dụng khám phá tính tùy chỉnh, cá nhân hóa bảo mật tương tự Brave Vivaldi 1.3 Đối tượng phạm vi nghiên cứu Đối tượng : ̶ Người dùng trình duyệt web: người sử dụng trình duyệt web có quan tâm đến việc tìm hiểu Brave, Vivaldi Phạm vi nghiên cứu: ̶ Tìm hiểu trình duyệt Brave: tìm hiểu cơng nghệ, tính năng, giao diện cách thức hoạt động Brave ̶ Tìm hiểu trình duyệt Vivaldi: tìm hiểu chức năng, giao diện ưu điểm Vivaldi Chương TÌM HIỂU VỀ BRAVE VÀ VIVALDI 2.1 Brave 2.1.1 Tổng quan Brave trình duyệt web mã nguồn mở sáng tạo phát triển cơng ty Brave Software Inc Khơng giống với trình duyệt có Google Chrome, Brave kết hợp tính mạnh mẽ hai trình duyệt Chromium Firefox Người sáng lập nên trình duyệt Brave có tên Brendan Eich, ơng người đồng sáng lập trình duyệt Firefox kiêm ln cha đẻ ngơn ngữ lập trình Javascript Tuy nhiên đến với trình duyệt Brave, người dùng thấy phát triển, cải tiến việc hội tụ tinh hoa cơng nghệ, riêng tư tính bảo mật người dùng lên hết 2.1.2 Các điểm bật 2.1.2.1 Tốc độ Không giống Chrome, chế độ mặc định Brave chặn quảng cáo tắt chế độ theo dõi người dùng bên thứ Điều cho phép Brave tải trang web nhanh gấp lần so với Chrome 2.1.2.2 Chặn quảng cáo Brave có tính tự động chặn quảng cáo bảo vệ thiết bị khỏi phần mềm độc hại việc bị theo dõi nhà quảng cáo Cụ thể, người dùng đề xuất quảng cáo phù hợp Brave thực theo dõi liệu cục Nếu quảng cáo không liên quan đến người dùng, bị loại bỏ Do đó, người dùng nhận quảng cáo phù hợp dựa mơ hình khơng có bên thứ ba tham gia vào trình 2.1.2.3 Quyền riêng tư Trên Chrome, nhà quảng cáo lớn Google Facebook sử dụng Cookie bên thứ để giám sát theo dõi trình duyệt bạn trang web, nhằm đưa quảng cáo phù hợp Đối với Brave, trình duyệt dùng Brave Shields để chặn cookies bên thứ 3, giới hạn liệu mà Facebook, Google nhà quảng cáo khác dùng để nghiên cứu thói quen duyệt web bạn Brave Shields sử dụng kết hợp kỹ thuật thuật toán để thực chức chặn quảng cáo, theo dõi, yếu tố không mong muốn khác trang web như: ̶ Blocklists: Brave Shields sử dụng blocklist (danh sách chặn) để xác định tài nguyên web có liên quan đến quảng cáo, theo dõi, yếu tố gây phiền nhiễu khác Các blocklist cập nhật trì để đảm bảo khả chặn hiệu ̶ Heuristics: Brave Shields áp dụng thuật tốn heuristics (tìm kiếm đặc trưng) để phân tích nội dung trang web xác định yếu tố khơng mong muốn Các thuật tốn xem xét đặc điểm cú pháp HTML, tên tệp, kích thước, vị trí, thuộc tính để nhận diện chặn yếu tố gây phiền nhiễu Ngoài ra, Brave lưu trữ tất liệu duyệt web cục máy tính bạn, điều có nghĩa bạn xóa lúc Đồng thời, Brave hỗ trợ trình duyệt Tor (một trình duyệt ẩn danh), điều khiến Brave trở thành trình duyệt đa làm 2.1.2.4 Bảo mật Brave tự động mã hóa hầu hết kết nối tới trang web (trên Chrome, muốn thực điều bạn cần cài đặt tiện ích mở rộng HTTPS Everywhere) Brave hỗ trợ tất tiện ích mở rộng Chrome, bao gồm trình quản lý mật phổ biến LastPass 1Password 2.1.2.5 Ví điện từ BAT Điểm đặc biệt Brave trình duyệt xây dựng tảng Blockchain với đồng tiền điện tử BAT (Basic Attention Token) Chính thế, người dùng khơng lướt web mà kiếm tiền từ Brave Ví cho phép người dùng hỗ trợ trang web yêu thích Người dùng tải ví phân bổ lượng BAT định cho trang web ưa thích Ví nạp thơng qua Bitcoin, Litecoin, Ethereum BAT token Người dùng kiếm BAT cách duyệt trang web kích hoạt Brave Nếu người dùng đồng ý thay quảng cáo thông thường quảng cáo ẩn danh từ Brave, họ trả tiền Basic Attention Token (BAT) Người dùng nhận 15% doanh thu Doanh thu phụ thuộc vào thời gian dành cho trình duyệt Brave Tuy nhiên, bạn phải kích hoạt quảng cáo Brave trình duyệt chặn tất quảng cáo theo mặc định Trước nhận khoản tốn nào, cần kích hoạt ví BAT token 3.4.4 Sơ đồ Activity Diagram 3.4.4.1 Lược đồ hoạt động thêm công việc 3.4.4.2 Lược đồ hoạt động xóa cơng việc 3.4.4.3 Lược đồ hoạt động chỉnh sửa công việc 3.4.4.4 Lược đồ hoạt động lấy liệu từ website trường 3.4.5 Thiết kế giao diện 3.4.5.1 Danh sách hình STT Màn hình Màn hình Home Chức Xem danh sách cơng việc, thêm cơng việc xóa cơng việc Màn hình cập nhật cơng Chỉnh sửa thơng tin cơng việc chọn việc Màn hình UIT Xem danh sách công việc lấy liệu từ website trường học Màn hình đăng nhập Đăng nhập tài khoản UIT để lấy liệu từ tài khoản 3.4.5.2 Mơ tả hình 3.4.5.2.1 Màn hình Home a Giao diện b Mô tả đối tượng STT Tên Kiểu notiBtn Button taskInput Input Ràng buộc Chức Gửi thông báo Không để trống Nhập tên công việc descInput Input Không để trống Nhập mô tả công việc deadlineInput Input Không để trống Nhập hạn công việc addBtn Button Thêm công việc checkbox Checkbox Đánh dấu công việc làm hay chưa deleteBtn Xóa cơng việc Button c Danh sách biến cố STT Biến cố Xử lý Chọn notiBtn Hiện form điền email để gửi thông báo hạn công việc địa email nhập Chọn addBtn Thêm công việc vào danh sách công việc Chọn checkbox Đánh dấu cơng việc hồn thành Chọn deleteBtn Xóa cơng việc khỏi danh sách cơng việc 3.4.5.2.2 Màn hình Cập nhật cơng việc a Giao diện b Mô tả đối tượng STT Tên Kiểu Ràng buộc Chức taskInput Input Không để trống Nhập tên công việc descInput Input Không để trống Nhập mô tả công việc Không để trống Nhập hạn công việc deadlineInput Input editBtn Button Chỉnh sửa cơng việc closeBtn Button Đóng form chỉnh sửa công việc c Danh sách biến cố STT Biến cố Xử lý Chọn editBtn Chỉnh sửa thông tin công việc cập nhật vào danh sách Chọn closeBtn Đóng form chỉnh sửa cơng việc, trở hình Home 3.4.5.2.3 Màn hình Todolist UIT a Giao diện b Mô tả đối tượng STT Tên Kiểu Ràng buộc Chức refreshBtn Button Làm danh sách công việc getDataBtn Button Lấy liệu từ website trường checkbox Checkbox Đánh dấu công việc hồn thành hay chưa deleteBtn Button Xóa cơng việc c Danh sách biến cố STT Biến cố Xử lý Chọn refreshBtn Làm danh sách công việc Chọn getDataBtn Hiển thị form đăng nhập để lấy liệu từ tài khoản đăng nhập Chọn checkbox Đánh dấu cơng việc hồn thành Chọn deleteBtn Xóa cơng việc khỏi danh sách cơng việc 3.4.5.2.4 Màn hình đăng nhập a Giao diện b Mơ tả đối tượng STT Tên Kiểu Ràng buộc Chức userInput Input Không để trống Nhập tên đăng nhập passInput Input Không để trống Nhập mật getDataBtn Button Lấy liệu closeBtn Button Đóng form đăng nhập c Danh sách biến cố STT Biến cố Xử lý Chọn Lấy liệu công việc từ trang web courses.uit.edu.vn getDataBtn tài khoản vừa đăng nhập Chọn closeBtn Đóng form đăng nhập, trở hình UIT 3.5 Triển khai 3.5.1 Cài đặt Hiện tại, extension phiên local, nên để cài đặt cần tải code máy thiết lập server máy để extension chạy Bước 1: Clone code từ link github máy Link github: https://github.com/ngxuantai/Todolist_extension_2.0 Bước 2: Mở folder code Visual Studio Code, sau bật terminal VS Code thực lệnh sau để tải thư viện cần thiết khởi chạy server Đầu tiên, chạy lệnh “cd client” để vào folder client, sau thực lệnh đây: ̶ npm install: tải thư viện cần thiết cho phía client ̶ npm run build: để tạo folder “dist”, folder mà load lên trình duyệt để chạy extension trình duyệt Với lệnh này, dùng webpack để đóng gói thư viện file folder client để tạo thành folder dist, load folder dist lên trình duyệt để chạy extension kèm theo thư viện file cần thiết Sau đó, chạy lệnh “cd /server” để chuyển sang folder server, sau thực lệnh đây: ̶ npm install: tải thư viện cần thiết cho phía server ̶ npm run server: để khởi chạy server Bước 3: Load folder dist lên trình duyệt để chạy extension 3.5.2 Kiểm thử Nhóm tiến hành kiểm thử ứng dụng phương pháp Manual Testing sử dụng kiểm thử hộp đen kiểm thử hộp trắng Kiểm thử API Postman 3.6 Kết 3.6.1 Ưu điểm ̶ Ứng dụng đáp ứng mục tiêu đề ̶ Không chiếm nhiều dung lượng lưu trữ ̶ Phát triển ứng dụng theo mô hình Client - Server 3.6.2 Nhược điểm ̶ Ứng dụng có tính năng, chưa tích hợp tính lấy event từ Google Calendar xuống để tạo thành todolist Chương Tổng kết 4.1 Kết đạt ̶ Nắm tổng quan trình duyệt web Brave Vivaldi ̶ Tìm hiểu nhiều tính thú vị, ưu nhược điểm Brave Vivaldi so với trình duyệt khác ̶ Tìm hiểu tiến hành xây dựng thành công extension dựa nguyên tắc tính tương tự Brave Vivaldi 4.2 Đề xuất hướng phát triển ̶ Có thể mở rộng việc xây dựng extension thành xây dựng trình duyệt web nghĩa ̶ Thêm số tính cho extension TodoList đăng nhập tài khoản Google, Facebook, hay tính nhạc chng thông báo đến hạn Chương Tài liệu tham khảo [1] Brave Software, Inc., "Brave Browser", Brave.com, https://brave.com/vi/, truy cập ngày 10/3/2023 [2] Vivaldi Technologies™, Vivaldi.com, https://vivaldi.com/fr/, truy cập ngày 12/3/2023 [3] “Vivaldi: Trình duyệt cho người dùng Pro”, https://viblo.asia/p/vivaldi-trinh- duyet-cho-nguoi-dung-pro-NbmvbamVkYO, truy cập ngày 12/3/2023 [4] “Why you should switch to Brave from Google Chrome” https://requestly.io/blog/switch-to-brave-from-chrome, truy cập ngày 15/3/2023 [5] “6 reasons to quit Chrome and switch to Vivaldi | PCWorld”, https://www.pcworld.com/article/696762/6-reasons-to-quit-chrome-and-switch-tovivaldi-browser.html, truy cập ngày 15/3/2023 [6] “Todoist”, https://todoist.com/app/today, truy cập ngày 25/4/2023 [7] Meta, “React”, https://react.dev/, truy cập ngày 20/4/2023 [8] ExpressJS, https://expressjs.com/, truy cập ngày 24/4/2023