# 實現「新增交易」對話框 ## 概述 您的銀行應用程式現在已具備穩健的狀態管理和資料持久性，但缺少了一個真正銀行應用程式所需的重要功能：讓使用者能夠新增自己的交易。在這項作業中，您將實現一個完整的「新增交易」對話框，並與現有的狀態管理系統無縫整合。 這項作業結合了您在四個銀行課程中學到的所有內容：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) 進行翻譯。儘管我們努力確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。