2026年8月16日 星期日

[水井村USR] 一個按鈕按下後，資料去了哪裡？

一個按鈕按下後，資料去了哪裡？

從「水井三寶智慧互動展覽系統」看懂網際網路資料流

Browser × Edge Web × Wi‑Fi × IP × HTTP × JSON × Django × Database

對初學者來說，「按下一個按鈕，故事就播放了」好像只是ESP32的一個控制功能；但從網際網路角度來看，這個動作其實會經過一連串不同層次的資料處理。這篇文章用「按下烏龜故事」作為例子，追蹤一筆事件如何從使用者手指，經過ESP32、Wi‑Fi、HTTP、JSON、Django與資料庫，最後出現在雲端儀表板上。

一、按下的是什麼？

水井三寶有兩種啟動方式：實體按鈕與手機Edge Web。實體按鈕由ESP32直接讀GPIO；手機則先連上ESP32的AP，再開啟 http://192.168.4.1。

手機操作時真正發生的第一件事：瀏覽器送出一個HTTP Request，而不是直接播放MP3。

二、一個Web按鈕，其實是一個URL

例如「002 烏龜故事」可對應：

http://192.168.4.1/play?track=2

瀏覽器會送出類似：

GET /play?track=2 HTTP/1.1
Host: 192.168.4.1
概念水井三寶例子作用
IP Address192.168.4.1找到ESP32
HTTPGETBrowser與Web Server溝通
URL Path/play告訴Server要做什麼
Query Stringtrack=2指定播放第2個故事
重點：網頁不是網際網路。網頁只是應用層的一部分，背後還有Wi‑Fi、IP、TCP與HTTP。

三、資料先到ESP32 Edge Web

Browser ↓ HTTP GET ESP32 Edge Web ↓ 解析 track=2 ↓ 啟動 STORY_TURTLE ├─ JQ6500：播放002 ├─ WS2812B：烏龜藍色呼吸 └─ System State：PLAYING

四、到這裡為止，其實還沒有上Internet

手機連的是ESP32自己的AP，因此這是區域網路內的本地通訊。即使展場Internet完全中斷，192.168.4.1仍然可以工作。

能開啟192.168.4.1，不代表Internet一定正常；Internet斷線，也不代表Edge Web一定不能用。

五、故事播放後，ESP32建立事件資料

{
  "event_uuid":"SHUIJING-001-0000000062",
  "event_type":"STORY_START",
  "story":"002",
  "source":"web",
  "duration_ms":0,
  "completed":null,
  "network_status":"online",
  "metadata":{
    "firmware":"Layer4-V1.7",
    "jq_confirmed":true
  }
}

這是一個JSON物件，用來把系統狀態整理成適合網路傳輸的文字格式。

六、為什麼不直接送雲端？

Local First 先完成：JQ6500播放、燈光、按鈕與Web回應 ↓ 事件先寫入 LittleFS Queue ↓ Cloud Later 空閒後再送 Django

這樣即使Wi‑Fi暫時斷線，事件也不會立即遺失。

七、真正上Internet時，資料經過哪些地方？

ESP32 STA ↓ Wi‑Fi Router ↓ Default Gateway ↓ DNS ↓ Internet ↓ shuijingtreasures.pythonanywhere.com ↓ HTTPS / Django API

八、DNS的工作：把名稱變成IP

ESP32知道的是網域名稱，但Internet路由需要IP，因此必須先做DNS解析。

shuijingtreasures.pythonanywhere.com ↓ DNS IP Address
診斷觀念：Wi‑Fi → Gateway → DNS → TCP/TLS → HTTP → API，每一層都可能失敗。

九、ESP32如何把JSON送到Django？

POST /api/exhibition/events/ HTTP/1.1
Host: shuijingtreasures.pythonanywhere.com
Content-Type: application/json
X-Device-ID: SHUIJING-001
X-Device-Key: ********

{
  "event_type":"STORY_START",
  "story":"002",
  "source":"web"
}
項目作用
HTTP POST送資料給Server
Header放Content-Type、Device ID、API Key
JSON Body真正的事件內容

十、Django收到後做什麼？

Django URL Router ↓ api_event() ↓ 檢查 Device ID / API Key ↓ 解析 JSON ↓ 寫入 ExhibitionEvent ↓ Database ↓ Dashboard

十一、一筆「烏龜故事」事件的完整旅程

1. 使用者點選「002 烏龜故事」 2. Browser送出 HTTP GET 3. ESP32收到 /play?track=2 4. JQ6500播放002 5. WS2812B切換烏龜燈效 6. 建立 STORY_START JSON 7. 寫入 LittleFS Queue 8. ESP32 STA連Router 9. DNS解析網域 10. HTTPS POST送到Django 11. Django驗證裝置 12. JSON寫入Database 13. Dashboard統計「002 烏龜故事 +1」

十二、這和水井三寶五層架構有什麼關係？

層級角色
第一層｜文化作品白馬、烏龜、姻緣花實體作品
第二層｜智慧互動ESP32、按鈕、ToF、JQ6500、RGB
第三層｜Edge Web192.168.4.1、HTTP、本地控制與診斷
第四層｜Digital Twin / DataJSON、HTTPS、Django、Database、Dashboard
第五層｜文化知識品牌故事、影音、教育、工藝、USR與未來AI/RAG

十三、這個案例可以學到哪些《網際網路》概念？

Browser / ServerLANWi‑Fi AP / STAIP AddressGatewayDNSHTTP GETHTTP POSTJSONREST APIHTTPSDatabaseEdge Computing

十四、課堂思考題

問題一：手機能開192.168.4.1，但Django收不到資料，可能是哪一段有問題？
問題二：ESP32顯示STA ONLINE，是否代表Internet一定正常？為什麼？
問題三：為什麼事件要先進LittleFS Queue，而不是每次按下按鈕就立即POST到Django？

十五、結語：真正的網際網路，不是一張網頁

水井三寶案例讓我們看見，網際網路真正有趣的地方，不在於「做出一個網頁」，而是理解一筆資料如何從實體世界產生，再經過本地網路、IP、DNS、HTTP、JSON、API與Database，最後轉化成可被理解的資訊。

當學生按下「002 烏龜故事」時，他不只是啟動一段音檔；他其實啟動了一條從文化作品 → Edge → Internet → Cloud → Data的完整資料鏈。這正是把《網際網路》從課本名詞變成真實系統最有價值的地方。

張貼者： 於
標籤： , , , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)