SE บทที่ 3 — ศัพท์พื้นฐานให้คุยกับ AI รู้เรื่อง · 14 คำที่ AI พิมพ์ใส่เราทุกวัน
ใช้ปุ่ม ← → เปลี่ยนสไลด์ได้SE TRACK — MODULE 3 · ศัพท์พื้นฐาน
14 คำที่ AI พิมพ์ใส่เราทุกวัน — รู้แล้วอ่านรายงานได้ทั้งฉบับ
ทุกครั้งที่ AI ทำงานให้ มันจะรายงานประมาณนี้: "Dependencies installed. The server is running on localhost:3000 — I'll add the API key to .env" — 3 บรรทัด มีศัพท์ช่างถึง 5 คำ ถ้าอ่านไม่ออก เราได้แต่พิมพ์ "โอเค" ทั้งที่ไม่รู้ว่าระบบอยู่ตรงไหน ลูกค้าเห็นหรือยัง และกุญแจร้านของเราปลอดภัยไหม — บทนี้คัดมาแค่ 14 คำที่โผล่บ่อยที่สุด รู้ชุดนี้ชุดเดียว รายงาน AI ส่วนใหญ่อ่านออกทันที
ไม่ต้องท่องศัพท์ 400 คำ — เป้าหมายคืออ่านรายงานของ AI ให้ออก และสั่งกลับให้ถูก เหมือนเจ้าของร้านที่ฟังภาษาครัวรู้เรื่อง โดยไม่ต้องทำครัวเอง
ทำไมต้องรู้
ระบบซอฟต์แวร์ = ร้านอาหาร 1 ร้าน
01อ่านรายงานออกทั้งฉบับ
- ศัพท์ 14 คำในบทนี้ครอบคลุมรายงานประจำวันของ AI เกือบทั้งหมด
- เจอคำไหนก็เทียบกลับเข้า "แผนผังร้านอาหาร" ได้ทันที ไม่ต้องเดา
02ถามกลับได้ตรงจุด
- รู้ว่าอะไรคือหน้าร้าน อะไรคือครัว จะถามได้ว่า "อันนี้ลูกค้าเห็นไหม" หรือ "แตะข้อมูลจริงหรือเปล่า"
- คำถามถูกจุด = คุมงานได้โดยไม่ต้องเขียนโค้ดเป็น
03รู้จังหวะอันตราย
- บางประโยคของ AI คือสัญญาณเสี่ยง เช่น เรื่องกุญแจร้าน (API key) หลุดลงโค้ด
- รู้ศัพท์ = เห็นสัญญาณก่อนเกิดเรื่อง
MENTAL MODEL ประจำบท
ระบบซอฟต์แวร์คือร้านอาหาร — หน้าร้าน (Frontend) · ครัว (Backend) · เมนู (API) · ตู้วัตถุดิบ (Database) · ช่องสั่งงานตรงถึงครัว (Terminal)
ศัพท์ชุดที่ 1 · แผนผังร้าน
Frontend กับ Backend — หน้าร้าน กับ ครัวหลังบ้าน
FRONTEND · หน้าร้านส่วนที่ลูกค้าเห็น
- หน้าจอ ปุ่ม สี ฟอร์ม — ทุกอย่างที่ผู้ใช้เห็นและกดได้ เหมือนโต๊ะ เมนูเล่ม และการตกแต่งหน้าร้าน
- ตัวอย่าง: หน้าเว็บสั่งซื้อ, หน้าแชต LINE OA ที่ลูกค้าพิมพ์
- AI: "I'll update the frontend" = แก้ส่วนที่ลูกค้าเห็น
BACKEND · ครัวหลังบ้านส่วนประมวลผลที่ลูกค้าไม่เห็น
- ตรรกะ คำนวณ เช็คสต๊อก ตัดเงิน — งานปรุงจริงเกิดที่นี่ ลูกค้าไม่เคยเห็นในครัว
- ตัวอย่าง: ระบบคำนวณโปรโมชัน, ระบบตัดสต๊อกหลังมีออเดอร์
- AI: "the backend handles it" = ครัวเป็นคนจัดการ
อีกคู่ที่มาด้วยกันเสมอ: Client = ฝั่งที่ส่งคำขอ (มือถือ/เบราว์เซอร์ของลูกค้า — คนสั่งอาหาร) · Server = ฝั่งที่รับคำขอแล้วตอบกลับ (เครื่องที่รันครัวหลังบ้าน) — เวลา AI พูดว่า "the server" ให้นึกถึงเครื่องที่ครัวเราตั้งอยู่
ศัพท์ชุดที่ 2 · เส้นทางออเดอร์ 1 จาน
ลูกค้ากด 1 ครั้ง — ข้อมูลวิ่งแบบนี้
มือถือ/เบราว์เซอร์ของลูกค้า กดปุ่ม "สั่งซื้อ" บนหน้าร้านออนไลน์เรา
API = เมนูและกติกาการสั่งทั้งเล่ม · Endpoint = ช่องสั่ง 1 รายการ เช่น "สั่งซื้อ" หรือ "เช็คสต๊อก"
เช็คโปรโมชัน คำนวณราคา เตรียมตัดสต๊อก
ที่เก็บข้อมูลจริง: รายการสินค้า สต๊อก ออเดอร์ ลูกค้า · Query = คำสั่งค้น อ่าน หรือแก้ข้อมูลในตู้
ขากลับ: Response = จานที่เสิร์ฟกลับ — ครัวปรุงเสร็จ ส่งผลลัพธ์กลับไปแสดงบนหน้าจอลูกค้า · สรุปคู่: Request ไป — Response กลับ ทุกการกดบนเว็บคือวงจรนี้ซ้ำ ๆ
ศัพท์ชุดที่ 3 · เครื่องมือหลังร้าน
คำที่โผล่ตอน AI "ลงมือทำ"
TERMINAL · COMMANDช่องสั่งงานตรงถึงครัว
- Terminal = หน้าต่างพิมพ์คำสั่งข้อความตรงถึงเครื่อง ไม่ผ่านหน้าจอสวย ๆ · Command = คำสั่งแต่ละบรรทัด
- AI: "I'll run this command in the terminal"
SOURCE CODE · CODEBASEสูตรอาหารทั้งร้าน
- Source Code = คำสั่งที่เขียนไว้ให้ระบบทำงาน · Codebase = สูตร + ไฟล์ที่เกี่ยวข้องทั้งหมดของระบบ
- AI: "let me explore the codebase" = ขอเปิดอ่านสูตรทั้งร้านก่อน
PACKAGEวัตถุดิบสำเร็จรูป
- โค้ดที่คนอื่นทำเสร็จแล้ว แพ็กเป็นกล่องให้หยิบมาใช้ — เหมือนซอสสำเร็จจากซัพพลายเออร์ ไม่ต้องเคี่ยวเอง
- ติดตั้งผ่านเครื่องมือชื่อ npm (ตัวจัดการ package ยอดนิยม)
DEPENDENCYของที่ร้านเราต้องพึ่ง
- package หรือระบบอื่นที่โค้ดเราขาดไม่ได้ — เหมือนรายการวัตถุดิบที่ต้องมีก่อนเปิดร้าน
- AI: "I'll install the dependencies" = ไปตุนของที่โค้ดต้องพึ่งให้ครบ
LOCALHOST · PORTครัวทดลองในเครื่องเรา
- Localhost = เครื่องของเราเอง — ระบบที่รันอยู่ตรงนี้เราเห็นคนเดียว ลูกค้ายังไม่เห็น · Port = หมายเลขช่องบริการ เช่น
:3000 - AI: "running on localhost:3000"
BUG · ERRORจานผิดสูตร กับ เสียงร้องเตือน
- Bug = จุดผิดในโค้ด (ต้นเหตุ — สูตรเขียนผิด) · Error = อาการที่ระบบแจ้งตอนทำงาน (ปลายเหตุ — จานออกมาผิด)
- AI: "I found a bug" / "this throws an error"
ตัวอย่างจริง: สั่ง AI ทำหน้าเช็คสต๊อก — มันจะ explore the codebase → install dependencies → เปิดระบบทดลองบน localhost:3000 ให้เราเปิดดูก่อนใคร — ทั้งประโยคนี้ตอนนี้อ่านออกแล้ว
คู่ที่คนสับสนที่สุดในบทนี้
Framework กับ Library — แฟรนไชส์ กับ อุปกรณ์สำเร็จ
FRAMEWORK · แฟรนไชส์เขากำหนดโครง เราเติมเนื้อหา
- เหมือนซื้อแฟรนไชส์ร้านอาหาร: ผังร้าน ระบบครัว ขั้นตอนเสิร์ฟ ถูกกำหนดมาแล้ว เราเติมเมนูกับสูตรของเราลงในโครงเขา
- Framework เป็นฝ่ายเรียกโค้ดของเราตามจังหวะที่มันกำหนด
- AI: "this project uses the Next.js framework" = โปรเจกต์นี้อยู่ในโครงแฟรนไชส์ชื่อ Next.js
LIBRARY · อุปกรณ์สำเร็จเราหยิบใช้เมื่อไหร่ก็ได้
- เหมือนเครื่องบดหรือหม้อทอดไร้น้ำมัน — อยากใช้ตอนไหนก็หยิบ ไม่ใช้ก็วางไว้ ร้านยังเป็นของเรา
- โค้ดของเราเป็นฝ่ายเรียกใช้ Library เมื่อต้องการ
- AI: "I'll use a library for the charts" = ขอหยิบเครื่องมือสำเร็จมาทำกราฟ ไม่เขียนเองตั้งแต่ศูนย์
จุดตัดสิน: ใครเรียกใคร — Framework เรียกโค้ดเรา (เราอยู่ในโครงของเขา) · เราเรียก Library (เขาอยู่ในมือเรา) — เวลา AI เสนอ framework ใหม่ = กำลังเสนอเปลี่ยนโครงร้าน ถามเหตุผลก่อนเสมอ
ศัพท์ชุดที่ 4 · เรื่องที่พลาดแล้วเจ็บจริง
Environment Variable · Secret · .env — กุญแจร้านเก็บที่ไหน
ENVIRONMENT VARIABLEป้ายตั้งค่านอกสูตร
- ค่าตั้งระบบที่เก็บไว้นอกโค้ด — เปลี่ยนค่าได้โดยไม่ต้องแก้สูตร เหมือนป้ายหน้าครัว "วันนี้ใช้เตาเบอร์ 2"
- AI: "I'll read it from an environment variable"
SECRETกุญแจร้าน
- ข้อมูลลับ: รหัสผ่าน, API Key (กุญแจสำหรับเรียกใช้บริการคนอื่น เช่น ระบบส่ง LINE), Token
- ใครได้ไป = เปิดร้านเราได้ สั่งของในนามเราได้ — ห้ามฝากไว้ในโค้ดเด็ดขาด
.ENV FILEลิ้นชักเก็บกุญแจในเครื่องเรา
- ไฟล์เก็บ Environment Variables สำหรับเครื่องเรา — กุญแจอยู่ในลิ้นชัก ไม่ได้เย็บติดสูตรอาหาร
- ไฟล์นี้ไม่ commit ขึ้น GitHub (บท SE5) — กุญแจไม่ตามโค้ดขึ้นคลาวด์
สัญญาณเตือนที่ต้องจับให้ได้: ถ้า AI พูดว่า "never hardcode the API key" หรือ "the key is exposed in the code" = มีกุญแจร้านฝังอยู่ในโค้ด เสี่ยงหลุดเมื่อโค้ดขึ้นคลาวด์ — สั่งให้ย้ายเข้า .env ทันที และถ้ากุญแจเคยขึ้น GitHub ไปแล้ว ให้ขอออกกุญแจดอกใหม่ (เปลี่ยน key) ด้วย
⭐ หัวใจของบท
ตารางแปลภาษา AI — ได้ยินแบบนี้ ต้องทำยังไง
| AI พูดว่า | กำลังจะเกิดอะไร | เราควรทำอะไร |
|---|---|---|
| "I'll run npm install" | ติดตั้ง dependencies — ตุนวัตถุดิบสำเร็จที่โค้ดต้องพึ่งให้ครบ | ✅ ปกติมาก — แทบทุกโปรเจกต์เริ่มแบบนี้ |
| "The server is running on localhost:3000" | ระบบทดลองเปิดแล้วในเครื่องเราเท่านั้น — ลูกค้ายังไม่เห็น | ✅ เปิดเบราว์เซอร์ดูได้เลย — นี่คือครัวทดลอง ยังไม่ใช่ร้านจริง |
| "I'll add it to .env" | เก็บค่าลับไว้ในลิ้นชักนอกโค้ด — กุญแจอยู่ถูกที่ | ✅ ถูกต้อง — นี่คือวิธีเก็บ secret ที่ควรเป็น |
| "Never hardcode the API key" | AI กำลังเตือนว่ามีกุญแจร้านฝัง/เกือบฝังอยู่ในโค้ด | ⚠️ ฟังมัน — สั่งย้ายเข้า .env · ถ้า key เคยขึ้นคลาวด์แล้ว ให้เปลี่ยน key ใหม่ |
| "I'll query the database" | กำลังจะเปิดตู้ข้อมูล — อาจแค่อ่าน หรืออาจแก้/ลบ | 🟡 ถามก่อนว่า "อ่านหรือแก้?" — ถ้าแก้/ลบข้อมูลจริง ให้อธิบายก่อนลงมือ |
| "The endpoint returns a 500 error" | ช่องรับออเดอร์ช่องหนึ่งตอบกลับมาว่าครัวมีปัญหา | 🟡 ไม่ต้องตกใจ — ให้ AI อธิบายสาเหตุและเสนอวิธีแก้ (เจาะลึกบท SE8) |
| "There's a bug in the frontend" | มีจุดผิดในส่วนหน้าร้าน — ลูกค้าอาจเห็นอาการแล้ว | 🟡 ถามว่าลูกค้าเจออะไร กระทบใครบ้าง แล้วให้ AI เสนอทางแก้ก่อนลงมือ |
สูตรจำเร็ว: ประโยคที่มี localhost / .env / install = งานในเครื่องเรา ปลอดภัย · ประโยคที่แตะ database / API key = ของจริง-ของลับ ถามก่อนเสมอ
กันหลงทาง
5 คู่ที่จำสลับกันบ่อยที่สุด
| คู่ศัพท์ | ต่างกันตรงไหน |
|---|---|
| Frontend vs Backend | Frontend = หน้าร้านที่ลูกค้าเห็นและกดได้ · Backend = ครัวหลังบ้านที่ประมวลผลจริง — ปุ่มสวยแค่ไหน ถ้าครัวพัง ออเดอร์ก็ไม่ออก |
| API vs Endpoint | API = เมนู + กติกาการสั่งทั้งเล่ม · Endpoint = ช่องสั่ง 1 รายการในเมนูนั้น — API หนึ่งตัวมีได้หลาย endpoint |
| Framework vs Library | Framework = แฟรนไชส์ เขากำหนดโครงแล้วเรียกโค้ดเรา · Library = อุปกรณ์สำเร็จ เราหยิบเรียกใช้เองเมื่อต้องการ |
| Environment Variable vs Secret | Environment Variable = ค่าตั้งระบบที่เก็บนอกโค้ด (ลับหรือไม่ลับก็ได้) · Secret = ค่าที่ต้องลับ เช่น API key — secret ควรเก็บเป็น environment variable เสมอ แต่ไม่ใช่ทุก environment variable เป็น secret |
| Error vs Bug | Error = อาการที่ระบบแจ้งตอนรัน (จานออกมาผิด) · Bug = ต้นเหตุในโค้ด (สูตรเขียนผิด) — เห็น error หนึ่งครั้ง อาจสืบไปเจอ bug เดียวหรือหลายตัว |
คู่โบนัสจากบทนี้: Localhost vs ร้านจริง — localhost คือครัวทดลองที่เราเห็นคนเดียว กว่าลูกค้าจะเห็นต้องผ่านการส่งของขึ้นระบบจริง (เจาะลึกบท SE7)
QUICK-CHECK · กดดูเฉลย
จริงหรือไม่? — เช็คก่อนปิดบท
1 · "AI บอกว่าเว็บรันอยู่บน localhost:3000 แปลว่าลูกค้าเข้าดูได้แล้ว"
ไม่จริง — localhost คือเครื่องของเราเอง ระบบที่รันตรงนั้นเราเห็นคนเดียว เหมือนครัวทดลองหลังร้าน กว่าลูกค้าจะเห็นต้องเอาขึ้นระบบจริงอีกขั้น (บท SE7)
2 · "ไฟล์ .env ควรส่งขึ้น GitHub ด้วย ทีมจะได้ใช้ค่าเดียวกัน"
ไม่จริง — .env คือลิ้นชักเก็บกุญแจร้าน ถ้าขึ้นคลาวด์ = กุญแจหลุดไปกับโค้ด · แชร์ได้แค่ "รายการชื่อค่า" ให้แต่ละคนใส่กุญแจของตัวเอง
3 · "Framework เป็นฝ่ายกำหนดโครงแล้วเรียกโค้ดเรา ส่วน Library เราเป็นฝ่ายหยิบเรียกใช้เอง"
จริง — นี่คือจุดตัดสินของคู่นี้: แฟรนไชส์กำหนดโครงให้เราเติม vs อุปกรณ์สำเร็จที่เราหยิบใช้เมื่อไหร่ก็ได้
KEY TAKEAWAY
Frontend = หน้าร้าน · Backend = ครัว · API = เมนู · Request/Response = ใบสั่ง/จานเสิร์ฟ · Database = ตู้วัตถุดิบ · Terminal = ช่องสั่งตรงถึงครัว
กฎเหล็กประจำบท: "Secret คือกุญแจร้าน — อย่าฝากไว้ในโค้ด ให้เก็บใน .env เสมอ"