# 購物 APP 開發計畫與任務卡 初 - Ge

本文檔基於 `shopping_app_spec.md` 進行分析，旨在切分開發優先序，並將功能拆解為可執行的前後端開發任務卡。

---

## 1. 功能開發優先序 (Feature Priority)

為了讓產品能以最快速度上線並驗證核心市場，我們將功能分為三個優先級：

### P0：核心 MVP (Minimum Viable Product)
此階段專注於完成**訪客購物**的核心流程，讓使用者可以順利完成一筆訂單。

- **商品瀏覽**：首頁、商品分類/列表頁、商品詳細頁。
- **購物車**：將商品加入購物車、在購物車中管理商品。
- **結帳流程**：以訪客身份填寫運送資訊、付款資訊、完成訂單。
- **訂單成立**：成功下單後的確認頁面。
- **基本後台**：支援商品、訂單、庫存管理的最低限度功能。

### P1：核心會員功能
此階段專注於建立會員機制，提升使用者忠誠度與黏著度。

- **會員系統**：註冊、登入、忘記密碼。
- **會員購物流程**：使用已存資料快速結帳。
- **訂單管理**：會員可查詢歷史訂單與訂單狀態。
- **願望清單**：會員可收藏喜愛的商品。
- **商品搜尋**：提供基本的關鍵字搜尋功能。

### P2：輔助與優化功能
此階段專注於完善使用者體驗與提供更多支援性功能。

- **會員資料管理**：使用者可修改個人資料、密碼、管理地址簿。
- **進階搜尋與篩選**：提供更精準的商品篩選與排序。
- **第三方登入**：整合 Google, Facebook 等快速登入。
- **靜態頁面**：關於我們、常見問題、聯絡我們。
- **優化項目**：個人化推薦、UI/UX 細節打磨。

---

## 2. 開發任務卡 (Development Tickets)

### P0: 核心 MVP

---

#### **功能：商品瀏覽 (Product Browsing)**

**【Frontend-P0-1】建立首頁**
- **SPEC 內容**: 2.1. 首頁 (Home)
- **User Story**: 作為一個使用者，我希望能看到一個吸引人的首頁，上面有最新的活動和熱門商品，以便我能快速了解店家的主打內容。
- **驗收標準 (AC)**:
1. 頁面需包含 Logo、搜尋欄（此階段可為假 UI）、活動 Banner、商品分類入口、熱門商品列表。
2. Banner 需可輪播。
3. 熱門商品列表中的商品需可點擊，並導向對應的商品詳細頁。
4. 底部需有導覽列 (首頁、分類、購物車、會員)。

**【Backend-P0-1】商品資料 API**
- **SPEC 內容**: 2.1, 2.2, 2.3
- **User Story**: 作為一個前端開發者，我需要一組 API 來獲取商品資料，以便我能在首頁、列表頁和詳細頁上正確呈現商品資訊。
- **驗收標準 (AC)**:
1. 提供 `GET /products` API，支援分頁，可返回商品列表（包含 ID, 名稱, 價格, 主圖）。
2. 提供 `GET /products/{id}` API，可返回單一商品的詳細資訊（包含圖片集, 規格, 庫存, 描述等）。
3. 提供 `GET /categories` API，返回所有商品分類。
4. API 文件需清楚標示請求參數與回應格式。

**【Frontend-P0-2】建立商品列表頁 (PLP)**
- **SPEC 內容**: 2.2. 商品分類/列表頁 (Product Listing Page)
- **User Story**: 作為一個使用者，當我點擊某個商品分類後，我希望能看到該分類下的所有商品，以便我進行挑選。
- **驗收標準 (AC)**:
1. 頁面需顯示當前分類的標題。
2. 以網格或列表形式展示商品（商品圖、名稱、價格）。
3. 點擊任一商品，能跳轉至對應的商品詳細頁。
4. (P2) 排序與篩選功能在此階段可為假 UI 或不提供。

**【Frontend-P0-3】建立商品詳細頁 (PDP)**
- **SPEC 內容**: 2.3. 商品詳細頁 (Product Detail Page)
- **User Story**: 作為一個使用者，我希望能查看單一商品的完整資訊，包含多張圖片、規格和詳細描述，以便我決定是否購買。
- **驗收標準 (AC)**:
1. 頁面需顯示商品的所有圖片（可滑動）、名稱、價格、描述。
2. 提供規格（如尺寸、顏色）與數量選擇器。
3. 需有「加入購物車」按鈕。
4. 當使用者選擇不同規格時，需能連動顯示對應的價格或庫存狀態（若後端有支援）。

---

#### **功能：購物車與結帳 (Cart & Checkout)**

**【Frontend-P0-4】建立購物車頁**
- **SPEC 內容**: 2.5. 購物車頁 (Shopping Cart)
- **User Story**: 作為一個使用者，我希望能有一個購物車頁面，讓我檢視所有已選擇的商品、修改數量或刪除，並準備進行結帳。
- **驗收標準 (AC)**:
1. 頁面需列出所有加入購物車的商品（圖、名稱、規格、單價、數量）。
2. 使用者可以修改商品數量或將商品從購物車中移除。
3. 頁面需顯示訂單金額摘要（商品總額、運費、總額）。
4. 需有一個「前往結帳」按鈕，點擊後進入結帳流程。
5. 當購物車為空時，需顯示提示訊息。

**【Backend-P0-2】購物車功能 API**
- **SPEC 內容**: 2.5. 購物車頁 (Shopping Cart)
- **User Story**: 作為一個前端開發者，我需要購物車相關的 API，讓使用者能新增、修改、刪除購物車中的商品。
- **驗收標準 (AC)**:
1. 提供 `POST /cart/items` API，將指定商品及規格加入購物車。
2. 提供 `GET /cart` API，獲取當前購物車的內容與金額摘要。
3. 提供 `PUT /cart/items/{itemId}` API，更新購物車中某項商品的數量。
4. 提供 `DELETE /cart/items/{itemId}` API，從購物車中移除某項商品。
5. 需處理庫存不足時的錯誤回報。

**【Frontend-P0-5】建立結帳流程 (訪客模式)**
- **SPEC 內容**: 3.1, 3.2, 3.3
- **User Story**: 作為一個訪客，我希望能順利地填寫收件資訊和付款方式，並在最終確認後，完成我的訂單。
- **驗收標準 (AC)**:
1. **步驟一 (運送)**: 提供表單讓使用者填寫收件人姓名、電話、地址，並選擇運送方式。
2. **步驟二 (付款)**: 提供表單讓使用者選擇付款方式（此階段可先只支援「貨到付款」或假信用卡表單）。
3. **步驟三 (確認)**: 顯示所有訂單資訊（收件人、商品清單、金額），供使用者做最後確認。
4. 需有一個「完成訂單」按鈕。

**【Backend-P0-3】訂單建立 API**
- **SPEC 內容**: 3.1, 3.2, 3.3, 3.4
- **User Story**: 作為一個前端開發者，我需要一個能建立訂單的 API，將使用者在結帳流程中填寫的所有資訊送出以成立訂單。
- **驗收標準 (AC)**:
1. 提供 `POST /orders` API，接收購物車內容、運送資訊、付款資訊以建立訂單。
2. API 需驗證商品庫存，若庫存不足則返回錯誤。
3. 訂單成功建立後，需扣除對應商品庫存。
4. API 需返回訂單成功的資訊，包含訂單編號。
5. 支援訪客結帳，無需強制登入。

**【Frontend-P0-6】建立完成訂單頁**
- **SPEC 內容**: 3.4. 完成訂單頁 (Order Confirmation)
- **User Story**: 作為一個使用者，當我完成訂單後，我希望能看到一個確認頁面，告訴我訂單已成功建立並提供訂單編號，讓我有安心感。
- **驗收標準 (AC)**:
1. 頁面需顯示感謝訊息與訂單成功的圖示。
2. 清楚顯示「訂單編號」。
3. 提供「繼續購物」或「返回首頁」的按鈕。

---

### P1: 核心會員功能

---

#### **功能：會員系統 (User Account System)**

**【Frontend-P1-1】建立會員註冊/登入頁**
- **SPEC 內容**: 4.1. 會員註冊/登入頁 (Login/Register)
- **User Story**: 作為一個新使用者，我希望能註冊一個帳號；作為一個已註冊的使用者，我希望能登入我的帳號，以便管理我的訂單和個人資料。
- **驗收標準 (AC)**:
1. 提供「登入」與「註冊」的切換頁籤。
2. 註冊頁需包含 Email、密碼、確認密碼欄位及同意服務條款的勾選框。
3. 登入頁需包含 Email、密碼欄位及「忘記密碼」連結。
4. 成功登入或註冊後，需將使用者導向首頁或會員中心，並保持登入狀態。

**【Backend-P1-1】會員系統 API (註冊/登入)**
- **SPEC 內容**: 4.1. 會員註冊/登入頁 (Login/Register)
- **User Story**: 作為一個前端開發者，我需要註冊和登入的 API，來驗證使用者身份並管理 session/token。
- **驗收標準 (AC)**:
1. 提供 `POST /auth/register` API，用於建立新使用者帳號，需驗證 Email 是否重複。
2. 提供 `POST /auth/login` API，用於使用者登入，成功後返回 JWT (JSON Web Token) 或其他身份驗證權杖。
3. 提供受保護的端點 (e.g., `GET /users/me`) 來驗證 token 的有效性。
4. 密碼需經雜湊 (hashing) 處理後才存入資料庫。

**【Frontend-P1-2】實作忘記密碼流程**
- **SPEC 內容**: 1.5. 忘記密碼流程 (Password Reset Flow)
- **User Story**: 作為一個使用者，當我忘記密碼時，我希望能透過一個簡單的流程來重設我的密碼，以便我能重新登入帳號。
- **驗收標準 (AC)**:
1. 提供頁面讓使用者輸入註冊的 Email。
2. 點擊送出後，提示使用者去信箱收信。
3. 提供一個重設密碼頁面，讓使用者輸入驗證碼（或透過連結驗證）及新密碼。
4. 成功後，導向登入頁並提示使用者用新密碼登入。

**【Backend-P1-2】忘記密碼 API**
- **SPEC 內容**: 1.5. 忘記密碼流程 (Password Reset Flow)
- **User Story**: 作為一個前端開發者，我需要忘記密碼相關的 API，來發送密碼重設郵件並驗證重設請求。
- **驗收標準 (AC)**:
1. 提供 `POST /auth/forgot-password` API，接收使用者 Email，生成一個有時效性的重設 token，並發送郵件給使用者。
2. 提供 `POST /auth/reset-password` API，接收重設 token 和新密碼，驗證 token 有效性後更新使用者密碼。

---

#### **功能：會員訂單與願望清單**

**【Frontend-P1-3】建立訂單歷史紀錄頁**
- **SPEC 內容**: 4.3. 訂單歷史紀錄 (Order History)
- **User Story**: 作為一個已登入的會員，我希望能查看我所有的歷史訂單，了解他們的狀態（如是否已出貨），並能點進去看訂單詳情。
- **驗收標準 (AC)**:
1. 頁面需列出所有歷史訂單的摘要（訂單編號、日期、總金額、狀態）。
2. 提供依訂單狀態篩選的頁籤 (e.g., 全部, 待出貨, 已完成)。
3. 點擊任一訂單，能跳轉至訂單詳細頁，查看該訂單的完整資訊。

**【Backend-P1-3】會員訂單查詢 API**
- **SPEC 內容**: 4.3. 訂單歷史紀錄 (Order History)
- **User Story**: 作為一個前端開發者，我需要能查詢會員歷史訂單的 API，以便在頁面上展示給使用者。
- **驗收標準 (AC)**:
1. 提供 `GET /orders` API (需 token 驗證)，返回當前登入使用者的所有訂單列表。
2. API 需支援依訂單狀態進行篩選。
3. 提供 `GET /orders/{orderId}` API (需 token 驗證)，返回特定訂單的詳細資訊，並驗證該訂單是否屬於當前使用者。

**【Frontend-P1-4】建立願望清單頁**
- **SPEC 內容**: 2.3, 4.4
- **User Story**: 作為一個已登入的會員，我希望能將感興趣的商品加入「願望清單」，方便我未來尋找或直接購買。
- **驗收標準 (AC)**:
1. 在商品詳細頁 (PDP) 上，需有「加入願望清單」的按鈕。
2. 需有一個「願望清單」頁面，以列表形式展示所有已收藏的商品。
3. 在願望清單頁面，使用者可以將商品「加入購物車」或「從清單中移除」。
4. 若未登入時點擊「加入願望清單」，需提示使用者登入。

**【Backend-P1-4】願望清單 API**
- **SPEC 內容**: 4.4. 願望清單 (Wishlist)
- **User Story**: 作為一個前端開發者，我需要願望清單的 API，讓會員可以新增、移除及查看他們收藏的商品。
- **驗收標準 (AC)**:
1. 提供 `GET /wishlist` API (需 token 驗證)，返回當前使用者的願望清單列表。
2. 提供 `POST /wishlist` API (需 token 驗證)，將指定商品加入使用者的願望清單。
3. 提供 `DELETE /wishlist/{productId}` API (需 token 驗證)，將指定商品從願望清單中移除。

---

### P2: 輔助與優化功能

---

#### **功能：會員資料管理與搜尋**

**【Frontend-P2-1】建立會員資料管理頁**
- **SPEC 內容**: 4.2. 會員資料管理 (Profile Management)
- **User Story**: 作為一個會員，我希望能修改我的暱稱、密碼，並管理我常用的收貨地址，讓購物流程更方便。
- **驗收標準 (AC)**:
1. 提供一個頁面讓使用者修改個人基本資料（如暱稱）。
2. 提供一個區塊讓使用者修改密碼（需輸入舊密碼與新密碼）。
3. 提供一個地址管理功能，可以新增、編輯、刪除多筆收貨地址。
4. 提供「登出」按鈕。

**【Backend-P2-1】會員資料管理 API**
- **SPEC 內容**: 4.2. 會員資料管理 (Profile Management)
- **User Story**: 作為一個前端開發者，我需要對應的 API 來讓使用者更新他們的個人資料、密碼和收貨地址。
- **驗收標準 (AC)**:
1. 提供 `PUT /users/me/profile` API，用於更新使用者基本資料。
2. 提供 `PUT /users/me/password` API，用於修改密碼（需驗證舊密碼）。
3. 提供 `GET`, `POST`, `PUT`, `DELETE` `/users/me/addresses` 相關的 CRUD API 來管理收貨地址。

**【Frontend-P2-2】實作商品搜尋功能**
- **SPEC 內容**: 2.4. 搜尋結果頁 (Search Results Page)
- **User Story**: 作為一個使用者，我希望能透過輸入關鍵字來搜尋商品，以便我能快速找到我想買的東西。
- **驗收標準 (AC)**:
1. 在首頁或其他頁面的頂部提供一個搜尋輸入框。
2. 輸入關鍵字並送出後，導向搜尋結果頁。
3. 搜尋結果頁需顯示與關鍵字相符的商品列表。
4. 若找不到任何商品，需顯示友善的提示訊息。

**【Backend-P2-2】商品搜尋 API**
- **SPEC 內容**: 2.4. 搜尋結果頁 (Search Results Page)
- **User Story**: 作為一個前端開發者，我需要一個搜尋 API，根據使用者輸入的關鍵字返回相關的商品列表。
- **驗收標準 (AC)**:
1. 修改 `GET /products` API 或提供一個新的 `GET /search` API。
2. API 需能接收一個 `query` 參數，並根據此參數對商品名稱、描述等欄位進行模糊比對。
3. 返回的結果格式應與商品列表頁的 API 一致。