# Kế Hoạch Triển Khai Chi Tiết (Implementation Plan) - CamRecipe Pro Mobile

Dựa trên tài liệu **PROJECT_OVERVIEW.md**, kế hoạch triển khai chi tiết cho dự án **CamRecipe Pro** trên nền tảng di động iOS & Android sử dụng **React Native (Expo)** được thiết lập cụ thể dưới đây.

---

## 1. Thiết Lập Môi Trường & Cấu Hình Nền Móng (Mốc 1: Tuần 1)
Mục tiêu là thiết lập khung ứng dụng (UI Shell), cài đặt và cấp quyền cho các module phần cứng cơ bản.

### 1.1 Khởi Tạo Dự Án Expo
* **Lệnh thực hiện:** Khởi tạo dự án Expo mới với template TypeScript:
  ```bash
  npx create-expo-app@latest CamRecipePro --template blank-typescript
  ```
* **Cài đặt thư viện giao diện:**
  * `NativeWind` (v4 trở lên hỗ trợ Expo tốt nhất) và `tailwindcss`.
  * `lucide-react-native` để hiển thị bộ icons SVG từ bản web.
  * `expo-font` để nạp phông chữ Retro `Courier Prime.ttf`.

### 1.2 Cài Đặt Thư Viện Phần Cứng & Quyền Truy Cập (Permissions)
Cài đặt các gói Expo SDK để làm việc với phần cứng:
```bash
npx expo install expo-camera expo-location expo-media-library expo-haptics expo-image-picker @react-native-async-storage/async-storage
```
Cấu hình các quyền trong tệp `app.json` (hoặc `app.config.js`):
* **Camera:** `plugins: [["expo-camera", { "cameraPermission": "Cho phép ứng dụng sử dụng Camera để chụp ảnh với bộ lọc màu." }]]`
* **Vị trí (GPS):** `plugins: [["expo-location", { "locationAlwaysPermission": "Cho phép ứng dụng lấy tọa độ để chèn watermark GPS lên hình ảnh." }]]`
* **Thư viện ảnh:** `plugins: [["expo-media-library", { "photosPermission": "Cho phép ứng dụng lưu ảnh và truy xuất ảnh để áp bộ lọc." }]]`

### 1.3 Thiết Kế UI Shell & Navigation
* Khung bao quanh: Dùng `<SafeAreaView>` kết hợp cấu hình `StatusBar` ẩn/hiện hoặc tối để giả lập Notch/Dynamic Island.
* Bố cục chính: Cấu trúc dọc (Vertical Layout) theo khung tỉ lệ 9:19.5 (như wireframe).
* Header: Chuyển đổi giữa chế độ `Camera` và `Library` sử dụng `<TouchableOpacity>`.

---

## 2. Phát Triển Engine Xử Lý Hình Ảnh GPU Thời Gian Thực (Mốc 2: Tuần 2)
Mục tiêu là tích hợp luồng camera native với canvas vẽ của Skia để áp dụng các bộ lọc thời gian thực.

### 2.1 Cài Đặt Thư Viện Đồ Họa & Camera Nâng Cao
```bash
npx expo install @shopify/react-native-skia react-native-vision-camera
```
*Lưu ý: Đối với `react-native-vision-camera`, cần cấu hình Babel plugin và cài đặt Expo Config Plugin tương thích.*

### 2.2 Xây Dựng Viewfinder Pipeline
* **Tích hợp Camera Frame làm Texture:** Kết nối `react-native-vision-camera` với `React Native Skia` thông qua cơ chế ghi nhận frame (Frame Processor) hoặc sử dụng các bindings sẵn có để truyền luồng video trực tiếp làm Texture cho `<Canvas>`.
* **Bộ lọc màu (Color Matrix Filter):**
  * Định nghĩa cấu trúc ma trận màu $4 \times 5$ (hoặc $5 \times 5$ của Skia) cho các bộ lọc kinh điển (Classic Negative, Provia, Velvia).
  * Quy đổi nhiệt độ màu Kelvin ($2500K - 10000K$) sang các hệ số RGB và đưa vào ma trận màu để tinh chỉnh White Balance mà không làm lệch Tint.
  * Sử dụng component `<ColorMatrix>` của Skia để xử lý hiệu năng cao trên GPU.
* **Đường Cong Ánh Sáng (Highlight & Shadow Contrast):**
  * Sử dụng `<ComponentTransfer>` của Skia để cấu hình mảng bảng màu `tableValues` riêng biệt cho Highlight và Shadow.
* **Tạo Hạt Film Monochrome (Monochrome Grain):**
  * Sử dụng `<Turbulence>` tạo cấu hình nhiễu hạt ngẫu nhiên dựa trên các tham số tần số (`baseFrequency`) và hạt giống (`seed`).
  * Áp dụng `<ColorMatrix>` xám hóa (Grayscale) lên lớp nhiễu này và trộn vào luồng camera gốc.
* **Khử Nhiễu (Denoise) & Độ Rõ Nét (Clarity):**
  * *Denoise:* Áp dụng `Skia.ImageFilter.MakeBlur` với tham số `sigma` siêu nhỏ từ $0.3$ đến $0.5$ để mịn da/ảnh nhẹ nhàng.
  * *Clarity:* Áp dụng `Skia.ImageFilter.MakeMatrixConvolution` cho độ rõ nét dương (tăng độ tương phản cạnh sắc) hoặc kết hợp hiệu ứng Blur + BlendMode Screen cho độ rõ nét âm (tạo sương mù mượt mà).

---

## 3. Phát Triển Quản Lý Recipes & Bộ Nhớ Tạm (Mốc 3: Tuần 3)
Mục tiêu là quản lý các công thức màu sắc cá nhân hóa và hiển thị danh sách trực quan.

### 3.1 Cài Đặt AsyncStorage & Định Dạng JSON
Mỗi Recipe sẽ có cấu trúc JSON như sau:
```json
{
  "id": "uuid-v4-string",
  "name": "Tên Công Thức (Hỗ trợ Tiếng Việt & Emoji)",
  "matrix": [...],
  "wbKelvin": 5500,
  "contrastHighlight": 1.0,
  "contrastShadow": 1.0,
  "denoiseSigma": 0.4,
  "clarity": 0,
  "grainFrequency": 0.05,
  "framePath": "optional-frame-id"
}
```

### 3.2 Giao Diện Danh Sách Recipes 2 Cột
* Sử dụng `<FlatList numColumns={2}>` để tối ưu hóa hiệu năng render danh sách.
* Cột bên trái hiển thị hình ảnh mẫu nhỏ (thumbnail) đã được nạp động hoặc áp sẵn bộ lọc tương ứng để người dùng xem trước.
* Chạm vào thẻ công thức để kích hoạt ngay (`applyRecipe()`) mà không cần nút áp dụng phụ, tích hợp rung phản hồi xúc giác nhẹ (`expo-haptics`).
* Cửa sổ Modal lưu công thức (`#save-recipe-modal`) hiển thị dưới dạng Bottom Sheet để người dùng đặt tên và lưu lại vào AsyncStorage.

---

## 4. Chụp Ảnh Độ Phân Giải Cao & Xuất File (Mốc 4: Tuần 4)
Mục tiêu là lưu giữ khoảnh khắc ở chất lượng cao nhất, kết xuất đầy đủ hiệu ứng nghệ thuật và siêu dữ liệu.

### 4.1 Quy Trình Xử Lý Khi Nhấn Shutter
1. **Chụp Ảnh Gốc:** Gọi hàm chụp ảnh tĩnh độ phân giải cao từ `Vision Camera` hoặc `Expo Camera`.
2. **Canvas Ẩn (Offscreen Canvas):** Khởi tạo một đối tượng Skia Canvas ẩn có độ phân giải bằng đúng độ phân giải ảnh gốc.
3. **Áp Bộ Lọc Chất Lượng Cao:** Thực thi lại toàn bộ chuỗi bộ lọc đồ họa (WB, Exposure, Curves, Grain, Denoise, Clarity) trên canvas ẩn để giữ nguyên chất lượng chi tiết.
4. **Vẽ Khung & Watermark GPS:**
   * Tải font chữ TrueType `Courier Prime.ttf` thông qua `Skia.Typeface.MakeFromFile` hoặc `useFont` từ Expo.
   * Lấy tọa độ hiện tại từ `expo-location` (hoặc phân tích EXIF gốc của ảnh nếu ở chế độ Library) để render chuỗi text (📍 Địa điểm, Tọa độ, Thông số ISO/Shutter Speed).
   * Vẽ đè hình ảnh PNG Frame trang trí (nếu chọn) lên trên cùng.
5. **Đóng Gói & Xuất Bản:**
   * Xuất canvas thành mảng byte JPEG: `image.encodeToBytes(ImageFormat.JPEG, 95)`.
   * Sử dụng `expo-media-library` để tạo tệp tin ảnh mới trong thư viện thiết bị.

---

## 5. Kế Hoạch Kiểm Thử & Kiểm Soát Chất Lượng (Testing & QA)
* **Kiểm thử Giả lập (Emulators):**
  * Giả lập GPS thông qua các công cụ của Xcode Simulator (Location menu) hoặc Android Emulator (Extended Controls).
  * Sử dụng luồng dữ liệu camera ảo (Virtual Camera) để kiểm thử bộ lọc Skia Shader mà không cần thiết bị thật.
* **Kiểm thử Thiết bị Thật:**
  * Thử nghiệm nhanh bằng ứng dụng Expo Go qua mã QR.
  * Tạo bản build phát triển (`eas build --profile development`) để test hiệu năng bộ nhớ, độ mượt Haptic Feedback, tốc độ render ảnh độ phân giải cao và tính ổn định của luồng xử lý GPU.
  * Phân phối thử nghiệm qua TestFlight (iOS) và Google Play Console Internal (Android).