Tổng quan dự án Focus Garden

Focus Garden là ứng dụng web hỗ trợ người dùng quản lý thời gian tập trung theo hình thức "trồng cây khi học tập hoặc làm việc". Người dùng có thể tạo phiên tập trung, chọn thời lượng, đặt chủ đề, cấu hình Study Zone dựa trên các tab trình duyệt được phép sử dụng, theo dõi chất lượng tập trung và lưu lại lịch sử phiên làm việc.

Mục tiêu của phần web là biến quá trình tập trung thành một trải nghiệm trực quan, dễ theo dõi và có yếu tố tạo động lực thông qua XP, cấp độ, streak, thành tích, cây trồng và khu vườn cá nhân.

Mục tiêu sản phẩm

• Giúp người dùng bắt đầu một phiên tập trung nhanh chóng với chủ đề và thời lượng rõ ràng.

• Cho phép người dùng định nghĩa Study Zone để xác định các tab hoặc trang web hợp lệ trong thời gian tập trung.

• Theo dõi tiến trình phiên tập trung theo thời gian thực.

• Ghi nhận kết quả phiên gồm thời gian thực tế, thời gian tập trung, thời gian xao nhãng, tỷ lệ tập trung và trạng thái thành công hoặc thất bại.

• Đồng bộ lịch sử phiên lên tài khoản người dùng khi đã đăng nhập.

• Cung cấp động lực thông qua XP, level, streak, daily goals, achievements và garden.

• Hỗ trợ widget nổi hoặc Picture-in-Picture để người dùng vẫn thấy bộ đếm giờ khi làm việc trên trang khác.

Chức năng chính của Web

1. Tạo phiên tập trung

Trang Home cho phép người dùng:

• Nhập chủ đề hoặc hoạt động cần tập trung.

• Chọn thời lượng phiên bằng thanh điều chỉnh thời gian.

• Chọn loại cây đại diện cho phiên tập trung.

• Chọn các rule trong Study Zone.

• Bắt đầu phiên tập trung bằng nút Start growing.

Khi phiên bắt đầu, ứng dụng tạo một runtime session gồm mã UUID, thời điểm bắt đầu, thời lượng mục tiêu, chủ đề, cây đã chọn, danh sách Study Zone và trạng thái theo dõi.

2. Study Zone

Study Zone là tập hợp các quy tắc tab hoặc trang web được xem là hợp lệ trong lúc tập trung. Mỗi rule có thể được tạo từ thông tin tab trình duyệt và có các kiểu so khớp:

• Origin: so khớp theo tên miền.

• Exact URL: so khớp theo đúng URL.

• Title keyword: so khớp theo từ khóa trong tiêu đề tab.

Study Zone giúp hệ thống phân biệt đâu là môi trường học tập hoặc làm việc hợp lệ và đâu là dấu hiệu xao nhãng.

3. Theo dõi phiên và Focus Widget

Khi có phiên đang chạy, ứng dụng hiển thị Session Timer dưới dạng widget nổi trên giao diện. Widget có thể:

• Hiển thị thời gian còn lại.

• Hiển thị trạng thái phiên tập trung.

• Mở thành cửa sổ riêng.

• Chạy ở chế độ Picture-in-Picture nếu trình duyệt hỗ trợ Document Picture-in-Picture API.

• Cho phép kéo thả widget trên màn hình.

Trang /focus-widget được dùng riêng cho chế độ popout hoặc Picture-in-Picture.

4. Lưu và đồng bộ phiên

Khi phiên kết thúc, ứng dụng tạo payload gồm:

• session_uuid

• subject

• target_duration_mins

• actual_duration_secs

• started_at

• ended_at

• status

• study_zone_keywords

• focused_secs

• distracted_secs

• focus_percent

Nếu người dùng đã đăng nhập, phiên sẽ được gửi lên backend. Nếu chưa đăng nhập hoặc gặp lỗi kết nối, phiên được lưu vào danh sách pending và có thể thử đồng bộ lại sau.

5. Lịch sử phiên

Trang History hiển thị danh sách các phiên đã hoàn thành. Mỗi dòng lịch sử gồm:

• Tên phiên hoặc chủ đề tập trung.

• Thời điểm bắt đầu.

• Thời lượng thực tế.

• Study Zone đã sử dụng.

• Tỷ lệ tập trung.

• XP nhận được.

• Trạng thái thành công hoặc thất bại.

Nếu có phiên chưa đồng bộ, trang History sẽ hiển thị thông báo số lượng session đang chờ sync và nút Retry.

6. Dashboard và Gamification

Dashboard tổng hợp các chỉ số động lực và tiến độ của người dùng, bao gồm:

• Level System.

• Streak.

• Daily Goals.

• Weekly Progress.

• Achievements.

Gamification giúp người dùng có cảm giác tiến bộ liên tục thông qua XP, cấp độ, streak, cây trồng và thành tích.

7. Garden

Trang Garden là khu vực dự kiến phát triển thành vườn xã hội, gồm các ý tưởng như bạn bè, nhóm tập trung, cây chia sẻ và bảng xếp hạng. Ở thời điểm hiện tại, trang này đóng vai trò placeholder cho tính năng garden/social garden trong tương lai.

8. Đăng nhập và hồ sơ người dùng

Web có trang Auth và Profile để phục vụ luồng tài khoản. Giao diện đăng nhập đã sẵn sàng cho OAuth và email/password. Backend cung cấp các API liên quan đến xác thực, người dùng, phiên tập trung, gamification và leaderboard.

Luồng hoạt động chính

1. Người dùng mở web và cấu hình phiên tập trung trên Home.

2. Người dùng chọn Study Zone dựa trên các tab hoặc trang web liên quan đến việc học tập/làm việc.

3. Người dùng bắt đầu phiên, Session Timer xuất hiện.

4. Trong quá trình tập trung, ứng dụng cập nhật thời gian còn lại và thống kê focus.

5. Khi hết giờ hoặc người dùng dừng phiên, ứng dụng tính trạng thái thành công/thất bại.

6. Session payload được gửi lên backend nếu đã đăng nhập.

7. Nếu chưa đồng bộ được, session được giữ ở pending queue.

8. Người dùng xem lại kết quả tại History và tiến trình tại Dashboard.

Điểm nổi bật của dự án

• Kết hợp quản lý thời gian với gamification để tăng động lực.

• Có cơ chế pending sync để không mất dữ liệu khi chưa đăng nhập hoặc mất kết nối.

• Có Study Zone linh hoạt theo origin, URL chính xác hoặc title keyword.

• Có widget nổi và popout để người dùng theo dõi phiên khi đang làm việc.

• Kiến trúc tách riêng frontend, backend và browser extension, phù hợp để mở rộng sau này.

• Backend đã có các nhóm API cần thiết cho cloud sync, gamification và leaderboard.