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:
```
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:

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." }]]

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

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:

{
  "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

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.
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.
Á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.
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.
Đó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).

8.0 KiB Raw Blame History