<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "50a7783473b39a2e0f133e271a102231",
  "translation_date": "2025-10-23T21:08:17+00:00",
  "source_file": "7-bank-project/4-state-management/assignment.md",
  "language_code": "th"
}
-->
# การสร้างหน้าต่าง "เพิ่มธุรกรรม"

## ภาพรวม

แอปธนาคารของคุณมีระบบการจัดการสถานะและการเก็บข้อมูลที่แข็งแกร่งแล้ว แต่ยังขาดฟีเจอร์สำคัญที่แอปธนาคารจริงต้องมี นั่นคือความสามารถให้ผู้ใช้เพิ่มธุรกรรมของตัวเอง ในงานนี้ คุณจะได้สร้างหน้าต่าง "เพิ่มธุรกรรม" ที่สมบูรณ์แบบและผสานเข้ากับระบบการจัดการสถานะที่มีอยู่ได้อย่างไร้รอยต่อ

งานนี้จะรวบรวมทุกสิ่งที่คุณได้เรียนรู้จากบทเรียนธนาคารทั้งสี่: การสร้าง HTML, การจัดการฟอร์ม, การเชื่อมต่อ API และการจัดการสถานะ

## วัตถุประสงค์การเรียนรู้

เมื่อคุณทำงานนี้เสร็จ คุณจะสามารถ:
- **สร้าง** หน้าต่างที่ใช้งานง่ายสำหรับการป้อนข้อมูล
- **ออกแบบ** ฟอร์มที่เข้าถึงได้ พร้อมรองรับการใช้งานคีย์บอร์ดและเครื่องอ่านหน้าจอ
- **ผสาน** ฟีเจอร์ใหม่เข้ากับระบบการจัดการสถานะที่มีอยู่
- **ฝึกฝน** การสื่อสารกับ API และการจัดการข้อผิดพลาด
- **ประยุกต์ใช้** รูปแบบการพัฒนาเว็บสมัยใหม่กับฟีเจอร์ในโลกจริง

## คำแนะนำ

### ขั้นตอนที่ 1: ปุ่มเพิ่มธุรกรรม

**สร้าง**ปุ่ม "เพิ่มธุรกรรม" บนหน้าแดชบอร์ดที่ผู้ใช้สามารถค้นหาและเข้าถึงได้ง่าย

**ข้อกำหนด:**
- **วาง**ปุ่มในตำแหน่งที่เหมาะสมบนแดชบอร์ด
- **ใช้**ข้อความปุ่มที่ชัดเจนและเน้นการกระทำ
- **ออกแบบ**ปุ่มให้เข้ากับดีไซน์ UI ที่มีอยู่
- **ตรวจสอบ**ให้ปุ่มสามารถใช้งานผ่านคีย์บอร์ดได้

### ขั้นตอนที่ 2: การสร้างหน้าต่าง

เลือกหนึ่งในสองวิธีสำหรับการสร้างหน้าต่าง:

**ตัวเลือก A: หน้าแยก**
- **สร้าง**เทมเพลต HTML ใหม่สำหรับฟอร์มธุรกรรม
- **เพิ่ม**เส้นทางใหม่ในระบบการนำทางของคุณ
- **ออกแบบ**การนำทางไปและกลับจากหน้าฟอร์ม

**ตัวเลือก B: หน้าต่างแบบโมดอล (แนะนำ)**
- **ใช้** JavaScript เพื่อแสดง/ซ่อนหน้าต่างโดยไม่ต้องออกจากแดชบอร์ด
- **ออกแบบ**โดยใช้ [`hidden` property](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 labels และ roles ที่เหมาะสม
- **ประกาศ**การเปิด/ปิดหน้าต่างให้เครื่องอ่านหน้าจอทราบ
- **ให้**ข้อความป้ายฟอร์มและข้อความข้อผิดพลาดที่ชัดเจน

### ขั้นตอนที่ 4: การสร้างฟอร์ม

**ออกแบบ**ฟอร์ม HTML ที่รวบรวมข้อมูลธุรกรรม:

**ฟิลด์ที่จำเป็น:**
- **วันที่**: วันที่ที่ธุรกรรมเกิดขึ้น
- **คำอธิบาย**: รายละเอียดของธุรกรรม
- **จำนวนเงิน**: มูลค่าธุรกรรม (บวกสำหรับรายรับ ลบสำหรับรายจ่าย)

**คุณสมบัติของฟอร์ม:**
- **ตรวจสอบ**ข้อมูลที่ผู้ใช้ป้อนก่อนส่ง
- **ให้**ข้อความข้อผิดพลาดที่ชัดเจนสำหรับข้อมูลที่ไม่ถูกต้อง
- **เพิ่ม**ข้อความตัวอย่างและป้ายที่ช่วยเหลือ
- **ออกแบบ**ให้สอดคล้องกับดีไซน์ที่มีอยู่

### ขั้นตอนที่ 5: การเชื่อมต่อ API

**เชื่อมต่อ**ฟอร์มของคุณกับ API ด้านหลัง:

**ขั้นตอนการดำเนินการ:**
- **ตรวจสอบ** [รายละเอียด API ของเซิร์ฟเวอร์](../api/README.md) เพื่อดู endpoint และรูปแบบข้อมูลที่ถูกต้อง
- **สร้าง**ข้อมูล JSON จากข้อมูลที่ป้อนในฟอร์ม
- **ส่ง**ข้อมูลไปยัง API พร้อมการจัดการข้อผิดพลาดที่เหมาะสม
- **แสดง**ข้อความสำเร็จ/ล้มเหลวให้ผู้ใช้ทราบ
- **จัดการ**ข้อผิดพลาดเครือข่ายอย่างเหมาะสม

### ขั้นตอนที่ 6: การผสานระบบการจัดการสถานะ

**อัปเดต**แดชบอร์ดของคุณด้วยธุรกรรมใหม่:

**ข้อกำหนดการผสาน:**
- **รีเฟรช**ข้อมูลบัญชีหลังจากเพิ่มธุรกรรมสำเร็จ
- **อัปเดต**การแสดงผลแดชบอร์ดโดยไม่ต้องโหลดหน้าใหม่
- **ตรวจสอบ**ให้ธุรกรรมใหม่ปรากฏทันที
- **รักษา**ความสอดคล้องของสถานะตลอดกระบวนการ

## ข้อกำหนดทางเทคนิค

**รายละเอียด API Endpoint:**
ดู [เอกสาร API ของเซิร์ฟเวอร์](../api/README.md) สำหรับ:
- รูปแบบ JSON ที่จำเป็นสำหรับข้อมูลธุรกรรม
- วิธี HTTP และ URL endpoint
- รูปแบบการตอบกลับที่คาดหวัง
- การจัดการการตอบกลับข้อผิดพลาด

**ผลลัพธ์ที่คาดหวัง:**
หลังจากทำงานนี้เสร็จ แอปธนาคารของคุณควรมีฟีเจอร์ "เพิ่มธุรกรรม" ที่ทำงานได้อย่างสมบูรณ์และดูเป็นมืออาชีพ:

![ภาพหน้าจอแสดงตัวอย่างหน้าต่าง "เพิ่มธุรกรรม"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.th.png)

## การทดสอบการดำเนินการ

**การทดสอบการทำงาน:**
1. **ตรวจสอบ**ให้ปุ่ม "เพิ่มธุรกรรม" มองเห็นได้ชัดเจนและเข้าถึงได้
2. **ทดสอบ**ให้หน้าต่างเปิดและปิดได้อย่างถูกต้อง
3. **ยืนยัน**การตรวจสอบฟอร์มทำงานสำหรับฟิลด์ที่จำเป็นทั้งหมด
4. **ตรวจสอบ**ให้ธุรกรรมที่สำเร็จปรากฏทันทีบนแดชบอร์ด
5. **ตรวจสอบ**การจัดการข้อผิดพลาดสำหรับข้อมูลที่ไม่ถูกต้องและปัญหาเครือข่าย

**การทดสอบการเข้าถึง:**
1. **นำทาง**ผ่านกระบวนการทั้งหมดโดยใช้คีย์บอร์ดเท่านั้น
2. **ทดสอบ**ด้วยเครื่องอ่านหน้าจอเพื่อให้แน่ใจว่ามีการประกาศที่เหมาะสม
3. **ตรวจสอบ**การจัดการโฟกัสทำงานอย่างถูกต้อง
4. **ตรวจสอบ**ให้ฟอร์มทั้งหมดมีป้ายที่เหมาะสม

## เกณฑ์การประเมิน

| เกณฑ์ | ยอดเยี่ยม | เพียงพอ | ต้องปรับปรุง |
| -------- | --------- | -------- | ----------------- |
| **การทำงาน** | ฟีเจอร์เพิ่มธุรกรรมทำงานได้อย่างไร้ที่ติ พร้อมประสบการณ์ผู้ใช้ที่ยอดเยี่ยมและปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดทั้งหมดจากบทเรียน | ฟีเจอร์เพิ่มธุรกรรมทำงานได้ถูกต้อง แต่บางส่วนอาจไม่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดหรือมีปัญหาเล็กน้อยด้านการใช้งาน | ฟีเจอร์เพิ่มธุรกรรมทำงานได้บางส่วนหรือมีปัญหาด้านการใช้งานที่สำคัญ |
| **คุณภาพโค้ด** | โค้ดมีการจัดระเบียบที่ดี ปฏิบัติตามรูปแบบที่กำหนด มีการจัดการข้อผิดพลาดที่เหมาะสม และผสานเข้ากับระบบการจัดการสถานะที่มีอยู่ได้อย่างไร้รอยต่อ | โค้ดทำงานได้ แต่บางส่วนอาจมีปัญหาด้านการจัดระเบียบหรือรูปแบบไม่สอดคล้องกับโค้ดที่มีอยู่ | โค้ดมีปัญหาโครงสร้างที่สำคัญหรือไม่ผสานเข้ากับรูปแบบที่มีอยู่ได้ดี |
| **การเข้าถึง** | รองรับการนำทางด้วยคีย์บอร์ดอย่างสมบูรณ์ การใช้งานเครื่องอ่านหน้าจอ และปฏิบัติตามแนวทาง WCAG พร้อมการจัดการโฟกัสที่ยอดเยี่ยม | มีการใช้งานฟีเจอร์การเข้าถึงพื้นฐาน แต่บางส่วนอาจขาดการนำทางด้วยคีย์บอร์ดหรือฟีเจอร์เครื่องอ่านหน้าจอ | ไม่มีหรือมีการพิจารณาด้านการเข้าถึงอย่างจำกัด |
| **ประสบการณ์ผู้ใช้** | อินเทอร์เฟซที่ใช้งานง่าย มีการตอบกลับที่ชัดเจน การโต้ตอบที่ราบรื่น และรูปลักษณ์ที่เป็นมืออาชีพ | ประสบการณ์ผู้ใช้ดี แต่มีบางส่วนที่ควรปรับปรุงในด้านการตอบกลับหรือการออกแบบภาพ | ประสบการณ์ผู้ใช้ไม่ดี มีอินเทอร์เฟซที่สับสนหรือขาดการตอบกลับผู้ใช้ |

## ความท้าทายเพิ่มเติม (ตัวเลือก)

เมื่อคุณทำข้อกำหนดพื้นฐานเสร็จแล้ว ลองพิจารณาการปรับปรุงเหล่านี้:

**ฟีเจอร์ที่ปรับปรุง:**
- **เพิ่ม**หมวดหมู่ธุรกรรม (อาหาร, การเดินทาง, ความบันเทิง ฯลฯ)
- **ออกแบบ**การตรวจสอบข้อมูลด้วยการตอบกลับแบบเรียลไทม์
- **สร้าง**ทางลัดคีย์บอร์ดสำหรับผู้ใช้ที่มีประสบการณ์
- **เพิ่ม**ความสามารถในการแก้ไขและลบธุรกรรม

**การผสานขั้นสูง:**
- **สร้าง**ฟังก์ชันยกเลิกสำหรับธุรกรรมที่เพิ่มล่าสุด
- **เพิ่ม**การนำเข้าธุรกรรมแบบกลุ่มจากไฟล์ CSV
- **สร้าง**ความสามารถในการค้นหาและกรองธุรกรรม
- **เพิ่ม**ฟังก์ชันการส่งออกข้อมูล

ฟีเจอร์เพิ่มเติมเหล่านี้จะช่วยให้คุณฝึกฝนแนวคิดการพัฒนาเว็บขั้นสูงและสร้างแอปธนาคารที่สมบูรณ์มากขึ้น!

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้