เว็บแอปทำมาจากอะไรบ้าง

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

ความจริงคือเว็บแอปแทบทุกตัวในโลก ตั้งแต่ Facebook ไปจนถึงเว็บที่คุณเพิ่งสร้าง ประกอบขึ้นจากส่วนหลัก ๆ ไม่กี่ส่วนที่เหมือน ๆ กัน บทนี้จะพาคุณรู้จักส่วนพวกนั้นทีละส่วน ทั้งว่ามันคืออะไร ทำงานยังไง และในโลกจริงคนเขาทำกันยังไง พอเห็นภาพแล้ว ก้อนวิเศษจะกลายเป็นแผนที่ที่คุณชี้สั่งได้

ทำไมคนสร้างของกับ AI ต้องรู้เรื่องนี้ก่อน

ก่อนลงรายละเอียด ขอปูให้ชัดว่าทำไมเรื่องนี้ต้องมาก่อนเรื่องอื่น

เวลาคุณ vibe code คุณคือคนสั่งงาน ไม่ใช่คนลงมือพิมพ์โค้ดเอง และคนสั่งงานที่ดีต้องรู้ว่างานที่ตัวเองสั่งประกอบด้วยอะไรบ้าง ถ้าคุณไม่รู้ว่าเว็บแอปมีกี่ส่วนและแต่ละส่วนทำอะไร จะเกิดสามปัญหานี้ตามมา คุณชี้ไม่ถูกว่าจะให้ AI ไปแก้ตรงไหน คุณดูไม่ออกว่าการแก้ครั้งนี้เสี่ยงหรือปลอดภัย และพอมันพังคุณก็เดาไม่ถูกว่าปัญหาน่าจะอยู่ส่วนไหน

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

เว็บแอปไม่ใช่ของก้อนเดียว

ภาพในหัวที่ต้องเปลี่ยนก่อนคือ เว็บแอปไม่ใช่ของชิ้นเดียว แต่เป็นหลายส่วนที่ส่งงานต่อกัน ทุกครั้งที่คุณกดอะไรสักอย่างบนเว็บ เบื้องหลังมีหลายส่วนช่วยกันทำงานเป็นทอด ๆ จนได้ผลออกมา

ส่วนหลักมีอยู่ห้าส่วน คือ หน้าบ้าน หลังบ้าน ที่เก็บข้อมูล ระบบล็อกอิน และที่ฝากเว็บ พอคุณเห็นห้าส่วนนี้ในเว็บหนึ่งแล้ว คุณจะเริ่มเห็นมันในทุกเว็บที่ใช้

ส่วนประกอบห้าส่วนของเว็บแอป

ส่วนนี้คือใจความเชิงหลักการของบท ขออ่านช้า ๆ ทีละส่วน แต่ละส่วนมีนิยาม มีวิธีทำงาน มีกฎ และมีวิธีที่คนทำกันจริงในทางปฏิบัติ

frontend หรือ หน้าบ้าน นิยาม คือทุกอย่างที่คุณเห็นและกดได้บนหน้าจอ ตัวหนังสือ ปุ่ม รูป ช่องกรอก สีสันหน้าตา ทำงานยังไง หน้าบ้านทำหน้าที่แสดงผลและรับการกดจากผู้ใช้ พอคุณกดปุ่ม หน้าบ้านจะส่งเรื่องต่อไปให้หลังบ้านจัดการ กฎ หน้าบ้านดูแลแค่หน้าตาและการโต้ตอบ มันไม่ใช่ที่ที่ข้อมูลจริงถูกเก็บ ในทางปฏิบัติ หน้าบ้านสร้างจากภาษาเว็บพื้นฐานสามตัวที่ทำงานคู่กัน HTML คือโครงและเนื้อหาของหน้า ว่าหัวข้อ ย่อหน้า ปุ่ม รูป อยู่ตรงไหน CSS คือหน้าตาและสไตล์ ทั้งสี ขนาด ฟอนต์ ระยะห่าง และการจัดวาง ส่วน JavaScript คือความเคลื่อนไหวและการโต้ตอบ เช่นกดแล้วเมนูเปิด หรือข้อมูลอัปเดตโดยไม่ต้องโหลดหน้าใหม่ พอเว็บซับซ้อนขึ้น คนไม่เขียนสามอย่างนี้เองแบบดิบ ๆ แต่ใช้ชุดเครื่องมือสำเร็จที่เรียกว่า framework ที่ช่วยให้สร้างหน้าเว็บได้เป็นระเบียบและเร็วขึ้น ตัวที่นิยมที่สุดคือ React ส่วน Next.js คือ React รุ่นที่มาพร้อมของครบสำหรับทำเว็บจริงจัง ซึ่งเว็บ AI ภาษาคนก็ใช้ตัวนี้ และยังมี Vue เป็นอีกตัวที่คนใช้เยอะ ตอน vibe code ส่วนใหญ่ AI จะเลือกและตั้งค่าชุดนี้ให้เอง แต่พอคุณรู้ว่าแต่ละตัวคืออะไร เวลามันบอกว่ากำลังแก้ CSS หรือเพิ่ม component ใน React คุณจะตามทันและสั่งได้ตรงขึ้น

backend หรือ หลังบ้าน นิยาม คือตรรกะที่ทำงานอยู่เบื้องหลัง เมื่อคุณกดอะไรสักอย่าง ทำงานยังไง พอหน้าบ้านส่งเรื่องมา หลังบ้านเป็นคนคิดและตัดสินใจ เช่น ต้องเช็คอะไรก่อนไหม ต้องไปหยิบหรือบันทึกข้อมูลตรงไหน แล้วส่งผลกลับไปให้หน้าบ้านแสดง กฎ หลังบ้านคือสมองที่ทำงาน ผู้ใช้มองไม่เห็นมันโดยตรง แต่มันคือที่ที่ของสำคัญเกิดขึ้น ในทางปฏิบัติ หลังบ้านเขียนด้วยภาษาโปรแกรมและ framework ที่นิยม เช่น JavaScript บน Node.js หรือภาษา Python แต่สำหรับคนที่สร้างของกับ AI ทางที่นิยมและง่ายที่สุดคือไม่สร้างหลังบ้านเองจากศูนย์ แต่เช่าใช้บริการสำเร็จที่เรียกว่า Backend as a Service เช่น Supabase หรือ Firebase ซึ่งให้หลังบ้าน ที่เก็บข้อมูล และระบบล็อกอิน มาพร้อมในที่เดียว นี่คือเหตุผลที่คนเขียนโค้ดไม่เป็นก็มีหลังบ้านที่ดีได้

database หรือ ที่เก็บข้อมูล นิยาม คือที่เก็บข้อมูลแบบถาวร ข้อมูลที่อยู่ในนี้จะอยู่ต่อไปแม้คุณรีเฟรชหน้าหรือปิดเปิดเครื่อง ทำงานยังไง เมื่อหลังบ้านต้องการบันทึกหรือหยิบข้อมูล มันจะคุยกับที่เก็บข้อมูล เช่น บันทึกโพสต์ใหม่ หรือดึงรายการที่คุณเคยเซฟไว้ กฎ ข้อมูลจริงอยู่ที่นี่ ไม่ได้อยู่บนหน้าจอ จุดนี้สำคัญมากจนต้องแยกพูดต่างหากข้างล่าง ในทางปฏิบัติ ที่เก็บข้อมูลมีสองตระกูลใหญ่ แบบตารางที่เรียกว่า SQL เช่น PostgreSQL หรือ MySQL ซึ่งเก็บข้อมูลเป็นตารางแถวคอลัมน์ชัดเจน กับแบบเอกสารที่เรียกว่า NoSQL เช่น MongoDB หรือ Firestore ที่ยืดหยุ่นกว่า สำหรับเว็บทั่วไป ฐานข้อมูลแบบตารางอย่าง PostgreSQL เป็นตัวเลือกมาตรฐานที่ปลอดภัย ซึ่ง Supabase ก็ใช้ตัวนี้ และเกือบทุกครั้งคุณจะเช่าฐานข้อมูลสำเร็จที่มีคนดูแลให้ ไม่ใช่ติดตั้งรันเอง

auth หรือ ระบบล็อกอิน ย่อมาจาก authentication นิยาม คือระบบที่ทำให้แอปรู้ว่าคุณเป็นใคร และมีสิทธิ์เห็นอะไรได้บ้าง ทำงานยังไง ตอนสมัคร แอปสร้างบันทึกตัวตนของคุณขึ้นมาหนึ่งชุด ตอนล็อกอิน แอปพิสูจน์ว่าเป็นคุณจริง จากนั้นแอปจะพกป้ายเล็ก ๆ ที่บอกว่า นี่คือผู้ใช้คนนี้ ติดตัวคำขอของคุณไปด้วย เพื่อให้หลังบ้านส่งข้อมูลของคุณกลับมา ไม่ใช่ของคนอื่น กฎ ถ้าระบบล็อกอินพลาด คนหนึ่งอาจเห็นข้อมูลของอีกคนได้ นี่คือสาเหตุที่ auth เป็นหนึ่งในเขตที่อันตรายที่สุดเวลาแก้ เรื่องนี้จะพูดเต็ม ๆ ในบทเรื่องเขตอันตราย ในทางปฏิบัติ วิธีล็อกอินที่คนใช้จริงมีหลายแบบ ที่พบบ่อยคืออีเมลกับรหัสผ่านแบบดั้งเดิม การล็อกอินด้วยบัญชีอื่นเช่นปุ่ม เข้าสู่ระบบด้วย Google หรือ Apple ซึ่งผู้ใช้ไม่ต้องจำรหัสใหม่และคุณไม่ต้องเก็บรหัสผ่านเอง และแบบ OTP หรือ magic link คือส่งรหัสไปที่เบอร์โทรหรืออีเมลให้กดยืนยันโดยไม่ต้องมีรหัสผ่าน จะเลือกแบบไหนขึ้นกับผู้ใช้ของคุณ ถ้าอยากให้สมัครง่ายที่สุดปุ่ม Google มักดีที่สุด ถ้ากลุ่มผู้ใช้ผูกกับเบอร์โทร OTP ก็เหมาะ และในทางปฏิบัติคุณแทบไม่ต้องสร้างระบบล็อกอินเอง เพราะบริการอย่าง Supabase Auth, Firebase Auth, Clerk หรือ Auth0 มีวิธีพวกนี้ให้พร้อมใช้ เว็บ AI ภาษาคนเองก็ใช้อีเมลกับปุ่ม Google ผ่าน Supabase

hosting หรือ ที่ฝากเว็บ นิยาม คือคอมพิวเตอร์ที่เปิดอยู่ตลอดเวลาบนอินเทอร์เน็ต ทำหน้าที่รันทั้งหมดนี้ให้คนอื่นเข้าถึงได้ ทำงานยังไง เครื่องคุณปิดได้ แต่เว็บต้องเปิดให้คนทั้งโลกเข้า 24 ชั่วโมง ที่ฝากเว็บจึงเป็นเครื่องที่เปิดค้างไว้ตลอด คอยรันหน้าบ้าน หลังบ้าน และเชื่อมกับที่เก็บข้อมูล กฎ คำว่า server หรือ cloud ที่ได้ยินบ่อย ๆ จริง ๆ ก็คือคอมพิวเตอร์เครื่องอื่นที่เปิดตลอดแบบนี้ ไม่มีอะไรลึกลับ ในทางปฏิบัติ มีจุดที่คนสับสนบ่อยคือ ที่ฝากเว็บ หรือ hosting กับชื่อโดเมน หรือ domain เป็นคนละอย่างกัน ที่ฝากเว็บคือเครื่องที่รันเว็บคุณ ส่วนโดเมนคือชื่อที่อยู่ที่คนพิมพ์เข้ามาเช่น aipasakon.com ซึ่งทำหน้าที่ชี้มาที่ที่ฝากเว็บอีกที ปกติคุณเช่าที่ฝากเว็บจากที่หนึ่ง และซื้อชื่อโดเมนจากอีกที่หนึ่งที่เรียกว่า registrar เช่น Namecheap, GoDaddy หรือ Hostinger แล้วตั้งค่าให้โดเมนชี้มาที่ที่ฝากเว็บ ส่วน host ยอดนิยมสำหรับเว็บที่สร้างกับ AI คือ Netlify และ Vercel เพราะต่อกับ GitHub แล้วขึ้นเว็บให้อัตโนมัติ มีแพ็กเกจฟรีสำหรับเว็บเล็ก จะเลือก host ตัวไหนให้ดูจากว่าเว็บคุณเป็นแบบไหนและคาดว่าคนจะใช้เยอะแค่ไหน เว็บเล็กถึงกลางที่เน้นหน้าบ้าน Netlify หรือ Vercel ก็เหลือเฟือ ถ้ามีงานหลังบ้านหนักหรือทราฟฟิกสูงมากค่อยขยับไปตัวที่รองรับได้มากขึ้น เว็บ AI ภาษาคนใช้ Netlify เป็นที่ฝากเว็บ ซื้อโดเมน aipasakon.com แยกต่างหากแล้วชี้มาที่ Netlify ส่วนหลังบ้านกับข้อมูลอยู่ที่ Supabase

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

ตามรอยหนึ่งการกด ห้าส่วนทำงานต่อกันยังไง

รู้จักทีละส่วนแล้ว ทีนี้มาดูว่ามันร้อยต่อกันยังไงในงานจริง เพราะของพวกนี้จะชัดที่สุดเมื่อเห็นมันส่งงานกันเป็นทอด สมมติคุณกดปุ่มบันทึก ที่เอาไว้เซฟบุ๊กมาร์ก หนึ่งครั้ง นี่คือสิ่งที่เกิดขึ้นทีละขั้น

1. คุณกดปุ่มบนหน้าจอ นี่คือ หน้าบ้าน รับการกดของคุณ
2. หน้าบ้านส่งเรื่องไปให้ หลังบ้าน ว่ามีคนขอบันทึกบุ๊กมาร์กนะ
3. หลังบ้านเช็คกับ ระบบล็อกอิน ก่อนว่า คนที่ขอนี่ล็อกอินอยู่จริงไหม เป็นใคร
4. พอรู้ว่าเป็นคุณ หลังบ้านสั่งบันทึกบุ๊กมาร์กลงใน ที่เก็บข้อมูล โดยผูกไว้ว่าเป็นของคุณ
5. ที่เก็บข้อมูลยืนยันว่าบันทึกแล้ว หลังบ้านจึงบอกหน้าบ้าน แล้วหน้าบ้านก็แสดงคำว่า บันทึกแล้ว ให้คุณเห็น

และทั้งห้าขั้นนี้เกิดขึ้นบนเครื่องที่เป็น ที่ฝากเว็บ ซึ่งเปิดรันอยู่ตลอด สังเกตว่าการกดปุ่มเดียวแตะครบทั้งห้าส่วน นี่คือเหตุผลว่าทำไมการเข้าใจห้าส่วนนี้ถึงทำให้คุณเห็นภาพทั้งเว็บได้จริง ไม่ใช่แค่ท่องจำชื่อ

แล้วมันช่วยคุณตอนสร้างของจริงยังไง

พอมีแผนที่ห้าส่วนนี้ในหัว สองอย่างจะเปลี่ยนไปทันที

อย่างแรก คุณชี้สั่ง AI ได้ถูกที่ แทนที่จะบอกว่า แก้ตรงนี้ที คุณบอกได้ว่า ปัญหานี้น่าจะอยู่ที่หลังบ้าน หรือ ขอแก้หน้าตาปุ่มที่หน้าบ้าน ซึ่งทำให้ AI ทำงานแม่นขึ้นมาก เรื่องการชี้ให้ตรงจุดนี้มีบทของมันเองอยู่ในภาคต่อไป

อย่างที่สอง คุณดูออกว่าอะไรเสี่ยง การแก้หน้าตาที่หน้าบ้านมักไม่อันตราย แต่การแตะระบบล็อกอินหรือโครงสร้างที่เก็บข้อมูลคือเขตที่ต้องระวังเป็นพิเศษ เพราะพลาดแล้วกระทบข้อมูลของคนจริง

และข้อสรุปเชิงปฏิบัติที่สำคัญที่สุดของบทนี้คือ คนสร้างของกับ AI เกือบทั้งหมดไม่ได้สร้างห้าส่วนนี้เองจากศูนย์ แต่ประกอบจากบริการสำเร็จที่คนอื่นดูแลให้ หลังบ้านกับที่เก็บข้อมูลกับระบบล็อกอินมักมาจากที่เดียวอย่าง Supabase หรือ Firebase ที่ฝากเว็บมาจาก Netlify หรือ Vercel ส่วนโดเมนซื้อจาก registrar อีกที แปลว่าเว็บของคุณจริง ๆ คือหลายบริการมาต่อกัน ไม่ใช่ก้อนเดียว เรื่องการเลือกเช่าแทนสร้างเองนี้สำคัญมากจนมีบทปิดท้ายภาคของมันโดยเฉพาะ

ภาพช่วยจำ

ตอนนี้คุณเข้าใจของจริงแล้ว ขอเติมภาพหนึ่งไว้ช่วยจำ เว็บแอปเหมือนร้านอาหารหนึ่งร้าน หน้าบ้านคือห้องอาหารและเมนูที่ลูกค้าเห็น หลังบ้านคือครัวที่ลงมือทำ ที่เก็บข้อมูลคือห้องสต๊อกที่เก็บของไว้ข้ามวัน ระบบล็อกอินคือพนักงานต้อนรับที่เช็คการจองแล้วพาไปนั่งโต๊ะของคุณ ส่วนที่ฝากเว็บคือตัวอาคารที่เช่ามาพร้อมไฟพร้อมน้ำให้ทุกอย่างเปิดทำงานได้

จุดที่การเปรียบเทียบนี้ใช้ไม่ได้ คือในร้านอาหารจริง ห้องแต่ละห้องแยกกันทางกายภาพ แต่ในซอฟต์แวร์ ห้องเหล่านี้รันอยู่บนเครื่องเดียวกันก็ได้ การแบ่งเป็นห้องเป็นการแบ่งตามหน้าที่ ไม่ใช่ตามที่ตั้งจริง ถึงตรงนี้ ต่อให้ลืมภาพร้านอาหารไป คุณก็ยังบอกได้ว่าห้าส่วนคืออะไรและส่งงานต่อกันยังไง

💡 ใจความสำคัญ: เว็บแอปไม่ใช่ก้อนวิเศษ มันคือห้าส่วนที่ส่งงานต่อกัน หน้าบ้านแสดงผล หลังบ้านคิด ที่เก็บข้อมูลจำ ระบบล็อกอินรู้ว่าคุณเป็นใคร และที่ฝากเว็บรันทุกอย่าง และในทางปฏิบัติ คุณไม่ต้องสร้างเองทุกส่วน แต่ประกอบจากบริการสำเร็จมาต่อกัน พอเห็นแผนที่นี้ คุณก็เลิกเดา แล้วเริ่มชี้สั่งได้

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

แหล่งอ้างอิง

• https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works