ĐẠ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.
ĐẠ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, 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 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 suốt q 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 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, hồ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 Huỳnh Anh Kiệt ĐỀ 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 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 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 TP HCM, ngày 21 tháng 02 năm 2022 Xác nhận CBHD Sinh viên (Ký tên ghi rõ họ tê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 Chương - TỔNG QUAN VỀ ĐỀ TÀI 11 1.1 Giới thiệu đề tài 11 1.1.1 Tầm quan trọng lịch trình đời sống ngày 11 1.1.2 Lý chọn đề tài 11 1.2 Khảo sát 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ụ đề tài 12 1.7 Mục tiêu đề tài 12 Chương - CƠ SỞ LÝ THUYẾT 13 2.1 Tổng quan 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 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 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 - 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 16 3.1.2 Yêu cầu phi chức 17 3.2 Kiến trúc hệ thống 18 3.2.1 Mô tả kiến trúc Front-end 18 3.2.2 Mô tả kiến trúc back-end 20 Chương - 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 23 4.1.4 Chỉnh sửa thông tin cá nhân 24 4.1.5 Chỉnh sửa mật 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ế 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 34 4.3.4 Trang dashboard 35 4.3.5 Trang list tác vụ cụ thể 36 4.3.6 Trang chi tiết tác vụ cụ thể 37 4.3.7 Trang settings 39 Chương - 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 5.2 Kết đạt 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 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ể Trạng thái hệ thống sau Tác vụ thêm vào list tác vụ thực use case chọn Điểm mở rộng Bảng 4.9 Bảng mơ tả use-case thêm task 4.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 Bảng 4.10 Bảng mơ tả use-case xóa task 28 4.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 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 Bảng 4.11 Bảng mơ tả use-case sửa task 4.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 29 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 List tác vụ chứa task thỏa mãn thực use case Điểm mở rộng Bảng 4.12 Bảng mơ tả use-case tìm kiếm task 4.2 Thiết kế liệu Hình 4.2 Sơ đồ cấu trúc lưu trữ liệu Hệ thống sử dụng Firestore để lưu trữ liệu Dữ liệu lưu trữ theo dạng thư mục 30 4.2.1 Bảng list Tên trường Kiểu liêu Mô tả created Date Ngày tạo list name String Tên list tasks Array Danh sách tác vụ Bảng 4.13 Bảng liệu list 4.2.2 Bảng task Tên trường Kiểu liệu Mô tả created Date Ngày tạo tác vụ Date Date Deadline tác vụ Title String Tiêu đề tác vụ Description String Mô tả tác vụ Status String Trạng thái tác vụ Bảng 4.14 Bảng liệu task 4.2.3 Bảng sub-task Tên trường Kiểu liệu Mô tả created Date Ngày tạo tác vụ phụ Title String Tiêu đề tác vụ phụ Description String Mô tả tác vụ phụ Status String Trạng thái tác vụ phụ Bảng 4.15 Bảng liệu sub-task 4.2.4 Bảng user Tên trường Kiểu liệu Mô tả displayName String Tên hiển thị user Email String Email đăng ký user Bảng 4.16 Bảng liệu user 31 4.3 Thiết kế giao diện người dùng 4.3.1 Trang đăng nhập Hình 4.3 Trang đăng nhập Tên Kiểu Chức email, password Input Nhập thông tin đăng nhập tài khoản Sign up here Link Điều hướng đến trang đăng ký Forgot your Link Điều hướng đến trang quên mật Button Cho phép người dùng thực đăng pasword? Sign in nhập tài khoản Login with Google Button Cho phép người dùng thực đăng nhập thông qua bên thứ ba Google Bảng 4.17 Bảng mô tả giao diện trang đăng nhập 32 Biến cố Xử lý Khi nhấn “Sign in” Hệ thống thực validate thông tin cung cấp trường input, gửi yêu cầu đến phía firebase, nhận kết trả Khi nhấn “Login with Hệ thống pop-up trang xác thực tài khoản Google” bên thứ ba Google chịu trách nhiệm Bảng 4.18 Bảng mô tả xử lý trang đăng nhập 4.3.2 Trang đăng ký tài khoản Hình 4.4 Trang đăng ký Tên Chức Kiểu email, password Input Nhập thông tin đăng ký tài khoản Sign in here Link Điều hướng đến trang đăng nhập Sign up Button Cho phép người dùng thực đăng ký tài khoản Bảng 4.19 Bảng mô tả giao diện trang đăng ký 33 Biến cố Xử lý Khi nhấn “Sign up” Hệ thống thực validate thông tin cung cấp trường input, gửi yêu cầu đến phía firebase, nhận kết trả Bảng 4.20 Bảng mô tả xử lý trang đăng ký 4.3.3 Trang quên mật Hình 4.5 Trang quên mật Tên Kiểu Chức email Input Nhập email cần khôi phục Sign in here Link Điều hướng đến trang đăng nhập Reset password Button Cho phép người dùng thực công việc khôi phục mật Bảng 4.21 Bảng mô tả giao diện trang quên mật 34 Biến cố Xử lý Khi nhấn “Reset Hệ thống thực validate trường email, Password” gửi yêu cầu lên phía firebase, nhận kết trở Bảng 4.22 Bảng mô tả xử lý trang quên mật 4.3.4 Trang dashboard Hình 4.6 Trang dashboard Tên Kiểu Chức User Button Mở chức liên quan đến người dùng Nút Menu Button Mở rộng/ Thu nhỏ sidebar Today, Upcoming, Button Điều hướng đến danh sách tác vụ Archived, Bảng 4.23 Bảng mô tả giao diện trang dashboard 35 Biến cố Xử lý Khi nhấn “User” Hệ thống mở chức liên quan đến thông tin người dùng đăng xuất khỏi hệ thống Khi nhấn “Today” Hệ thống mở danh sách tác vụ có deadline ngày hơm Khi nhấn “Upcoming” Hệ thống mở danh sách tác vụ có deadline sau ngày hôm Khi nhấn “Archived” Hệ thống mở danh sách tác vụ hoàn thành Bảng 4.24 Bảng mô tả xử lý trang dashboard 4.3.5 Trang list tác vụ cụ thể Hình 4.7 Trang list tác vụ cụ thể Tên Kiểu Chức Title, description Label Hiển thị thông tin tác vụ Date Button Chọn deadline cho tác vụ 36 “Tick” Button Cho phép người dùng đánh dấu hoàn thành cho tác vụ New task Button Cho phép người dùng thêm tác vụ Bảng 4.25 Bảng mô tả giao diện trang list tác vụ cụ thể Biến cố Xử lý Khi nhấn vào tác vụ Hệ thống mở chi tiết tác vụ chọn Khi nhấn “Date” Hệ thống mở pop-up để người dùng chọn ngày Khi nhấn “Tick” Hệ thống dánh dấu tác vụ hồn thành, gửi u cầu lên phía firebase Khi nhấn “New task” Hệ thống mở tác vụ chế độ chỉnh sửa để người dùng điền thông tin cho tác vụ Bảng 4.26 Bảng mô tả xứ lý trang list tác vụ cụ thể 4.3.6 Trang chi tiết tác vụ cụ thể Hình 4.8 Trang chi tiết tác vụ cụ thể 37 Tên Kiểu Chức Title, Description Label Hiển thị thông tin tác vụ Subtask Label Hiển thị thông tin tác vụ phụ tác vụ Add task Button Cho phép thêm tác vụ phụ tác vụ hiển thị Tick Button Cho phép đánh dấu hoàn thành tác vụ phụ Bảng 4.27 Bảng mô tả giao diện trang chi tiết tác vụ cụ thể Tên Kiểu Chức Title, Description Label Hiển thị thông tin tác vụ Subtask Label Hiển thị thông tin tác vụ phụ tác vụ Add task Button Cho phép thêm tác vụ phụ tác vụ hiển thị Tick Button Cho phép đánh dấu hoàn thành tác vụ phụ Bảng 4.28 Bảng mô tả xử lý trang chi tiết tác vụ cụ thể 38 4.3.7 Trang settings Hình 4.9 Trang settings Tên Kiểu Chức Name Input Hiển thị tên hiển thị người dùng Change Button Cho phép người dùng chỉnh sửa tên hiển thị Email Label Hiển thị email sử dụng để đăng nhập hệ thống Password Input Trường nhập password cho người dùng Bảng 4.29 Bảng mô tả giao diện trang settings Biến cố Xử lý Khi nhấn “Change” Hệ thống xử lý tên hiển thị nhập vào, gửi yêu cầu lên firebase Bảng 4.30 Bảng mô tả xử lý trang settings 39 Chương - KẾT LUẬN 5.1 Đánh giá 5.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, khơng có áp lực nặng nề 5.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 q trình thực đồ án, dẫn dến phải thời gian so với dự định 5.2 Kết đạt 5.2.1 Ưu điểm o 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 o Tốc độ phản hồi nhanh, trải nghiệm người dùng tối ưu o 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 5.2.2 Nhược điểm o Khơng có phần hướng dẫn cho người sử dụng o Ứ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 5.3 Hướng phát triển 40 o 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 o Hoàn thiện chức có 41 TÀI LIỆU THAM KHẢO [1] Trần Thị Hồng Yến (2022), Template báo cáo môn học, Khoa Công nghệ phần mềm, Trường Đại học Công Nghệ Thông Tin [2] Trần Anh Dũng (2022), Công nghệ Web Ứng dụng, Khoa Công nghệ phần mềm, Trường Đại học Công Nghệ Thông Tin [3] Firebase documentations - https://firebase.google.com/docs [4] React – A JavaScript library for building user interfaces (reactjs.org) – https://reactjs.org/ [5] React Router | Docs Home - https://reactrouter.com/docs/en/v6 [6] Tailwind CSS - Rapidly build modern websites without ever leaving your HTML https://tailwindcss.com/ [7] Headless UI - Unstyled, fully accessible UI components - https://headlessui.dev/ [8] Stack Overflow - Where Developers Learn, Share, & Build Careers https://stackoverflow.com/ 42 ... 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 suốt q trình thực đồ án Em vô biết... Trang settings Tên Kiểu Chức Name Input Hiển thị tên hiển thị người dùng Change Button Cho phép người dùng chỉnh sửa tên hiển thị Email Label Hiển thị email sử dụng để đăng nhập hệ thống Password... Kiệt ĐỀ 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