DevD | Interactive Learning

พจนานุกรมปูพื้นฐานเชื่อมต่อ API (API Dictionary)

มาร่วมสร้างความเข้าใจกับคำศัพท์หลักที่คอยขับเคลื่อนระบบเชื่อมต่อข้อมูลกันก่อนลุยรายละเอียดกัน:

1. API (ตัวรับส่งสารข้อมูล)

กลไกเชื่อมต่อระหว่างแอปพลิเคชันต่าง ๆ (เปรียบเสมือนบริกรคอยถือกระดาษออเดอร์วิ่งไปส่งต่อให้ห้องครัวและยกอาหารมาเสิร์ฟ)

2. Client (อุปกรณ์ผู้ร้องขอ)

ฝั่งผู้ใช้งานหรือบราวเซอร์ของคุณที่ต้องการขอรับชมข้อมูล (เปรียบเสมือนลูกค้าที่กำลังถือเมนูและสั่งของในร้านอาหาร)

3. Server (คอมพิวเตอร์ผู้ให้บริการ)

คอมพิวเตอร์หลังบ้านที่คอยรักษาและเก็บฐานข้อมูล ตลอดจนประมวลผลคำขอ (เปรียบเสมือนห้องครัวและพ่อครัวที่คอยปรุงจานอาหาร)

4. JSON (กล่องพัสดุมาตรฐาน)

ฟอร์แมตเขียนข้อความภาษากลางในการบรรจุชุดข้อมูล เพื่อช่วยให้โปรแกรมต่างภาษาแกะคุยกันรู้เรื่องอย่างไร้อุปสรรค

1ปฐมบท: ปัญหาที่ทำให้โลกนี้ต้องสร้าง API ขึ้นมา

ลองจินตนาการดูว่า ถ้าคุณอยากจะสร้าง "แอปพลิเคชันพยากรณ์อากาศ" ขึ้นมาสักตัวหนึ่ง คุณจะทำอย่างไร? คุณจำเป็นต้องสร้างสถานีตรวจวัดอากาศเป็นของตัวเองไหม? คุณต้องยิงดาวเทียมขึ้นไปบนอวกาศเพื่อดูเมฆฝนหรือเปล่า? คำตอบคือ "ไม่จำเป็นเลย" สิ่งที่คุณต้องทำก็แค่เขียนแอปพลิเคชันส่วนหน้าจอ (UI) ให้สวยงาม แล้วใช้วิธีไป "ขอขอยืมข้อมูล" สภาพอากาศจากกรมอุตุนิยมวิทยา หรือบริษัทที่มีเซิร์ฟเวอร์เก็บข้อมูลสภาพอากาศอยู่แล้ว

แต่ปัญหาก็คือ เซิร์ฟเวอร์ของกรมอุตุนิยมวิทยานั้นถูกปิดล็อคไว้แน่นหนา เขาไม่สามารถยอมให้ใครก็ไม่รู้เอาโค้ดมาเจาะเข้าฐานข้อมูล (Database) ของเขาได้โดยตรง เพราะนอกจากจะเสี่ยงโดนแฮกเกอร์โจมตีแล้ว ข้อมูลอาจจะพังหรือสูญหายได้ และนี่คือจุดเริ่มต้นที่โลกคอมพิวเตอร์ต้องสร้างสิ่งประดิษฐ์ที่เรียกว่า API (Application Programming Interface) ขึ้นมา

API คือพนักงานต้อนรับและบริกรของระบบ

เพื่อให้เห็นภาพชัดเจนที่สุด ให้คุณเปรียบเทียบระบบคอมพิวเตอร์เป็น "ร้านอาหารชื่อดัง"

• ลูกค้า (Client): คือแอปพลิเคชันบนมือถือของคุณที่หิวข้อมูล
• ห้องครัว (Database): คือฐานข้อมูลหลังบ้านที่เต็มไปด้วยวัตถุดิบและความลับทางการค้า ลูกค้าห้ามเดินเข้าไปเด็ดขาด!
• พนักงานรับออเดอร์ (API): คือตัวกลางที่คุณต้องคุยด้วย คุณจะขอดูเมนู หรือสั่งอาหาร คุณต้องสั่งผ่านพนักงานคนนี้ พนักงานจะจดออเดอร์ เดินไปที่ห้องครัว ให้พ่อครัวปรุงอาหาร (ประมวลผล) แล้วพนักงานก็จะยกอาหาร (ข้อมูล) ออกมาเสิร์ฟให้คุณที่โต๊ะ

ด้วยระบบนี้ ห้องครัวก็ปลอดภัย ลูกค้าก็ได้รับอาหารที่ต้องการ ทุกคนทำงานร่วมกันได้อย่างราบรื่น นี่คือเหตุผลที่ว่าทำไมแอปจองตั๋วเครื่องบินอย่าง Traveloka ถึงมีราคาตั๋วของการบินไทยได้ โดยที่ Traveloka ไม่ได้มีเครื่องบินของตัวเองสักลำ!

ภาพจำลองการทำงานของ API (Interactive Sandbox)

ด้านล่างนี้คือแบบจำลองแอนิเมชันที่แสดงให้เห็นว่า ข้อมูลวิ่งไปมาระหว่างอุปกรณ์ของคุณ (Client) และเซิร์ฟเวอร์ (Server) อย่างไรในเสี้ยววินาที ลองกดเปลี่ยนสถานการณ์ด้านบนดูได้เลย

คุณ (Client)

แอป/มือถือ

บริกร (API)

ตัวกลาง

ครัว (Server)

Database

2ทำไม API ถึงเป็นทักษะที่โปรแกรมเมอร์ทุกคน "ต้องรู้"

ความปลอดภัย (Security)

API ทำหน้าที่เป็นยามเฝ้าประตู คอยตรวจตั๋ว (Token) ว่าแอปพลิเคชันที่มาขอข้อมูล มีสิทธิ์จริงๆ หรือไม่ ป้องกันการโดนขโมยข้อมูลหลังบ้าน

ทำงานร่วมกัน (Integration)

ทำให้ภาษาโปรแกรมที่ต่างกัน (เช่น ฝั่งมือถือเขียนด้วย Swift, หลังบ้านเขียนด้วย Python) สามารถพูดคุยแลกเปลี่ยนข้อมูลกันรู้เรื่องผ่านภาษากลาง

ไม่ต้องสร้างล้อใหม่

อยากมีระบบจ่ายเงิน? แค่ต่อ API ของ Stripe หรือ Omise อยากมีแผนที่? ต่อ API ของ Google Maps ทำให้คุณสร้างแอปใหญ่ๆ ได้ในเวลาอันรวดเร็ว

3กายวิภาคของการเรียก API (Anatomy of a Request)

การจะเรียกใช้บริการจากพนักงานเสิร์ฟมารับออเดอร์ จำเป็นต้องสื่อสารให้ถูกต้องตามรูปแบบ ในโลกของ Web API (หรือที่มักเรียกว่า REST API) การส่งคำขอ 1 ครั้ง (1 Request) จะมีชิ้นส่วนสำคัญที่ประกอบกันอยู่ 4 ส่วนหลักที่จะต้องระบุให้ถูกต้องเสมอ ดังนี้:

📍 1. URL & Endpoint (ที่อยู่ปลายทาง)

เปรียบเสมือนที่อยู่ของร้านอาหาร เป็นลิงก์บนอินเทอร์เน็ตที่ระบุตำแหน่งที่ตั้งของเซิร์ฟเวอร์ แต่ที่พิเศษคือใน URL ของ API จะมีการแบ่งย่อยลงไปอีก เรียกว่า Path หรือ Endpointเพื่อบอกให้ชัดเจนว่าเราต้องการข้อมูล "หมวดหมู่ไหน"

https://api.github.com/users/developer

คำอธิบาย:
Base URL: โดเมนหลักของเซิร์ฟเวอร์ (ร้านอาหาร GitHub)
Endpoint: หมวดหมู่ข้อมูล ในที่นี้คือไปที่หมวดผู้ใช้งาน (Users)
Parameter: ระบุเจาะจงลงไปอีกว่า ขอข้อมูลของผู้ใช้งานที่ชื่อ developer

🛠️ 2. HTTP Methods (คำกริยา)

เมื่อเราไปถึงที่อยู่ร้านอาหารแล้ว เราต้องบอกกริยาด้วยว่าเราจะไปทำอะไร? จะไปสั่งของใหม่? จะไปขอยกเลิกออเดอร์? หรือแค่ขอดูเมนู? ใน API เราใช้สิ่งที่เรียกว่า HTTP Method ในการระบุความต้องการ ซึ่งตัวหลักๆ มี 4 ตัว (เรียกรวมๆ ว่า CRUD Operations):

Method	หน้าที่การทำงาน (Action)	ตัวอย่างการใช้งานจริง
GET	ดึงข้อมูล (Read) เป็นการขอดูข้อมูลโดยไม่แก้ปรับปรุงอะไร	ดึงรายการสินค้าในหน้าแรกของ Shopee, ขอดูโปรไฟล์ IG เพื่อน
POST	สร้างข้อมูลใหม่ (Create) ส่งข้อมูลก้อนใหม่ไปเก็บไว้ใน Database	กดปุ่มสมัครสมาชิก, กดยืนยันคำสั่งซื้อ, โพสต์สเตตัสลง Facebook
PUT / PATCH	อัปเดตข้อมูล (Update) แก้ไขข้อมูลที่มีอยู่แล้วให้เปลี่ยนไปจากเดิม	เข้าไปเปลี่ยนรูปโปรไฟล์, แก้ไขชื่อที่อยู่สำหรับจัดส่งพัสดุ
DELETE	ลบข้อมูล (Delete) สั่งทำลายหรือลบข้อมูลนั้นออกจากระบบ	กดลบแชทเก่าๆ, ยกเลิกการสั่งซื้อ, ลบบัญชีผู้ใช้งานทิ้ง

🚥 3. HTTP Status Codes (รหัสตอบกลับ)

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

2xxสำเร็จ (Success)เช่น 200 OK (ขอข้อมูลได้แล้ว) หรือ 201 Created (สร้างข้อมูลใหม่เสร็จแล้ว)

3xxย้ายทาง (Redirect)ข้อมูลนี้ถูกย้ายไปที่ URL ใหม่แล้ว ให้ตามไปที่ลิงก์ใหม่นะ

4xxฝั่งเราผิด (Client Error)เช่น 400 พิมพ์ข้อมูลมาผิดฟอร์แมต, 401 ลืมล็อคอิน, หรือ 404 พิมพ์ URL ผิดหาไม่เจอ

5xxเซิร์ฟเวอร์พัง (Server Error)เช่น 500 Internal Error ฝั่งเราส่งไปถูกทุกอย่าง แต่โค้ดฝั่งหลังบ้านเขามีบัคเลยพัง

4ภาษากลางที่ใช้บรรจุข้อมูล: JSON

สมมติว่าเซิร์ฟเวอร์ของคุณเขียนด้วยภาษา PHP แต่แอปมือถือของคุณเขียนด้วยภาษา Swift (iOS) สองภาษานี้มีโครงสร้างข้อมูลที่ไม่เหมือนกันเลย การจะส่งข้อมูลข้ามไปข้ามมา จึงต้องนำข้อมูลมาแพ็คใส่ "กล่องกระดาษมาตรฐาน" ที่ทุกภาษาบนโลกสามารถแกะกล่องอ่านได้ กล่องกระดาษมาตรฐานในยุคปัจจุบันเราเรียกว่า JSON (อ่านว่า เจสัน - JavaScript Object Notation)

กฎของ JSON มีความเรียบง่าย โดยเป็นการจับคู่ระหว่าง "ชื่อหัวข้อ" (Key) และ "ค่าของข้อมูล" (Value)ลองดูตัวอย่างข้อมูลผู้ใช้งาน 1 คน ที่ถูกส่งมาจาก API ด้านล่างนี้:

user_profile.json
{
  "status": 200,
  "message": "ดึงข้อมูลสำเร็จ",
  "user_data": {
    "id": 10542,
    "username": "developer_one",
    "is_active": true,
    "skills": ["JavaScript", "React", "Next.js"],
    "address": {
      "city": "Bangkok",
      "country": "Thailand"
    }
  }
}

ข้อสังเกต: ไม่ว่าจะเป็นตัวหนังสือ ("developer_one"), ตัวเลข (10542), ค่าความจริง (true/false), แบบรายการ Array (["JavaScript", ...]) หรือแม้กระทั่งการซ้อนข้อมูล Object เข้าไปข้างใน (address) JSON สามารถบรรจุโครงสร้างข้อมูลที่ซับซ้อนได้อย่างเป็นระเบียบ และสามารถอ่านทำความเข้าใจได้ง่ายด้วยตาเปล่า

5ลงมือปฏิบัติจริง: การเขียนโค้ดดึงข้อมูล

ทฤษฎีแน่นแล้ว ลองมาดูหน้าตาโค้ดจริงๆ กันบ้าง ในภาษา JavaScript เรามีคำสั่งชื่อว่า fetch()ที่มีหน้าที่เป็นนักวิ่ง ไปเรียก API ตาม URL ที่เราระบุ นี่คือโค้ดมาตรฐานที่จะได้เขียนบ่อยที่สุดในการทำเว็บ:

app.js
// 1. กำหนดที่อยู่ Endpoint ที่เราต้องการดึงข้อมูล
const apiUrl = "https://jsonplaceholder.typicode.com/users/1";

// 2. เรียกใช้ฟังก์ชัน fetch() ส่งไปหา URL นั้น (ค่าเริ่มต้นคือ Method: GET)
fetch(apiUrl)
  .then(response => {
    // 3. เซิร์ฟเวอร์ตอบกลับมาแล้ว! เรามาเช็ค Status Code ก่อนว่าโอเคไหม (200 OK)
    if (!response.ok) {
      throw new Error("เกิดข้อผิดพลาดรหัส: " + response.status);
    }
    // 4. ถ้าทุกอย่างปกติ ให้สั่งแกะกล่องพัสดุ (แปลงร่างเป็น JSON)
    return response.json(); 
  })
  .then(data => {
    // 5. เย้! เราได้ข้อมูล JSON มาใช้ในโค้ดแล้ว นำไปแสดงบนหน้าเว็บได้เลย
    console.log("ชื่อผู้ใช้งาน:", data.name);
    console.log("อีเมล:", data.email);
  })
  .catch(error => {
    // 6. ดักจับ Error เผื่อเน็ตหลุด หรือเซิร์ฟเวอร์พัง
    console.error("เสียใจด้วย ดึงข้อมูลไม่สำเร็จ:", error);
  });

จะเห็นได้ว่า โค้ดคอมพิวเตอร์นั้นทำงานเป็นลำดับขั้นตอน (Step-by-step) สอดคล้องกับทฤษฎีที่เรียนมา เริ่มจากการยิง URL → เช็ค Status Code → แปลงข้อมูลเป็น JSON → แล้วจึงนำข้อมูลไปใช้งาน

เจาะลึกระบบ API
หัวใจสำคัญของการเชื่อมต่อโลกดิจิทัล