169 wordpress feature image (16)

JSON is not a person: น้องเจสันเป็นใคร แล้วเราจะคุยกับเค้ายังไง

😱 ใครเคยเป็นบ้าง เห็น Error เด้งขึ้นมาเป็นพรืดๆๆ ใน Console แล้วทำตัวไม่ถูก
หรือ Dev ขอ API Payload ไปใช้ investigate bug ก็ทำหน้างงไม่รู้จะต้องส่งอะไรไป

วันนี้พี่กิ่งจะพาไปทำความรู้จัก JSON กันนะคะ
“น้องเจสัน” ที่ไม่ใช่คน แต่น้องคือ “ข้อความ” ที่ระบบส่งมาบอกเราว่าเกิดอะไรขึ้นหลังบ้านบ้างค่ะ

💡 ลองนึกภาพตามนะคะ: การอ่าน JSON ก็เหมือนเราอ่าน “ใบออเดอร์ GrabFood” นั่นแหละ!
แค่เรารู้ว่าฟอร์แมทของใบออเดอร์เป็นยังไง เราก็อ่านรู้เรื่องได้สบาย

โครงสร้างหลักคือ Key & Value ที่จะมาเป็นคู่หูดูโอ้เสมอ

  • 📌 Key: คือ “ห้วข้อ” ส่วนนี้จะบอกว่าข้อมูลนี้คืออะไร (เช่น ชื่อเมนู, ที่อยู่) 
  • 📌 Value: คือ “ข้อมูลจริง” ส่วนนี้จะบอกว่าค่าของข้อมูลนี้คืออะไร (เช่น กะเพราหมูสับไข่ดาว, คอนโด ABC) 

ลองมาดูตัวอย่างง่ายๆ กับแอพที่เราน่าจะใช้ทุกวัน ว่า QA ทั่วไป กับ QA ร่างทอง ต่างกันยังไง

สมมติว่าเราเทส Food Delivery App อยู่แล้วเจอปัญหาว่ากดสั่งอาหารแล้วขึ้น Error “Something went wrong”

👤 QA คนที่ 1
พอเห็นหน้าบ้านขึ้นว่า “สั่งอาหารไม่สำเร็จ” ก็รีบแคปเจอร์หน้าจอส่งไปให้ Dev ดู
แล้วบอกว่า “กดสั่งอาหารไม่ได้ ช่วย Fix หน่อย”… แล้ว Dev ก็ต้องไปงมหาเอาเองว่าเกิดอะไรขึ้น

✨ QA คนที่ 2
กด Inspect ดู Network แล้วเห็น JSON หน้าตาแบบนี้:

{ "order_status": "failed", "error_code": "MISSING_ADDRESS" }

เราจะสามารถเช็คต่อเป็น Step ได้เลย เพื่อให้สามารถระบุปัญหาได้ชัดเจนขึ้นก่อนจะไปคุยกับ Dev

📍 Step1: เช็คข้อความที่หน้าบ้านส่งไป (Request Payload)

ไปเปิด Inspect ดู Network Tab เหมือนเดิม ทีนี้ดูตรง Request Payload ว่าส่งอะไรไป แล้วเราเจอว่าส่งไปแบบนี้

{ "menu_id": "99", "quantity": 1 }

แปลว่า ส่ง menu_id = 99 และ quantity = 1 ไป
อ้าว Address หาย!! แต่บนหน้าจอเราเลือกที่อยู่ไปแล้วนะ

📍 Step 2: ลองเช็คตรงกับหลังบ้าน (Postman ต้องเข้าแล้ว!)

เราฝึกใช้ Postman กันไปแล้วในโพสต์ก่อนหน้า ได้เวลาเอามาใช้จริงค่ะ!

ทีนี้เราลองก๊อปปี้ JSON และ API Endpoint ที่ได้จากหน้าบ้านไปใส่ใน Postman
จากนั้นก็ลองเติม Address เข้าไปแล้วลองยิงดู

{ "menu_id": "99", "quantity": 1, "address": "Condo ABC" }

รอบนี้กดปุ๊บ หลังบ้านตอบกลับมาปั๊บว่า Success สั่งได้เฉยเลย!

📍 Step 3: สรุปผลอย่างเซียนแบบ QA ร่างทอง

ทีนี้เราก็บอก Dev ได้แบบสวยๆเลยค่ะ 

“กดสั่งอาหารแล้วขึ้น Error ว่าไม่มีที่อยู่ทั้งๆที่เลือกไปแล้ว ลองเช็คหน้าบ้านแล้วเจอว่าไม่ได้ส่งไป
ลองยิงตรงด้วย Postman แบบใส่ที่อยู่ครบก็ทำงานได้ปกติ
รบกวนเช็คโค้ดฝั่งหน้าบ้านให้หน่อยนะคะ แปะ Request/Response ไว้ให้ใน Jira Ticket แล้ว”

โอ้โห อย่างเทพ น่าจะเดาได้ไม่ยากว่า QA คนไหนที่ Dev จะอยากคุยด้วย

นี่แหละค่ะคือความต่าง!

  • Average QA: จะบอกแค่ว่า “กดสั่งอาหารแล้ว Error ช่วยเช็คให้หน่อย” แล้ว Dev ก็ต้องไปงมหาเองว่าเกิดอะไรขึ้น
  • QA ร่างทอง: จะบอก “ต้นตอ” ของปัญหาให้เลย หรือถ้าเคสไหนยากๆ ระบุไม่ได้ ก็จะมีข้อมูลไปให้ Dev เช็คได้ง่ายขึ้น แบบนี้แก้ไว งานจบเร็ว

การเข้าใจ JSON และ อ่านข้อความ Request/Response เป็น จึงเป็นสิ่งที่ช่วยให้เราทำงานเชิงรุกได้มากขึ้น
และลดความแพนิคเวลาเจอ Error ลงด้วย

ลองเอาไปปรับใช้กันดูนะคะ แล้วผลเป็นยังไงมาแชร์ให้ฟังกันได้เลย

Leave a Comment

Your email address will not be published. Required fields are marked *