สร้างระบบแอดมินสำหรับ EXFO Tester ด้วย FastAPI และ Alpine.js แบบเบาและมีประสิทธิภาพ

ในโพสต์นี้ ผมจะพาคุณสร้างเว็บแอปพลิเคชันเบา ๆ ที่เชื่อมต่อกับ EXFO Tester ผ่าน API, มีระบบล็อกอิน และแสดงผลการทดสอบ โดยใช้ FastAPI และ Alpine.js

ทำไมต้องใช้ FastAPI + Alpine.js?

FastAPI เป็นเฟรมเวิร์กเว็บสมัยใหม่ รองรับ async ใช้งานง่ายและเร็ว เหมาะสำหรับสร้าง API
Alpine.js เป็น JavaScript แบบเบา ใช้เพิ่มฟังก์ชันให้ HTML โดยไม่ต้องโหลด React/Vue
ทั้งคู่เหมาะสำหรับแอปภายในองค์กร แผงควบคุม หรือโปรเจกต์ที่ต้องการความเร็วและเรียบง่าย

ฟีเจอร์หลักของโปรเจกต์นี้

ระบบล็อกอินด้วยเซสชัน (username + password)
ปกป้อง API ด้วยการยืนยันตัวตน
HTML หน้าเดียวที่โหลดข้อมูลจาก API หลังล็อกอิน
ตัวอย่างโค้ดการเชื่อมต่อกับ EXFO API (mock)

เทคโนโลยีที่ใช้

Backend: FastAPI
Frontend: HTML + TailwindCSS + Alpine.js
Authentication: Session (cookie-based)
API: mock ข้อมูลการทดสอบจาก EXFO

คำศัพท์พื้นฐานของ Fiber Optic

OLT (Optical Line Terminal): อุปกรณ์กลางจากผู้ให้บริการที่ส่งสัญญาณไปยัง ONU
ONU/ONT: อุปกรณ์ที่บ้านลูกค้า รับสัญญาณจาก OLT
PON (Passive Optical Network): เครือข่ายใยแก้วนำแสงแบบไม่ใช้พลังงานกลางทาง
GPON/XGS-PON: มาตรฐานการส่งข้อมูล (GPON = 2.5Gbps, XGS = 10Gbps symmetric)
dBm: หน่วยวัดกำลังของแสงในใยแก้วนำแสง

วิธีตั้งค่า EXFO PON Tester (พื้นฐาน)

1.เชื่อมต่อสายไฟเบอร์ เข้ากับพอร์ต ONT ของเครื่อง EXFO
2.เลือกโหมด PON: GPON / XGS-PON หรือ Dual Mode
3.เริ่มทดสอบกำลังสัญญาณ เพื่อดูว่าระดับแสงที่ได้รับอยู่ในเกณฑ์ที่ยอมรับได้หรือไม่
4.ตรวจสอบผล: ถ้าอยู่ในช่วง –8 dBm ถึง –27 dBm ถือว่า “ผ่าน”
5.บันทึกหรือส่งออกผลการทดสอบ ผ่าน USB หรือ API

แผนผังการติดตั้งระบบ (Mermaid.js)

graph TD
    A["EXFO Tester"] --> B["FastAPI Server"]
    B --> C["Session Auth API"]
    B --> D["Test Results API"]
    D --> E["MongoDB (optional)"]
    B --> F["Static HTML + Alpine.js"]
    F --> G["User Browser"]
    G -->|login| C
    G -->|view data| D

แผนผังการเชื่อมต่อ EXFO กับ ONU (Mermaid.js)

graph LR
    Start["เริ่มต้น"] --> Splitter["เชื่อมต่อ Drop Fiber กับพอร์ต ONT ของ EXFO"]
    Splitter --> InlineTest["(ถ้าต้องการ) เชื่อมต่อ ONU เข้ากับพอร์ต PON"]
    InlineTest --> Mode["เลือกโหมด PON: GPON / XGS-PON"]
    Mode --> PowerTest["ทดสอบ Optical Power"]
    PowerTest --> Result["ดูค่ากำลังสัญญาณ: OLT RX / ONT TX"]
    Result --> Decision{"อยู่ในเกณฑ์หรือไม่?"}
    Decision -- Yes --> Save["บันทึกผล / ส่งออก"]
    Decision -- No --> Adjust["ปรับปรุงสายหรือพอร์ตแล้วทดสอบใหม่"]
    Save --> Done["เสร็จสิ้น"]
    Adjust --> PowerTest

โค้ดฝั่ง Backend (FastAPI)

pip install fastapi uvicorn python-multipart jinja2

# main.py
...
@app.post("/login")
def login(request: Request, username: str = Form(...), password: str = Form(...)):
    if username in users and users[username]["password"] == password:
        request.session["user"] = username
        return RedirectResponse("/", status_code=303)
    return RedirectResponse("/?error=1", status_code=303)
...

หน้า HTML ด้วย Alpine.js (`templates/index.html`)

<template x-if="!loggedIn">
  <form method="POST" action="/login">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

<template x-if="loggedIn">
  <div>
    <h2>สวัสดี <span x-text="username"></span></h2>
    <ul>
      <template x-for="item in testResults">
        <li>
          <span x-text="item.onu"></span> - <span x-text="item.status"></span>
        </li>
      </template>
    </ul>
  </div>
</template>