Đề tài 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 (SE122.N11.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, 12/2022 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN 2 SE122.N11.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 2023 Người nhận xét (Ký tên ghi rõ họ tên) SE122.N11.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 2, 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 Cuối cùng, em xin kính chúc Quý 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 Quý Thầy/Cô nhiều Cá nhân thực Trường Đại học Công nghệ Thông tin, tháng 12 năm 2022 SE122.N11.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 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN MỤC LỤC ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH .1 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 .11 1.4 Đánh giá số ứng dụng có định hướng tương tự 12 1.4.1 Forest 12 1.4.2 NoxOcean 13 1.5 Mục tiêu đề tài 13 1.6 Phạm vi đề tài 15 1.6.1 Tổng quát 15 1.6.2 Phạm vi chức 15 1.6.3 Phạm vi người dùng 15 1.6.4 Phạm vi môi trường 15 CHƯƠNG SƠ LƯỢC VỀ CÔNG NGHỆ CHÍNH - NEXT.JS 16 2.1 Những điểm bật Next.js 16 2.2 Những điểm hạn chế Next.js 17 2.3 Lý lựa chọn Next.js cho đề tài 17 CHƯƠNG ĐẶC TẢ YÊU CẦU 18 3.1 Yêu cầu chức 18 3.2 Yêu cầu giao diện .18 CHƯƠNG THIẾT KẾ HỆ THỐNG 20 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN 4.1 Sơ đồ use-case tổng quát 20 4.2 Đặc tả use-case sơ đồ state machine tương ứng .21 4.2.1 Đăng nhập 21 4.2.2 Đăng xuất 21 4.2.3 Tạo session 22 4.2.4 Tham gia session có sẵn 23 4.2.5 Tuỳ chỉnh khoảng thời gian session .23 4.2.6 Bắt đầu session 24 4.2.7 Cài đặt cá nhân session 25 4.2.8 Chia sẻ session 25 4.2.9 Thoát khỏi session 26 4.2.10 Chat session 27 4.2.11 Tương tác mạng xã hội nhỏ 28 4.2.12 Xem thống kê thời gian sử dụng ngày 28 4.2.13 Đổi quà từ điểm tích luỹ 29 4.2.14 Trò chuyện với Chatbot Foxy 30 4.3 Sequence diagram diễn tả chế liên lạc chức với real-time database 31 4.3.1 Cơ chế cập nhật thời gian session 31 4.3.2 Chức bắt đầu session 31 4.3.3 Cơ chế kết thúc session 32 CHƯƠNG THIẾT KẾ DỮ LIỆU 33 5.1 Dữ liệu khởi tạo sẵn đăng nhập NextAuth 33 5.2 Dữ liệu đồ án 33 5.2.1 Các field document usersJoined .34 5.2.2 Các field document fkSessions 34 CHƯƠNG THIẾT LẬP API CHO CHAT BOT 35 6.1 Thiết lập API đơn giản với Strapi 35 6.2 Deploy API với Railway .36 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MƠN ĐỒ ÁN CHƯƠNG MỘT SỐ HÌNH ẢNH TRONG ĐỒ ÁN .37 CHƯƠNG TỔNG KẾT VÀ ĐỊNH HƯỚNG PHÁT TRIỂN 47 8.1 Kết đạt .47 8.2 Những điểm hạn chế 47 8.3 Định hướng phát triển 47 THỐNG KÊ ĐÓNG GÓP CỦA THÀNH VIÊN 49 8.4 Tỉ lệ đóng góp thành viên .49 8.5 Công việc cụ thể 49 TÀI LIỆU THAM KHẢO .50 SE122.N11.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 xun 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,… SE122.N11.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 • Strapi: Dịch vụ cung cấp hệ thống CMS cho phép xây dựng API liệu Có giao diện trực quan thông qua tài khoản admin dễ dàng tích hợp với nhiều hệ thống khác Đồ án sử dụng Strapi để tạo API đơn giản cung cấp câu hỏi có sẵn câu trả lời tương ứng để phục vụ cho tính chatbot ứng dụng • Railway: Dịch vụ cho phép deploy hệ thống xử lý back-end host API với chi phí thấp, tháng có mức miễn phí thích hợp cho nhu cầu nhỏ mà hệ thống cần triển khai Đồ án sử dụng Railway để deploy API nói 10 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN 6.2 Deploy API với Railway API deploy lên Railway để chạy cách ổn định: API sau deploy: 36 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN CHƯƠNG MỘT SỐ HÌNH ẢNH TRONG ĐỒ ÁN (Trang đăng nhập) (Home sau người dùng đăng nhập vào) 37 SE122.N11.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) 38 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Session set thời gian thành công) (Chat với người dùng khác session) 39 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Người dùng hoàn thành session đợi xác nhận) (Người dùng khơng hồn thành session) 40 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MƠN ĐỒ ÁN (Đồng hố thời gian đếm ngược với nhiều user) (Chức share session với ID session) 41 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Chức join session thông qua ID session) (Trang báo lỗi truy cập session với ID sai session private người khác) 42 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Đăng viết lên mạng xã hội) (Upvote viết người khác comment lên viết người khác) 43 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Trang comment viết) (Biểu đồ quạt thể % thời gian tập trung ngày) 44 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Trang đổi voucher, đổi quà từ điểm tích luỹ được) (Bảng xếp hạng với người dùng khác) 45 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN (Chat với trợ lý ảo - chatbot Foxy) 46 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN CHƯƠNG 8.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 Bên cạnh cịn thấy cơng cụ Strapi hỗ trợ tốt để xuất API đơn giản mà hồn tồn ứng dụng vào việc xây dựng chatbot đơn giản Ngồi cịn biết cách deploy sản phẩm hồn chỉnh để thực sử dụng thơng qua Railway Vercel 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 hoá session nhiều người dùng khác xử lý API chatbot 8.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 Ngồ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 8.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 dang dở như: 47 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MƠN ĐỒ ÁN • Quản lý session người dùng tạo • Thêm nhạc session bắt đầu • Phát triển phần cài đặt cá nhân cho hệ thống, cho phép bật tắt chế độ tối darkmode thay đổi ngơn ngữ thành Tiếng Việt • Quản lý thành tích, thời gian hồn thành session tốt • Hồn thiện hệ thống đổi điểm lấy q cửa hàng • 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 48 SE122.N11.PMCL - BÁO CÁO CUỐI KỲ - MÔN ĐỒ ÁN THỐNG KÊ ĐÓNG GÓP CỦA THÀNH VIÊN 8.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% 8.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 49 SE122.N11.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 [7] https://strapi.io [8] https://strapi.io/blog/how-to-create-a-chat-bot-assistant-using-next-jstailwind-css-andstrapi?utm_source=dev.to&utm_medium=post&utm_campaign=blog [9] https://railway.app [10] https://vercel.com 50 ... 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... đế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. .. 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 bên với vấn đề đặt với chức chủ yếu bao gồm: 13 SE122.N11.PMCL