Tài liệu Xây dựng ứng dụng nhắc lịch trình

ĐẠ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 ĐẠ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 NHẬ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 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 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 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 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. 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 2 hiệ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. - 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 yê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. TP. HCM, ngày 21 tháng 02 năm 2022 Xác nhận của CBHD Sinh viên (Ký tên và ghi rõ họ tê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 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 3.2.1 Mô tả kiến trúc Front-end ............................................................................................. 18 5 3.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 5.1.2 Khó khăn....................................................................................................................... 40 6 5.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 7 DANH 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 8 Bả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 9 DANH 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 10 Chươ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 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 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. 11 1.3 Đối tượng nghiên cứu Đồ án này tập trung nghiên cứu: o Các công nghệ: ▪ ReactJS ▪ Firebase ▪ Tailwind CSS o Các công việc ghi chú công việc thường ngày của người sử dụng. 1.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. 1.5 Phương pháp nghiên cứu Các phương pháp nghiên cứu được sử dụng: o Đọc tài liệu, tham khảo các video hướng dẫn. o Phân tích các ứng dụng hiện có trên thị trườ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: o Xây dựng được ứng dụng thỏa mãn được tất cả các chức năng được đề ra. o Giao diện ứng dụng thân thiện, dễ sử dụng đối với người dùng. o Có thể mở rộng thêm các chức năng, đặc trưng mới trong tương lai. 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. o Tìm hiểu các công nghệ liên quan. o Xây dựng thành công ứng dụng hỗ trợ nhắc lịch trình. 12 Chươ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. 13 o 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. 2.2 Tổng quan về Firebase 2.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.2 Ưu điểm o Tạo tài khoản và sử dụng dễ dàng o Tốc độ phát triển nhanh o Có nhiều dịch vụ trong một nền tảng o Tập trung vào phát triển giao diện người dùng 14 2.2.3 Nhược điểm o Không phải mã nguồn mở o Chỉ hoạt động trên cơ sở dữ liệu NoSQL o Không phải tất cả các dịch vụ trên Firebase đều miễn phí 2.3 Tổng quan về Tailwind CSS 2.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,... 2.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ẽ 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à. 15 2.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: 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ẽ 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. 16 Quả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. Người dùng có thể thực hiện các chức năng Quản lý tác vụ 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ể. 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. 17