ĐẠ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.
Trang 1ĐẠ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, tháng 06 năm 2022
Trang 2ĐẠ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, tháng 06 năm 2022
Trang 3NHẬN XÉT CỦA GIẢNG VIÊN
TP Hồ Chí Minh, ngày tháng 06 năm 2022
GVHD
ThS Trần Thị Hồng Yến
Trang 4LỜ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 quá 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 quá 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à hoà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 quý 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
Huỳnh Anh Kiệt
Trang 5ĐỀ 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:
đượ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
Trang 6hiện đề tài “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
định yêu cầu cụ thể cho đề tài
6 Công nghệ
- Backend: Firebase
- Frontend: ReactJS, Tailwind CSS
- Database: Firebase
Trang 7- 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:
(Ký tên và ghi rõ họ tên)
Huỳnh Anh Kiệt
Trang 8MỤC LỤC
Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI 11
1.1 Giới thiệu về đề tài 11
1.1.1 Tầm quan trọng của lịch trình trong đời sống hằng ngày 11
1.1.2 Lý do chọn đề tài 11
1.2 Khảo sát hiện trạng 11
1.3 Đối tượng nghiên cứu 12
1.4 Phạm vi nghiên cứu 12
1.5 Phương pháp nghiên cứu 12
1.6 Nhiệm vụ của đề tài 12
1.7 Mục tiêu của đề tài 12
Chương 2 - CƠ SỞ LÝ THUYẾT 13
2.1 Tổng quan về ReactJS 13
2.1.1 Giới thiệu 13
2.1.2 Cách hoạt động 13
2.1.3 Ưu điểm 13
2.1.4 Nhược điểm 14
2.2 Tổng quan về Firebase 14
2.2.1 Giới thiệu 14
2.2.2 Ưu điểm 14
2.2.3 Nhược điểm 15
2.3 Tổng quan về Tailwind CSS 15
2.3.1 Giới thiệu 15
2.3.2 Ưu điểm 15
2.3.3 Nhược điểm 16
Chương 3 - PHÂN TÍCH THIẾT KẾ HỆ THỐNG 16
3.1 Mô tả yêu cầu 16
3.1.1 Yêu cầu chức năng 16
3.1.2 Yêu cầu phi chức năng 17
3.2 Kiến trúc hệ thống 18
Trang 93.2.2 Mô tả kiến trúc back-end 20
Chương 4 - HIỆN THỰC HỆ THỐNG 21
4.1 Sơ đồ Use-case 21
4.1.1 Đăng ký tài khoản 22
4.1.2 Đăng nhập 22
4.1.3 Quên mật khẩu 23
4.1.4 Chỉnh sửa thông tin cá nhân 24
4.1.5 Chỉnh sửa mật khẩu 25
4.1.6 Thêm list 25
4.1.7 Xóa list 26
4.1.8 Sửa list 27
4.1.9 Thêm task 27
4.1.10 Xóa task 28
4.1.11 Sửa task 29
4.1.12 Tìm kiếm task 29
4.2 Thiết kế dữ liệu 30
4.2.1 Bảng list 31
4.2.2 Bảng task 31
4.2.3 Bảng sub-task 31
4.2.4 Bảng user 31
4.3 Thiết kế giao diện người dùng 32
4.3.1 Trang đăng nhập 32
4.3.2 Trang đăng ký tài khoản 33
4.3.3 Trang quên mật khẩu 34
4.3.4 Trang dashboard 35
4.3.5 Trang list các tác vụ cụ thể 36
4.3.6 Trang chi tiết một tác vụ cụ thể 37
4.3.7 Trang settings 39
Chương 5 - KẾT LUẬN 40
5.1 Đánh giá 40
5.1.1 Thuận lợi 40
Trang 105.2 Kết quả đạt được 40
5.2.1 Ưu điểm 40
5.2.2 Nhược điểm 40
5.3 Hướng phát triển 40
TÀI LIỆU THAM KHẢO 42
Trang 11DANH MỤC BẢNG
Bảng 3.1 Bảng yêu cầu chức năng 16
Bảng 3.2 Bảng mô tả kiến trúc back-end 19
Bảng 4.1 Bảng mô tả use-case đăng ký tài khoản 22
Bảng 4.2 Bảng mô tả use-case đăng nhập 23
Bảng 4.3 Bảng mô tả use-case quên mật khẩu 24
Bảng 4.4 Bảng mô tả use-case chỉnh sửa thông tin cá nhân 24
Bảng 4.5 Bảng mô tả use-case chỉnh sửa mật khẩu 25
Bảng 4.6 Bảng mô tả use-case thêm list 26
Bảng 4.7 Bảng mô tả use-case xóa list 26
Bảng 4.8 Bảng mô tả use-case sửa list 27
Bảng 4.9 Bảng mô tả use-case thêm task 28
Bảng 4.10 Bảng mô tả use-case xóa task 28
Bảng 4.11 Bảng mô tả use-case sửa task 29
Bảng 4.12 Bảng mô tả use-case tìm kiếm task 30
Bảng 4.13 Bảng dữ liệu list 31
Bảng 4.14 Bảng dữ liệu task 31
Bảng 4.15 Bảng dữ liệu sub-task 31
Bảng 4.16 Bảng dữ liệu user 31
Bảng 4.17 Bảng mô tả giao diện trang đăng nhập 32
Bảng 4.18 Bảng mô tả xử lý trong trang đăng nhập 33
Trang 12Bảng 4.19 Bảng mô tả giao diện trang đăng ký tài khoản 33
Bảng 4.20 Bảng mô tả xử lý trong trang đăng ký tài khoản 34
Bảng 4.21 Bảng mô tả giao diện trang quên mật khẩu 34
Bảng 4.22 Bảng mô tả xử lý trong trang quên mật khẩu 35
Bảng 4.23 Bảng mô tả giao diện trang dashboard 35
Bảng 4.24 Bảng mô tả xử lý trong trang dashboard 36
Bảng 4.25 Bảng mô tả giao diện trang list các tác vụ cụ thể 37
Bảng 4.26 Bảng mô tả xử lý trong trang list các tác vụ cụ thể 37
Bảng 4.27 Bảng mô tả giao diện trang chi tiết một tác vụ cụ thể 38
Bảng 4.28 Bảng mô tả xử lý trong trang chi tiết một tác vụ cụ thể 38
Bảng 4.29 Bảng mô tả giao diện trang settings 39
Bảng 4.30 Bảng mô tả xử lý trong trang settings 39
Trang 13DANH MỤC HÌNH ẢNH
Hình 3.1 Cấu trúc thư mục front-end 18
Hình 3.2 Cấu trúc thư mục components 19
Hình 3.3 Cấu trúc thư mục hooks 19
Hình 3.4 Cấu trúc thư mục pages 20
Hình 4.1 Sơ đồ use-case 21
Hình 4.2 Sơ đồ cấu trúc dữ liệu 30
Hình 4.3 Trang đăng nhập 32
Hình 4.4 Trang đăng ký 33
Hình 4.5 Trang quên mật khẩu 34
Hình 4.6 Trang dashboard 35
Hình 4.7 Trang list các tác vụ cụ thể 36
Hình 4.8 Trang chi tiết một tác vụ cụ thể 37
Hình 4.9 Trang settings 39
Trang 14Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu về đề tài
1.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 luôn 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.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, ngoà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
1.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
To-do, 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 ngoà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
Trang 151.3 Đối tượng nghiên cứu
Đồ án này tập trung nghiên cứu:
1.5 Phương pháp nghiên cứu
Các phương pháp nghiên cứu được sử dụng:
1.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:
ra
1.7 Mục tiêu của đề tài
o Tìm hiểu các xây dụng ứng dụng web
Trang 16Chương 2 - CƠ SỞ LÝ THUYẾT 2.1 Tổng quan về ReactJS
2.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 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
2.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
2.1.3 Ưu điểm
o 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
Trang 17o 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
o 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
2.1.4 Nhược điểm
ReactJS chỉ phục vụ ở mức View React là thư viện chuyên về Front-end, 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
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
Trang 182.2.3 Nhược điểm
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,
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ẽ 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à
Trang 192.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 3.1 Mô tả yêu cầu
3.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:
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
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
đă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ẽ tiếp nhận yêu cầu, gửi email xác nhận và reset mật khẩu mới
Chỉnh sửa thông tin tài khoản Người dùng có thể chỉnh sửa thông tin cá
nhân cũng như mật khẩu tài khoản của mình
Trang 20Quản lý các danh sách tác vụ Người dùng có thể thực hiện các thao tác
thêm, xóa, đổi tên danh sách
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, )
khóa vừa nhập để tìm kiếm tác vụ trong một danh sách cụ thể
Bảng 3.1 Bảng yêu cầu chức năng
3.1.2 Yêu cầu phi chức năng
o Tính bảo mật: Phải đảm bảo an toàn dữ liệu người dùng, ngăn chặn các
rủi ro đến từ bên ngoà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)
o 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ụ
o 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ệ
o 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
Trang 213.2 Kiến trúc hệ thống
3.2.1 Mô tả kiến trúc Front-end
Cấu trúc thư mục front-end của ứng dụng
Hình 3.1 Cấu trúc thư mục front-end
Các thư mục chính bao gồm: components, pages, hooks, utils
Trang 22Thư mục components chứa các components có khả năng tái sử dụng trong các page
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
Trang 23Hình 3.4 Cấu trúc thư mục pages
3.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:
xử lý các công việc liên quan đến đăng nhập, đăng ký, quên mật khẩu,
ứng dụng, bao gồm cơ sở dữ liệu và API để truy xuất dữ liệu đến client
Bảng 3.2 Bảng mô tả kiến trúc back-end