Đồ á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 1

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 và quý Thầy Cô khoa
Công Nghệ Phần Mềm đã giúp cho nhóm chúng em có những kiến thức cơ bản làm nền
tảng để thực hiện dự án này.
Đặc biệt, nhóm chúng em xin gửi lời cảm ơn và lịng biết ơn sâu sắc nhất 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 của
mình.
Trong thời gian thực hiện đề tài, nhóm chúng em đã vận dụng những kiến thức
nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức
mới. Từ đó, nhóm chúng em vận dụng tối đa những gì đã thu thập được để hoàn thành

một báo cáo đồ án tốt nhất. Tuy nhiên, trong q trình thực hiện, nhóm chúng em khơng
tránh khỏi những thiếu sót. Chính vì vậy, nhóm chúng em rất mong nhận được những sự
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
và là hành trang để nhóm chúng em thực hiện tiếp các đề tài khác trong tương lai.
Nhóm chúng em xin chân thành cảm ơn Cô!


MỤC LỤC
Chương 1. MỞ ĐẦU ...................................................................................................... 5
1.1. Lý do chọn đề tài ................................................................................................... 5
1.2. Mục đích ................................................................................................................ 5
1.3. Đối tượng và phạm vi nghiên cứu ......................................................................... 5
Chương 2. TÌM HIỂU VỀ BRAVE VÀ VIVALDI ..................................................... 6
2.1. Brave ...................................................................................................................... 6
2.1.1. Tổng quan ........................................................................................................ 6
2.1.2. Các điểm nổi bật .............................................................................................. 7
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 năng nổi 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 giữa Brave và Vivaldi ........................................... 20
2.3.2. Điểm khác nhau giữa Brave và Vivaldi ........................................................ 20
2.3.3. So sánh Brave, Vivaldi với Chrome .............................................................. 21
Chương 3. 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 và thiết kế ứng dụng ............................................................................ 25
3.4.1. Thiết kế hệ thống ........................................................................................... 25


3.4.2. Thiết kế dữ 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 quả ................................................................................................................. 46
3.6.1. Ưu điểm ......................................................................................................... 46
3.6.2. Nhược điểm ................................................................................................... 46
Chương 4. Tổng kết...................................................................................................... 47
4.1. Kết quả đạt được .................................................................................................. 47
4.2. Đề xuất hướng phát triển ..................................................................................... 47
Chương 5. Tài liệu tham khảo .................................................................................... 48


Chương 1. MỞ ĐẦU
1.1. Lý do chọn đề tài
Hiện nay, trình duyệt web đóng vai trị rất quan trọng trong cuộc sống kỹ thuật số
hiện đại khi mỗi ngày, chúng ta đều dùng các trình duyệt web khác nhau vào trong cơng
việc, cuộc sống hằng ngày và cả giải trí. Việc tìm hiểu Brave và Vivaldi giúp hiểu rõ hơn
về các cơng nghệ và tính năng mới., từ đó ta có thể so sánh và đánh giá trình duyệt này
giúp lựa chọn phù hợp với nhu cầu cá nhân. Brave và Vivaldi đều là trình duyệt mã
nguồn mở, khuyến khích sự phát triển trong cộng đồng, vì vậy việc tìm hiểu và xây dựng
ứng dụng tương tự mang lại cơ hội chia sẻ kiến thức và tiếp thu từ cộng đồng mã nguồn

mở.
1.2. Mục đích
̶

Nghiên cứu và hiểu rõ về các trình duyệt web phổ biến như Brave và Vivaldi, bao

gồm các cơng nghệ, tính năng và cách thức hoạt động
̶

So sánh và đánh giá Brave và Vivaldi để hiểu rõ những điểm mạnh, điểm yếu và

ưu điểm độc đáo của từng trình duyệt.
̶

Xây dựng ứng dụng tương tự nhằm áp dụng và khám phá các tính năng tùy chỉnh,

cá nhân hóa và bảo mật tương tự Brave và Vivaldi.
1.3. Đối tượng và phạm vi nghiên cứu
Đối tượng :
̶

Người dùng trình duyệt web: là những người sử dụng trình duyệt web và có quan

tâm đến việc tìm hiểu Brave, Vivaldi
Phạm vi nghiên cứu:
̶

Tìm hiểu về trình duyệt Brave: tìm hiểu về cơng nghệ, tính năng, giao diện và

cách thức hoạt động của Brave

̶

Tìm hiểu về trình duyệt Vivaldi: tìm hiểu về các chức năng, giao diện và ưu điểm

của Vivaldi


Chương 2. TÌM HIỂU VỀ BRAVE VÀ VIVALDI
2.1. Brave
2.1.1. Tổng quan
Brave là một trình duyệt web mã nguồn mở được sáng tạo và phát triển bởi công
ty Brave Software Inc. Khơng giống với các trình duyệt hiện có như Google Chrome,
Brave là sự kết hợp những tính năng mạnh mẽ nhất của hai trình duyệt Chromium và
Firefox.

Người sáng lập nên trình duyệt Brave có tên là Brendan Eich, ơng cũng là người
đồng sáng lập trình duyệt Firefox và kiêm ln cha đẻ của ngơn ngữ lập trình Javascript.
Tuy nhiên đến với trình duyệt Brave, người dùng sẽ thấy sự phát triển, cải tiến của việc
hội tụ những tinh hoa của cơng nghệ, cũng như sự riêng tư và tính bảo mật của người
dùng lên trên hết.


2.1.2. Các điểm nổi bật
2.1.2.1. Tốc độ
Không giống như Chrome, ở chế độ mặc định Brave chặn các quảng cáo và tắt
chế độ theo dõi người dùng của bên thứ 3. Điều này cho phép Brave tải các trang web
nhanh hơn gấp 8 lần so với Chrome.

2.1.2.2. Chặn quảng cáo
Brave có tính năng tự động chặn quảng cáo bảo vệ thiết bị khỏi phần mềm độc

hại và việc bị theo dõi bởi các nhà quảng cáo.
Cụ thể, người dùng được đề xuất quảng cáo phù hợp vì Brave thực hiện theo dõi
bằng dữ liệu cục bộ. Nếu một quảng cáo khơng liên quan đến người dùng, nó sẽ bị loại
bỏ. Do đó, người dùng nhận được các quảng cáo phù hợp dựa trên mơ hình này và khơng
có bên thứ ba nào tham gia vào quá trình này cả.
2.1.2.3. Quyền riêng tư
Trên Chrome, các nhà quảng cáo lớn như Google và Facebook sử dụng Cookie
của bên thứ 3 để giám sát và theo dõi trình duyệt của bạn trên hầu như mọi trang web,
nhằm đưa ra quảng cáo phù hợp.


Đối với Brave, trình duyệt sẽ dùng Brave Shields để chặn cookies của bên thứ
3, giới hạn dữ liệu mà Facebook, Google và các nhà quảng cáo khác có thể dùng để
nghiên cứu thói quen duyệt web của bạn.

Brave Shields sử dụng một kết hợp của các kỹ thuật và thuật toán để thực hiện
chức năng chặn quảng cáo, theo dõi, và các yếu tố không mong muốn khác trên trang
web như:
̶

Blocklists: Brave Shields sử dụng các blocklist (danh sách chặn) để xác định các

tài nguyên web có liên quan đến quảng cáo, theo dõi, và các yếu tố gây phiền nhiễu
khác. Các blocklist này được cập nhật và duy trì để đảm bảo khả năng chặn hiệu quả.
̶

Heuristics: Brave Shields áp dụng các thuật tốn heuristics (tìm kiếm đặc trưng)

để phân tích nội dung trang web và xác định các yếu tố khơng mong muốn. Các thuật
tốn này có thể xem xét các đặc điểm như cú pháp HTML, tên tệp, kích thước, vị trí, và

thuộc tính để nhận diện và chặn các yếu tố gây phiền nhiễu.


Ngoài ra, Brave lưu trữ tất cả dữ liệu duyệt web cục bộ trên máy tính của bạn,
điều đó có nghĩa là bạn có thể xóa nó bất cứ lúc nào. Đồng thời, Brave hỗ trợ trình duyệt
Tor (một trình duyệt ẩn danh), điều này khiến Brave trở thành trình duyệt đa năng đầu
tiên làm như vậy.
2.1.2.4. Bảo mật
Brave tự động mã hóa hầu hết các kết nối tới trang web (trên Chrome, muốn
thực hiện điều này bạn cần cài đặt một tiện ích mở rộng như HTTPS Everywhere).
Brave hỗ trợ tất cả các tiện ích mở rộng của Chrome, bao gồm các trình quản lý
mật khẩu phổ biến như LastPass và 1Password.


2.1.2.5. Ví điện từ BAT

Điểm đặc biệt là Brave là trình duyệt xây dựng trên nền tảng Blockchain với
đồng tiền điện tử BAT (Basic Attention Token). Chính vì thế, người dùng khơng chỉ lướt
web mà có thể kiếm được tiền từ Brave.
Ví này cho phép người dùng hỗ trợ các trang web u thích. Người dùng có thể
tải ví và phân bổ một lượng BAT được chỉ định cho các trang web ưa thích. Ví có thể
được nạp thơng qua Bitcoin, Litecoin, Ethereum và BAT token.
Người dùng cũng có thể kiếm BAT bằng cách duyệt các trang web kích hoạt
Brave. Nếu người dùng đồng ý thay thế các quảng cáo thông thường bằng các quảng cáo
ẩn danh từ Brave, họ sẽ được trả tiền trong Basic Attention Token (BAT). Người dùng
sẽ nhận được 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 vì trình duyệt chặn tất cả quảng
cáo theo mặc định. Trước khi nhận bất kỳ khoản thanh tốn nào, cần kích hoạt ví BAT
token.

Đối với những người dùng không muốn hỗ trợ bất kỳ trang web nào, họ sẽ không
kiếm được tiền cũng như đóng góp cho bất kỳ trang web u thích nào. Nhưng bù lại có
thể duyệt web rất nhanh.
Tuy nhiên chức năng này hiên vẫn chưa được hỗ trợ ở khu vực nước ta.
2.1.3. Hạn chế
Brave mới chỉ được ra mắt nên vẫn còn khá nhiều lỗi vặt gây phiền tối trong q
trình sử dụng. Thỉnh thoảng, Brave chặn một phần của trang web mà bạn muốn tải.Ví
dụ, một số trang web sử dụng plugin để nhấn Like và Chia sẻ nhanh lên Facebook bị
chặn luôn.

Brave không hỗ trợ đăng nhập tài khoản để sync, khi bạn sử dụng Brave ở trên máy
tính cũng như điện thoại thì bạn sẽ phải mở cơng cụ sync riêng của trình duyệt này rồi
tiến hành quét mã trên điện thoại để đồng bộ.


Bên cạnh đó Brave vẫn đang trong giai đoạn phát triển và khơng có lịch sử phát
triển bằng sự ổn định và độ tin cậy của các trình duyệt lâu đời hơn và phổ biến khác
như Chrome hoặc Firefox, điều này có thể dẫn đến một số lỗi hoặc một số tính năng
khơng hồn chỉnh trong Brave.
2.2. Vivaldi
2.2.1. Tổng quan
Vivaldi là một trình duyệt web miễn phí do Vivaldi Technologies - công ty thành
lập bởi Tatsuki Tomita và Jon Stephenson von Tetzchner – người đồng sáng lập và là
cựu CEO của công ty Opera Software phát triển


Trình duyệt hướng tới lượng lớn người dùng Internet phổ thông, những người dùng
chuyên nghiệp và nhiều người dùng cũ của Opera - vốn thấy khó chịu với việc trình

duyệt này chuyển từ dùng bộ mã xử lý Presto sang Blink, khiến nhiều tính năng riêng có
bị loại bỏ. Vì vậy, Vivaldi cung cấp nhiều tính năng cũ được ưa chuộng của Opera 12
đồng thời đi kèm những tính năng mới
2.2.2. Công nghệ
Vivaldi sử dụng công cụ kết xuất Blink, như Google Chrome và Opera đã làm.
Điều này mang lại cho người dùng Vivaldi khả năng cài đặt các extensions được phát
triển cho Google Chrome trực tiếp từ Chrome Web Store như thể sử dụng Google
Chrome. Mặc dù một số tiện ích có thể khơng hoạt động chính xác như trong Google
Chrome (đặc biệt là extensions được sử dụng cho tùy biến giao diện người dùng, vì giao
diện người dùng của Vivaldi hoàn toàn khác với giao diện người dùng của Google
Chrome), hầu hết các tiện ích mở rộng sẽ hoạt động như mong đợi.


2.2.3. Thị phần

2.2.4. Các tính năng nổi bật
2.2.4.1. Tính năng tùy chỉnh giao diện
Đây là một trong những tính năng nổi bật nhất của Vivaldi, cho phéo người dùng
tự do tùy chỉnh và cá nhân hóa trình duyệt theo phong cách hoặc sở thích cá nhân.


2.2.4.2. Notes
Ngay trên trình duyệt Web Vivaldi các bạn hồn tồn có thể ghi chú với bảng
điều khiển ghi chú của trình duyệt, trong bảng điều khiển bản có thể chụp ảnh màn hình
để lưu lại những thơng tin cần thiết một cách dễ dàng. Các bạn có thể thêm các tag để dễ
dàng tổ chức và tìm thấy chúng khi muốn xem lại.


2.2.4.3. Quick command
Đây là công cụ mạnh mẽ giúp người dùng tương tác nhanh chóng vơi trình duyệt

và thực hiện các tác vụ mà không cần sử dụng chuột mà sử dụng phím tắt duy nhất là
F2. Người dùng có thể sử dụng quick command để mở tab mới, đóng tab hiện tại, chuyển
đổi giữa các tab, tải lại trang, mở bookmark, lịch sử duyệt web, cài đặt,… và nhiều thứ
khác nữa.


2.2.4.4. Giao diện lịch sử duyệt web mới mẻ, trực quan

2.2.4.5. Create shortcut
Trong Vivaldi, "Create shortcut" (Tạo lối tắt) là một chức năng cho phép người
dùng tạo lối tắt nhanh chóng đến một trang web cụ thể hoặc một tác vụ trình duyệt nhất
định.
Khi sử dụng chức năng "Create shortcut", người dùng có thể tạo một biểu tượng
trực tiếp trên màn hình máy tính của họ hoặc trên thanh tác vụ để truy cập nhanh vào
một trang web cụ thể hoặc thực hiện một tác vụ cụ thể trong trình duyệt. Điều này tiết
kiệm thời gian và giúp tăng cường trải nghiệm duyệt web cá nhân.


2.2.4.6. Tab stack
Là một tính năng mạnh mẽ cho phép người dùng nhóm các tab liên quan lại với
nhau trong một tập hợp đơn. Khi nhóm các tab thành một tập hợp, chúng được hiển thị
dưới dạng một tab gộp duy nhất, giúp tiết kiệm không gian và giữ cho thanh tab gọn
gàng hơn.
Từ đó giúp người dùng tổ chức và quản lý các tab của họ một cách hiệu quả hơn.
Thay vì có nhiều tab mở rộng trên thanh tab, người dùng có thể gộp chúng lại thành các
tập hợp nhỏ, giúp giữ gìn khơng gian và tăng khả năng tìm kiếm. Điều này đặc biệt hữu
ích khi bạn đang làm việc với nhiều tab liên quan đến một chủ đề hoặc dự án cụ thể.


2.2.5. Hạn chế

Mặc dù có nhiều tính năng nổi bật, nhưng Vivaldi vẫn tồn tại một số hạn chế:
̶

Tiêu tốn tài ngun máy: trình duyệt có nhiều tình năng mạnh mẽ đồng nghĩa với

việc trình duyệt sẽ sử dụng nhiều tài nguyên máy. Vì vậy khi sử dụng Vivaldi trên máy
cũ hoặc yếu thì khơng thể chạy mượt mà như các trình duyệt khác.
̶

Số lượng người dùng hạn chế: So với Chrome, Firefox, Safari,.. số lượng người

dùng Vivaldi tương đối hạn chế. Vì vậy số lượng extensions, plugins, tài nguyên trực
tuyến dành riêng cho người dùng Vivaldi cũng hạn chế.
̶

Tương đối phức tạp và khó sử dụng ban đầu: khơng phù hợp với một bộ phận

người dùng chỉ muốn trải nghiệm sử dụng trình duyệt đơn giản, dễ hiểu.
̶

Thiếu tự động cập nhật: Vivaldi không tự động cập nhật như một số trình duyệt

khác, người dùng phải tải xuống và cài đặt thủ cơng khi có bản cập nhật mới.
̶

Phần mềm mã nguồn đóng: Mặc dù Vivaldi là một trình duyệt mã nguồn mở và

miễn phí, nhưng một số phần của phần mềm là mã nguồn đóng và khơng có sẵn để kiểm
tra cơng khai. Điều này có thể gây bất lợi cho những người dùng ưu tiên tính minh bạch

và muốn biết chính xác trình duyệt của họ đang hoạt động như thế nào cũng như dữ liệu
mà nó đang thu thập.
2.3. So sánh Brave, Vivaldi
2.3.1. Một số điểm tương đồng giữa Brave và Vivaldi
̶

Đều dựa trên Chromium : Brave và Vivaldi đều được xây dựng trên mã nguồn

mở Chromium, giống như Google Chrome. Điều này cho phép cả hai có khả năng tương
thích tốt với các trang web và tiện ích mở rộng (extensions) của Chrome.
̶

Quyền riêng tư : Brave và Vivaldi đều được thiết kế với tiêu chí là tính bảo mật

của người dùng lên trên hết. Do đó, cả hai trình duyệt này đi kèm với các tính năng như
chặn quảng cáo và theo dõi, khả năng lướt ẩn danh và bảo vệ người dùng khỏi việc theo
dõi trực tuyến của các bên thứ 3.
̶

Khả năng tùy chỉnh cao : 2 trình duyệt cho phép người dùng tùy chỉnh giao diện

và cài đặt theo ý muốn. Brave cung cấp nhiều tính năng tùy chỉnh theo yêu cầu của người
dùng nhưng không đa dạng như Vivaldi. Với Vivaldi, người dùng có thể tùy chỉnh giao
diện, bố cục tab và các phím tắt.
̶

Bên cạnh đó, Brave và Vivaldi có 1 nhược điểm giống nhau là cả hai đều tiêu tốn

quá nhiều tài nguyên. Điều này là do cả hai trình duyệt đều tập trung vào việc cung cấp

các tính năng phong phú và linh hoạt, đồng thời bảo vệ quyền riêng tư cho người dùng.
2.3.2. Điểm khác nhau giữa Brave và Vivaldi
Brave

Vivaldi

Brave tích hợp tính năng quảng cáo Vivaldi khơng có tính năng
Quảng cáo

Brave Rewards, cho phép người tương tự như Brave, chỉ có thể
dùng nhận BAT (Basic Attention chặn quảng cáo bằng tiện ích
Token) khi xem quảng cáo.

mở rộng Chrome


Tập trung vào việc cung cấp giao Được thiết kế để cung cấp tính
diện đơn giản và dễ sử dụng

năng tùy chỉnh giao diện cao.
Người dùng có thể tùy chỉnh

Tùy chỉnh

bố cục tab, giao diện, phím tắt

giao diện

và nhiều tùy chọn khác để tùy
chỉnh trình duyệt theo sở thích

của họ.
Hỗ trợ các tiện ích mở rộng Chrome Hỗ trợ các tiện ích mở rộng
và có thể truy cập vào cửa hàng Chrome, nhưng ngồi ra cịn có

Tiện ích mở
rộng

Chrome Web Store để tải xuống các cửa hàng tiện ích mở rộng
tiện ích mở rộng

riêng của Vivaldi, cho phép
người dùng tìm kiếm và cài đặt

(Extensions)

các tiện ích mở rộng được tối
ưu hóa cho trình duyệt này.

2.3.3. So sánh Brave, Vivaldi với Chrome
Brave
Quyền riêng
tư và chặn
quảng cáo

Tiện ích mở
rộng

Vivaldi

Chrome

Được tích hợp chặn Khơng tích hợp chặn quảng cáo mặc định,
quảng cáo và chặn các nhưng cũng có thể cài thơng qua tiện ích mở
phần tử theo dõi mặc rộng
định (Brave Shields).
Hỗ trợ một số tiện ích Có hệ sinh thái tiện Có một cộng đồng
mở rộng, nhưng thư ích mở rộng khá lớn và rất nhiều tiện
viện tiện ích mở rộng phong phú, người ích mở rộng được


của nó có thể ít phong dùng có thể tùy chỉnh phát triển cho nó,
phú

hơn

so

với và mở rộng khả năng với lượng tiện ích

Chrome hoặc Vivaldi

của trình duyệt theo ý mở rộng phong phú
nhất trong ba trình

muốn.

duyệt này
Tích

hợp

Brave Có giao diện tùy Là trình duyệt phổ

Rewards, cho phép chỉnh mạnh mẽ, cho biến nhất và có nền
người dùng kiếm tiền phép người dùng tùy tảng
và ủng hộ các nền tảng chỉnh

nhiều

cơng

nghệ

khía mạnh mẽ. Nó cung

Tính năng đặc trực tuyến thơng qua cạnh của trình duyệt cấp tính năng đồng
biệt

Basic Attention Token như giao diện người bộ hóa dữ liệu giữa
(BAT)

dùng, bố cục tab, các thiết bị, tích hợp
biểu đồ tiến trình và Google
nhiều thứ khác

Translate

và nhiều tính năng
khác.

Có hiệu suất tương đối tốt, với tốc độ tải trang Chrome
nhanh và khả năng xử lý mượt mà
Hiệu suất

thường

được coi là có hiệu
suất cao nhất trong
số ba trình duyệt
này do sự tối ưu hóa
liên tục của Google


Chương 3. XÂY DỰNG EXTENSION TODO-LIST
3.1. Giới thiệu ứng dụng
Ứng dụng TodoList Extension là một tiện ích mở rộng dành cho trình duyệt được xây
dựng với mục đích giúp cho người dùng tổ chức và quản lý công việc một cách hiệu quả,
từ đó nâng cao hiệu suất làm việc và đạt được kết quả mong muốn. Ứng dụng hướng đến
đối tượng người dùng cụ thể là sinh viên trường Đại học Cơng Nghệ Thơng Tin khi tích
hợp tính năng đọc dữ liệu công việc từ website học tập của trường là courses.uit.edu.vn
thông qua việc đăng nhập bằng tài khoản nhà trường cấp phát cho sinh viên, phục vụ cho
quá trình học tập và quản lý cơng việc của sinh viên trong trường.
3.2. Khảo sát ứng dụng tương tự
Ứng dụng tham khảo : Todoist extension của Chrome Store
Tổng quan : Todoist là một ứng dụng quản lý công việc và nhiệm vụ trực tuyến
được phát triển bởi Doist. Nó cung cấp một giao diện đơn giản và mạnh mẽ để có thể
theo dõi và quản lý cơng việc của mình trên nhiều nền tảng, bao gồm cả máy tính để
bàn, di động và trình duyệt web.
Chức năng chính : tạo, quản lý danh sách công việc đồng thời nhắc nhở và thơng
báo cho người dùng về việc cơng việc đó sắp đến hạn.

Những vấn đề còn tồn tại của Todoist
̶

Giới hạn tính năng trong phiên bản miễn phí : Phiên bản miễn phí có một số giới

hạn, bao gồm số lượng dự án hạn chế, tính năng nhắc nhở nâng cao và tích hợp với các
ứng dụng bên thứ ba.
̶

Một số tính năng cịn hạn chế: Do Todoist hướng đến nhiều đối tượng sử dụng

nên tính năng chưa được cụ thể hoặc chính xác đối với một số bộ phận người sử dụng.
Vấn đề đề tài tập trung nghiên cứu và giải quyết


̶

Tập trung vào đối tượng người sử dụng cụ thể là sinh viên trường Đại học Công

Nghệ Thông Tin
3.3. Công nghệ, thuật tốn đã sử dụng
Cơng nghệ:
̶

ReactJS: là một thư viện JavaScript mã nguồn mở được sử dụng để xây dựng

giao diện người dùng cho các ứng dụng web. Nó được phát triển bởi Facebook và được
công bố lần đầu vào năm 2013. ReactJS sử dụng cơ chế "Component-Based" trong việc
xây dựng giao diện người dùng, cho phép phân tách UI thành các thành phần độc lập,
gọi là các "components".

ReactJS sử dụng JSX (JavaScript XML), một cú pháp mở rộng của JavaScript, để mô
tả cấu trúc và giao diện người dùng của ứng dụng. JSX cho phép viết mã HTML tương
tự trong JavaScript, giúp tạo ra các component dễ đọc và dễ hiểu.
̶

ExpressJS: là một framework ứng dụng web phía máy chủ (server-side) được

xây dựng trên ngơn ngữ JavaScript. Nó cung cấp cho nhà phát triển một cách tiện lợi và
mạnh mẽ để xây dựng các ứng dụng web và API đơn giản và linh hoạt.
ExpressJS được phát triển dựa trên Node.js, một nền tảng cho phép chạy JavaScript
phía máy chủ. Với ExpressJS, người phát triển có thể xây dựng các ứng dụng web phía
máy chủ hiệu quả và dễ dàng. ExpressJS giúp quản lý routing (định tuyến) của ứng dụng,
xử lý yêu cầu HTTP, tạo các middleware (phần mềm trung gian) và thực hiện các chức
năng khác để xây dựng ứng dụng web.
̶

MongoDB: là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) mã nguồn mở

được phát triển bởi MongoDB Inc. MongoDB sử dụng cơ chế lưu trữ dựa trên tài liệu
(document-based storage) và phương pháp truy vấn linh hoạt (flexible querying). Nó cho
phép lưu trữ dữ liệu dưới dạng tài liệu JSON-tương tự (BSON), giúp đơn giản hóa q
trình phát triển và tích hợp dữ liệu.


MongoDB được thiết kế để xử lý các dự án có quy mơ lớn, u cầu tính mở rộng cao
và khả năng xử lý tải cao. Nó hỗ trợ tính năng như replica set (bộ sao chép) và sharding
(phân vùng) để đảm bảo tính sẵn sàng, bảo mật và hiệu suất của hệ thống.
̶

Webpack: là cơng cụ giúp gói gọn tồn bộ file js, css(bao gồm cả scss,sass,..).

Nó giúp bạn compile các module Javascript theo cấu trúc project. Ngoài ra nó có thể tối
ưu tùy chọn theo mơi trường khác nhau như development hay production.
Thư viện tiêu biểu đã sử dụng:
̶

Puppeteer: là một thư viện mã nguồn mở của Google được phát triển để tự động

hóa và kiểm thử các hoạt động trong trình duyệt web. Nó cho phép bạn điều khiển một
trình duyệt (thường là Google Chrome hoặc Chromium) thông qua mã JavaScript, giúp
thực hiện các tác vụ như tương tác với trang web, lấy dữ liệu, kiểm tra hiển thị, và thực
hiện các tác vụ khác liên quan đến trình duyệt.
Puppeteer cung cấp một API dễ sử dụng và mạnh mẽ, cho phép bạn thực hiện các
hành động như mở trình duyệt, điều hướng trang, điền thơng tin vào các mẫu đầu vào,
nhấp chuột, tạo ảnh chụp màn hình (screenshot), tạo file PDF, và nhiều hoạt động khác.
Nó cũng hỗ trợ các tính năng như xử lý các trang động (dynamic pages), xử lý các yêu
cầu AJAX, và điều khiển trạng thái của trình duyệt.
3.4. Phân tích và thiết kế ứng dụng
3.4.1. Thiết kế hệ thống
Ứng dụng sử dụng mơ hình client - server
Mơ hình client-server là một kiến trúc phần mềm phổ biến trong đó, các máy tính
hoặc thiết bị được chia thành hai vai trị chính: máy khách (client) và máy chủ (server).
Mơ hình này dựa trên nguyên tắc phân tách nhiệm vụ giữa các máy tính hoặc thiết bị
trong mạng.