網際網路應用|課程大綱
以「水井三寶智慧互動展覽系統」為場域型專題教材
ESP32 → Edge Web → Internet → Django → Data → Knowledge → AI/RAG
一、課程簡介
本課程以「水井三寶智慧互動展覽系統」作為《網際網路應用》的場域型專題教材,將抽象的網路協定、位址、Client/Server、Web API與雲端資料概念,轉化為學生可以看見、操作、量測與除錯的真實系統。學生從白馬、烏龜、姻緣花三項地方文化作品出發,理解按鈕、感測器、JQ6500語音與WS2812B燈光如何由ESP32控制;再以手機連入ESP32 Edge Web,實際觀察AP、STA、IP、MAC、DNS、Domain、Port及HTTP Request的作用;進一步將匿名互動事件以JSON及REST API送往Django,建立Digital Twin、資料庫與雲端儀表板。課程不以「會做網頁」為終點,而是追問「一個按鈕按下後,資料去了哪裡?」讓學生沿著實體互動、區域網路、Internet、Web Server、API、Database一路追蹤資料生命週期。最後再由Data走向Knowledge與AI/RAG,思考地方故事如何被整理為可搜尋、可引用、可延伸的文化知識。藉由水井村USR真實場域,學生不只學習網際網路技術,也理解科技如何服務文化保存、地方教育與大學社會責任,培養需求分析、系統整合、網路診斷與知識應用能力。
二、課程核心問題
三、學習目標
- 理解ESP32與周邊裝置通訊,以及實體事件如何轉為數位資料。
- 理解AP、STA、LAN、IP、MAC、DNS、Domain、Port等網路概念。
- 理解Browser、Client、Server、Edge Web及HTTP資料流程。
- 理解GET/POST、Header、Body、JSON與REST API。
- 將ESP32匿名事件送至Django,理解Database與Dashboard。
- 能以分層方法診斷Wi-Fi、DNS、HTTPS、API與Cloud問題。
- 理解Data、Knowledge與AI/RAG的關係。
- 從USR場域需求思考網際網路技術的社會實踐價值。
四、五層架構與課程主軸
| 層級 | 系統角色 | 課程重點 |
|---|---|---|
| Layer 1|文化作品層 | 白馬、烏龜、姻緣花 | 需求、情境、實體與數位系統邊界 |
| Layer 2|智慧互動層 | ESP32+ToF+按鈕+JQ6500+RGB | GPIO、UART、事件、裝置控制 |
| Layer 3|Edge Web層 | ESP32內嵌網站 | AP/STA、IP、Web Server、HTTP |
| Layer 4|Digital Twin / Data層 | Django+Database+Dashboard | DNS、HTTPS、JSON、REST API、資料庫 |
| Layer 5|文化知識層 | 文化網站+AI/RAG | Data → Knowledge、RAG、知識服務 |
五、系列教材文章
| # | 教材主題 | 核心概念 | 文章連結 |
|---|---|---|---|
| 1 | ESP32 × JQ6500 UART 通訊 | UART序列通訊、語音模組、封包命令 | 閱讀教材 |
| 2 | Layer 2|智慧互動層 | GPIO、按鈕事件、JQ6500故事播放、互動狀態 | 閱讀教材 |
| 3 | Layer 3|ESP32 Edge Web | Web Server、HTTP、手機控制、192.168.4.1、Edge Computing | 閱讀教材 |
| 4 | Layer 4|ESP32 × Django | Client/Server、HTTP、Django、事件資料、Digital Twin | 閱讀教材 |
| 5 | ESP32 AP+STA 共存 | SoftAP、Station、LAN與Internet、本地控制與雲端連線 | 閱讀教材 |
| 6 | Layer 4 V1.7|AP+STA+Django整合實測 | Wi-Fi診斷、DNS、HTTPS、Queue、Local First / Cloud Later | 閱讀教材 |
| 7 | 水井三寶智慧互動展覽系統|五層架構 | 文化作品、智慧互動、Edge Web、Digital Twin/Data、文化知識 | 閱讀教材 |
| 8 | WS2812B × ESP32 燈光控制 | RGB LED、單線數位控制、色彩編碼、故事狀態回饋 | 閱讀教材 |
| 9 | 一個按鈕按下後,資料去了哪裡? | Browser → Edge → HTTP → JSON → Django → Database → Dashboard | 閱讀教材 |
| 10 | IP、MAC、DNS、Domain與Port | MAC、IP、Gateway、DNS、Domain、Port、網路診斷 | 閱讀教材 |
| 11 | Data → Knowledge → AI/RAG | 事件資料、文化知識庫、Chunk、Metadata、Embedding、Vector Search、RAG | 閱讀教材 |
| 12 | HTTP+JSON+REST API | GET/POST、Header、Body、JSON、REST Endpoint、HTTP Status、Django API | 閱讀教材 |
六、建議學習路徑
七、從「做作品」轉向「理解系統」
本課程不把Arduino程式、ESP32接線或Django網站視為彼此獨立的單元,而是要求學生追蹤一筆資料的完整旅程。學生不只要知道「程式可以跑」,還要能回答:手機為什麼找到192.168.4.1?ESP32為什麼同時需要AP與STA?Domain如何透過DNS找到Server?JSON如何進入HTTP Body?Django為什麼回201?當Cloud HTTP=-1時,問題究竟發生在Wi-Fi、DNS、TLS還是API?
八、USR × 網際網路應用
水井三寶讓網際網路課程不再只是虛擬案例。學生面對的是地方文化作品、展覽觀眾、現場網路、設備可靠度與文化知識保存等真實需求。技術因此不只是完成作業,而是成為連結地方故事、智慧互動、教育推廣與資料累積的工具。透過場域實作,學生可以理解大學社會責任不只是「到社區服務」,而是運用專業知識與地方共同解決問題,並留下可以持續運作、持續學習與持續擴充的系統。
九、關鍵字
ESP32IoTEdge WebAP / STAIP / MAC / DNSHTTPJSONREST APIDjangoDigital TwinAI/RAGUSR


