สร้างระบบแอดมินสำหรับ 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>
วิธีใช้งาน
1.รันแอป:
uvicorn main:app --reload
2.เข้าใช้งานที่ http://localhost:8000
3.ล็อกอินด้วย:
- Username:
admin
- Password:
1234
สรุป
ระบบนี้ช่วยให้คุณ:
- สร้าง Dashboard เพื่อดูผลทดสอบจาก EXFO
- ใช้งานได้เร็ว เบา ไม่ต้องโหลด framework หนัก
- เพิ่มฟีเจอร์ได้ภายหลัง เช่น MongoDB, การ Export, Multi-role
Get in Touch with us
Related Posts
- ทำไม Test-Driven Development (TDD) ถึงตอบโจทย์ธุรกิจยุคใหม่
- สร้างระบบ Continuous Delivery ให้ Django บน DigitalOcean ด้วย GitHub Actions และ Docker
- สร้างระบบแนะนำสินค้าในอีคอมเมิร์ซด้วย LangChain, Ollama และ Open-source Embedding แบบ Local
- คู่มือปี 2025: เปรียบเทียบเฟรมเวิร์กสร้างแอปมือถือยอดนิยม (Flutter, React Native, Expo, Ionic และอื่น ๆ)
- เข้าใจการใช้ `np.meshgrid()` ใน NumPy: ทำไมถึงจำเป็น และจะเกิดอะไรขึ้นถ้าสลับลำดับ?
- วิธีใช้ PyMeasure เพื่อควบคุมเครื่องมือวัดและทดลองในห้องแล็บโดยอัตโนมัติ
- ยกระดับแชทบอทของคุณด้วยบริการเชื่อมต่อ API กับระบบธุรกิจ
- เดา “สมการ” โดยไม่ต้องใช้คณิตศาสตร์: สำรวจความสัมพันธ์ระหว่างแมวกับนก
- วิธีสร้างโปรเจกต์ที่ทนทานต่อ AI: ไอเดียที่เน้นการปฏิสัมพันธ์ของมนุษย์
- สร้างห้องทดลองความปลอดภัยไซเบอร์ด้วย GNS3 + Wazuh + Docker ฝึก ตรวจจับ และป้องกันภัยคุกคามในระบบเดียว
- วิธีจำลองและฝึกฝนการตั้งค่าอุปกรณ์เครือข่ายด้วย GNS3
- LMS คืออะไร? และทำไมคุณควรรู้จัก Frappe LMS
- Agentic AI ในโรงงานอุตสาหกรรม: ระบบที่คิดเอง ปรับตัวเอง และทำงานได้อัตโนมัติ
- ควบคุมยานยนต์ไฟฟ้าได้อย่างชาญฉลาด ปลอดภัย และทันสมัย ด้วยระบบ Geo-Fencing และติดตามแบบเรียลไทม์
- วิธีเชื่อมต่อระบบ Single Sign-On (SSO) ด้วย Google OAuth ใน FastAPI
- สร้างแอปจองแท็กซี่ของคุณเองกับ Simplico: ปลอดภัย ขยายได้ และพร้อมเปิดตัวทันที
- วางระบบ Backend สำหรับสถานีชาร์จ EV ที่พร้อมขยายตัว — ออกแบบโดย Simplico
- วิธีจัดการราคาซับซ้อนสำหรับสินค้าสั่งทำพิเศษ (Made-to-Order) ใน Odoo
- วิธีสร้างระบบสั่งผลิตสินค้าเฉพาะลูกค้า (Made-to-Order) เพื่อเพิ่มยอดขายและความพึงพอใจ
- ปรับธุรกิจให้ฉลาดขึ้นด้วย Agentic AI อัตโนมัติเต็มรูปแบบ