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.
162 lines
18 KiB
162 lines
18 KiB
<!--
|
|
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
|
|
- รูปแบบการตอบกลับที่คาดหวัง
|
|
- การจัดการการตอบกลับข้อผิดพลาด
|
|
|
|
**ผลลัพธ์ที่คาดหวัง:**
|
|
หลังจากทำงานนี้เสร็จ แอปธนาคารของคุณควรมีฟีเจอร์ "เพิ่มธุรกรรม" ที่ทำงานได้อย่างสมบูรณ์และดูเป็นมืออาชีพ:
|
|
|
|
|
|
|
|
## การทดสอบการดำเนินการ
|
|
|
|
**การทดสอบการทำงาน:**
|
|
1. **ตรวจสอบ**ให้ปุ่ม "เพิ่มธุรกรรม" มองเห็นได้ชัดเจนและเข้าถึงได้
|
|
2. **ทดสอบ**ให้หน้าต่างเปิดและปิดได้อย่างถูกต้อง
|
|
3. **ยืนยัน**การตรวจสอบฟอร์มทำงานสำหรับฟิลด์ที่จำเป็นทั้งหมด
|
|
4. **ตรวจสอบ**ให้ธุรกรรมที่สำเร็จปรากฏทันทีบนแดชบอร์ด
|
|
5. **ตรวจสอบ**การจัดการข้อผิดพลาดสำหรับข้อมูลที่ไม่ถูกต้องและปัญหาเครือข่าย
|
|
|
|
**การทดสอบการเข้าถึง:**
|
|
1. **นำทาง**ผ่านกระบวนการทั้งหมดโดยใช้คีย์บอร์ดเท่านั้น
|
|
2. **ทดสอบ**ด้วยเครื่องอ่านหน้าจอเพื่อให้แน่ใจว่ามีการประกาศที่เหมาะสม
|
|
3. **ตรวจสอบ**การจัดการโฟกัสทำงานอย่างถูกต้อง
|
|
4. **ตรวจสอบ**ให้ฟอร์มทั้งหมดมีป้ายที่เหมาะสม
|
|
|
|
## เกณฑ์การประเมิน
|
|
|
|
| เกณฑ์ | ยอดเยี่ยม | เพียงพอ | ต้องปรับปรุง |
|
|
| -------- | --------- | -------- | ----------------- |
|
|
| **การทำงาน** | ฟีเจอร์เพิ่มธุรกรรมทำงานได้อย่างไร้ที่ติ พร้อมประสบการณ์ผู้ใช้ที่ยอดเยี่ยมและปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดทั้งหมดจากบทเรียน | ฟีเจอร์เพิ่มธุรกรรมทำงานได้ถูกต้อง แต่บางส่วนอาจไม่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดหรือมีปัญหาเล็กน้อยด้านการใช้งาน | ฟีเจอร์เพิ่มธุรกรรมทำงานได้บางส่วนหรือมีปัญหาด้านการใช้งานที่สำคัญ |
|
|
| **คุณภาพโค้ด** | โค้ดมีการจัดระเบียบที่ดี ปฏิบัติตามรูปแบบที่กำหนด มีการจัดการข้อผิดพลาดที่เหมาะสม และผสานเข้ากับระบบการจัดการสถานะที่มีอยู่ได้อย่างไร้รอยต่อ | โค้ดทำงานได้ แต่บางส่วนอาจมีปัญหาด้านการจัดระเบียบหรือรูปแบบไม่สอดคล้องกับโค้ดที่มีอยู่ | โค้ดมีปัญหาโครงสร้างที่สำคัญหรือไม่ผสานเข้ากับรูปแบบที่มีอยู่ได้ดี |
|
|
| **การเข้าถึง** | รองรับการนำทางด้วยคีย์บอร์ดอย่างสมบูรณ์ การใช้งานเครื่องอ่านหน้าจอ และปฏิบัติตามแนวทาง WCAG พร้อมการจัดการโฟกัสที่ยอดเยี่ยม | มีการใช้งานฟีเจอร์การเข้าถึงพื้นฐาน แต่บางส่วนอาจขาดการนำทางด้วยคีย์บอร์ดหรือฟีเจอร์เครื่องอ่านหน้าจอ | ไม่มีหรือมีการพิจารณาด้านการเข้าถึงอย่างจำกัด |
|
|
| **ประสบการณ์ผู้ใช้** | อินเทอร์เฟซที่ใช้งานง่าย มีการตอบกลับที่ชัดเจน การโต้ตอบที่ราบรื่น และรูปลักษณ์ที่เป็นมืออาชีพ | ประสบการณ์ผู้ใช้ดี แต่มีบางส่วนที่ควรปรับปรุงในด้านการตอบกลับหรือการออกแบบภาพ | ประสบการณ์ผู้ใช้ไม่ดี มีอินเทอร์เฟซที่สับสนหรือขาดการตอบกลับผู้ใช้ |
|
|
|
|
## ความท้าทายเพิ่มเติม (ตัวเลือก)
|
|
|
|
เมื่อคุณทำข้อกำหนดพื้นฐานเสร็จแล้ว ลองพิจารณาการปรับปรุงเหล่านี้:
|
|
|
|
**ฟีเจอร์ที่ปรับปรุง:**
|
|
- **เพิ่ม**หมวดหมู่ธุรกรรม (อาหาร, การเดินทาง, ความบันเทิง ฯลฯ)
|
|
- **ออกแบบ**การตรวจสอบข้อมูลด้วยการตอบกลับแบบเรียลไทม์
|
|
- **สร้าง**ทางลัดคีย์บอร์ดสำหรับผู้ใช้ที่มีประสบการณ์
|
|
- **เพิ่ม**ความสามารถในการแก้ไขและลบธุรกรรม
|
|
|
|
**การผสานขั้นสูง:**
|
|
- **สร้าง**ฟังก์ชันยกเลิกสำหรับธุรกรรมที่เพิ่มล่าสุด
|
|
- **เพิ่ม**การนำเข้าธุรกรรมแบบกลุ่มจากไฟล์ CSV
|
|
- **สร้าง**ความสามารถในการค้นหาและกรองธุรกรรม
|
|
- **เพิ่ม**ฟังก์ชันการส่งออกข้อมูล
|
|
|
|
ฟีเจอร์เพิ่มเติมเหล่านี้จะช่วยให้คุณฝึกฝนแนวคิดการพัฒนาเว็บขั้นสูงและสร้างแอปธนาคารที่สมบูรณ์มากขึ้น!
|
|
|
|
---
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |