|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "50a7783473b39a2e0f133e271a102231",
|
|
|
"translation_date": "2025-10-22T22:47:38+00:00",
|
|
|
"source_file": "7-bank-project/4-state-management/assignment.md",
|
|
|
"language_code": "mo"
|
|
|
}
|
|
|
-->
|
|
|
# 實現「新增交易」對話框
|
|
|
|
|
|
## 概述
|
|
|
|
|
|
您的銀行應用程式現在已具備穩健的狀態管理和資料持久性，但缺少了一個真正銀行應用程式所需的重要功能：讓使用者能夠新增自己的交易。在這項作業中，您將實現一個完整的「新增交易」對話框，並與現有的狀態管理系統無縫整合。
|
|
|
|
|
|
這項作業結合了您在四個銀行課程中學到的所有內容：HTML模板、表單處理、API整合以及狀態管理。
|
|
|
|
|
|
## 學習目標
|
|
|
|
|
|
完成這項作業後，您將能：
|
|
|
- **建立**一個方便使用者輸入資料的對話框介面
|
|
|
- **實現**具有鍵盤和螢幕閱讀器支援的無障礙表單設計
|
|
|
- **整合**新功能至現有的狀態管理系統
|
|
|
- **練習**API通信和錯誤處理
|
|
|
- **應用**現代網頁開發模式於真實世界的功能
|
|
|
|
|
|
## 指導步驟
|
|
|
|
|
|
### 步驟 1：新增交易按鈕
|
|
|
|
|
|
**建立**一個「新增交易」按鈕，放置於您的儀表板頁面，讓使用者能輕鬆找到並使用。
|
|
|
|
|
|
**需求：**
|
|
|
- **放置**按鈕於儀表板的合理位置
|
|
|
- **使用**清晰且具行動導向的按鈕文字
|
|
|
- **設計**按鈕樣式以符合現有的UI設計
|
|
|
- **確保**按鈕可透過鍵盤操作
|
|
|
|
|
|
### 步驟 2：對話框實現
|
|
|
|
|
|
選擇以下兩種方法之一來實現您的對話框：
|
|
|
|
|
|
**選項A：獨立頁面**
|
|
|
- **建立**一個新的HTML模板，用於交易表單
|
|
|
- **新增**一個新的路由至您的路由系統
|
|
|
- **實現**從儀表板頁面到表單頁面的導航功能
|
|
|
|
|
|
**選項B：模態對話框（推薦）**
|
|
|
- **使用**JavaScript在不離開儀表板的情況下顯示/隱藏對話框
|
|
|
- **使用**[`hidden`屬性](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden)或CSS類別來實現
|
|
|
- **創建**流暢的使用者體驗，確保焦點管理得當
|
|
|
|
|
|
### 步驟 3：無障礙設計實現
|
|
|
|
|
|
**確保**您的對話框符合[模態對話框的無障礙標準](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)：
|
|
|
|
|
|
**鍵盤導航：**
|
|
|
- **支援**使用Escape鍵關閉對話框
|
|
|
- **限制**焦點在對話框內，當對話框開啟時
|
|
|
- **返回**焦點至觸發按鈕，當對話框關閉時
|
|
|
|
|
|
**螢幕閱讀器支援：**
|
|
|
- **新增**適當的ARIA標籤和角色
|
|
|
- **通知**螢幕閱讀器對話框的開啟/關閉
|
|
|
- **提供**清晰的表單欄位標籤和錯誤訊息
|
|
|
|
|
|
### 步驟 4：表單建立
|
|
|
|
|
|
**設計**一個HTML表單以收集交易資料：
|
|
|
|
|
|
**必填欄位：**
|
|
|
- **日期**：交易發生的日期
|
|
|
- **描述**：交易的用途
|
|
|
- **金額**：交易金額（收入為正數，支出為負數）
|
|
|
|
|
|
**表單功能：**
|
|
|
- **驗證**使用者輸入的資料，確保正確性
|
|
|
- **提供**清晰的錯誤訊息，針對無效資料
|
|
|
- **包含**有用的佔位文字和標籤
|
|
|
- **樣式**與現有設計保持一致
|
|
|
|
|
|
### 步驟 5：API整合
|
|
|
|
|
|
**連接**您的表單至後端API：
|
|
|
|
|
|
**實現步驟：**
|
|
|
- **檢閱**[伺服器API規範](../api/README.md)，了解正確的端點和資料格式
|
|
|
- **從表單輸入生成**JSON資料
|
|
|
- **使用適當的錯誤處理**將資料發送至API
|
|
|
- **向使用者顯示**成功/失敗訊息
|
|
|
- **妥善處理**網路錯誤
|
|
|
|
|
|
### 步驟 6：狀態管理整合
|
|
|
|
|
|
**更新**您的儀表板以顯示新增的交易：
|
|
|
|
|
|
**整合需求：**
|
|
|
- **刷新**帳戶資料，當交易成功新增後
|
|
|
- **更新**儀表板顯示，無需重新載入頁面
|
|
|
- **確保**新增的交易立即顯示
|
|
|
- **保持**整個過程中的狀態一致性
|
|
|
|
|
|
## 技術規範
|
|
|
|
|
|
**API端點詳情：**
|
|
|
請參考[伺服器API文件](../api/README.md)以了解：
|
|
|
- 交易資料所需的JSON格式
|
|
|
- HTTP方法和端點URL
|
|
|
- 預期的回應格式
|
|
|
- 錯誤回應處理
|
|
|
|
|
|
**預期結果：**
|
|
|
完成這項作業後，您的銀行應用程式應具備一個功能完善的「新增交易」功能，並且外觀和行為都達到專業水準：
|
|
|
|
|
|
|
|
|
|
|
|
## 測試您的實現
|
|
|
|
|
|
**功能測試：**
|
|
|
1. **確認**「新增交易」按鈕清晰可見且易於操作
|
|
|
2. **測試**對話框能正常開啟和關閉
|
|
|
3. **確認**表單驗證適用於所有必填欄位
|
|
|
4. **檢查**成功新增的交易能立即顯示在儀表板上
|
|
|
5. **確保**錯誤處理適用於無效資料和網路問題
|
|
|
|
|
|
**無障礙測試：**
|
|
|
1. **僅使用鍵盤**完成整個流程
|
|
|
2. **使用螢幕閱讀器測試**，確保正確的通知
|
|
|
3. **確認**焦點管理正常運作
|
|
|
4. **檢查**所有表單元素是否有適當的標籤
|
|
|
|
|
|
## 評估標準
|
|
|
|
|
|
| 評估標準 | 優秀 | 合格 | 需改進 |
|
|
|
| -------- | ---- | ---- | ------ |
|
|
|
| **功能性** | 新增交易功能運作流暢，使用者體驗極佳，並遵循所有課程中的最佳實踐 | 新增交易功能運作正常，但可能未遵循部分最佳實踐或存在小的可用性問題 | 新增交易功能部分運作或存在重大可用性問題 |
|
|
|
| **程式碼品質** | 程式碼組織良好，遵循既定模式，包含適當的錯誤處理，並與現有的狀態管理無縫整合 | 程式碼可運作，但可能存在一些組織問題或與現有程式碼基礎不一致的模式 | 程式碼結構存在重大問題或未能與現有模式良好整合 |
|
|
|
| **無障礙性** | 完整的鍵盤導航支援、螢幕閱讀器相容性，並遵循WCAG指南，焦點管理極佳 | 實現了基本的無障礙功能，但可能缺少部分鍵盤導航或螢幕閱讀器功能 | 實現的無障礙考量有限或完全缺失 |
|
|
|
| **使用者體驗** | 直觀、精緻的介面，提供清晰的回饋、流暢的互動，外觀專業 | 使用者體驗良好，但在回饋或視覺設計方面有小幅改進空間 | 使用者體驗差，介面混亂或缺乏使用者回饋 |
|
|
|
|
|
|
## 額外挑戰（選擇性）
|
|
|
|
|
|
完成基本需求後，您可以考慮以下增強功能：
|
|
|
|
|
|
**增強功能：**
|
|
|
- **新增**交易分類（例如：食品、交通、娛樂等）
|
|
|
- **實現**即時回饋的輸入驗證
|
|
|
- **創建**供高級使用者使用的鍵盤快捷鍵
|
|
|
- **新增**交易編輯和刪除功能
|
|
|
|
|
|
**進階整合：**
|
|
|
- **實現**最近新增交易的撤銷功能
|
|
|
- **新增**從CSV檔案批量匯入交易的功能
|
|
|
- **創建**交易搜尋和篩選功能
|
|
|
- **實現**資料匯出功能
|
|
|
|
|
|
這些選擇性功能將幫助您練習更高級的網頁開發概念，並打造更完整的銀行應用程式！
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責聲明**：
|
|
|
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。 |
