first commit
This commit is contained in:
@@ -0,0 +1,115 @@
|
||||
# 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).
|
||||
Reference in New Issue
Block a user