ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHÊ PHẦN MỀM
BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG ỨNG DỤNG NHẮC LỊCH TRÌNH
Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến
Sinh viên thực hiện:
Huỳnh Anh Kiệt – 19520664
TP.Hồ Chí Minh, ngày 06 tháng 05 năm 2022
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHÊ PHẦN MỀM
BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG ỨNG DỤNG NHẮC LỊCH TRÌNH
Giảng viên hướng dẫn: ThS. Trần Thị Hồng Yến
Sinh viên thực hiện:
Huỳnh Anh Kiệt – 19520664
TP.Hồ Chí Minh, ngày 06 tháng 05 năm 2022
LỜI CẢM ƠN
Em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người đã hướng dẫn nhóm em trong suốt
q trình thực hiện đồ án. Em vơ cùng biết ơn sự tận tình chỉ dẫn của cơ trong q trình
nhóm thực hiện đề tài này. Bước đầu tiếp cận các cơng nghệ mới, nhóm cịn nhiều thiếu
sót về mặt kiến thức cũng như kinh nghiệm thực tiễn nên khơng tránh khỏi nhiều sai sót.
Những nhận xét, góp ý chân tình của cơ chính là cơ sở để nhóm có thể cải tiến và hồn
thiện đề tài này một cách tốt nhất.
Đề tài được nhóm thực hiện trong khoảng thời gian 3 tháng, lần đầu tiếp cận các
công nghệ mới, bước đầu đi vào thực tế nên còn nhiều hạn chế về kiến thức cũng như kinh
nghiệm thực tiễn. Do vậy, chắc chắn không thể tránh khỏi những sai sót, nhóm rất mong
nhận được những sự chỉ bảo, ý kiến đóng góp q báu của cơ và các bạn học cùng lớp để
nhóm có thể bổ sung, cải tiến sản phẩm cũng như nâng cao kiến thức, hoàn thiện bản thân
và tích lũy thêm cho bản thân nhiều kinh nghiệm, phục vụ tốt hơn cho công việc thực tế
sau này.
Lời cuối, em xin kính chúc cơ dồi dào sức khỏe, niềm tin để có thể tiếp tục truyền
đạt kiến thức cho các bạn sinh viên.
1
ĐỀ CƯƠNG CHI TIẾT
TÊN ĐỀ TÀI:
XÂY DỰNG ỨNG DỤNG NHẮC LỊCH TRÌNH
Cán bộ hướng dẫn: ThS. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày 21/02/2022 đến ngày 10/06/2022
Sinh viên thực hiện:
Huỳnh Anh Kiệt – 19520664
Nội dung đề tài:
1. Giới thiệu
Trong xã hội ngày càng phát triển hiện nay, con người ngày càng bận rộn
với cơng việc trên văn phịng, công sở lẫn công việc nhà cửa. Khả năng quản lý
thời gian thật sự là một trong những yếu tố quyết định sự thành công hay thất
bại trong cuộc sống. Đơi khi con người có thể thành cơng trên sự nghiệp nhưng
lại thất bại ngay tại mái nhà của họ, hay những người ln muốn có được cuộc
sống cân bằng giữa công việc và thú vui cuộc sống, nhưng bởi vì khơng có một
kế hoạch cụ thể và rõ ràng, công việc ngày càng nhiều, thời gian dành cho công
việc ngày càng chiếm tỉ lệ cao trong ngày, khơng có thời gian để thư giãn dẫn
đến stress.
Xuất phát từ nhu cầu thực tế trong đời sống cũng như trải nghiệm của bản
thân, việc có một hệ thống quản lý lịch trình, thời gian một cách rõ ràng, cụ thể
là rất cần thiết để có được một cuộc sống cân bằng, là động lực để thực hiện
những mục tiêu trong cuộc sống, đó có thể là phát triển bản thân, học thêm kỹ
năng mới,... Trong phạm vi đề tài Đồ án mơn học này, nhóm thực hiện đề tài
2
“Xây dựng ứng dụng nhắc lịch trình” để có thể hỗ trợ người dùng quản lý thời
gian, theo dõi công việc hàng ngày.
2. Mục tiêu
Xây dựng ứng dụng web với giao diện thân thiện, dễ sử dụng, đáp ứng
-
được các chức năng cần thiết cho người dùng.
3. Phạm vi
a. Phạm vi môi trường
-
Triển khai ứng dụng đề tài trên môi trường web.
b. Phạm vi chức năng
-
Quản lý tài khoản cá nhân.
-
Thêm, xóa, sửa các mục trong lịch trình.
-
Gom nhóm các mục.
-
Thơng báo cho lịch trình sắp tới của người dùng.
4. Đối tượng
-
Người dùng muốn có một cơng cụ hỗ trợ nhắc lịch trình có hệ thống rõ ràng,
quản lý một cách dễ dàng.
5. Phương pháp thực hiện
-
Tìm hiểu về cơng nghệ React, Firebase.
-
Khảo sát các cơng cụ hiện có trên thị trường, từ đó tiến hành phân tích, xác
định u cầu cụ thể cho đề tài.
-
Tiến hành phân tích và thiết kế hệ thống
-
Tìm hiểu về UX/UI và tiến hành thiết kế giao diện ứng dụng
-
Tiến hành kiểm thử hệ thống và triển khai
6. Công nghệ
-
Backend: Firebase
-
Frontend: ReactJS, Tailwind CSS
-
Database: Firebase
3
-
Source control: Github
7. Kết quả mong đợi
-
Xây dựng được ứng dụng thỏa mãn được tất cả các chức năng được đề ra.
-
Giao diện ứng dụng thân thiện, dễ sử dụng đối với người dùng.
-
Có thể mở rộng thêm các chức năng, đặc trưng mới trong tương lai.
Kế hoạch thực hiện:
Thời gian
21/02/2022 – 10/03/2022
Nội dung
Tìm hiểu đề tài, đánh giá các ứng dụng đã có trên thị
trường.
11/03/2022 – 27/03/2022
Tìm hiểu, nghiên cứu cơng nghệ React, Firebase,
framework Tailwind CSS.
28/03/2022 – 18/04/2022
Phân tích và thiết kế ứng dụng.
19/04/2022 – 02/05/2022
Tìm hiểu quy trình thiết kế UX/UI và thiết kế giao diện
cho ứng dụng.
03/05/2022 – 29/05/2022
Triển khai lên web và tiến hành kiểm thử chức năng.
30/05/2022 – 10/06/2022
Kiểm thử hệ thống và hoàn thiện báo cáo.
Xác nhận của CBHD
TP. HCM, ngày 21 tháng 02 năm 2022
(Ký tên và ghi rõ họ tên)
Sinh viên
(Ký tên và ghi rõ họ tên)
ThS. Trần Thị Hồng Yến
Huỳnh Anh Kiệt
4
MỤC LỤC
LỜI CẢM ƠN ................................................................................................................................ 1
ĐỀ CƯƠNG CHI TIẾT................................................................................................................ 2
Chương 1 – TỔNG QUAN VỀ ĐỀ TÀI ...................................................................................... 8
1.
Giới thiệu về đề tài ............................................................................................................. 8
1.1
Tầm quan trọng của lịch trình trong đời sống hằng ngày................................................... 8
1.2
Lý do chọn đề tài ..................................................................................................................... 8
2.
Khảo sát hiện trạng............................................................................................................ 8
3.
Đối tượng nghiên cứu ........................................................................................................ 8
4.
Phạm vi nghiên cứu ........................................................................................................... 9
5.
Phương pháp nghiên cứu .................................................................................................. 9
6.
Nhiệm vụ của đề tài............................................................................................................ 9
7.
Mục tiêu của đề tài ............................................................................................................. 9
Chương 2 – CƠ SỞ LÝ THUYẾT ............................................................................................... 9
1.
2.
3.
Tổng quan về ReactJS ....................................................................................................... 9
1.1
Giới thiệu ................................................................................................................................. 9
1.2
Cách hoạt động ...................................................................................................................... 10
1.3
Ưu điểm .................................................................................................................................. 10
1.4
Nhược điểm............................................................................................................................ 10
Tổng quan về Firebase..................................................................................................... 11
2.1
Giới thiệu ............................................................................................................................... 11
2.2
Ưu điểm .................................................................................................................................. 11
2.3
Nhược điểm............................................................................................................................ 11
Tổng quan về Tailwind CSS............................................................................................ 12
3.1
Giới thiệu ............................................................................................................................... 12
3.2
Ưu điểm .................................................................................................................................. 12
3.3
Nhược điểm............................................................................................................................ 13
Chương 3 – PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................................ 13
1.
2.
Mô tả yêu cầu ................................................................................................................... 13
1.1
Yêu cầu chức năng ................................................................................................................ 13
1.2
Yêu cầu phi chức năng.......................................................................................................... 14
Kiến trúc hệ thống ........................................................................................................... 14
2.1
Mô tả kiến trúc Front-end .................................................................................................... 14
5
2.2
Mô tả kiến trúc Back-end ..................................................................................................... 17
Chương 4 – HIỆN THỰC HỆ THỐNG .................................................................................... 17
Sơ đồ Use case................................................................................................................... 17
1.
1.1
Đăng ký tài khoản ........................................................................................................ 18
1.2
Đăng nhập ..................................................................................................................... 19
1.3
Quên mật khẩu ............................................................................................................. 20
1.4
Chỉnh sửa thông tin cá nhân ....................................................................................... 20
1.5
Chỉnh sửa mật khẩu ..................................................................................................... 21
1.6
Thêm list ........................................................................................................................ 22
1.7
Xóa list ........................................................................................................................... 23
1.8
Sửa list ........................................................................................................................... 23
1.9
Thêm task ...................................................................................................................... 24
1.10 Xóa task ......................................................................................................................... 25
1.11 Sửa task ......................................................................................................................... 25
1.12 Tìm kiếm task ............................................................................................................... 26
2.
Thiết kế dữ liệu................................................................................................................. 26
3.
Thiết kế giao diện người dùng ........................................................................................ 27
3.1
Trang đăng nhập .......................................................................................................... 27
3.2
Trang đăng ký tài khoản ............................................................................................. 28
3.3
Trang quên mật khẩu .................................................................................................. 28
3.4
Trang dashboard .......................................................................................................... 29
3.5
Trang list các tác vụ cụ thể .......................................................................................... 29
3.6
Trang chi tiết một tác vụ cụ thể .................................................................................. 30
3.7
Trang settings ............................................................................................................... 30
Chương 5 – KẾT LUẬN ............................................................................................................. 31
1.
2.
3.
Đánh giá ............................................................................................................................ 31
1.1
Thuận lợi ................................................................................................................................ 31
1.2
Khó khăn................................................................................................................................ 31
Kết quả đạt được .............................................................................................................. 31
2.1
Ưu điểm .................................................................................................................................. 31
2.2
Nhược điểm............................................................................................................................ 32
Hướng phát triển.............................................................................................................. 32
TÀI LIỆU THAM KHẢO .......................................................................................................... 33
6
DANH MỤC HÌNH
Figure 1 Sơ đồ use case............................................................................................................................... 18
Figure 2 Cấu trúc lưu trữ dữ liệu trong Firestore ........................................................................................ 27
Figure 3 Trang đăng nhập ........................................................................................................................... 28
Figure 4 Trang đăng ký ............................................................................................................................... 28
Figure 5 Trang quên mật khẩu .................................................................................................................... 29
Figure 6 Trang dashboard ........................................................................................................................... 29
Figure 7 Trang list các tác vụ cụ thể ........................................................................................................... 30
Figure 8 Trang chi tiết một tác vụ cụ thể .................................................................................................... 30
Figure 9 Trang settings ............................................................................................................................... 31
DANH MỤC BẢNG
Table 1 Bảng yêu cầu chức năng .................................................................................................. 14
Table 2 Bảng mô tả kiến trúc back-end ........................................................................................ 17
Table 3 Bảng mô tả use case đăng ký tài khoản ........................................................................... 19
Table 4 Bảng mô tả use case đăng nhập ....................................................................................... 20
Table 5 Bảng mô tả use case quên mật khẩu ................................................................................ 20
Table 6 Bảng mô tả use case chỉnh sửa thông tin cá nhân ............................................................ 21
Table 7 Bảng mô tả use case chỉnh sửa mật khẩu ......................................................................... 22
Table 8 Bảng mô tả use case thêm list .......................................................................................... 23
Table 9 Bảng mơ tả use case xóa list ............................................................................................ 23
Table 10 Bảng mô tả use case sửa list .......................................................................................... 24
Table 11 Bảng mô tả use case thêm task ...................................................................................... 25
Table 12 Bảng mơ tả use case xóa task......................................................................................... 25
Table 13 Bảng mơ tả use case sửa task ......................................................................................... 26
Table 14 Bảng mô tả use case tìm kiếm task ................................................................................ 26
7
Chương 1 – TỔNG QUAN VỀ ĐỀ TÀI
1. Giới thiệu về đề tài
1.1 Tầm quan trọng của lịch trình trong đời sống hằng ngày
Trong xã hội ngày càng phát triển hiện nay, con người ngày càng bận rộn với
công việc trên văn phịng, cơng sở lẫn cơng việc nhà cửa. Khả năng quản lý thời
gian thật sự là một trong những yếu tố quyết định sự thành công hay thất bại trong
cuộc sống. Đơi khi con người có thể thành công trên sự nghiệp nhưng lại thất bại
ngay tại mái nhà của họ, hay những người ln muốn có được cuộc sống cân
bằng giữa công việc và thú vui cuộc sống, nhưng bởi vì khơng có một kế hoạch
cụ thể và rõ ràng, công việc ngày càng nhiều, thời gian dành cho công việc ngày
càng chiếm tỉ lệ cao trong ngày, khơng có thời gian để thư giãn dẫn đến stress.
1.2 Lý do chọn đề tài
Xuất phát từ nhu cầu thực tế trong đời sống cũng như trải nghiệm của bản
thân, việc có một hệ thống quản lý lịch trình, thời gian một cách rõ ràng, cụ thể
là rất cần thiết để có được một cuộc sống cân bằng, là động lực để thực hiện
những mục tiêu trong cuộc sống, đó có thể là phát triển bản thân, học thêm kỹ
năng mới,... Cùng với sự phát triển của máy tính và internet, các tác vụ được tin
học hóa và đưa nó lên internet, vì thế chúng ta khơng cần phải sử dụng các vật
dụng vật lý như bút giấy để ghi lại tác vụ hằng ngày, ngồi ra cịn có thể truy cập
nó bất cứ lúc nào miễn là có kết nối internet.
2. Khảo sát hiện trạng
Hiện nay trên internet có nhiều ứng dụng hỗ trợ lịch trình như Microsoft Todo, Todoist, Google Keep,... Các ứng dụng vừa nêu đều dễ có giao diện thân
thiện, có sự tương đồng về chức năng nhưng ngồi ra cũng có một khuyết điểm
là có những chức năng khơng cần thiết, có thể lược bỏ đi để hướng đến sự đơn
giản và tiện lợi cho người dùng.
3. Đối tượng nghiên cứu
Đồ án này tập trung nghiên cứu các đối tượng sau:
8
• Các công nghệ:
o ReactJS
o Firebase
o Tailwind CSS
• Đối tượng nghiên cứu trong phạm vi của đề tài:
o Các nhu cầu cơ bản của con người trong việc ghi chú, mô tả công việc.
4. Phạm vi nghiên cứu
Đề tài tập trung nghiên cứu về ứng dụng hỗ trợ lịch trình, phục vụ công việc
hằng ngày của người dùng.
5. Phương pháp nghiên cứu
Các phương pháp nghiên cứu được sử dụng:
-
Đọc tài liệu, tham khảo các video hướng dẫn.
-
Phân tích các ứng dụng hiện có trên thị trường.
6. Nhiệm vụ của đề tài
Đề tài “Xây dụng ứng dụng hỗ trợ nhắc lịch trình” là ứng dụng web đáp ứng
các yêu cầu sau:
-
Xây dựng được ứng dụng thỏa mãn được tất cả các chức năng được đề ra.
-
Giao diện ứng dụng thân thiện, dễ sử dụng đối với người dùng.
-
Có thể mở rộng thêm các chức năng, đặc trưng mới trong tương lai.
7. Mục tiêu của đề tài
-
Tìm hiểu các xây dụng ứng dụng web.
-
Tìm hiểu các cơng nghệ liên quan.
-
Xây dựng thành cơng ứng dụng hỗ trợ nhắc lịch trình.
Chương 2 – CƠ SỞ LÝ THUYẾT
1. Tổng quan về ReactJS
1.1 Giới thiệu
React.js là một thư viện Front-end mã nguồn mở được viết bằng ngôn ngữ
Javascript dùng để xây dựng giao diện người dùng cho các ứng dụng, được phát
9
triển và duy trì bởi Meta và có cộng đồng các nhà phát triển và các công ty lớn
khác.
Một trong những điểm hấp dẫn của React là thư viện này xây dựng giao diện
người dùng dựa trên mơ hình Declarative Programming. React so sánh sự thay
đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay
đổi nhất trên DOM dựa trên thay đổi của Virtual DOM.
1.2 Cách hoạt động
Với React, chúng ta viết code bằng Javascript kết hợp với HTML tạo
ra một bộ cú pháp gọi là JSX. Điểm độc đáo của cú pháp này là giúp cho
code trở nên dễ hiểu, dễ thay đổi.
React code được tạo bởi các thực thể gọi là component. Những
component này có thể tái sử dụng, có thể được viết bằng function hoặc class.
Lifecycle
trong React có 4 phương thức chính: render,
componentDidMount, componentWillUnmount, shouldComponentUpdate.
React Hooks là một trong các đặc trưng mới gần đây của React, là tập
hợp các phương thức để người dùng móc nối các đặc trưng trong state với
lifecycle, chỉ có thể dùng trong functional component, không thể sử dụng
trong class component.
1.3 Ưu điểm
-
Linh hoạt: So với các framework khác, code React dễ bảo trì hơn và
linh hoạt hơn do cấu trúc modules (component) của nó. Do đó, sự linh
hoạt này giúp tiết kiệm rất nhiều thời gian.
-
Hiệu suất: React được thiết kế để cung cấp hiệu suất cao. Cốt lõi nằm
ở Virtual DOM, giúp ứng dụng phức tạp chạy cực nhanh.
-
Khả năng sử dụng: Việc triển khai ứng dụng React dễ thực hiện nếu
bạn có một số kiến thức nhất định về Javascript.
1.4 Nhược điểm
10
-
ReactJS chỉ phục vụ ở mức View. React là thư viện chuyên về Frontend, không phải là một MVC framework, vì thế phải kết hợp với các
thư viện khác để triển khai một ứng dụng hoàn chỉnh.
-
React khá nặng so với các framework khác như Angular, mà trong khi
đó Angular là một framework hoàn chỉnh.
2. Tổng quan về Firebase
2.1 Giới thiệu
Firebase là nền tảng được phát triển bởi Google cho việc tạo ra các
ứng dụng di động và web.
Thực chất firebase là dịch vụ bao gồm các chức năng lưu trữ thời
gian thực, xác thực tài khoản, kho data dung lượng lớn, và một số chức
năng khác.
Trong firebase có Firestore, đây mới là database được sử dụng
trong đồ án.
Data model được tổ chức tương tự với việc lưu trữ thư mục và tệp
tin, có 3 thành phần chính: Documents, Collections và Subcollections và
có sự ràng buộc cụ thể là: trong collections không thể chứa các collections
khác mà chỉ chứa các documents, các subcollections chỉ có thể được chứa
trong documents. Nó là ràng buộc không xuất hiện trong việc lưu trữ tệp
tin và thư mục ở các máy tính nhưng nó lại là ràng buộc cần thiết để tối ưu
cho việc truy xuất.
Hệ thống có thể lưu trữ và truy xuất đến 100 cấp dữ liệu trong
Firestores.
2.2 Ưu điểm
-
Tạo tài khoản và sử dụng dễ dàng
-
Tốc độ phát triển nhanh
-
Có nhiều dịch vụ trong một nền tảng
-
Tập trung vào phát triển giao diện người dùng
2.3 Nhược điểm
11
-
Không phải mã nguồn mở
-
Chỉ hoạt động trên cơ sở dữ liệu NoSQL
-
Không phải tất cả các dịch vụ trên Firebase đều miễn phí
3. Tổng quan về Tailwind CSS
3.1 Giới thiệu
Là CSS Framework được sử dụng rộng rãi và khuyến nghị bởi các
nhà phát triển
Dựa trên nguyên tắc Ultility – First, giúp cho việc code giao diện
một cách nhanh chóng, ngay trên HTML mà không cần phải lo về các file
CSS
Hỗ trợ rất nhiều những tính năng, trong đó có tính năng mà đã từng
làm rất nhiều nhà phát triển đau đầu: Dark Mode
Có bộ cú pháp riêng và có Intellisense hỗ trợ trong việc code nên
lập trình viên khơng cần phải tra cứu trên web.
Tối ưu cho sản phẩm: Giảm nhẹ các file CSS được tạo ra, giúp
giảm tải ứng dụng trên web
Hỗ trợ các trình duyệt hiện có trên thị trường
Tích hợp tốt với các Framework khác cho front-end: React,
Angular, Vue,...
3.2 Ưu điểm
-
Người sử dụng có thể chẳng cần viết đến một dịng CSS nào mà vẫn có giao
diện tùy biến như mong muốn.
-
Style, màu sắc, font chữ hiện đại, phù hợp với phong cách web hiện đại.
-
Cách đặt tên class dễ hiểu, một class đại diện cho một thuộc tính. Tailwind
CSS có gần như đủ 85% thuộc tính CSS.
-
Sử dụng flex nên rất dễ chia layout.
-
Dễ cài đặt, dễ sử dụng, document của Tailwind rất dễ hiểu. Tailwind CSS
phù hợp cho nhiều dự án có quy mơ từ nhỏ đến lớn, đặc biệt Tailwind sẽ
12
bộc lộ rõ ràng sức mạnh của mình khi dự án cần phải thay đổi giao diện
nhiều và rờm rà.
3.3 Nhược điểm
-
Khi sử dụng Tailwind thì bạn phải sử dụng một số lượng class cực kỳ nhiều,
số class sẽ tương ứng với số thuộc tính bạn muốn cài đặt.
-
Khi dùng font-size hoặc màu sắc vẫn phải custom lại bằng CSS riêng.
Chương 3 – PHÂN TÍCH THIẾT KẾ HỆ THỐNG
1. Mơ tả yêu cầu
1.1 Yêu cầu chức năng
Ứng dụng nhắc lịch trình được thiết kế nhằm giúp người dùng có thể quản lý các tác vụ
công việc hằng ngày một cách rõ ràng, minh bạch. Để có thể đáp ứng được các vấn đề
trên, nhóm đã xác định các chức năng chính như sau:
Chức năng
Đăng ký tài khoản
Mơ tả
Người dùng phải đăng ký tài khoản để sử
dụng ứng dụng bằng email cá nhân. Hệ
thống tiếp nhận yêu cầu đăng ký và tự
động đăng nhập với email vừa đăng ký
vào hệ thống.
Đăng nhập
Người dùng có tài khoản có thể sử dụng
tài khoản này để đăng nhập và sử dụng.
Ngoài ra, người dùng cịn có thể đăng
nhập trực tiếp thơng qua bên thứ ba là
Google, hệ thống sẽ tự động xử lý yêu
cầu.
Quên mật khẩu
Trong trường hợp người dùng quên mật
khẩu đăng nhập, họ có thể gửi yêu cầu
quên mật khẩu lên hệ thống. Hệ thống sẽ
13
tiếp nhận yêu cầu, gửi email xác nhận và
reset mật khẩu mới
Người dùng có thể chỉnh sửa thơng tin cá
Chỉnh sửa thông tin tài khoản
nhân cũng như mật khẩu tài khoản của
mình.
Người dùng có thể thực hiện các thao tác
Quản lý các danh sách tác vụ
thêm, xóa, đổi tên danh sách.
Người dùng có thể thực hiện các chức
Quản lý tác vụ
năng thêm, xóa, sửa các thơng tin của một
tác vụ (tiêu đề, mơ tả, thời gian thực
hiện,...).
Người dùng có thể tìm kiếm dựa theo từ
Tìm kiếm tác vụ
khóa vừa nhập để tìm kiếm tác vụ trong
một danh sách cụ thể.
Table 1 Bảng yêu cầu chức năng
1.2 Yêu cầu phi chức năng
- Tính bảo mật: Phải đảm bảo an tồn dữ liệu người dùng, ngăn chặn các
rủi ro đến từ bên ngồi, rị rỉ thơng tin, đặc biệt liên quan đến các chức
năng xác thực người dùng (đăng nhập, đăng ký, quên mật khẩu).
- Tính tiện dụng: Ứng dụng dễ sử dụng, tiện lợi trong việc quản lý và theo
dõi các tác vụ.
- Tính hiệu quả: Đảm bảo được tốc độ xử lý, có thể thực hiện đối với một
lượng lớn dữ liệu, tránh xảy ra những lỗi liên quan đến ngoại lệ.
- Tính tương thích: Ứng dụng có thể chạy ổn định và tương thích với nhiều
nền tảng trình duyệt khác nhau.
2. Kiến trúc hệ thống
2.1 Mô tả kiến trúc Front-end
-
Cấu trúc thư mục front-end của ứng dụng
14
Hình 3. 1 Cấu trúc thư mục front-end
o Các thư mục chính bao gồm: components, pages, hooks, utils.
-
Thư mục components chứa các components có khả năng tái sử dụng trong các
page.
15
Hình 3. 2 Cấu trúc thư mục components
-
Thư mục hooks chứa các custom hooks có khả năng tái sử dụng trong các
components phức tạp.
Hình 3. 3 Cấu trúc thư mục hooks
-
Thư mục pages chứa các page chính khi điều hướng của ứng dụng
16
Hình 3. 4 Cấu trúc thư mục pages
2.2 Mơ tả kiến trúc Back-end
Back-end của hệ thống được xây dựng dựa trên Firebase, được chia thành
hai phần chính như sau:
Thành phần
Authentication
Chức năng
Là thành phần dùng để xác thực người dùng,
xử lý các công việc liên quan đến đăng nhập,
đăng ký, quên mật khẩu,...
Firestore
Là thành phần đảm nhiệm lưu trữ dữ liệu của
ứng dụng, bao gồm cơ sở dữ liệu và API để
truy xuất dữ liệu đến client.
Table 2 Bảng mô tả kiến trúc back-end
Chương 4 – HIỆN THỰC HỆ THỐNG
1. Sơ đồ Use case
17
Figure 1 Sơ đồ use case
1.1 Đăng ký tài khoản
Tên chức năng
Đăng ký tài khoản
18
Tóm tắt
Người dùng sử dụng tài khoản email cá nhân
để đăng ký.
Dịng sự kiện chính
1. Người dùng điền đầy đủ thông tin email,
password
2. Hệ thống kiểm tra
3. Chuyển đến trang dashboard của ứng dụng
Dịng sự kiện khác
1. Người dùng khơng điền đầy đủ thông tin
hoặc điền sai
2. Hệ thống kiểm tra báo lỗi
Các yêu cầu đặc biệt
Trạng thái hệ thống trước Actor: Người dùng
khi thực hiện use case
Điều kiện: Không có
Trạng thái hệ thống sau Tài khoản được đăng ký thành công, ứng
khi thực hiện use case
dụng điều hướng đến trang dashboard
Điểm mở rộng
Table 3 Bảng mô tả use case đăng ký tài khoản
1.2 Đăng nhập
Tên chức năng
Đăng nhập
Tóm tắt
Người dùng sử dụng tài khoản đã đăng ký để
đăng nhập hệ thống
Dịng sự kiện chính
1. Người dùng điền đầy đủ thông tin email,
password
2. Người dùng nhấn đăng nhập
3. Hệ thống kiểm tra
4. Chuyển đến trang dashboard của ứng dụng
Dòng sự kiện khác
1. Người dùng không điền đầy đủ thông tin
hoặc điền sai
2. Hệ thống kiểm tra báo lỗi
19
Các yêu cầu đặc biệt
Trạng thái hệ thống trước Actor: Người dùng
khi thực hiện use case
Điều kiện: Khơng có
Trạng thái hệ thống sau Người dùng đăng nhập thành công vào hệ
khi thực hiện use case
thống, ứng dụng điều hướng đến trang
dashboard.
Điểm mở rộng
Table 4 Bảng mô tả use case đăng nhập
1.3 Quên mật khẩu
Tên chức năng
Quên mật khẩu
Tóm tắt
Reset lại mật khẩu cho người dùng
Dịng sự kiện chính
1. Người dùng điền đầy đủ email muốn reset
password.
2. Nhấn “Reset”.
3. Hệ thống gửi email reset cho người dùng.
4. Người dùng truy cập vào link trong email
để tiến hành reset mật khẩu.
Dòng sự kiện khác
1. Người dùng điền sai email.
2. Hệ thống kiểm tra báo lỗi.
Các yêu cầu đặc biệt
Trạng thái hệ thống trước Actor: Người dùng
khi thực hiện use case
Điều kiện: Không có
Trạng thái hệ thống sau Mật khẩu của người dùng được thay đổi.
khi thực hiện use case
Điểm mở rộng
Table 5 Bảng mô tả use case quên mật khẩu
1.4 Chỉnh sửa thông tin cá nhân
Tên chức năng
Chỉnh sửa thông tin cá nhân
20
Tóm tắt
Người dùng chỉnh sửa thơng tin cá nhân của
tài khoản.
Dịng sự kiện chính
1. Người dùng nhấn vào phần settings của
ứng dụng
2. Người dùng nhấn “Change” để tiến hành
thay đổi tên
3. Người dùng nhấn “Save”
4. Hệ thống kiểm tra
5. Hệ thống cập nhật lại thơng tin của tài
khoản.
Dịng sự kiện khác
1. Thông tin nhập bỏ trống hoặc chỉ chứa ký
tự trắng.
2. Hệ thống kiểm tra báo lỗi.
Các yêu cầu đặc biệt
Trạng thái hệ thống trước Actor: Người dùng đã đăng đăng nhập vào
khi thực hiện use case
ứng dụng.
Điều kiện: Không có
Trạng thái hệ thống sau Thơng tin cá nhân của người dùng được cập
khi thực hiện use case
nhật.
Điểm mở rộng
Table 6 Bảng mô tả use case chỉnh sửa thông tin cá nhân
1.5 Chỉnh sửa mật khẩu
Tên chức năng
Chỉnh sửa mật khẩu
Tóm tắt
Chỉnh sửa mật khẩu tài khoản cho người dùng
Dịng sự kiện chính
1. Người dùng nhấn vào phần settings của
ứng dụng
2. Người dùng nhập password mới vào
trường password
21
3. Nhấn “Change”
4. Hệ thống kiểm tra.
5. Hệ thống cập nhật lại mật khẩu cho người
dùng.
Dòng sự kiện khác
Các yêu cầu đặc biệt
Trạng thái hệ thống trước Actor: Người dùng đã đăng nhập vào ứng
khi thực hiện use case
dụng.
Điều kiện: Khơng có
Trạng thái hệ thống sau Mật khẩu tài khoản của người dùng được cập
khi thực hiện use case
nhật lại.
Điểm mở rộng
Table 7 Bảng mô tả use case chỉnh sửa mật khẩu
1.6 Thêm list
Tên chức năng
Thêm list
Tóm tắt
Người dùng thêm list tác vụ
Dịng sự kiện chính
1. Người dùng nhấn vào “+ Add” để tiến
hành thêm list tác vụ
2. Người dùng nhập tên cho list
3. Hệ thống kiểm tra
4. Hệ thống tạo list mới cho ứng dụng
Dòng sự kiện khác
1. Người dùng không nhập tên hoặc tên chỉ
chứa ký tự trống
2. Hệ thống kiểm tra lỗi và không tạo list mới
cho ứng dụng
Các yêu cầu đặc biệt
Trạng thái hệ thống trước Actor: Người dùng đã đăng nhập vào ứng
khi thực hiện use case
dụng
22
Điều kiện: Khơng có
Trạng thái hệ thống sau List tác vụ mới được thêm vào ứng dụng.
khi thực hiện use case
Điểm mở rộng
Table 8 Bảng mô tả use case thêm list
1.7 Xóa list
Tên chức năng
Xóa list
Tóm tắt
Người dùng xóa list tác vụ
Dịng sự kiện chính
1. Người dùng nhấn vào “...” trên list tác vụ
2. Người dùng nhấn vào “Delete”
3. Hệ thống xóa list tác vụ
Dịng sự kiện khác
Các u cầu đặc biệt
Trạng thái hệ thống trước Actor: Người dùng đã đăng nhập vào ứng
khi thực hiện use case
dụng.
Điều kiện: Không có
Trạng thái hệ thống sau Hệ thống xóa thành cơng list tác vụ.
khi thực hiện use case
Điểm mở rộng
Table 9 Bảng mơ tả use case xóa list
1.8 Sửa list
Tên chức năng
Thêm list
Tóm tắt
Người dùng sửa list tác vụ
Dịng sự kiện chính
1. Người dùng nhấn vào “...” để tiến hành sửa
list tác vụ
2. Người dùng nhập tên cho list
3. Hệ thống kiểm tra
23
