geosportlog/IMPLEMENTTATION_PLAN.md

Kế hoạch Thiết lập Cấu trúc và Tập tin Cơ bản Dự án GeoSport Log

Dự án này sẽ chuyển đổi phiên bản Web Prototype của GeoSport Log thành một ứng dụng di động chạy trên iOS và Android sử dụng React Native (Expo SDK), TypeScript, SQLite và NativeWind (Tailwind CSS cho Mobile).

User Review Required

Important

Chúng ta sẽ khởi tạo dự án Expo sử dụng template mặc định (hỗ trợ sẵn TypeScript & Expo Router) ngay tại thư mục hiện tại (/home/locpham/geosportlog). Một số tập tin mặc định của Expo sẽ được thay thế hoặc tổ chức lại theo đúng cấu trúc thư mục quy định tại mục 3 của TECH_DESIGN.md.

Open Questions

Không có câu hỏi mở. Chúng ta sẽ tiến hành cấu hình theo đúng đặc tả kỹ thuật chi tiết của TECH_DESIGN.md.

Proposed Changes

Chúng ta sẽ khởi tạo cấu trúc thư mục chính xác như sau:

• assets/ - Tài nguyên tĩnh.
• src/ - Thư mục gốc chứa mã nguồn.
  • app/ - Các màn hình định tuyến bằng Expo Router (Auth, Tabs, Replay).
  • components/ - Các thành phần giao diện dùng chung (Common, Map, Replay, Analytics).
  • constants/ - Quản lý Colors và Config.
  • database/ - Cơ sở dữ liệu SQLite và Repositories.
  • hooks/ - Các Custom Hooks cho GPS, BLE, Weather, Calendar.
  • services/ - Kết nối BLE và Weather API.
  • store/ - Zustand global state.
  • types/ - Type Safety cho database và workout.
  • utils/ - Các hàm tiện ích thuần logic.

Các tập tin cấu hình cốt lõi và mã nguồn cơ bản sẽ được tạo lập:

Cấu hình Dự án

[MODIFY] app.json

Cập nhật quyền định vị chạy ngầm (iOS & Android), Camera, Photo Library, Micro và các plugin cần thiết theo mục 2 của TECH_DESIGN.md.

[MODIFY] tsconfig.json

Cấu hình alias @/* ánh xạ tới thư mục /src/* theo mục 4 của TECH_DESIGN.md.

[NEW] tailwind.config.js

Cấu hình NativeWind để hỗ trợ styling bằng Tailwind CSS trên mobile.

Phân lớp Dữ liệu và Quản lý Trạng thái (Persistence & State)

[NEW] sqlite.ts

Khởi tạo kết nối SQLite cục bộ, định nghĩa lược đồ (schema) cho bảng workouts, trackpoints, và media_attachments theo thiết kế tại mục 5.

[NEW] useWorkoutStore.ts

Zustand store để quản lý trạng thái tập luyện thời gian thực, tính toán cự ly/năng lượng và lưu trữ dữ liệu vào SQLite theo thiết kế tại mục 6.

Phân lớp Màn hình (Expo Router Screens)

[NEW] index.tsx

Màn hình HUD ghi nhận hành trình chạy bộ/đạp xe kết hợp bản đồ GPS thời gian thực và theo dõi chỉ số sức khỏe (BPM, Kcal).

[NEW] analytics.tsx

Dashboard thống kê tổng quan và vẽ biểu đồ xu hướng bằng react-native-chart-kit.

[NEW] history.tsx

Nhật ký lịch tập sử dụng react-native-calendars để đánh dấu các ngày tập và liệt kê danh sách hoạt động.

[NEW] _layout.tsx

Cấu hình giao diện và định tuyến cho Bottom Tab Bar.

[NEW] id.tsx

Màn hình trình phát Cinematic POV chạy dọc theo lộ trình GPS, dừng lại để phát video/ảnh gắn mốc địa lý kèm HUD lớp phủ đẹp mắt.

[NEW] _layout.tsx

Root Layout khởi tạo cấu hình chung, DB Connection, và các nhà cung cấp trạng thái.

Phân lớp Tiện ích, Kiểu dữ liệu và Các dịch vụ khác (Skeletons)

Để hoàn thiện bộ khung dự án và tránh lỗi import, chúng ta sẽ tạo các tập tin skeleton sau:

• workout.types.ts: Định nghĩa kiểu dữ liệu Trackpoint, MediaAttachment, Workout.
• calculations.ts: Công thức Haversine tính khoảng cách và công thức MET tính Kcal.
• weatherService.ts: Mock/Call Open-Meteo API lấy thông tin thời tiết.
• Colors.ts & Config.ts: Mã màu tối tối giản & cấu hình MET.
• Các tập tin Repository, Service, Hook, Utility trống khác dưới dạng skeleton để nhà phát triển điền tiếp nội dung sau.

---

Verification Plan

Automated Tests

• Chạy tsc --noEmit để đảm bảo dự án biên dịch thành công mà không có lỗi kiểu dữ liệu TypeScript.

Manual Verification

• Xác minh sự tồn tại của đầy đủ các thư mục và tập tin cơ bản theo đúng thiết kế hệ thống.