~/VibeHandbook
PDF ฟรี

บท 05 · 02

ฟรอนต์เอนด์ แบ็กเอนด์ ฐานข้อมูล โฮสติง

มาเจาะลึกลงไปอีกชั้นหนึ่ง โดยใช้ตัวอย่างของเรา: ผู้ใช้คลิก "บันทึกโปรไฟล์"

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

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

ฐานข้อมูล แบ็กเอนด์ส่งข้อมูลให้ฐานข้อมูลเก็บไว้ มันไม่ใช่กล่องวิเศษ — คิดว่ามันเป็นชุดของสเปรดชีตที่เข้มงวดมาก (เรียกว่า ตาราง) ที่สามารถค้นหาได้ทันทีและไม่ลืมอะไรเลย พรุ่งนี้ แบ็กเอนด์จะอ่านโปรไฟล์กลับ ออกมา เพื่อแสดงมันอีกครั้ง

โฮสติง ในสภาพแวดล้อมจริง (production) ไม่มีอะไรในนี้ที่ทำงานบนแล็ปท็อปของคุณ มันทำงานอยู่บนคอมพิวเตอร์ที่เช่ามาจากผู้ให้บริการโฮสติงอย่าง Cloudflare, Vercel หรือแพลตฟอร์มคลาวด์อื่นๆ โฮสติงคือสิ่งที่ทำให้แอปของคุณเข้าถึงได้ที่ที่อยู่เว็บจริงๆ แทนที่จะอยู่แค่บนเครื่องของคุณเอง

สัญชาตญาณที่มีประโยชน์: เมื่อมีอะไรพัง ให้ถามว่า ชั้นไหน "ปุ่มไม่ทำอะไรเลย" คือฟรอนต์เอนด์ "มันบันทึกผิด" มักจะเป็นแบ็กเอนด์ "มันลืมข้อมูลของฉัน" ชี้ไปที่ฐานข้อมูล การระบุชั้นที่ถูกต้องคือครึ่งหนึ่งของการแก้บั๊ก — และครึ่งหนึ่งของการเขียนพรอมป์ที่ AI สามารถลงมือทำได้

อยากได้แบบออฟไลน์?

ดาวน์โหลดหนังสือทั้งเล่มเป็น PDF หรือ EPUB — ฟรี