Nền tảng website hỗ trợ tập trung trong công việc

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO CUỐI KỲ MÔN: ĐỒ ÁN (SE121.M21.PMCL) ĐỀ TÀI: NỀN TẢNG WEBSITE HỖ TRỢ TẬP TRUNG TRONG CÔNG VIỆC Giảng viên hướng dẫn: THÁI THỊ HÀN UYỂN Sinh viên thực hiện: NGUYỄN TRÍ MINH - 19521847  Tp Hồ Chí Minh, 6/2022  SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……., ngày…… tháng…… năm 2022 Người nhận xét (Ký tên ghi rõ họ tên) SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN LỜI CẢM ƠN VÀ CHIA SẺ Trước vào nội dung phần báo cáo đồ án, lời nói em muốn nói em xin chân thành gửi lời cảm ơn sâu sắc đến Ths THÁI THỊ HÀN UYỂN giảng viên hướng dẫn môn ĐỒ ÁN 1, cung cấp cho em kiến thức bổ ích trợ giúp cần thiết suốt khoảng thời gian thực đồ án, Quý Thầy/Cô khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh tạo điều kiện tốt giúp cho em có hội để thực hố đề tài hồn thiện đồ án Bởi đồ án thực cá nhân, với tính chất phức tạp đề tài, lần em tiếp xúc, học hỏi công nghệ để ứng dụng vào đồ án, trình thực tương đối khó khăn khơng thể tránh khỏi nhiều sai sót Một số tính khơng thể hồn thiện kịp thời lý trên, nhiên tính tập trung hồn thiện tốt Với phương châm vừa học, vừa làm, vừa phát triển vậy, em mong Q Thầy/Cơ thơng cảm điều này, em xin cảm ơn Quý Thầy/Cô nhiều Cuối cùng, em xin kính chúc Q Thầy/Cơ khoa Công nghệ Phần mềm cô Thái Thuỵ Hàn Uyển sức khoẻ dồi thành công lĩnh vực để sẵn sàng tiếp tục đường truyền đạt kiến thức, truyền lửa nhiệt huyết cho hệ mai sau Xin trân trọng cảm ơn Q Thầy/Cơ nhiều Cá nhân/Nhóm thực Trường Đại học Công nghệ Thông tin, tháng năm 2022 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN DANH SÁCH THÀNH VIÊN NHÓM STT Họ tên sinh viên Mã số sinh viên Nguyễn Trí Minh 19521847 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN MỤC LỤC LỜI CẢM ƠN VÀ CHIA SẺ DANH SÁCH THÀNH VIÊN NHÓM MỤC LỤC CHƯƠNG TỔNG QUAN ĐỀ TÀI 1.1 Đặt vấn đề 1.2 Công nghệ sử dụng 1.3 Công cụ sử dụng .9 1.4 Đánh giá số ứng dụng có định hướng tương tự 10 1.4.1 Forest 10 1.4.2 NoxOcean 11 1.5 Mục tiêu đề tài 11 1.6 Phạm vi đề tài 12 1.6.1 Tổng quát 12 1.6.2 Phạm vi chức 13 1.6.3 Phạm vi người dùng 13 1.6.4 Phạm vi môi trường 13 CHƯƠNG SƠ LƯỢC VỀ CƠNG NGHỆ CHÍNH - NEXT.JS 14 2.1 Những điểm bật Next.js 14 2.2 Những điểm hạn chế Next.js 15 2.3 Lý lựa chọn Next.js cho đề tài 15 CHƯƠNG ĐẶC TẢ YÊU CẦU 16 3.1 Yêu cầu chức 16 3.2 Yêu cầu giao diện .16 CHƯƠNG THIẾT KẾ HỆ THỐNG 18 4.1 Sơ đồ use-case tổng quát 18 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN 4.2 Đặc tả use-case sơ đồ state machine tương ứng .19 4.2.1 Đăng nhập 19 4.2.2 Đăng xuất 19 4.2.3 Tạo session 20 4.2.4 Tham gia session có sẵn 21 4.2.5 Tuỳ chỉnh khoảng thời gian session .21 4.2.6 Bắt đầu session 22 4.2.7 Cài đặt cá nhân session 23 4.2.8 Chia sẻ session 23 4.2.9 Thoát khỏi session 24 4.3 Sequence diagram diễn tả chế liên lạc chức với real-time database 25 4.3.1 Cơ chế cập nhật thời gian session 25 4.3.2 Chức bắt đầu session 26 4.3.3 Cơ chế kết thúc session 26 CHƯƠNG THIẾT KẾ DỮ LIỆU 27 5.1 Dữ liệu khởi tạo sẵn đăng nhập NextAuth 27 5.2 Dữ liệu đồ án 27 5.2.1 Các field document usersJoined 28 5.2.2 Các field document fkSessions 28 CHƯƠNG MỘT SỐ HÌNH ẢNH THỰC TẾ TỪ ĐỒ ÁN 29 CHƯƠNG TỔNG KẾT VÀ ĐỊNH HƯỚNG PHÁT TRIỂN 33 7.1 Kết đạt .33 7.2 Những điểm hạn chế 33 7.3 Định hướng phát triển 33 THỐNG KÊ ĐÓNG GÓP CỦA THÀNH VIÊN 35 7.4 Tỉ lệ đóng góp thành viên .35 7.5 Công việc cụ thể 35 TÀI LIỆU THAM KHẢO .36 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN CHƯƠNG 1.1 TỔNG QUAN ĐỀ TÀI Đặt vấn đề • Ngày nay, học tập, làm việc, hay phải thực công việc cần tập trung cao để đạt hiệu tốt nhất, khơng thường xuyên gặp phải tình trạng xao nhãng, tập trung việc Thường thơng báo tin nhắn điện thoại, ứng dụng khác không quan trọng không cần thiết lúc làm phiền Điều dẫn đến việc bị đứt quãng công việc làm phải tập trung vào tác nhân gây xao nhãng đó, làm giảm hiệu suất tập trung từ làm giảm hiệu công việc Nếu điều xảy dài liên tục, bị mai ý chí tâm, tập trung để hồn thành cơng việc, thói quen khơng tốt làm việc • Nhận thấy vấn đề vô quan trọng, nên em chọn đề tài “Xây dựng tảng website hỗ trợ tập trung công việc” để giúp cho người dùng sử dụng cải thiện vấn đề nêu bên 1.2 Cơng nghệ sử dụng • Next.js Vercel: Một framework dựa thư viện tiếng React, thư viện JavaScript cho phép xây dựng giao diện người dùng Next.js đời sau React, việc kế thừa đặc điểm bật React cịn có nhiều ưu điểm vượt trội SSR (Server-side rendering), routing,… SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MƠN ĐỒ ÁN • Tailwind CSS Tailwind Labs: Một utility-first framework CSS dễ dàng triển khai sử dụng Dễ dàng sửa chữa bảo trì so với CSS truyền thống • Firebase Google: Dịch vụ database tiếng Google, đặc biệt có hỗ trợ real-time database Firestore nhiều tính khác 1.3 • • • • Công cụ sử dụng Trello để quản lý tiến độ đồ án GitHub để quản lý mã nguồn đồ án IDE Visual Studio Code Trình duyệt Google Chrome để: o Vận hành, kiểm thử, bảo trì dự án o Quản lý database thông qua Firebase o Tham khảo giao diện người dùng thông qua thiết kế mẫu có sẵn o Đọc documentation từ React, Next.js, Tailwind CSS Firebase để hiểu rõ cách cài đặt vận hành o Tìm kiếm lỗi cách vận hành khác hệ thống thơng qua Internet • Microsoft Word để soạn thảo báo cáo • Các ứng dụng tương tự để tham khảo tính SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN 1.4 Đánh giá số ứng dụng có định hướng tương tự 1.4.1 Forest • Forest ứng dụng di dộng có Android iOS giúp người dùng tập trung vào phiên làm việc cách cho trồng trồng khoảng thời gian người dùng mong muốn tập trung Hết thời gian hoàn thành lúc thời gian lớn lên hết khu rừng thêm • Ưu điểm: o Giao diện đẹp, dễ sử dụng o Ý tưởng lần tập trung tốt để lấp đầy khu rừng thiết thực, giúp người sử dụng có thêm động lực o Có hỗ trợ tính khắt khe để phát người dùng thoát app đa nhiệm để mở app khác trồng tự động chết người dùng khơng quay trở lại app o Ngồi lớn người dùng tiền để mua loại cửa hàng dùng để trồng trồng có thật ngồi đời để bảo vệ mơi trường, việc làm vơ thiết thực • Nhược điểm: o Chỉ người sử dụng o Chưa nhiều tính khác thú vị 10 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN 4.2.7 Cài đặt cá nhân session Tên Cài đặt cá nhân session Mô tả Người dùng cài đặt số cài đặt cá nhân session Đối tượng Người dùng Hành động phát sinh Người dùng chọn tính cài đặt session Điều kiện cần Người dùng session Trạng thái thành công Cài đặt áp dụng cho người dùng *Sơ đồ state machine: 4.2.8 Chia sẻ session Tên Chia sẻ session Mô tả Người dùng chia sẻ session cho người khác để tham gia 23 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN Đối tượng Người dùng Hành động phát sinh Người dùng chọn tính chia sẻ session Điều kiện cần Người dùng session Trạng thái thành công Thực phương thức giúp người dùng chia sẻ session *Sơ đồ state machine: 4.2.9 Thoát khỏi session Tên Thốt khỏi session Mơ tả Người dùng khỏi session Đối tượng Người dùng Hành động phát sinh Người dùng chọn chức thoát khỏi session Điều kiện cần Người dùng session chưa kết thúc Trạng thái thành công Trả người dùng trở lại trang chủ Nếu session diễn mà người dùng xem bị thất bại khơng tính thành tích cho người dùng 24 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN *Sơ đồ state machine: 4.3 Sequence diagram diễn tả chế liên lạc chức với real-time database (*Chỉ bao gồm chế tính quan trọng thực hiện) 4.3.1 Cơ chế cập nhật thời gian session 25 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN 4.3.2 Chức bắt đầu session 4.3.3 Cơ chế kết thúc session 26 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN CHƯƠNG THIẾT KẾ DỮ LIỆU *Chương trình bày chi tiết cách tổ chức liệu đồ án dạng collection, document, field Firestore (Firebase) Chỉ gồm phần liên quan đến chức hoàn thiện 5.1 Dữ liệu khởi tạo sẵn đăng nhập NextAuth STT Tên Loại accounts Collection sessions Collection users Collection 5.2 Tên Loại fkSessions Collection Gồm nhiều document thông tin chi tiết tài khoản đăng nhập Gồm nhiều document thông tin phiên đăng nhập tài khoản Gồm nhiều document thông tin người dùng đăng nhập Dữ liệu đồ án STT Chi tiết usersJoined document session Các field document fkSessions Collection Field Chi tiết Gồm nhiều document thông tin session tạo Chứa document thông tin user tham gia vào session Các trường thông tin chi tiết session 27 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN 28 5.2.1 Các field document usersJoined STT Tên Loại liệu id String isAdmin Boolean isReady Boolean latestTimeJoined Number timeCompleted Number hasCompleted Boolean Chi tiết Id user tham gia session Quyết định xem user có phải Admin session không Quyết định xem user sẵn sàng tham gia vào session chưa Thời gian gần user sẵn sàng Thời gian user xác nhận hoàn thành session Quyết định xem user hoàn thành session hay chưa 5.2.2 Các field document fkSessions STT Tên Loại liệu Chi tiết id String isSessionStarted Boolean isSessionEnded Boolean name String Tên session privacy String Quyền riêng tư session (private/public) time Number Khoảng thời gian session startedTime Number Thời điểm session bắt đầu Id session Quyết định xem session bắt đầu hay chưa Quyết định xem session kết thúc hay chưa SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN CHƯƠNG MỘT SỐ HÌNH ẢNH THỰC TẾ TỪ ĐỒ ÁN (Trang đăng nhập) (Home sau người dùng đăng nhập vào) 29 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Chức tạo session mới) (Trang session tạo thành công giao diện lúc truy cập) 30 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Session set thời gian thành công) (Người dùng hoàn thành session đợi xác nhận) 31 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Người dùng thất bại session) (Đồng hoá thời gian đếm ngược với nhiều user) 32 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN CHƯƠNG 7.1 TỔNG KẾT VÀ ĐỊNH HƯỚNG PHÁT TRIỂN Kết đạt Mặc dù trình thực đồ án khó khăn, đồ án thực thành viên công nghệ nên việc vừa học vừa làm thử thách lớn Nhìn chung, đồ án đạt mục tiêu giúp người dùng tạo session để tập trung cơng việc, đặc biệt tính tham gia session với người khác nhờ vào linh hoạt framework Next.js dịch vụ lưu trữ Firestore real-time tốt Google Firebase Giao diện hỗ trợ tốt Tailwind CSS, dễ triển khai sửa chữa Qua đồ án, em cảm thấy học hỏi nhiều từ công nghệ này, biết cần tìm tịi học hỏi biến điều khơng thể thành khả thi, tính chất phức tạp đề tài đồng hố session nhiều người dùng khác 7.2 Những điểm hạn chế Vì khó khăn bàn bên trên, dù cố gắng hết mình, tính hệ thống chưa trôi chảy hay “tự nhiên” Hiện tồn động nhiều xử lý dư thừa phức tạp có nhiều chức yêu cầu người dùng phải xác nhận, từ có sở logic để xử lý tiếp, mà chưa thể tự động hố 100% hay tự nhận biết thơng minh Bên cạnh cịn nhiều tính thú vị chưa thêm vào thời gian khơng đủ để tìm hiểu thực tiếp tục Ngoài giao diện chưa responsive hoàn toàn Em rút kinh nghiệm từ điều để cải thiện hệ thống tốt tương lai 7.3 Định hướng phát triển Ngoài việc cải thiện hệ thống, em mong có điều kiện tiếp tục triển khai phát triển hệ thống tốt với nhiều tính tính cịn dang dở như: • Quản lý session người dùng tạo • Thêm nhạc session bắt đầu • Thêm khu vực chat, trị chuyện người dùng session 33 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MƠN ĐỒ ÁN • • • • • • • • • Phát triển phần cài đặt session Quản lý thành tích, thời gian hoàn thành session tốt Hiển thị bảng xếp hạng với người dùng cách trực quan Thêm hệ thống đổi điểm lấy quà cửa hàng Thêm hệ thống mạng xã hội nhỏ để người dùng chia sẻ với phương pháp tập trung công việc Thêm phần cài đặt cho hệ thống, ngơn ngữ, giao diện tối (darkmode) Một số tính nâng cao khác Hỗ trợ đăng nhập với nhiều tảng Cải thiện mặt giao diện, responsive tốt 34 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MƠN ĐỒ ÁN THỐNG KÊ ĐĨNG GĨP CỦA THÀNH VIÊN 7.4 Tỉ lệ đóng góp thành viên STT Họ tên sinh viên Mã số sinh viên Tỉ lệ Nguyễn Trí Minh 19521847 100% 7.5 Cơng việc cụ thể STT Tên công việc Họ tên sinh viên Mã số sinh viên Phát triển hệ thống Nguyễn Trí Minh 19521847 Hồn thành báo cáo Nguyễn Trí Minh 19521847 35 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN TÀI LIỆU THAM KHẢO [1] https://www.figma.com/community [2] https://reactjs.org [3] https://nextjs.org/docs [4] https://tailwindcss.com/docs [5] https://firebase.google.com/docs/firestore [6] https://next-auth.js.org 36 SE121.M21.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN  -  37 ... đến việc bị đứt quãng công việc làm phải tập trung vào tác nhân gây xao nhãng đó, làm giảm hiệu suất tập trung từ làm giảm hiệu công việc Nếu điều xảy dài liên tục, bị mai ý chí tâm, tập trung. .. tâm, tập trung để hồn thành cơng việc, thói quen khơng tốt làm việc • Nhận thấy vấn đề vô quan trọng, nên em chọn đề tài “Xây dựng tảng website hỗ trợ tập trung công việc? ?? để giúp cho người dùng... người dùng tham gia vào phiên làm việc chung để hồn thành cơng việc nhau, đề tài cải thiện điều với chức liên quan Đề tài ? ?Website tảng hỗ trợ tập trung công việc? ?? lấy ý tưởng từ ứng dụng nêu