สรุปและแบบฝึกหัด

ประเด็นสำคัญที่ควรจำ

• ทุกแอปประกอบด้วยสี่ส่วน: ฟรอนต์เอนด์ (สิ่งที่ผู้ใช้เห็น), แบ็กเอนด์ (กฎและตรรกะ), ฐานข้อมูล (ที่ที่ข้อมูลคงอยู่), และ โฮสติง (ที่ที่ทุกอย่างทำงาน) ฟรอนต์เอนด์ไม่เคยแตะฐานข้อมูลโดยตรง — มันต้องผ่านแบ็กเอนด์
• ในเบราว์เซอร์ HTML คือโครงสร้าง CSS คือสไตล์ และ JavaScript คือพฤติกรรม; โค้ดเปลี่ยนหน้าเว็บโดยการเปลี่ยน DOM
• คุณไม่ได้เขียนทุกอย่างเอง — แพ็กเกจ (จัดการโดย npm ผ่าน package.json และไฟล์ล็อก) จัดหาปัญหาที่ถูกแก้ไขแล้วในรูปแบบ ดีเพนเดนซี
• ตัวแปรสภาพแวดล้อม ทำให้คีย์ลับอยู่นอกโค้ด และทำให้โค้ดชุดเดียวกันทำงานถูกต้องทั้งใน dev และ prod
• คำขอไหลจากฟรอนต์เอนด์ → โฮสติง → แบ็กเอนด์ → ฐานข้อมูล แล้วย้อนกลับ; การระบุชื่อชั้นที่ปัญหาอาศัยอยู่คือครึ่งหนึ่งของการแก้ไขมัน

ลองทำดู

เลือกแอปที่คุณใช้ทุกวันสักตัว แล้วเล่าการกระทำหนึ่งอย่างผ่านชั้นต่างๆ ออกมาดังๆ: "ฉันแตะ ส่ง (ฟรอนต์เอนด์) → มันไปที่เซิร์ฟเวอร์ของพวกเขา (แบ็กเอนด์) → ซึ่งตรวจสอบว่าฉันได้รับอนุญาตและบันทึกข้อความ (ฐานข้อมูล) → แล้วแชทก็อัปเดต (ฟรอนต์เอนด์)" จากนั้นลองเดาว่าปัญหาแต่ละอย่างอยู่ในชั้นไหน: ปุ่มดูเหมือนจะเลื่อนหลุดตำแหน่ง; แอปบอกว่า "คุณยังไม่ได้ล็อกอิน"; ข้อความจากเมื่อวานหายไป การฝึกฝนการระบุชื่อแบบนี้ให้เก่งคือทักษะที่หนังสือเล่มนี้ทั้งเล่มจะต่อยอดขึ้นไป

พรอมป์ประจำบท

I'm learning how apps fit together. Here is a feature I want:
<one sentence describing what the user should be able to do>

Before writing any code, break it down by layer for me:
- Frontend: what the user sees and what gets sent
- Backend: what rules/checks must run, and where
- Database: what data needs to be stored or read
- Any env vars or config (especially secrets) involved

Then describe the request flow from click to result in numbered steps.
Keep it in plain language — I want to understand the shape before the code.