雙大腦系統已通過驗收，今天開始建立瀏覽器能看見的管理頁面。
目前專案已包含 MCU 的 sketch/sketch.ino 與 MPU 的 python/main.py，今天開始使用 assets 資料夾，裡面的 HTML、CSS 與 JavaScript 會交給瀏覽器執行。
HTML 負責頁面結構，它不直接控制 D2，也不保存 ledState，頁面目前只需要證明瀏覽器可以顯示內容，後續再逐步加入狀態、外觀與事件。
將頁面檔案放在 assets 而不是 python，能明確區分伺服器端與瀏覽器端，Python 負責讓服務保持運行，HTML 則在使用者開啟頁面後由瀏覽器解析，即使它們位於同一個 App，程式實際執行的位置仍不相同。
在 app.yaml 中加入 Web UI Brick，讓 App Lab 知道這個專案包含瀏覽器介面。
# 本日新增
name: unoq-30days
description: 智慧路口 Edge Box
bricks:
- id: arduino:web_ui
bricks 是功能模組清單，arduino:web_ui 代表本專案會使用 Web UI，YAML 依縮排表示階層，項目前面的連字號則表示清單內容。
修改完成後可先單獨檢查 app.yaml，確認 bricks 與清單項目的縮排一致，若 YAML 結構錯誤，App 可能在頁面載入前就無法正確啟動，因此設定檔應先通過，再檢查 HTML 標籤。
今天只新增 Web UI Brick，不更改 MCU 與 Python 程式，Edge Service 仍維持 Day 17 的待命版本。
開啟 assets/index.html，加入最基本的網頁結構。
<!-- 本日新增 -->
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>智慧路口 Edge Box</title>
</head>
<body>
<h2>LED 遠端控制</h2>
</body>
</html>
<!DOCTYPE html> 告訴瀏覽器使用 HTML5，<html lang="zh-Hant"> 表示頁面主要語言為繁體中文，<head> 保存編碼與標題等設定，真正會顯示在畫面上的內容則放在 <body>。
<meta charset="utf-8"> 可避免中文出現亂碼，<title> 會顯示在瀏覽器分頁，<h2> 則是頁面中的主要標題。
HTML 多數元素都由開始標籤與結束標籤組成，例如 <h2> 與 </h2> 包住標題文字，<head> 與 <body> 也必須放在 <html> 內。
縮排不會像 Python 一樣直接決定程式結構，但整齊排列可以看出元素的包含關係，後續加入狀態區與按鈕時，便能清楚知道它們位於頁面主體之中。
按下 Run 後，先確認 Python 服務仍正常啟動，再開啟 App 的 Web UI，瀏覽器應顯示「LED 遠端控制」，分頁標題則為「智慧路口 Edge Box」。
此時頁面只有黑色文字與預設背景，沒有狀態顯示、沒有操作按鈕，也不會隨 D9 切換而更新，這是符合本日範圍的結果。
若瀏覽器沒有內容，先確認 index.html 位於 assets 資料夾，再檢查 app.yaml 的縮排與 Brick 名稱，避免在尚未顯示頁面前就加入更多功能。
也可故意將 <h2> 的文字改成容易辨認的測試內容並重新整理，若畫面同步改變，便能確認瀏覽器讀取的是目前專案中的 index.html，測試完成後再恢復「LED 遠端控制」。
最後再操作一次 D9，D2 與 Python Console 應維持 Day 17 的功能，這能確認啟用 Web UI Brick 與加入 HTML 並未破壞兩顆大腦的既有資料流，瀏覽器只是新增的呈現層，不是取代 MCU 或 MPU。
本日驗收通過的判準，是 App 能同時啟動 MCU、Python 與空白 Web 頁面，而且三者彼此不干擾，重新整理瀏覽器後標題仍能正常顯示。
確認頁面可重複開啟後，Web UI 的最小骨架才算真正建立完成。
app.yaml 啟用 Web UI Brick。assets/index.html。head 與 body 的分工。現在瀏覽器已能開啟管理頁面，但畫面只有標題，還看不到號誌狀態，也沒有操作入口，下一篇要加入狀態區與遠端切換按鈕。
下一篇｜為網頁添加控制項
iThome鐵人賽
看影片追技術