คุณผ่านมาถึงคอร์ส 6 แล้ว แปลว่าคุณสร้างแอปเองได้พอสมควรแล้ว
แต่แอปทั้งหมดที่คุณทำมาจนถึงตอนนี้ยังมีข้อจำกัดใหญ่ข้อหนึ่งเหมือนกัน: มันรู้แค่สิ่งที่ผู้ใช้พิมพ์เข้าไป มันไม่รู้ว่าอากาศวันนี้เป็นยังไง ค่าเงินเปลี่ยนไปเท่าไร หรือโลกข้างนอกกำลังมีข้อมูลอะไรใหม่
ถ้าแอปไม่เคยถามใครเลย มันก็ไม่มีทางรู้เรื่องใหม่
ลองนึกภาพว่าแอปของคุณนั่งอยู่ในห้องปิด ไม่มีหน้าต่าง ไม่มีประตู
มันเก่งนะ มันจำข้อมูลได้ แยกผู้ใช้ได้ จัดหน้าตาได้ดี แต่ถ้าไม่มีใครบอกอะไรเพิ่ม มันก็ไม่มีทางรู้ข้อมูลจากโลกภายนอกด้วยตัวเอง
นั่นคือจุดที่ API (ช่องทางที่แอปใช้คุยกับบริการอื่น) เข้ามา
พูดง่ายๆ API คือวิธีที่แอปของคุณใช้ไปถามบริการอื่นบนอินเทอร์เน็ตว่า “ขอข้อมูลนี้หน่อย” แล้วรอคำตอบกลับมา
ถ้า database คือที่เก็บสิ่งที่แอปจำไว้เอง API ก็คือช่องทางที่แอปใช้ไปถามเรื่องที่ตัวเองไม่ได้รู้ตั้งแต่แรก
API เหมือนสั่งอาหารในร้าน
อันนี้คือภาพจำหลักของทั้งคอร์สนี้
ลองนึกว่าคุณเดินเข้าร้านอาหาร
- คุณคือแอปของคุณ
- เมนูคือสิ่งที่ร้านนี้เปิดให้สั่งได้
- การสั่งอาหารคือ request (การส่งคำขอ)
- ครัวคือบริการภายนอกที่มีข้อมูลอยู่
- อาหารที่มาเสิร์ฟคือ response (คำตอบที่ได้กลับมา)
- ถ้าของหมด พนักงานก็จะบอกว่า
ขออภัย หมดแล้ว
คุณไม่จำเป็นต้องรู้ว่าในครัวทำงานยังไง ใช้เตาอะไร หรือเตรียมวัตถุดิบแบบไหน
สิ่งที่คุณต้องรู้มีแค่ว่า ร้านนี้มีอะไรให้สั่ง และควรพูดยังไงให้ได้สิ่งที่ต้องการ
API ก็เหมือนกัน คุณไม่ต้องรู้ระบบข้างในทั้งหมด แค่รู้ว่าอยากถามอะไร แล้วบอก AI ให้ช่วยจัดการการสั่งให้
แอปเช็คค่าเงินคือโปรเจกต์ที่เหมาะกับเรื่องนี้มาก
บทนี้เราจะเริ่มโปรเจกต์ใหม่: แอปเช็คอัตราแลกเปลี่ยนเงิน
เหตุผลที่โปรเจกต์นี้เหมาะมาก คือมันทำให้เห็นชัดทันทีว่า ข้อมูลที่อยู่บนหน้าจอไม่ได้มาจากคุณพิมพ์เอง แต่มาจากบริการอัตราแลกเปลี่ยนภายนอกที่อัปเดตอยู่เรื่อยๆ
พอคุณเห็นตัวเลขจริงขึ้นมาบนแอปของตัวเอง ความเข้าใจเรื่อง API จะมาเร็วมาก
มันเป็นจังหวะแบบเดียวกับตอนคอร์ส database ที่คุณรีเฟรชหน้าแล้วข้อมูลยังอยู่ แต่รอบนี้คือ “แอปไปรู้เรื่องจากข้างนอกมาได้จริง”
ลงมือทำ — ให้แอปไปถามอัตราแลกเปลี่ยนล่าสุด
เปิด Lovable แล้วสร้างโปรเจกต์ใหม่ จากนั้นส่ง prompt นี้
สร้างแอปเช็คอัตราแลกเปลี่ยนเงิน
- ใช้บริการอัตราแลกเปลี่ยนฟรีที่ไม่ต้องใช้ API key เช่น open.er-api หรือบริการลักษณะเดียวกัน
- ดึงอัตราแลกเปลี่ยนล่าสุดจากเงินบาท (THB) ไปยังสกุลเงินหลัก: USD, EUR, JPY, GBP, CNY
- แสดงชื่อสกุลเงินหรือรหัสสกุลเงินให้ชัด
- แสดงวันที่และเวลาที่อัปเดตล่าสุด
- ดีไซน์สะอาดตา ใช้สีเขียวเป็นสีเน้น
ไม่เปลี่ยนฟังก์ชันหรือ design ที่มีอยู่แล้วสิ่งสำคัญของ prompt นี้ไม่ใช่ชื่อบริการอย่างเดียว แต่คือคุณกำลังบอก AI ชัดๆ ว่า
- อยากได้ข้อมูลอะไร
- อยากให้ไปเอามาจากบริการภายนอก
- อยากให้แสดงผลบนหน้าจอยังไง
นี่คือการ “สั่งอาหาร” ครั้งแรกของแอปคุณ
ดูผลลัพธ์ — แล้วสังเกตความรู้สึกนี้ไว้
หลังจาก AI สร้างเสร็จ คุณควรเห็นหน้าจอที่มีค่าเงินหลายสกุล เช่น USD, EUR, JPY, GBP, CNY พร้อมตัวเลขอัตราแลกเปลี่ยน และมีเวลาที่อัปเดตล่าสุด
จุดที่อยากให้คุณหยุดดูสักครู่ไม่ใช่แค่หน้าตาสวยไหม
แต่คือคำถามนี้:
ตัวเลขพวกนี้ไม่ได้มาจากไหนในแอปของคุณเอง แล้วตอนนี้มันมาอยู่ตรงหน้าได้ยังไง
คำตอบก็คือ แอปของคุณออกไปถามโลกภายนอก แล้วมีคนตอบกลับมา
ถ้าคุณเห็นอัตราแลกเปลี่ยนจริงบนหน้าจอ นี่คือช่วงที่แอปของคุณเลิกเป็นห้องปิดแล้ว มันเริ่มมีหน้าต่างออกไปหาข้อมูลจากข้างนอกได้
ถ้ายังไม่ขึ้น อย่าเพิ่งสรุปว่าแอปพัง
บางครั้งบริการภายนอกอาจช้าชั่วคราว หรือ AI อาจเลือกวิธีแสดงผลที่ยังไม่ชัด
ถ้าคุณยังไม่เห็นข้อมูล ลองบอกเพิ่มแบบนี้:
ตอนนี้หน้าจอยังไม่แสดงอัตราแลกเปลี่ยนจริง
ช่วยตรวจการเชื่อมต่อกับบริการอัตราแลกเปลี่ยน และทำให้ข้อมูลล่าสุดแสดงบนหน้าจอพร้อมเวลาอัปเดต
ไม่เปลี่ยนฟังก์ชันหรือ design ที่มีอยู่แล้วถ้าคุณยังไม่แน่ใจว่า request, response หรือ endpoint ต่างกันยังไง ไม่เป็นไรเลย ตอนนี้ขอให้จับภาพใหญ่ก่อนว่าแอปกำลังไปถาม แล้วได้คำตอบกลับมา
สำหรับแอปของคุณเอง
พอเข้าใจหลักนี้แล้ว คุณจะเริ่มเห็นว่าแอปอีกหลายแบบก็ใช้แนวคิดเดียวกันได้
ลองคิดต่อว่า ถ้าแอปของคุณได้ข้อมูลจากข้างนอก มันจะฉลาดขึ้นตรงไหนบ้าง เช่น
- แอปท่องเที่ยว: ดึงข้อมูลอากาศวันนี้
- แอปสร้างแรงบันดาลใจ: ดึงคำคมหรือ random quote
- แอปวันหยุด: ดึงข้อมูลวันหยุดประจำปี
- แอปเกมหรือของสะสม: ดึงข้อมูล Pokemon หรือข้อมูลตัวละครจากฐานข้อมูลสาธารณะ
คำถามที่ใช้คิดต่อได้ดีมากคือ:
แอปของฉันจะมีประโยชน์ขึ้นทันทีไหม ถ้ามันรู้ข้อมูลอะไรบางอย่างจากโลกภายนอก
ข้อมูลที่เหมาะกับการเริ่มเรียน API มักเป็นข้อมูลที่เปลี่ยนได้จริงและคนดูเข้าใจทันที เช่น อากาศ ค่าเงิน วันหยุด หรือข้อมูลที่ค้นหาแล้วเห็นผลชัดบนหน้าจอ
วันนี้คุณเพิ่งเพิ่มความสามารถใหม่ให้แอปแบบใหญ่กว่าที่คิด
ก่อนหน้านี้ แอปของคุณทำงานอยู่กับของที่มีอยู่ข้างในเป็นหลัก
แต่หลังจากบทนี้ แอปเริ่มทำสิ่งที่แอปจริงจำนวนมากบนโลกทำอยู่ทุกวันแล้ว นั่นคือถามบริการอื่น แล้วเอาคำตอบกลับมาแสดงให้คนใช้ดู
แอปดูหนัง แอปแผนที่ แอปสั่งอาหาร แอปเช็กราคา ทุกอย่างพวกนี้ล้วนทำแบบนี้ทั้งนั้น
และตอนนี้ แอปของคุณก็เริ่มทำได้แล้วเหมือนกัน
คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง
- คุณเข้าใจแล้วว่า API คือช่องทางที่แอปใช้คุยกับบริการอื่น
- คุณมีภาพจำว่า API เหมือนการสั่งอาหาร: ดูเมนู สั่ง แล้วรอของมาเสิร์ฟ
- คุณสร้างแอปเช็คอัตราแลกเปลี่ยนที่ดึงข้อมูลจริงจากอินเทอร์เน็ตได้แล้ว
- คุณเห็นแล้วว่าแอปของคุณไม่ได้ติดอยู่ในโลกของข้อมูลที่ผู้ใช้พิมพ์เองอีกต่อไป
บทต่อไป เราจะทำให้ข้อมูลชุดเดิมนี้ดูเข้าใจง่ายขึ้น เพราะข้อมูลจริงอย่างเดียวอาจยังไม่พอ ถ้ามันยังถูกวางบนหน้าจอแบบที่คนเปิดมาแล้วต้องนั่งตีความเอง