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