G06 Config Map

เว็บ HTML/CSS/JavaScript สำหรับดู topology, สายและ Console, ผลที่ต้องเห็น และคัดลอกคอนฟิกทีละ BLOCK มีสองชุด:

• C9300 · HSRP: สคริปต์และผัง Rack 7 ตุลาคม 2026
• C9200L · VRRP: สคริปต์และผัง Rack 8 ตุลาคม 2026

สถานะบนเว็บมาจากหมายเหตุในสคริปต์ ไม่ได้อ่านสถานะเครื่องจริงแบบสด คำว่า “ผ่านบน Rack” อ้างถึงการทดสอบของชุดนั้น ส่วน WAN, GRE, NAT และค่าที่ต้องกรอกยังต้องตรวจตาม BLOCK

ชื่อบนภาพ หัวข้อเครื่อง และคำสั่ง hostname ที่ Copy ใช้ตามใบงาน: G06-HQ-CE01, G06-HQ-CE02, G06-HQ-MLS01, G06-HQ-MLS02, G06-BR-R01, G06-BR-SW01 หน้ารายละเอียดยังแสดงชื่อย่อไว้ และ URL เดิม เช่น #vrrp/CE01 ยังใช้ได้

build.py แปลงเฉพาะคำสั่ง hostname ในข้อมูลเว็บให้อัตโนมัติเมื่อสร้างใหม่ ไฟล์ TXT ต้นฉบับคงเดิม การปรับเว็บไม่ได้เปลี่ยนหรือยืนยัน Hostname ของอุปกรณ์ Rack

เปิดในเครื่อง

หน้า ตัวอย่าง อยู่ที่ examples.html และเปิดได้จากปุ่ม ตัวอย่าง ด้านบนของ Config Map คัดเอกสารข้อสอบต้นฉบับครบ 25 หน้าเป็น SVG เพื่อรักษาหน้าตา ตาราง แผนภาพ ฟอนต์ไทย และคำสั่งตาม PDF โดยมีคำว่า “ตัวอย่าง” บนสุด

ถ้าจะเพิ่มภาพผลการทำงานในโค้ด ให้แก้ examples.html โดยตรง ค้นหา เพิ่มภาพของคุณหลังหน้า ของหน้าที่ต้องการ แล้วเพิ่ม <figure class="evidence-figure"> ตามตัวอย่างใน comment เก็บรูปใน assets/my-evidence/ และแก้ src กับคำอธิบายภาพของคุณเอง หน้านี้ไม่ได้เติมผลทดสอบหรือรูปหลักฐานให้อัตโนมัติ และไม่ได้ใช้ build.py สร้างใหม่

เปิด Terminal ที่โฟลเดอร์ Lab-Exam แล้วรัน:

python3 -m http.server 4180 --bind 127.0.0.1 --directory g06-config-site

เปิด ภาพรวม, HSRP / MLS01 หรือ VRRP / MLS01

หยุด server ด้วย Ctrl-C หรือใช้รายการ g06-config-site ใน .claude/launch.json ที่มีอยู่แล้ว

อัปเดตข้อมูลหลังแก้สคริปต์

ไฟล์ต้นฉบับ:

ชุด	แหล่งคำสั่ง
HSRP	G06_Device_Scripts/{CE01,CE02,MLS01,MLS02,R01,SW01}.txt
VRRP	G06_Device_Scripts/C9200L-VRRP/{CE01,CE02,MLS01,MLS02,R01,SW01}.txt

รันจาก Lab-Exam:

python3 g06-config-site/build.py

หรือรันจากโฟลเดอร์เว็บ:

cd g06-config-site
python3 build.py

จากนั้น:

1. ตรวจว่ารายงานมีครบ 6 เครื่องของทั้ง hsrp และ vrrp
2. เปลี่ยนค่า ?v= ทุกจุดใน index.html เป็นเลขเวอร์ชันใหม่เดียวกัน เช่น ?v=20261008223000 รวม CSS และ JavaScript ทุกไฟล์ เพื่อให้ browser โหลดไฟล์ใหม่
3. ถ้าเปลี่ยนสาย, พอร์ต, Console หรือผลที่ต้องเห็น ให้แก้ data/devices.js ด้วย เพราะไฟล์นี้เขียนมือ
4. เปิดเว็บ ตรวจทั้งสองชุด และกด Copy เพื่อตรวจคำสั่งก่อนนำไปวาง
5. ก่อน deploy ให้ส่ง data/configs.js ที่สร้างใหม่และ index.html ที่เปลี่ยนเวอร์ชันไปด้วย

data/configs.js เป็นไฟล์สร้างอัตโนมัติ ให้แก้คำสั่งที่ TXT แล้วสร้างใหม่ ส่วนขั้นตอนนี้เป็นการเตรียมข้อมูลในเครื่อง เว็บที่ deploy ใช้ไฟล์ที่สร้างเสร็จแล้ว

สคริปต์ไม่มีบรรทัด SSH key ของผู้ช่วยแล้ว (ทีมไม่ได้ใช้) ถ้ามี key-hash หลุดเข้ามา ตัวสร้างจะแทนด้วย <SSH_PUBLIC_KEY_HASH> และจะหยุดถ้าพบบรรทัดรหัส secret ที่ไม่มี placeholder

ใช้ปุ่ม Copy

• เปิดผ่าน localhost หรือ HTTPS และคลิกปุ่ม Copy โดยตรง
• ข้อความเปลี่ยนเป็น Copied ✓ เมื่อคัดลอกสำเร็จ และ BLOCK จะมีเครื่องหมาย ✓ Copy แล้ว
• เมื่อ Copy ครบทุก BLOCK ของอุปกรณ์ รวมส่วนที่พับไว้ กรอบอุปกรณ์ในภาพจะเป็นสีเขียว นับการคัดลอกคำสั่งเท่านั้น ผลบน Router ต้องตรวจตามคำสั่งตรวจของแต่ละ BLOCK
• โหมดส่วนตัวเก็บเครื่องหมายใน localStorage แยกตามชุด HSRP/VRRP และอุปกรณ์ รีเฟรชหรือเปิดใหม่ในเบราว์เซอร์เดิมยังอยู่ ตราบใดที่ไม่ล้างข้อมูลเว็บไซต์; ข้อมูลที่ localhost และ Vercel แยกกัน
• โหมด Templateเก็บเครื่องหมายใน Supabase ทุกคนที่เลือก Template ชื่อเดียวกันเห็นสถานะร่วมกัน ทั้งสองโหมดนับเฉพาะ BLOCK ที่คำสั่งตรงกับที่ Copy ล่าสุด เมื่อแก้พอร์ตจะต้อง Copy BLOCK ที่เปลี่ยนอีกครั้ง
• ปุ่มเล็ก ยกเลิก ✓ ใต้ Copy ล้างเฉพาะ BLOCK นั้น และบันทึกให้คนที่ใช้ Template เดียวกันเห็นด้วย
• ปุ่ม ล้างเครื่องหมาย Copy ล้างเฉพาะเครื่องและชุดที่เปิดอยู่
• ข้อความที่คัดลอกเป็นคำสั่งของ BLOCK นั้น รวมย่อหน้าใหม่และช่องว่างนำหน้าคำสั่งย่อย
• ค่าที่อยู่ใน <...> ต้องเติมก่อนวาง เช่น รหัส, <WAN_PORT> และ <DB_PORT>
• คำสั่งแต่ละ BLOCK ต้องวางตามลำดับแล้วรอ prompt ตรวจผลให้ครบ การทดสอบ Copy ในเว็บไม่ใช่การทดสอบคำสั่งบนอุปกรณ์
• เว็บเริ่มเป็น Light แม้ระบบใช้ Dark; กดปุ่ม Dark/Light ด้านบนเพื่อสลับ เว็บจำโหมดที่เลือกไว้เมื่อเปิดครั้งถัดไป

ช่องแผงและรูปคอม

• เว็บแปลงรหัสแผงเป็นคำอ่านง่าย: T05 → แถวบน ช่อง 5, B03 → แถวล่าง ช่อง 3, P02 → ช่อง 2 (ข้อมูลใน data/devices.js ยังเขียนแบบสั้นเหมือนเดิม)
• หน้าเครื่องมี รูปแผงเสียบสาย 24 ช่องต่อแถว: ช่องทึบ = ช่องของเครื่องนี้, ช่องขอบสี = ปลายสาย, เส้นสี = สายแลน 1 เส้นที่ต้องเสียบระหว่างสองช่อง ส่วนเส้นประสั้นคือสายที่ไปคอม/PC (Console, PC Teller ฯลฯ) ใต้รูปมีรายการสีตรงกับเส้น
• ใต้ MLS และ SW01 ในภาพมีรูป PC/Server/ATM ทุกเครื่อง บอก VLAN, IP และช่องที่ต้องเสียบ (ข้อมูล PC อยู่ที่ HQ_HOSTS / BR_HOSTS ใน app.js)

วันจริง: แมพ rack ใหม่จากรูป

1. เลือกชุดตามรุ่นสวิตช์: C9300 → hsrp, C9200L → vrrp (แผงแถวเดียว P หรือสองแถว T/B ใช้ได้ทั้งสองชุด เว็บดูจากตัวอักษรช่องในข้อมูลเอง)
2. แก้ data/devices.js ของชุดนั้น: console และแถว cables = [พอร์ต, ช่องแผง, ปลายทาง "เครื่อง พอร์ต", ช่องปลายสาย, IP] ป้ายพอร์ตในภาพ topology อ่านจากตารางนี้
3. แก้ไฟล์ TXT: ชื่อ interface และ description แบบ T02 LAN1 <-> T15 MLS01 Gi1/0/1 | ... (ช่องเติมศูนย์ 2 หลัก)
4. python3 build.py → เปลี่ยน ?v= ใน index.html → node --test tests/*.test.cjs
5. tests/data-consistency.test.cjs ตรวจว่าสายสองฝั่งตรงกัน ช่องแผงไม่ซ้ำ พอร์ตมีในสคริปต์ และ description ระบุช่องถูก — ผ่านแล้วค่อย commit + push

ชื่อและสัตว์ประจำตัว (ใครทำเครื่องไหน)

• ช่อง ชื่อคุณ ด้านบน ใส่ชื่อเล่นได้ ถ้าเว้นว่างจะใช้ชื่อสัตว์แทน
• สัตว์มี 6 ตัว (แมว หมา แพนด้า เพนกวิน จิ้งจอก เต่า) แจกอัตโนมัติ ไม่สุ่ม คนที่เข้ามาทีหลังได้ตัวแรกที่ยังว่าง เบราว์เซอร์จำตัวเดิมไว้
• ในโหมด Template ใครเปิดเครื่องไหน ชื่อจะขึ้นในกล่องเครื่อง (แทนบรรทัดรุ่นเครื่อง ไม่ทับป้ายพอร์ต) ถ้าหลายคนจนไม่พอ จะเหลือรูปสัตว์ + จำนวนคน ชี้ค้างเพื่อดูชื่อเต็ม และแถบบนบอก "ออนไลน์ N คน" ถ้าเปิดคนละชุด (HSRP/VRRP) จะมีป้ายชุดต่อท้ายชื่อ
• ชุด HSRP/VRRP ไปพร้อมกันทั้ง Template: ใครกดเปลี่ยนชุด (หรือเปิดลิงก์ชุดอื่น) ทุกคนที่ออนไลน์จะสลับตาม พร้อมข้อความเด้งว่าใครเปลี่ยน คนที่เข้ามาทีหลังจะได้ชุดล่าสุดของทีมเอง (ยึดการเปลี่ยนครั้งล่าสุด)
• ใช้ Supabase Realtime Presence ไม่บันทึกลงฐานข้อมูล ปิดแท็บแล้วชื่อหายเอง
• ใส่รูปแทน emoji ได้ที่ ANIMALS[].img ใน app.js (เช่น avatars/cat.png) รูปจะขึ้นที่ช่องชื่อด้านบน ส่วนในกล่องเครื่องยังใช้ emoji

เปลี่ยน interface และดูประวัติ

• เปิดอุปกรณ์แล้วจิ้มชื่อพอร์ตในภาพหรือตาราง เช่น Gi0/0/0 ใส่เลขใหม่แล้วกด OK
• เปลี่ยนได้ทั้งพอร์ตเดี่ยว ช่วงพอร์ต และ <WAN_PORT> จำนวนพอร์ตในช่วงใหม่ต้องเท่าเดิม และต้องไม่ซ้ำพอร์ตอื่นที่ใช้งานในสคริปต์
• ภาพ ตาราง คำสั่ง และข้อความที่ Copy จะใช้พอร์ตใหม่ รวมข้อความอ้างถึงพอร์ตของเครื่องปลายทาง ส่วน IP และช่องแผง Rack ใช้ข้อมูลเดิม ต้องตรวจสายจริงให้ตรงกับพอร์ตที่เลือก
• โหมดส่วนตัวเก็บพอร์ตและประวัติใน localStorage เปิดแท็บใหม่ในเบราว์เซอร์เดิมยังอยู่ โหมด Templateเก็บใน Supabase และส่งพอร์ตล่าสุดกับประวัติให้คนที่เลือก Template เดียวกันใช้ร่วมกัน ทั้งสองแบบแยก HSRP/VRRP
• กด ประวัติเปลี่ยนพอร์ต เพื่อดูพอร์ตเดิม → พอร์ตใหม่ วันที่ เครื่อง และชื่อพอร์ตต้นฉบับ
• เว้นว่างในช่องแก้ไขเพื่อคืนพอร์ตนั้น หรือกด คืนค่าพอร์ตเดิม เพื่อคืนทุกพอร์ตของชุดที่เปิดอยู่ การคืนค่าจะเพิ่มรายการในประวัติ โดยประวัติเก่ายังคงอยู่
• ถ้าคำสั่งใน BLOCK เปลี่ยน เครื่องหมาย Copy เดิมของ BLOCK นั้นจะไม่ถูกนับ ต้อง Copy คำสั่งใหม่อีกครั้ง
• เป็นการปรับข้อความของเว็บ ไม่ได้ส่งคำสั่งไป Router และไม่แก้ data/configs.js หรือไฟล์ TXT ต้นฉบับ

ตรวจตัวแปลงพอร์ต ลิงก์ห้อง และยืนยันว่าคำสั่งต้นฉบับทั้ง 12 ชุดไม่เปลี่ยนเมื่อไม่มีค่าแก้ไข:

node --test tests/*.test.cjs

ตั้งค่า Supabase สำหรับ Template

เว็บยังอยู่บน Vercel เดิม Supabase เก็บเฉพาะเครื่องหมาย Copy พอร์ตที่แก้ และประวัติ ไม่มีคำสั่ง Router หรือรหัสผ่านในตาราง

1. สร้างโปรเจกต์แผน Free ใน Supabase
2. ที่ SQL Editor → New query วางทั้งหมดจาก supabase/setup.sql แล้วกด Run รันซ้ำได้เพื่อเพิ่มตารางประวัติหรืออัปเดตฟังก์ชัน
3. ที่ Authentication → Sign In / Providers → Anonymous เปิด Allow anonymous sign-ins แล้วกด Save สมาชิกทีมไม่ต้องสมัครบัญชีแยก
4. คัดลอก Project URL กับ Publishable key (ขึ้นต้น sb_publishable_) จาก Connect หรือ Settings → API Keys ใส่ supabase-config.js ห้ามใช้ Secret key, service_role หรือรหัสฐานข้อมูลในเว็บ
5. สำหรับระบบ Template ให้เปิด SQL Editor อีกครั้งแล้ว Run ทั้งหมดจาก supabase/templates.sql รันซ้ำได้และเก็บข้อมูลเดิมไว้
6. เปิดเว็บ กด + สร้าง Template แล้วตั้งชื่อ เช่น “แร็กทีม 1” ชื่อซ้ำไม่ได้ Template ใหม่เริ่มด้วยพอร์ต ประวัติ และเครื่องหมาย Copy ที่เห็นอยู่
7. ทุกคนเปิดเว็บแล้วเลือกชื่อเดียวกันในรายการ Template ก็เห็นและเปลี่ยนสถานะร่วมกันได้ กด ↻ เพื่อโหลดรายชื่อใหม่ ไม่ต้องใช้ลิงก์เชิญ
8. แต่ละ Template เก็บ HSRP และ VRRP แยกกัน และเก็บข้อมูลแยกจาก Template อื่น เลือก ส่วนตัว เมื่อต้องการใช้เฉพาะเบราว์เซอร์ตัวเอง

ทุกคนสร้าง Template ได้ และทุกคนที่เลือก Template นั้นเปลี่ยนพอร์ตและสถานะ Copy ร่วมกันได้ ปุ่ม Copy ลิงก์เป็นทางลัดเปิด Template เดิมกับอุปกรณ์ที่เลือกอยู่ ลิงก์ห้องเดิม ?room=...&key=... ยังเปิดข้อมูลเก่าได้; ห้องเดิมไม่ปรากฏในรายการ Template

ตารางเปิด RLS ให้เฉพาะสมาชิกอ่านและเปลี่ยนสถานะ ตารางประวัติแก้หรือลบจากเว็บไม่ได้ การเปลี่ยนพอร์ตทำผ่าน RPC ที่บันทึกค่าเก่ากับค่าใหม่ในรายการเดียวกัน การล้างเครื่องหมายใช้ signature = null เพื่อให้ Realtime ตรวจสิทธิ์สมาชิกได้

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

แผน Free ของ Supabase พักโปรเจกต์เมื่อไม่ใช้งานครบหนึ่งสัปดาห์ ต้องเปิดใช้งานอีกครั้งใน Dashboard ตาม ราคา Supabase

ทดสอบ SQL กับ PostgreSQL ผ่าน PGlite ในเครื่องได้ด้วย tests/supabase-rls.cjs (ต้องติดตั้ง @electric-sql/pglite ในโฟลเดอร์ทดสอบแยกก่อน) การทดสอบนี้ตรวจสมาชิก คนนอกห้อง ประวัติ และการคืนค่า ส่วนการเชื่อม Realtime จริงต้องตรวจกับโปรเจกต์ Supabase ที่ตั้งค่าแล้ว

Deploy บน Vercel

เว็บนี้เป็นเว็บสาธารณะ ใครมีลิงก์ก็เห็นคอนฟิก IP และแผนเครือข่ายได้ คำสั่งรหัสต้องเป็น placeholder และไม่ใส่รหัสจริง, hash ของรหัส หรือ key ของเครื่องลงไฟล์ที่เผยแพร่ ผู้ใช้ต้องเป็นผู้ deploy เองหรืออนุญาตก่อนเผยแพร่

Repository: poomiput/network-lab — ไฟล์เว็บอยู่ที่ราก repo (โฟลเดอร์ g06-config-site ในเครื่องคือ repo นี้)

1. สร้าง data/configs.js ในเครื่องและอัปเดต ?v= ก่อน แล้ว commit + push
2. บน Vercel เลือก Add New → Project แล้ว import poomiput/network-lab
3. ตั้งค่าตามนี้:

ตั้งค่า	ค่า
Root Directory	. (ค่าเริ่มต้น)
Framework Preset	Other
Build Command	เปิด Override แล้วเว้นว่าง
Output Directory	. หรือค่าเริ่มต้นสำหรับ Other ที่ไม่มีโฟลเดอร์ public
Install Command	เว้นว่าง; เว็บไม่มี package dependencies

4. ตรวจไฟล์ที่จะเผยแพร่และกด Deploy เมื่อพร้อมให้ข้อมูลเป็นสาธารณะ
5. เปิด URL ที่ได้แล้วทดสอบการสลับชุด, deep link /#hsrp/CE01 และ /#vrrp/MLS01, กับปุ่ม Copy อีกครั้งบน HTTPS

หลัง import แล้ว ทุกครั้งที่ push เข้า branch main Vercel จะ deploy ใหม่เอง

ไม่ต้องรัน build.py บน Vercel: ใช้ data/configs.js ที่สร้างและ commit มาก่อน เพราะไฟล์ต้นฉบับ ../G06_Device_Scripts อยู่นอก repo การตั้ง Other และเว้น Build Command ว่างเป็นวิธีที่ Vercel รองรับสำหรับเว็บ HTML/CSS/JS ตาม เอกสารการตั้ง Build และ Root Directory

โครงสร้าง

g06-config-site/
├── index.html       # หน้าหลักและเวอร์ชัน cache
├── style.css        # หน้าจอ desktop/mobile และ dark/light
├── app.js           # SVG, แสดงเครื่อง, URL hash และ Copy
├── interfaces.js    # แปลงชื่อพอร์ตในภาพและคำสั่ง
├── shared-progress.js # สมาชิกห้อง บันทึกสถานะ และ Realtime
├── supabase-config.js # Project URL + Publishable key สำหรับ browser
├── supabase/setup.sql # ตาราง RLS และ RPC สำหรับข้อมูลร่วมกัน
├── supabase/templates.sql # เพิ่มชื่อ Template รายการ และการเลือกใช้
├── build.py         # สร้างข้อมูลจาก TXT ในเครื่อง
└── data/
    ├── devices.js   # สาย, Console, รุ่น และผลที่ต้องเห็น
    └── configs.js   # สร้างอัตโนมัติ

เว็บนี้ใช้โฟลเดอร์ g06-config-site แยกจากเว็บเดิม