พิพิธภัณฑ์ที่จับต้องได้ · เปิดฟรี ไม่ต้องสมัคร

ห้องทดลองทั้ง 4 ห้อง

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

ROOM 01 · จากเล่ม 01 FRONTEND

สนามทดลองหน้าเว็บ

ประกอบหน้าเว็บด้วย HTML, CSS และ JavaScript แล้วดูผลทันที

อ่านบทที่ใช้ห้องนี้ →

LAB 01 — Frontend Construction Chamber

สนามทดลองหน้าเว็บ

IDLESimulation

หน้าเว็บจำลองนี้ทำงานในเบราว์เซอร์ของคุณ โค้ดด้านล่างคือโค้ดที่หน้าเว็บจริงจะใช้ เพื่อให้เห็นความสัมพันธ์ระหว่างภาพกับภาษา

ผลลัพธ์ · สิ่งที่ผู้ใช้เห็น

HTML5 ชิ้นบนหน้า
CSSกำลังตกแต่ง
JavaScriptปิดอยู่ · ไม่มีใครฟัง

เกิดอะไรขึ้น?

หน้าเว็บนี้สร้างจากสามภาษา เลือกแท็บด้านซ้ายเพื่อควบคุมทีละส่วน ลองเริ่มจาก ปิด CSS ในแท็บ CSS หรือเปิด เอกซเรย์ HTML เพื่อดูว่าทุกชิ้นบนหน้ามีชื่อเรียก

banpaeng.example

ร้านบ้านแป้ง เมนู · ติดต่อ

ขนมปังอบใหม่ทุกเช้า

แป้งหมักเอง อบด้วยเตาถ่าน ส่งถึงบ้าน

HTML บอกมีอะไรบ้าง

index.html · โค้ดที่ตรงกับหน้าจอตอนนี้

<body>
  <header>ร้านบ้านแป้ง · เมนู · ติดต่อ</header>
  <h1>ขนมปังอบใหม่ทุกเช้า</h1>
  <p>แป้งหมักเอง อบด้วยเตาถ่าน ส่งถึงบ้าน</p>
  <img src="bread.png" alt="ขนมปังก้อนกลม">
  <button id="order">สั่งขนมปัง</button>
</body>

ROOM 02 · จากเล่ม 02 BACKEND

ร้านกาแฟของเซิร์ฟเวอร์

สั่งกาแฟแล้วติดตาม Request กับ Response ทั้งตอนสำเร็จและล้มเหลว

อ่านบทที่ใช้ห้องนี้ →

LAB 02 — Request Processing Engine

ร้านกาแฟของเซิร์ฟเวอร์

IDLESimulation

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

สถานการณ์จำลอง · เลือกก่อนกดสั่ง

เซิร์ฟเวอร์ทำงานตามปกติ

coffee.example/order

Browser · ฝั่งลูกค้า

Server · coffee.example

IDLE · รอคำขอ

รับคำขอ Receiveรอ
ตรวจข้อมูล Validateรอ
เช็กสต็อก Check stockรอ
บันทึกและชงกาแฟ Save & brewรอ
ส่งคำตอบกลับ Respondรอ

สต็อกในร้าน · เบราว์เซอร์มองไม่เห็นส่วนนี้

ลาเต้6 แก้ว
อเมริกาโน่8 แก้ว
โกโก้4 แก้ว

Request · ร่างที่จะส่ง (เปลี่ยนตามฟอร์ม)

POST /api/orders HTTP/1.1
Host: coffee.example
Content-Type: application/json
Accept: application/json

{
  "drink": "latte",
  "qty": 1,
  "customerName": "มะลิ"
}

Response · รอ

// ยังไม่มี Response
// กด 'สั่งเลย' เพื่อส่ง Request

เกิดอะไรขึ้น?

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

ผลลัพธ์ 4 แบบ · ลองแล้ว 0/4

2xx
สำเร็จ
ได้สิ่งที่ขอ เช่น 201 Created
4xx
คำขอมีปัญหา
ฝั่งผู้ส่งต้องแก้คำขอ เช่น 400, 409
5xx
เซิร์ฟเวอร์มีปัญหา
ไม่ใช่ความผิดลูกค้า เช่น 500
ไม่มีรหัส
ไปไม่ถึง / ไม่มีคำตอบ
ปัญหาที่ทางเดิน ไม่มี Response

ROOM 03 · จากเล่ม 03 DATABASE

ลิ้นชักข้อมูล

เพิ่ม ค้นหา แก้ไข ลบ และเชื่อมตารางลูกค้ากับคำสั่งซื้อ

อ่านบทที่ใช้ห้องนี้ →

LAB 03 — Data Memory Vault

ลิ้นชักข้อมูล

IDLESimulation

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

SQL ที่โปรแกรมจริงจะส่งไปยังฐานข้อมูล

SELECT *
FROM customers;

เกิดอะไรขึ้น?

ฐานข้อมูลร้านกาแฟมีสองลิ้นชัก คือ customers เก็บลูกค้า และ orders เก็บคำสั่งซื้อ เลือกการกระทำด้านบน ตั้งแต่ Create ไปจนถึง Delete แล้วดูว่าตารางเปลี่ยนอย่างไร

ลิ้นชัก · TABLE

customers ลูกค้า

4 แถว

ตาราง customers: ลูกค้าของร้านกาแฟ กดชื่อเพื่อดูคำสั่งซื้อที่เชื่อมอยู่
id (Primary Key)	name	city
1		เชียงใหม่
2		กรุงเทพฯ
3		ขอนแก่น
4		ภูเก็ต

ลองดูกดชื่อลูกค้าในตารางบน เพื่อดูว่าคำสั่งซื้อแถวไหนในตารางล่างชี้กลับมาหาเขา

ลิ้นชัก · TABLE

orders คำสั่งซื้อ

6 แถว

ตาราง orders: คำสั่งซื้อ คอลัมน์ customer_id เป็น Foreign Key ที่ชี้ไปยัง customers.id
id (Primary Key)	item	total ฿
101	ลาเต้เย็น	65
102	อเมริกาโน่ร้อน	55
103	โกโก้ปั่น	70
104	ชาไทยเย็น	50
105	คาปูชิโน่	60
106	เอสเพรสโซ่	45

ใครมีสิทธิ์เขียนลงฐานข้อมูล?

เบราว์เซอร์ ปะทะ เซิร์ฟเวอร์

ลองแก้ราคาคำสั่งซื้อ #101 (ลาเต้เย็น 65 บาท) ด้วยสามเส้นทาง แล้วดูว่าคำขอถูกหยุดที่ไหน

ROOM 04 · จากเล่ม 04 WEBSITE ONLINE

เผยแพร่สู่โลก

พาเว็บไซต์จากเครื่องเดียวออกไปหาผู้ใช้หลายประเทศ

อ่านบทที่ใช้ห้องนี้ →

LAB 04 — Global Network Observatory

เผยแพร่สู่โลก

IDLESimulation

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

ไม่ปลอดภัยhttp://localhost:3000

ใครเปิดได้เปิดได้คนเดียว: ผู้พัฒนา

ขั้นที่ 0 · เว็บไซต์ยังอยู่บนเครื่องผู้พัฒนา

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

คำสั่งเปิดเว็บบนเครื่องตัวเอง

$ npm run dev
> พร้อมใช้งานที่ http://localhost:3000

ทดลองโหลด: เมื่อคนมาพร้อมกัน

Load & Capacity · ตัวเลขสมมติ

ตอนนี้ยังไม่มีใครนอกจากผู้พัฒนาเปิดเว็บได้ จึงยังไม่มีโหลดให้ทดลอง เผยแพร่ไปจนถึงขั้น Browser → Server ก่อน แล้วส่วนนี้จะเปิดให้ปรับจำนวนผู้ใช้