thu.htoo.zan / netdes
Case study · Computer Network Design & Management

NETDES.

I built one offline console that connects course concepts, Cisco IOS configuration, verification output and STP practice in the same place.

16lecture decks
12lab workflows
5main study modes
802.1Dport-role solver
Reason

Why I made it

The course material covered the same network from different angles. A lecture explained a rule, a lab turned it into commands, and the useful evidence often appeared later in a show command.

I wanted a revision tool where those parts stayed connected. Instead of keeping separate notes, command lists and quiz answers, NETDES puts the path from concept → configuration → verification in one page.

The current console is a single HTML file. It works offline and stores study progress in the browser.

Structure

How the console is organized

The interface follows the way I actually revise the course rather than the order of files on disk.

SlidesOriginal course material and references.
BlueprintHow the lecture topics depend on each other.
LabsObjectives, configs, checks and worked reasoning.
TrainerQuestions and generators for repeated practice.
ExamTimed review and the STP port-role solver.
The useful part is the connection between sections. A topic such as VLANs or STP is not only a definition. The console keeps the rule close to the command used to configure it and the output used to check it.
Lab pattern

Configuration is followed by a check

The lab workbench records the objective first, then the commands, then the verification commands. This keeps the configuration from becoming a list to memorize.

Example: VLAN access port

Configuration
vlan 10
 name STUDENTS
!
interface Fa0/1
 switchport mode access
 switchport access vlan 10
Verification
show vlan brief
show interfaces status
show interfaces fa0/1 switchport

Example taken from the VLAN/access-port lab workflow in NETDES.

That pattern repeats through the console: decide what should happen, configure it, then read the device output that confirms or contradicts the expectation.

STP

Turning STP rules into deterministic logic

The STP section was the part that could not stay as notes. I added an educational 802.1D port-role solver so I could enter a topology and work through the same decisions used in the course labs.

Choose the root bridgeThe switch with the lowest Bridge ID becomes root.
Choose a root port on each non-root switchCompare root path cost, then use the course tie-break order when costs match.
Choose a designated port for each segmentCompare the BPDU-style values advertised onto that segment.
Classify the remaining portsPorts that are neither root nor designated are shown as blocked.

The implementation compares path cost, Bridge IDs and port IDs. Root-path selection is repeated until no better candidate is found. The code itself describes this step as Bellman-Ford-style convergence.

Scope: this is a study model for STP election and port-role decisions. It is not a switch emulator and it does not try to reproduce every protocol timer or device behavior.
What changed

What the project forced me to understand

Reading that the “lowest Bridge ID wins” is easy. Implementing the full decision path exposed the details that are easy to skip when studying: what happens when path costs tie, which port ID is compared, and why a link is designated on one side but blocked on the other.

The same thing happened with configuration. Writing a command is only half the task. The lab pages made me keep the expected verification output close to the configuration, which is closer to how troubleshooting actually works.

NETDES is still a study console, but the part I value is the reasoning behind it: translating written network rules into repeatable decisions and checking those decisions against device output.

Current state

What I would improve next

I keep the public claims on this page to what can be checked in the current repository. The solver is present in index.html, and the lab content is visible in the console.

กรณีศึกษา · Computer Network Design & Management

NETDES.

ผมสร้างคอนโซลออฟไลน์หนึ่งหน้าเพื่อเชื่อม แนวคิดในวิชา การตั้งค่า Cisco IOS ผลลัพธ์สำหรับตรวจสอบ และการฝึก STP ไว้ในที่เดียว

16ชุดสไลด์
12เวิร์กโฟลว์แล็บ
5โหมดการเรียนหลัก
802.1Dตัวแก้ port role
เหตุผล

ทำไมผมถึงสร้างมัน

เนื้อหาในวิชาอธิบายเครือข่ายเดียวกันจากหลายมุม สไลด์อธิบายกฎ แล็บเปลี่ยนกฎนั้นเป็นคำสั่ง และหลักฐานที่ใช้ตรวจสอบมักอยู่ในผลของคำสั่ง show

ผมต้องการเครื่องมือทบทวนที่ส่วนเหล่านี้ยังเชื่อมกันอยู่ จึงรวมเส้นทาง แนวคิด → การตั้งค่า → การตรวจสอบ ไว้ในหน้าเดียว

คอนโซลปัจจุบันเป็น HTML ไฟล์เดียว ใช้งานออฟไลน์ได้ และบันทึกความคืบหน้าไว้ในเบราว์เซอร์

โครงสร้าง

คอนโซลถูกจัดอย่างไร

อินเทอร์เฟซเรียงตามวิธีที่ผมใช้ทบทวนจริง ไม่ได้เรียงตามชื่อไฟล์ของวิชา

Slidesเอกสารต้นฉบับของวิชา
Blueprintความสัมพันธ์ระหว่างหัวข้อ
Labsเป้าหมาย คอนฟิก การตรวจสอบ และเหตุผล
Trainerคำถามและตัวสร้างโจทย์เพื่อฝึกซ้ำ
Examการทบทวนจับเวลาและตัวแก้ STP
สิ่งสำคัญคือการเชื่อมระหว่างส่วนต่าง ๆ VLAN หรือ STP ไม่ได้จบแค่คำจำกัดความ กฎอยู่ใกล้คำสั่งที่ใช้ตั้งค่าและผลลัพธ์ที่ใช้ตรวจสอบ
รูปแบบแล็บ

ตั้งค่าแล้วต้องตรวจสอบ

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

ตัวอย่าง: VLAN access port

Configuration
vlan 10
 name STUDENTS
!
interface Fa0/1
 switchport mode access
 switchport access vlan 10
Verification
show vlan brief
show interfaces status
show interfaces fa0/1 switchport

ตัวอย่างจากเวิร์กโฟลว์แล็บ VLAN/access-port ใน NETDES

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

STP

เปลี่ยนกฎ STP ให้เป็นตรรกะที่ตัดสินได้แน่นอน

ส่วน STP เป็นส่วนที่ผมไม่อยากเก็บไว้เป็นโน้ตอย่างเดียว ผมจึงเพิ่มตัวแก้ port role แบบ 802.1D สำหรับการเรียน เพื่อใส่ topology และเดินตามลำดับการตัดสินใจแบบเดียวกับในแล็บ

เลือก Root Bridgeสวิตช์ที่มี Bridge ID ต่ำสุดเป็น root
เลือก Root Port ของสวิตช์ที่ไม่ใช่ rootเทียบ root path cost และใช้ลำดับ tie-break ของวิชาเมื่อค่าเท่ากัน
เลือก Designated Port ของแต่ละ segmentเทียบค่าที่โฆษณาออกมาคล้าย BPDU บน segment นั้น
จัดประเภทพอร์ตที่เหลือพอร์ตที่ไม่ใช่ root หรือ designated จะแสดงเป็น blocked

โค้ดเทียบ path cost, Bridge ID และ port ID การเลือกเส้นทางไป root จะทำซ้ำจนไม่มี candidate ที่ดีกว่า โดยในโค้ดเรียกขั้นตอนนี้ว่า Bellman-Ford-style convergence

ขอบเขต: ตัวแก้นี้เป็นโมเดลสำหรับเรียนเรื่องการเลือก STP และ port role ไม่ใช่ switch emulator และไม่ได้จำลอง timer หรือพฤติกรรมของอุปกรณ์ทุกอย่าง
สิ่งที่ได้

โปรเจกต์นี้บังคับให้ผมเข้าใจอะไรจริง ๆ

การอ่านว่า “Bridge ID ต่ำสุดชนะ” นั้นง่าย แต่เมื่อเขียนเป็นตรรกะจริง รายละเอียดที่มักถูกข้ามจะเห็นชัดขึ้น เช่น เมื่อ path cost เท่ากันต้องเทียบอะไรต่อ port ID ไหนมีผล และทำไมลิงก์หนึ่งจึงเป็น designated ฝั่งหนึ่งแต่ blocked อีกฝั่ง

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

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

สถานะปัจจุบัน

สิ่งที่ผมจะปรับต่อ

ข้อมูลบนหน้านี้อ้างอิงเฉพาะสิ่งที่ตรวจสอบได้จาก repository ปัจจุบัน ตัวแก้ STP อยู่ใน index.html และเนื้อหาแล็บเปิดดูได้ในคอนโซล

案例分析 · Computer Network Design & Management

NETDES.

我做了一个离线控制台,把课程概念、Cisco IOS 配置、验证输出和 STP 练习放在同一个地方。

16套课件
12个实验流程
5个主要学习模式
802.1D端口角色求解器
原因

为什么做这个工具

课程材料从不同角度描述同一张网络。课件解释规则,实验把规则变成命令,而真正用于确认结果的证据通常出现在后面的 show 命令输出里。

我想要一个能让这些部分保持联系的复习工具,所以把概念 → 配置 → 验证放到同一页。

目前整个控制台是一个 HTML 文件,可以离线使用,学习进度保存在浏览器本地。

结构

控制台如何组织

界面按我实际复习课程的方式组织,而不是按课程文件名排列。

Slides课程原始材料与参考内容
Blueprint各讲内容之间的依赖关系
Labs目标、配置、检查和推理过程
Trainer问题与生成器,用于重复练习
Exam计时复习和 STP 端口角色求解器
真正有用的是各部分之间的连接。 VLAN 或 STP 不只是定义。规则旁边就是配置命令和用于检查结果的输出。
实验模式

配置之后必须验证

实验页面先记录目标,再给出配置,最后列出验证命令。这样配置就不会变成单纯背诵的命令清单。

例子:VLAN access port

Configuration
vlan 10
 name STUDENTS
!
interface Fa0/1
 switchport mode access
 switchport access vlan 10
Verification
show vlan brief
show interfaces status
show interfaces fa0/1 switchport

例子来自 NETDES 的 VLAN/access-port 实验流程。

这种模式贯穿整个控制台:先判断应该发生什么,再配置,然后读取设备输出,确认结果是否符合预期。

STP

把 STP 规则变成确定的判断逻辑

STP 是我不想只保留成笔记的一部分。我加入了一个用于学习的 802.1D 端口角色求解器,可以输入拓扑,并按照课程实验里的判断顺序处理。

选择 Root BridgeBridge ID 最低的交换机成为 root。
为每台非 root 交换机选择 Root Port先比较 root path cost,相同时按课程中的 tie-break 顺序继续比较。
为每个 segment 选择 Designated Port比较该 segment 上交换机发送的 BPDU 类似值。
分类剩余端口既不是 root port 也不是 designated port 的端口显示为 blocked。

实现中会比较 path cost、Bridge ID 和 port ID。root path 的选择会反复更新,直到没有更好的候选值。代码注释把这一过程称为 Bellman-Ford-style convergence

范围:这是用于学习 STP 选举和端口角色判断的模型,不是交换机模拟器,也不会复现所有协议计时器或设备行为。
理解

这个项目迫使我真正弄清楚什么

读到“最低 Bridge ID 获胜”很简单,但把完整流程写成逻辑后,容易忽略的细节会变得明显:path cost 相同时下一步比较什么、哪个 port ID 参与判断,以及为什么同一条链路一侧是 designated,另一侧可能是 blocked。

配置也一样。输入命令只是任务的一半。实验页面让我把预期的验证输出放在配置旁边,这更接近实际排障时的思考方式。

NETDES 仍然是学习控制台,但我最重视的是背后的推理过程:把文字描述的网络规则转换成可重复的判断,再用设备输出来检查这些判断。

当前状态

下一步会改什么

这个页面只使用当前 repository 中可以直接检查的内容。STP 求解器在 index.html 中,实验内容也可以直接在控制台查看。