Computational Thinking × Vibe Coding

範例:ESP32 使用超聲波感測器測距,並於 OLED 顯示距離

🧭 0. 專案總覽(Big Picture)

在開始之前,請你先回答以下問題:

  1. 你希望整個系統解決乜嘢實際問題?(例如:量度距離?避障?提醒?)

  2. 如果用一句話描述成個流程,會係點?(例如:「感測距離 → 判斷 → 顯示或警示」)

  3. 系統入面大致會有邊幾個模組?(提示:感測、顯示、判斷)

  4. 每個模組需要輸入乜?又會輸出乜?

  5. 你認為成功的系統應該有咩表現?(更新速度、準確度、錯誤處理等)

🔧 1. 子系統 A:超聲波測距

1.1 引導式設計問題(PRD:感測子系統)

引導問題你的想法
1️⃣ 你希望感測模組主要做到咩?它的核心目標係乜? 
2️⃣ 感測器需要輸入乜資料?會輸出乜?(提示:Trigger、Echo 腳) 
3️⃣ 要點樣控制量測頻率?應該用咩方法避免 delay 阻塞? 
4️⃣ 感測結果要點樣去除雜訊?(例如平均幾次?) 
5️⃣ 你覺得一個穩定、準確的系統要滿足啲乜條件?(例如誤差範圍、更新速度) 
6️⃣ 如果感測失敗(無回波)時,系統應該點樣反應? 

1.2 結構化 Prompt(交給 AI 生成)

自己根據上面諗一諗先

答案: Gemini 生成

🖥️ 2. 子系統 B:OLED 顯示

2.1 引導式設計問題

引導問題你的想法
1️⃣ 你希望 OLED 顯示啲乜資訊?(距離、警示、錯誤訊息?) 
2️⃣ 顯示需要更新幾快?(提示:用 millis() 控制而唔用 delay() 
3️⃣ 如果數據未更新,畫面應該點樣顯示? 
4️⃣ 你會點樣避免畫面閃爍?要點樣控制刷新頻率? 
5️⃣ OLED 要用咩 Library?點樣確保相容性? 
6️⃣ 你想提供幾多個狀態?(例如正常/警示/無數據) 

2.2 結構化 Prompt

自己根據上面諗一諗先

答案: Gemini生成

⚙️ 3. 系統整合層(Main Program)

3.1 引導式設計問題(System Integration)

引導問題你的想法
1️⃣ 感測器與顯示模組之間,資料應該點樣流動?
2️⃣ 你打算喺主程式入面點樣安排執行次序?
3️⃣ 每 200ms 更新一次距離,應該點樣實現?
4️⃣ 距離太近時,系統應該觸發咩反應?
5️⃣ 如果要整個系統可擴充(例如加蜂鳴器),要喺邊度留位? 

3.2 結構化 Prompt(交給 AI 生成「整合主檔」)

自己根據上面諗一諗先

答案: Gemini生成

4. 創意延仲

💡 從「功能完成」→ 「有意義的應用」 運算思維(分解、抽象、演算法) 將原本的功能,轉化成真實場景應用。 這一部分是「創意 × 邏輯」的加分題,不求難,只求有連結、有價值

4.1 任務挑戰 (Challenge)

試想,你的 ESP32 量測系統現在可以穩定顯示距離。 👉 如何延伸成一個「真實用途」的原型?

請從以下方向思考:

運算思維問題引導提示例子
🧩 分解系統可拆成哪些模組?哪個模組能改進?感測器、顯示器、警示模組、資料紀錄模組
🪄 抽象若要應用於某個場景,該抽取哪些核心功能?「距離警示」→ 可抽象成「安全距離偵測」
🔁 演算法思維資料如何流動?觸發—判斷—回饋流程是否清晰?超聲波→距離→條件判斷→顯示→蜂鳴器/回饋

4.2 範例構想(參考)

Level概念示例特點
⚙️ Level 2 入門「距離太近時亮燈警示」技術延伸但無明確場景
✅ Level 3 合格「超聲波+OLED → 測距儀/避障車」有具體用途,可描述流程
💬 Level 4 熟練「盲人手杖:超聲波+蜂鳴+震動模組」連結使用者需求,有回饋循環
🧠 Level 5 專家「智慧導航杖:AI 辨識障礙物+距離聲效反饋」 

4.3 創意延伸任務提交指引(Creative Extension Submission)

💡 從「功能完成」→「創意應用」 以五段方式提交你的構想。每段簡潔 2–4 句即可。 可附手繪圖/Mermaid 流程圖/AI 生成草圖。


🧭 (1) Application Scenario

說明你的應用情境與主題。

例:盲人手杖避障、智慧垃圾桶測滿水位、距離提醒門鈴。

要點: 實際場景、有明確功能目的。


🙋‍♂️ (2) User Needs

指出「誰」會用?「痛點」是甚麼?你的系統如何幫助?

例:盲人行走時難以判斷障礙距離 → 超聲波+蜂鳴回饋。

要點: 寫出使用者問題與對應解決方案。


🔌 (3) New I/O Design

描述你新增的感測器或輸出元件。

例:加入蜂鳴器、震動馬達、語音播報、Wi-Fi 上傳等。

要點: 清楚指出新輸入/輸出及其作用。


🔁 (4) Flowchart / Concept Sketch

畫出或簡述整體運作流程。

例:超聲波→距離判斷→蜂鳴/震動回饋→顯示。

要點: 展示「輸入→處理→輸出/回饋」邏輯。 可用 Mermaid、手繪或簡圖(重點是流程清楚)。


🌍 (5) Social Value or Extension Potential

說明你的設計對社會有甚麼貢獻?能否延伸成產品或研究?

例:改善無障礙設計;延伸為智慧城市感測網。

要點: 與人/社會/環境有連結;提出再發展方向。

💡 創意思維層次

⚙️ 低階創意 (Technology-driven) 先有技術 → 再從技術發掘用途。 例:有超聲波 + 顯示 → 想到可做「盲人手杖」。

🧭 高階創意 (User-driven) 先觀察使用者與痛點 → 再設計技術去解決問題。 例:發現視障人士難以分辨障礙物距離 → 才選擇用超聲波+語音回饋。

重點:

技術只是工具,創意的起點應該是「人」與「需求」。 高階構想通常更具可行性與社會價值。

5. 工作紙與評核

  1. Computational Thinking × Vibe Coding worksheet(電子填寫和提交)

  2. 🧮 AI 協作編程評分量表(Vibe Coding × 運算思維整合).pdf

  3. AI 協作編程反思與自檢表(實體填寫提交)