ให้ผู้ใช้เลือกว่าจะดูอะไร — Search & Input

ตอนนี้แอปของคุณดึงข้อมูลจริงได้แล้ว และแสดงผลได้ดีขึ้นมากแล้ว

แต่ยังมีข้อจำกัดสำคัญอยู่อีกอย่าง: มันยังโชว์ข้อมูลชุดเดิมทุกครั้ง เหมือนป้ายประกาศที่พูดอยู่เรื่องเดียว ไม่ว่าคนดูอยากรู้อะไรจริงๆ

จากป้ายประกาศ ไปสู่เครื่องมือที่คนใช้เลือกเองได้

ตอนนี้แอปอาจแสดงค่า THB ไป USD, EUR, JPY, GBP, CNY ได้ดี

แต่ถ้าคนใช้จริงอยากรู้ว่า 1000 บาท เป็นเงินเกาหลีเท่าไร หรือ 1 USD เป็นบาทตอนนี้เท่าไร แอปยังตอบไม่ได้ เพราะคนใช้ยังไม่มีทาง “สั่ง” สิ่งที่ตัวเองอยากดู

ตรงนี้คือหัวใจของบทนี้

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

ถ้ามีแต่เมนูพิเศษประจำวัน คนก็ยังสั่งของที่อยากกินไม่ได้

กลับมาที่ภาพร้านอาหารอีกครั้ง

ก่อนหน้านี้เหมือนคุณเดินเข้าร้าน แล้วร้านยื่นเมนูพิเศษประจำวันมาให้เลย คุณกินได้ แต่เลือกเองไม่ได้

บทนี้เราจะเปลี่ยนจากแบบนั้น ไปเป็นร้านที่มีเมนูเต็มจริงๆ

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

นี่คือจุดที่แอปเริ่ม “ตอบสนองต่อสิ่งที่ผู้ใช้เลือก” ไม่ใช่แค่โชว์ของที่ตั้งไว้ล่วงหน้า

สิ่งที่ต้องเพิ่มในบทนี้

เพื่อให้คนใช้เลือกเองได้ แอปเช็คค่าเงินควรมีอย่างน้อย 3 อย่าง

• dropdown สำหรับเลือกสกุลเงินต้นทาง
• dropdown สำหรับเลือกสกุลเงินปลายทาง
• ช่องกรอกจำนวนเงินที่ต้องการแปลง

พอครบ 3 อย่างนี้ แอปจะไม่ใช่แค่หน้าแสดงค่าเงินอีกต่อไป แต่มันจะกลายเป็นเครื่องมือแปลงค่าเงินจริงที่ใช้ได้ตามโจทย์ของแต่ละคน

ลงมือทำ — เพิ่มตัวเลือกให้ผู้ใช้

เปิดโปรเจกต์เดิมจากบทที่แล้ว แล้วส่ง prompt นี้

เพิ่มให้ผู้ใช้เลือกสกุลเงินที่ต้องการแปลงได้

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

ไม่เปลี่ยนฟังก์ชันหรือ design ที่มีอยู่แล้ว

prompt นี้กำลังสั่ง 2 เรื่องพร้อมกันแบบชัดเจน

เรื่องแรกคือ เพิ่มส่วนที่คนใช้ควบคุมได้
เรื่องที่สองคือ เอาสิ่งที่คนใช้เลือกไปผูกกับข้อมูลจาก API

ดูผลลัพธ์ — แล้วลองใช้แบบคนจริง

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

ลองใช้แบบนี้ทีละรอบ

1. ใส่จำนวนเงิน 1000
2. เลือกจาก THB
3. เลือกไป USD
4. ดูผลลัพธ์ที่แสดงขึ้นมา

แล้วลองอีกแบบ

1. เปลี่ยนจาก USD
2. ไป JPY
3. เปลี่ยนจำนวนเงินเป็น 50

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

ถ้ายังเปลี่ยนแล้วไม่อัปเดต ให้บอก AI แบบนี้

บางครั้ง AI อาจเพิ่ม dropdown กับช่องกรอกให้ครบ แต่ยังไม่ผูกมันเข้ากับผลลัพธ์อย่างสมบูรณ์

ถ้าเปลี่ยนค่าแล้วผลยังไม่ขยับ ลองส่งต่อแบบนี้

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

สำหรับแอปของคุณเอง

แนวคิดเดียวกันนี้ใช้ได้กับ API อีกหลายแบบมาก

• แอปอากาศ: ให้ผู้ใช้เลือกเมืองที่อยากดู
• แอปวันหยุด: ให้ผู้ใช้เลือกประเทศหรือปี
• แอปคำคม: ให้ผู้ใช้เลือกหมวดหมู่ที่อยากอ่าน
• แอป Pokemon: ให้ผู้ใช้พิมพ์ชื่อหรือลำดับที่อยากค้นหา

คำถามสำคัญคือ:

ตอนนี้แอปของคุณกำลังโชว์ข้อมูลชุดเดิมอยู่ หรือเปิดโอกาสให้ผู้ใช้เลือกสิ่งที่ตัวเองอยากรู้ได้แล้ว

วันนี้คุณไม่ได้เพิ่มแค่ฟอร์ม

สิ่งที่คุณเพิ่มจริงๆ คือ “สิทธิ์ในการเลือก” ให้กับผู้ใช้

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

และนั่นคือความต่างใหญ่ระหว่างแอปที่ดูได้ กับแอปที่ใช้งานได้

คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง

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

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