18 KiB

Raw Blame History

การสร้างหน้าต่าง "เพิ่มธุรกรรม"

ภาพรวม

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

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

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

เมื่อคุณทำงานนี้เสร็จ คุณจะสามารถ:

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

คำแนะนำ

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

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

ข้อกำหนด:

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

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

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

ตัวเลือก A: หน้าแยก

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

ตัวเลือก B: หน้าต่างแบบโมดอล (แนะนำ)

ใช้ JavaScript เพื่อแสดง/ซ่อนหน้าต่างโดยไม่ต้องออกจากแดชบอร์ด
ออกแบบโดยใช้ hidden property หรือคลาส CSS
สร้างประสบการณ์การใช้งานที่ราบรื่นด้วยการจัดการโฟกัสที่เหมาะสม

ขั้นตอนที่ 3: การออกแบบเพื่อการเข้าถึง

ตรวจสอบให้หน้าต่างของคุณตรงตาม มาตรฐานการเข้าถึงสำหรับหน้าต่างแบบโมดอล:

การนำทางด้วยคีย์บอร์ด:

รองรับการกดปุ่ม Escape เพื่อปิดหน้าต่าง
ล็อกโฟกัสไว้ในหน้าต่างเมื่อเปิด
คืนโฟกัสไปยังปุ่มที่เรียกหน้าต่างเมื่อปิด

การรองรับเครื่องอ่านหน้าจอ:

เพิ่ม ARIA labels และ roles ที่เหมาะสม
ประกาศการเปิด/ปิดหน้าต่างให้เครื่องอ่านหน้าจอทราบ
ให้ข้อความป้ายฟอร์มและข้อความข้อผิดพลาดที่ชัดเจน

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

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

ฟิลด์ที่จำเป็น:

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

คุณสมบัติของฟอร์ม:

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

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

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

ขั้นตอนการดำเนินการ:

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

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

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

ข้อกำหนดการผสาน:

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

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

รายละเอียด API Endpoint: ดู เอกสาร API ของเซิร์ฟเวอร์ สำหรับ:

รูปแบบ JSON ที่จำเป็นสำหรับข้อมูลธุรกรรม
วิธี HTTP และ URL endpoint
รูปแบบการตอบกลับที่คาดหวัง
การจัดการการตอบกลับข้อผิดพลาด

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

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

การทดสอบการทำงาน:

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

การทดสอบการเข้าถึง:

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

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

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

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

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

ฟีเจอร์ที่ปรับปรุง:

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

การผสานขั้นสูง:

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

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

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้

18 KiB Raw Blame History