這支影片用最貼近實戰的方式，帶你從零打造「事件管理模組」。 我們先在後端用 FastAPI 做出三支核心介面： ➡️ POST /events 新增事件 ➡️ GET /events 讀取每台設備的最新事件 ➡️ WS /events/ws 進行即時推播。 前端則用 React 建立全域訂閱（Context），頁面載入先抓一次快照、之後靠 WebSocket 接收增量更新，側邊選單的「

在這支影片中我們示範如何在 React 專案中擴充 Sidebar 功能，讓登入帳號不只是顯示在側邊欄，而是可以點擊後跳出 Bootstrap Modal，直接修改使用者的個人資訊，包含帳號、姓名、Email 與密碼欄位。 並透過後端 API 完成更新，達到更直覺的操作體驗，這個方式也可以延伸應用到其他需要在前端快速編輯的場景，是實戰專案中非常常見的需求。

這支影片將帶你完整實作 React 設備地圖模組，透過 Leaflet 搭配 OpenStreetMap 建立互動式地圖環境，把每一台設備的位置以攝影機圖示標示在地圖上，使用者可以透過滑鼠移入查看設備的基本資訊，例如名稱、型別、狀態等，點擊設備後更能直接開啟即時影像視窗，快速掌握設備的現況。 同時我們也會示範如何讓地圖自動縮放到所有設備的分布範圍，確保不會漏掉任何一台，並且介紹如何根據設備的 Online 或 Offline 狀態使用不同顏色或圖示來區分，增強地圖的可讀性。 這個模組能讓系統不僅有文字與表格的管理功能，更結合了地理資訊的視覺化呈現，

在這集影片中，我會帶你一步一步完成 React Dashboard 首頁的開發，從串接後端 API 開始，抓取使用者、角色與設備的資料。 並在頁面上用統計卡片清楚顯示系統的核心指標，同時透過 ChartJS 建立可視化圖表，左邊用圓餅圖呈現設備狀態分佈，右邊用長條圖顯示各角色所管理的設備數，讓管理者能夠一眼掌握整體情況。 此外我們還會在首頁增加近期設備清單，依照修改時間排序顯示最新的更新狀況，包含名稱、狀態與最後修改時間。 使用者在打開後台的第一時間就能看到最重要的資訊，這是一個實用又專業的儀表板實作示範，幫助你把後端資料串接與前端視覺化結合起來，讓系統更完整、

這一集帶你把「Python Log 機制」裝進 FastAPI 專案，只加上一個中介層，就能把每一次 API 的請求與回應完整寫進每天一個新的日誌檔，你會看到請求送了什麼、回應回了什麼、花了幾毫秒。 同時會把 Swagger、Redoc、OpenAPI、favicon 這些網頁內容自動略過，日誌只留下真正的 API 往來資料，乾淨好讀、不被雜訊淹沒。