Xây dựng ứng dụng nhắc lịch trình (báo cáo cuối kì đồ án 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 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 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 Trần Thị Hồng Yến, người hướng dẫn nhóm em suốt trình thực đồ án Em vơ biết ơn tận tình dẫn q trình nhóm thực đề tài Bước đầu tiếp cận cơng nghệ mới, nhóm cịn nhiều thiếu sót mặt kiến thức 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 sở để nhóm cải tiến hoàn thiện đề tài cách tốt Đề tài nhóm thực khoảng thời gian tháng, lần đầu tiếp cận công nghệ mới, bước đầu vào thực tế nên nhiều hạn chế kiến thức kinh nghiệm thực tiễn Do vậy, chắn khơng thể tránh khỏi sai sót, nhóm mong nhận bảo, ý kiến đóng góp q báu bạn học lớp để nhóm bổ sung, cải tiến sản phẩm nâng cao kiến thức, hoàn thiện thân tích lũy thêm cho thân nhiều kinh nghiệm, phục vụ tốt cho công việc thực tế sau Lời cuối, em xin kính chúc dồi sức khỏe, niềm tin để tiếp tục truyền đạt kiến thức cho bạn sinh viên ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG NHẮC LỊCH TRÌNH Cán 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: Giới thiệu Trong xã hội ngày phát triển nay, người ngày bận rộn với công việc văn phịng, cơng sở lẫn cơng việc nhà cửa Khả quản lý thời gian thật yếu tố định thành công hay thất bại sống Đơi người thành công nghiệp lại thất bại mái nhà họ, hay người muốn có sống cân cơng việc thú vui sống, khơng có kế hoạch cụ thể rõ ràng, công việc ngày nhiều, thời gian dành cho công việc ngày chiếm tỉ lệ cao 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ế đời sống trải nghiệm thân, việc có hệ thống quản lý lịch trình, thời gian cách rõ ràng, cụ thể cần thiết để có sống cân bằng, động lực để thực mục tiêu sống, phát triển thân, học thêm kỹ mới, Trong phạm vi đề tài Đồ án mơn học này, nhóm thực đề tài “Xây dựng ứng dụng nhắc lịch trình” để hỗ trợ người dùng quản lý thời gian, theo dõi công việc hàng ngày 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 - chức cần thiết cho người dùng Phạm vi a Phạm vi môi trường - Triển khai ứng dụng đề tài môi trường web b Phạm vi chức - Quản lý tài khoản cá nhân - Thêm, xóa, sửa mục lịch trình - Gom nhóm mục - Thơng báo cho lịch trình tới người dùng Đối tượng - Người dùng muốn có cơng cụ hỗ trợ nhắc lịch trình có hệ thống rõ ràng, quản lý cách dễ dàng Phương pháp thực - Tìm hiểu cơng nghệ React, Firebase - Khảo sát cơng cụ có 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 thiết kế hệ thống - Tìm hiểu UX/UI tiến hành thiết kế giao diện ứng dụng - Tiến hành kiểm thử hệ thống triển khai Công nghệ - Backend: Firebase - Frontend: ReactJS, Tailwind CSS - Database: Firebase - Source control: Github Kết mong đợi - Xây dựng ứng dụng thỏa mãn tất chức đề - Giao diện ứng dụng thân thiện, dễ sử dụng người dùng - Có thể mở rộng thêm chức năng, đặc trưng 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á ứng dụng có 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 thiết kế ứng dụng 19/04/2022 – 02/05/2022 Tìm hiểu quy trình thiết kế UX/UI thiết kế giao diện cho ứng dụng 03/05/2022 – 29/05/2022 Triển khai lên web tiến hành kiểm thử chức 30/05/2022 – 10/06/2022 Kiểm thử hệ thống hoàn thiện báo cáo Xác nhận CBHD TP HCM, ngày 21 tháng 02 năm 2022 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Huỳnh Anh Kiệt MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG CHI TIẾT Chương – TỔNG QUAN VỀ ĐỀ TÀI Giới thiệu đề tài 1.1 Tầm quan trọng lịch trình đời sống ngày 1.2 Lý chọn đề tài Khảo sát trạng Đối tượng nghiên cứu Phạm vi nghiên cứu Phương pháp nghiên cứu Nhiệm vụ đề tài Mục tiêu đề tài Chương – CƠ SỞ LÝ THUYẾT Tổng quan ReactJS 1.1 Giới thiệu 1.2 Cách hoạt động 10 1.3 Ưu điểm 10 1.4 Nhược điểm 10 Tổng quan 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 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 – PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13 Mô tả yêu cầu 13 1.1 Yêu cầu chức 13 1.2 Yêu cầu phi chức 14 Kiến trúc hệ thống 14 2.1 Mô tả kiến trúc Front-end 14 2.2 Mô tả kiến trúc Back-end 17 Chương – HIỆN THỰC HỆ THỐNG 17 Sơ đồ Use case 17 1.1 Đăng ký tài khoản 18 1.2 Đăng nhập 19 1.3 Quên mật 20 1.4 Chỉnh sửa thông tin cá nhân 20 1.5 Chỉnh sửa mật 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 Thiết kế liệu 26 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 28 3.4 Trang dashboard 29 3.5 Trang list tác vụ cụ thể 29 3.6 Trang chi tiết tác vụ cụ thể 30 3.7 Trang settings 30 Chương – KẾT LUẬN 31 Đánh giá 31 1.1 Thuận lợi 31 1.2 Khó khăn 31 Kết đạt 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 DANH MỤC HÌNH Figure Sơ đồ use case 18 Figure Cấu trúc lưu trữ liệu Firestore 27 Figure Trang đăng nhập 28 Figure Trang đăng ký 28 Figure Trang quên mật 29 Figure Trang dashboard 29 Figure Trang list tác vụ cụ thể 30 Figure Trang chi tiết tác vụ cụ thể 30 Figure Trang settings 31 DANH MỤC BẢNG Table Bảng yêu cầu chức 14 Table Bảng mô tả kiến trúc back-end 17 Table Bảng mô tả use case đăng ký tài khoản 19 Table Bảng mô tả use case đăng nhập 20 Table Bảng mô tả use case quên mật 20 Table Bảng mô tả use case chỉnh sửa thông tin cá nhân 21 Table Bảng mô tả use case chỉnh sửa mật 22 Table Bảng mô tả use case thêm list 23 Table 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 Chương – TỔNG QUAN VỀ ĐỀ TÀI Giới thiệu đề tài 1.1 Tầm quan trọng lịch trình đời sống ngày Trong xã hội ngày phát triển nay, người ngày bận rộn với cơng việc văn phịng, cơng sở lẫn công việc nhà cửa Khả quản lý thời gian thật yếu tố định thành công hay thất bại sống Đơi người thành cơng nghiệp lại thất bại mái nhà họ, hay người ln muốn có sống cân công việc thú vui sống, khơng có kế hoạch cụ thể rõ ràng, công việc ngày nhiều, thời gian dành cho công việc ngày chiếm tỉ lệ cao ngày, khơng có thời gian để thư giãn dẫn đến stress 1.2 Lý chọn đề tài Xuất phát từ nhu cầu thực tế đời sống trải nghiệm thân, việc có hệ thống quản lý lịch trình, thời gian cách rõ ràng, cụ thể cần thiết để có sống cân bằng, động lực để thực mục tiêu sống, phát triển thân, học thêm kỹ mới, Cùng với phát triển máy tính internet, tác vụ tin học hóa đưa lên internet, khơng cần phải sử dụng vật dụng vật lý bút giấy để ghi lại tác vụ ngày, ngồi cịn truy cập lúc miễn có kết nối internet Khảo sát trạng Hiện internet có nhiều ứng dụng hỗ trợ lịch trình Microsoft Todo, Todoist, Google Keep, Các ứng dụng vừa nêu dễ có giao diện thân thiện, có tương đồng chức ngồi có khuyết điểm có chức khơng cần thiết, lược bỏ để hướng đến đơn giản tiện lợi cho người dùng Đối tượng nghiên cứu Đồ án tập trung nghiên cứu đối tượng sau: Tóm tắt Người dùng sử dụng tài khoản email cá nhân để đăng ký Dịng kiện Người dùng điền đầy đủ thông tin email, password Hệ thống kiểm tra Chuyển đến trang dashboard ứng dụng Dòng kiện khác Người dùng không điền đầy đủ thông tin điền sai 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 thực use case Điều kiện: Khơng có Trạng thái hệ thống sau Tài khoản đăng ký thành công, ứng thực use case dụng điều hướng đến trang dashboard Điểm mở rộng Table Bảng mô tả use case đăng ký tài khoản 1.2 Đăng nhập Tên chức Đă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 kiện Người dùng điền đầy đủ thông tin email, password Người dùng nhấn đăng nhập Hệ thống kiểm tra Chuyển đến trang dashboard ứng dụng Dòng kiện khác Người dùng không điền đầy đủ thông tin điền sai 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 thực 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ệ thực use case thống, ứng dụng điều hướng đến trang dashboard Điểm mở rộng Table Bảng mô tả use case đăng nhập 1.3 Quên mật Tên chức Quên mật Tóm tắt Reset lại mật cho người dùng Dịng kiện Người dùng điền đầy đủ email muốn reset password Nhấn “Reset” Hệ thống gửi email reset cho người dùng Người dùng truy cập vào link email để tiến hành reset mật Dòng kiện khác Người dùng điền sai email 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 thực use case Điều kiện: Khơng có Trạng thái hệ thống sau Mật người dùng thay đổi thực use case Điểm mở rộng Table Bảng mô tả use case quên mật 1.4 Chỉnh sửa thông tin cá nhân Tên chức 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 tài khoản Dịng kiện Người dùng nhấn vào phần settings ứng dụng Người dùng nhấn “Change” để tiến hành thay đổi tên Người dùng nhấn “Save” Hệ thống kiểm tra Hệ thống cập nhật lại thơng tin tài khoản Dịng kiện khác Thông tin nhập bỏ trống chứa ký tự trắng 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 thực 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 người dùng cập thực use case nhật Điểm mở rộng Table Bảng mô tả use case chỉnh sửa thông tin cá nhân 1.5 Chỉnh sửa mật Tên chức Chỉnh sửa mật Tóm tắt Chỉnh sửa mật tài khoản cho người dùng Dịng kiện Người dùng nhấn vào phần settings ứng dụng Người dùng nhập password vào trường password 21 Nhấn “Change” Hệ thống kiểm tra Hệ thống cập nhật lại mật cho người dùng Dòng 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 thực use case dụng Điều kiện: Khơng có Trạng thái hệ thống sau Mật tài khoản người dùng cập thực use case nhật lại Điểm mở rộng Table Bảng mô tả use case chỉnh sửa mật 1.6 Thêm list Tên chức Thêm list Tóm tắt Người dùng thêm list tác vụ Dịng kiện Người dùng nhấn vào “+ Add” để tiến hành thêm list tác vụ Người dùng nhập tên cho list Hệ thống kiểm tra Hệ thống tạo list cho ứng dụng Dòng kiện khác Người dùng không nhập tên tên chứa ký tự trống Hệ thống kiểm tra lỗi không tạo list 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 thực use case dụng 22 Điều kiện: Khơng có Trạng thái hệ thống sau List tác vụ thêm vào ứng dụng thực use case Điểm mở rộng Table Bảng mơ tả use case thêm list 1.7 Xóa list Tên chức Xóa list Tóm tắt Người dùng xóa list tác vụ Dịng kiện Người dùng nhấn vào “ ” list tác vụ Người dùng nhấn vào “Delete” Hệ thống xóa list tác vụ Dòng 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 thực 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ụ thực use case Điểm mở rộng Table Bảng mô tả use case xóa list 1.8 Sửa list Tên chức Thêm list Tóm tắt Người dùng sửa list tác vụ Dịng kiện Người dùng nhấn vào “ ” để tiến hành sửa list tác vụ Người dùng nhập tên cho list Hệ thống kiểm tra 23 Hệ thống cập nhật thông tin list cho ứng dụng Dịng kiện khác Người dùng khơng nhập tên tên chứa ký tự trống Hệ thống kiểm tra lỗi không cập nhật thông tin list 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 thực use case dụng Điều kiện: Không có Trạng thái hệ thống sau Thơng tin list tác vụ cập nhật thực use case Điểm mở rộng Table 10 Bảng mô tả use case sửa list 1.9 Thêm task Tên chức Thêm task Tóm tắt Người dùng thêm task Dịng kiện Người dùng nhấn vào “+ Add task” để tiến hành thêm tác vụ Người dùng điền thông tin cho tác vụ Hệ thống kiểm tra Hệ thống tạo task cho ứng dụng Dòng 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 thực use case dụng Điều kiện: Đang list tác vụ cụ thể 24 Trạng thái hệ thống sau Tác vụ thêm vào list tác vụ chọn thực use case Điểm mở rộng Table 11 Bảng mô tả use case thêm task 1.10 Xóa task Tên chức Xóa task Tóm tắt Người dùng xóa task Dịng kiện Người dùng nhấn vào biểu tượng thùng rác tác vụ Hệ thống xóa tác vụ chọn Dịng 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 thực 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 tác vụ chọn thực use case Điểm mở rộng Table 12 Bảng mơ tả use case xóa task 1.11 Sửa task Tên chức Sửa task Tóm tắt Người dùng sửa task Dịng kiện Người dùng nhấn vào biểu tượng bút chì để tiến hành sửa tác vụ Người dùng nhập thông tin cho tác vụ Hệ thống kiểm tra Hệ thống cập nhật thông tin tác vụ chọn 25 Dòng 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 thực use case dụng Điều kiện: Đang list tác vụ cụ thể Trạng thái hệ thống sau Thông tin tác vụ chọn cập nhật thực use case Điểm mở rộng Table 13 Bảng mô tả use case sửa task 1.12 Tìm kiếm task Tên chức Tìm kiếm task Tóm tắt Người dùng tìm kiếm task list tác vụ chọn Dịng kiện Người dùng nhập từ khóa cần tìm vào Search Hệ thống lọc task có thơng tin thỏa mãn từ khóa Dịng 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 thực use case dụng Điều kiện: Đang list tác vụ cụ thể Trạng thái hệ thống sau List tác vụ chứa task thỏa mãn thực use case Điểm mở rộng Table 14 Bảng mô tả use case tìm kiếm task Thiết kế liệu 26 Hệ thống sử dụng Firestore để lưu trữ liệu Dữ liệu lưu trữ theo dạng thư mục Figure Cấu trúc lưu trữ liệu Firestore Thiết kế giao diện người dùng 3.1 Trang đăng nhập 27 Figure Trang đăng nhập 3.2 Trang đăng ký tài khoản Figure Trang đăng ký 3.3 Trang quên mật 28 Figure Trang quên mật 3.4 Trang dashboard Figure Trang dashboard 3.5 Trang list tác vụ cụ thể 29 Figure Trang list tác vụ cụ thể 3.6 Trang chi tiết tác vụ cụ thể Figure Trang chi tiết tác vụ cụ thể 3.7 Trang settings 30 Figure Trang settings Chương – KẾT LUẬN Đánh giá 1.1 Thuận lợi - Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nghiên cứu thực đề tài cho nhóm - Các tài liệu cơng nghệ liên quan phổ biến rộng rãi internet - Thời gian thực đồ án tương đối dài, kế hoạch thực cách dễ dàng, áp lực nặng nề 1.2 Khó khăn - Bước đầu tiếp cận công nghệ ReactJS, Firebase, nên q trình tìm hiểu, nghiên cứu gặp nhiều khó khăn thời gian - Có nhiều cơng nghệ phát sinh không theo kế hoạch cần nghiên cứu trình thực đồ án, dẫn dến phải thời gian so với dự định Kết đạt 2.1 Ưu điểm 31 - Hoàn thành yêu cầu đặt ban đầu, đáp ứng đầy đủ tính cần thiết ứng dụng hỗ trợ nhắc lịch trình đơn giản - Tốc độ phản hồi nhanh, trải nghiệm người dùng tối ưu - Sinh viên có thêm kiến thức cơng nghệ làm ứng dụng web, móng tốt cho tương lai 2.2 Nhược điểm - Khơng có phần hướng dẫn cho người sử dụng - Ứng dụng đơn giản, làm dựa theo kinh nghiệm thân vấn đề nhắc lịch trình nên người sử dụng cảm thấy thiếu tính khác Hướng phát triển - Xây dựng mở rộng thêm chức hỗ trợ đa tài khoản, collaboration nhiều người dùng, hướng đến đối tượng doanh nghiệp - Hoàn thiện chức có - Tối ưu hóa code để dễ dàng hiểu mở rộng sau 32 TÀI LIỆU THAM KHẢO Firebase Documentation (google.com) React – A JavaScript library for building user interfaces (reactjs.org) React Router | Docs Home Tailwind CSS - Rapidly build modern websites without ever leaving your HTML Headless UI - Unstyled, fully accessible UI components Stack Overflow - Where Developers Learn, Share, & Build Careers 33 ... vụ đề tài Đề tài ? ?Xây dụng ứng dụng hỗ trợ nhắc lịch trình? ?? ứng dụng web đáp ứng yêu cầu sau: - Xây dựng ứng dụng thỏa mãn tất chức đề - Giao diện ứng dụng thân thiện, dễ sử dụng người dùng -... đề tài ? ?Xây dựng ứng dụng nhắc lịch trình? ?? để hỗ trợ người dùng quản lý thời gian, theo dõi công việc hàng ngày 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 - chức... NGHÊ PHẦN MỀM BÁO CÁO ĐỒ ÁN 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