2026/08/07

【校園 AI 網頁設計課程】新竹湖口高中 3 小時 AI 網頁設計課

 【校園 AI 網頁設計課程】新竹湖口高中 3 小時 AI 網頁設計課圓滿落幕


感謝茶米老師的引介,以及湖口高中胡老師與陳老師的邀請,我來到新竹湖口高中,帶領一群完全沒有程式背景的高中生,展開了一場為時三小時的『AI 輔助個人網頁設計與雲端發布』實戰工作坊。

傳統程式課常受限於繁瑣語法與環境安裝,但這堂課我們翻轉了思維!透過 Vibe Coding 與 Gemini AI 協同開發,學生不必死背語法,而是像專案經理般用自然語言引導 AI 創作。

💡 3 小時內的成果
學生們完成了完整的網頁開發流程(Plan ➔ Design ➔ Implement ➔ Debug ➔ Host)

AI 提示詞工程:掌握 IPO / RTF 框架,用白話文清楚表達需求。
UI/UX 與美學:利用 Stonez56 色彩探索家與 Coolors,挑選專屬主題色。
GitHub Pages 雲端發布:免指令操作,直覺上傳專案至雲端。

🎯 為什麼需要這門課?

零阻力學習:免安裝 IDE,讓學生從「害怕程式」變成「享受創造」。
成果導向:每位學生課後擁有專屬公開網站,並能請 Gemini AI 生成學習歷程初稿。
資安與隱私:以吉祥物與主題素材取代個人照片,保障學生安全。

🤝 邀課合作
想為學生帶來跨越 AI 與設計的創新體驗?歡迎高中、大專院校或教育機構私訊粉專洽詢。

最後再次感謝茶米老師(黃信溢)的推薦!

感謝湖口高中教務處張主任, 湖口高中姜校長, 及陳老師合影!【校園 AI 網頁設計課程】新竹湖口高中 3 小時 AI 網頁設計課圓滿落幕

感謝茶米老師的引介,以及湖口高中胡老師與陳老師的邀請,我來到新竹湖口高中,帶領一群完全沒有程式背景的高中生,展開了一場為時三小時的『AI 輔助個人網頁設計與雲端發布』實戰工作坊。

傳統程式課常受限於繁瑣語法與環境安裝,但這堂課我們翻轉了思維!透過 Vibe Coding 與 Gemini AI 協同開發,學生不必死背語法,而是像專案經理般用自然語言引導 AI 創作。

💡 3 小時內的成果
學生們完成了完整的網頁開發流程(Plan ➔ Design ➔ Implement ➔ Debug ➔ Host):

AI 提示詞工程:掌握 IPO / RTF 框架,用白話文清楚表達需求。
UI/UX 與美學:利用 Stonez56 色彩探索家與 Coolors,挑選專屬主題色。
GitHub Pages 雲端發布:免指令操作,直覺上傳專案至雲端。

🎯 為什麼需要這門課?

零阻力學習:免安裝 IDE,讓學生從「害怕程式」變成「享受創造」。
成果導向:每位學生課後擁有專屬公開網站,並能請 Gemini AI 生成學習歷程初稿。
資安與隱私:以吉祥物與主題素材取代個人照片,保障學生安全。

🤝 邀課合作
想為學生帶來跨越 AI 與設計的創新體驗?歡迎高中、大專院校或教育機構私訊粉專洽詢。

最後再次感謝茶米老師(黃信溢)的推薦!

感謝湖口高中教務處張主任, 湖口高中姜校長, 及陳老師合影!

2026/08/06

有關 GitHub 分享時共用資料庫之解決方法


在 Google AI Studio 的開發環境中,系統本身就內建了 firebase-integration Skill 與 set_up_firebase 自動化工具(MCP)。

當將您的 GitHub 專案匯入 AI Studio 後,完全不需要手動開 Console 或設定 .env。

🚀 超極簡 AI Studio 啟用指南(一鍵自動化)



 將 GitHub 專案匯入 AI Studio 後,只需在 AI 對話框輸入任意一句話:

提示詞: 請協助初始化此專案的獨立 Firebase 資料庫,並提供流暢的預設帳號登入體驗:

  1. 資料庫獨立性:透過 AI Studio 的 Skill,自動生成專案專屬的獨立 Firebase 資料庫,避免共用或重複使用他人資料庫。

  2. 預設登入流程:專案啟動後,系統顯示預設管理員帳號與密碼:

    • 帳號:Admin

    • 密碼:Pass123  

  3. 使用者輸入後即可直接進入管理後台,並能在首次登入後修改為個人化帳號與密碼。

🤖 AI 代理人會自動執行的流程:

    自動呼叫 set_up_firebase 工具:AI 代理人會跳出確認按鈕,學生點擊同意後,系統會在 3 秒內為該學生自動開闢並綁定全新的獨立 Firestore 資料庫與 Auth 認證服務。

    自動產生配置檔:AI 會自動將該學生專屬的 firebase-applet-config.json 寫入專案目錄中,完全不與您的資料庫共用。

    自動套用安全規則:AI 會依據專案的 firestore.rules 完成資料庫安全權限部署。

🔑 搭配預設帳密流暢體驗

    資料庫獨立:學生透過 AI Studio 的 Skill 自動生成自己的獨立數據庫。

    預設登入:學生開啟頁面後,輸入預設管理員帳號 Admin 與通行碼 Pass123,即可直接進入管理後台。

    名單自主管理:學生可以在自己的後台新增他們自己的 Gmail 作為授權管理員,數據完全隔離且互不影響!

🛡️ 系統分析師 (SA) 資安稽核與風險評估報告


1. 核心安全性疑慮解答 (Executive Security Summary)

❓ 疑慮一:下載/Fork GitHub 專案的學生,是否有拿到我的 Google 個人帳號憑證或私鑰?

  • 答案:完全沒有 (NO)

  • 技術分析:您的 GitHub 專案中絕不包含您的 Google 帳號密碼、OAuth Client Secret、Service Account 伺服器金鑰或 Google 雲端管理權限憑證。學生無法存取您的個人 Google 帳戶、Gmail、Google Drive 或 GCP 控制台。


❓ 疑慮二:先前在 GitHub 專案中的 Firebase 資訊,會對我的帳號造成危害嗎?

  • 答案:個人主帳號零危害,僅過去的資料庫連線指標被共用 (現已全數切斷)

  • 技術分析

    1. Firebase 前端金鑰的本質:專案中的 apiKeyprojectId 屬於 Web Client 識別碼(Public App Identifiers),其作用僅是告訴前端瀏覽器「要指向哪一個 Firebase 實例」,並非伺服器最高權限管理金鑰。

    2. 先前共用資料庫的原因:學生 Fork 專案後直接啟動,前端依據專案內的 projectId 指向您的舊 Firestore 實例,因此新增的管理員 Gmail 與問卷會出現在同一個資料庫中。

    3. 現已安全隔離:我們剛剛已完整抹除並重建了全新的獨立 Firebase 資料庫(新 Project ID: gen-lang-client-0805369811)。舊專案的連結已失效,學生目前的程式碼無法讀取或影響您現在的新資料庫。


2. 系統安全防護升級處置 (Security Hardening Actions Applied)

為了確保後續您將專案推送到 GitHub 或開源給學生時100% 隔離,已完成以下架構防護措施:

項目處置內容說明與效益
.gitignore 憑證隔離已將 firebase-applet-config.json 加入 .gitignore今後您更新 GitHub 專案時,您的個人 Firebase 實例設定不會被推送上網。
範本化組態提供提供 firebase-applet-config.json.example.env.example學生複製專案後需自行填入其個人 Firebase 金鑰,確保每個人的數據庫完全獨立。
預設通行碼標準化登入通行碼統一為 Pass123 (預設帳號 Admin)介面上提供明確提示,並完全移除舊有預設的個人化郵件預設綁定。
動態環境變數支援src/firebase.ts 支援 VITE_FIREBASE_* 覆寫學生部署至 Vercel 或 Cloud Run 時,可直接透過平台 Environment Variables 帶入自己的數據庫設定。

2026-08-05 AI Coding + Vercel 雲端佈署課程!

2026'8/5 再次感謝元培醫事科技大學吳院長邀請, 讓有有機會和大家分享 AI Coding + Vercel 雲端佈署課程! 

 "教師雲端部署與 PulseAI 課堂應用工作坊" 圓滿落幕 

這次的實作課程真的太有成就感了!參與的教授與老師們不僅打破了「寫程式與網頁部署很難」的刻板印象,更在短短的課程中,完成了兩大超級任務:

🌐 任務一:成功把自己的第一個網站部署至 Vercel 雲端平台!

許多老師原本沒有網頁部署的經驗,但在一步步實作下,當看到專屬自己的網址成功上線、能用手機點開的那一刻,現場充滿了驚呼與滿滿的成就感!

📊 任務二:手把手打造「PulseAI」智慧課堂互動 App!

這是一款專為現代課堂設計的線上問卷與互動工具,老師們可以在課堂上:

✨發起即時點名與學習理解度測驗

✨收集學生的匿名反饋與提問

✨促進雙向交流,讓課堂氣氛更活潑

💡「最好的教學,就是先成為終身學習者。」

看到老師們親手將最新的 Web 技術與 AI 應用帶入未來的教學場域,真的非常佩服大家的學習熱情與行動力!

老師們在課堂上最喜歡用什麼互動工具呢?歡迎在下方留言交流討論喔!👇






#教育科技 #Vercel #PulseAI #教師研習 #線上教學 #數位轉型 #課堂互動 #教學創新 #元培大學 #stonez56 #stonez56創客工坊 

2026/08/01

試試剛上市 beta 版本的 Gemini Spark - 幫我整理分類 Chrome bookmark

 試試剛上市 beta 版本的 Gemini Spark, 嗯...請它整理這10多年來的 Chrome Bookmarks 好了~

左上角選取 Spark 即可啟用 (目前AI Pro/AI Ultra plan 才能試用)



下個簡單提示詞

很認真的整理了起來...



好吧...來試試看..



為了讓 Chrome 書籤更清晰、方便搜尋與快速存取,已為您規劃一套結構化的分類架構,並分享實用的搜尋與管理技巧。

一、 建議的書籤分類架構

建議在 Chrome 的「書籤列」建立以下主題資料夾,並加上數字編號與 Emoji 標示,方便目視辨識與排序:

🤖 01_AI 與開發工具

Google AI Studio、OpenRouter、GitHub、Vercel、Firebase Console、Hugging Face、Canva

🛠️ 02_創客與電子工程

JLCPCB、EasyEDA Pro、MIT App Inventor、Node-RED

💼 03_企業服務與教學顧問

Stonez56 官網、DreamHost Panel、經濟部產業競爭力輔導團、台灣就業通

💰 04_金融證券與行政管理

台新 Richart、玉山銀行、中國信託、國泰世華銀行、MAX 交易所、財政部電子發票整合服務平台

🏔️ 05_戶外登山與旅遊規劃

台灣網路登山申請一站式服務網、Klook 客路、KKday、Airbnb、星宇航空

🛒 06_日常生活與電商網購

蝦皮購物、Amazon、YouTube

二、 Chrome 快速搜尋與整理技巧

圖示化常駐書籤(極簡書籤列):

對於每天都會開啟的常用網站(如 GitHub、AI Studio),右鍵點擊書籤 -> 編輯 -> 將名稱完全刪除。刪除名稱後只會留下網站圖示(Favicon),能大幅節省書籤列空間。

網址列快速搜尋書籤:

在 Chrome 網址列輸入 @bookmarks 並按下 Tab 或 Space,即可直接搜尋書籤內的所有項目。或在網址列輸入 * 加空格,亦可直接搜尋書籤標題與網址。

設定自訂搜尋關鍵字(快捷鍵):
開啟 Chrome 設定 -> 搜尋引擎 -> 管理搜尋引擎和網站搜尋。

新增常用工具快捷鍵,例如將關鍵字設為 gh 對應 github.com,日後在網址列輸入 gh 即可快速開啟。

三、 書籤匯入檔

已建立標準 Netscape 格式的書籤 HTML 內容,並儲存至 Google Drive:
Chrome_Bookmarks_Organized.html
匯入步驟:
  1. 複製該文件內的 HTML 原始碼並存為本地 .html 檔案。
  2. 在 Chrome 按下 Ctrl + Shift + O(Mac 快捷鍵 Cmd + Option + B)開啟書籤管理員。
  3. 點選右上角的 三點選單 -> 匯入書籤,選擇該 HTML 檔即可直接完成分類匯入。


Spark 只有幫我把常用的網站做了整理成 Bookmark~

它要我 export Bookmarks 成 .html


好吧...先來把 Bookmark 匯出成 .html

Spark 說要開始整理.... 

3 minutes later.... 顯示"失敗"!!

好吧...第一階段 Gemini Spark 測試到此為止...它是 Beta 嗎? 😅



2026/07/30

智慧喝水小管家 - 元培醫事科技大學課程圓滿落幕!

非常謝謝吳院長的再次邀請! 

適時的喝水跟健康照護也有很大的關聯性, 所以這次專案很切題呢~

看著同學們從使用 AI 寫程式、除錯,到把 ESP32-C3 控制器、MPU6050 姿態感測器與 3D 列印外殼組裝起來 ,親手讓這台「能感測傾角、自動提醒喝水」的小裝置順利運作 ,真的超有成就感!



這堂課不只帶回一台成品,最棒的是看到大家學會 如何用 AI 輔助開發與 Arduino 思考,以後也能動手解決生活中的實際難題!💪

歡迎想為課程導入實作專案的老師,或是對硬體整合有興趣的創客夥伴一起交流合作!

很高興能和大家教學相長~也好奇大家平常在教學或實作業界專案時,最喜歡加入什麼有趣的硬體元素呢?歡迎留言聊聊!👇💬

#創客教育 #AI輔助開發 #智慧喝水管家 #Arduino #ESP32開發 #3D列印 #AI輔助開發 #Arduino專案 #stonez56 #stonez56創客工坊 #元培大學








2026/07/13

GitHub 上的專案直接導入 AI Studio

最近 AI Studio 改版了, 據說可以把 GitHub 上的專案直接導入...哇..這功能是論壇上大家一直想要的功能呢...Google 終於做出來了!! 😊

於是我就把我以前用 PHP 做的 webCounter 網頁瀏覽計數器給導入試看看!!

webCounter 網頁瀏覽計數器 - 是一個全方位的基本網站計數器, 幫你計算有多少人瀏覽, 像我分享過很多自己開發的免費網站, 就能知道有多少人來使用~😊

因為我的 AI Studio 系統提示詞有提到要:

**前後端分離**:前端 (React/Vue/Svelte) 與後端 (Node.js/Python/FastAPI) 必須透過 API 層交互

- **Serverless 優先**:Vercel / Cloud Run / Firebase Functions 作為預設部署方式

沒想到, 它就把 PHP 改寫成 Full stack App! 哈...不只能導入專案, 還能把它給進化...也太厲害了~ 以前我只有寫出 API command, AI Studio 還把整個 API 測試也包到管理的網站裡了~ 👍 




2026/07/12

MCP 與 API:AI Agent 的新基礎建設

這兩天看了一部Google API vs MCP 的影片, 內容很棒!



很多人以為 MCP 是要取代 API,其實不是!

👉 MCP(Model Context Protocol)坐落在 API 之上,將它們從「靜態路由」轉化為「活的介面」,讓模型能真正推理與探索。


🔑 傳統 API

  • 固定端點(endpoint)
  • 結構化資料(JSON, XML)
  • 程式對程式的單一呼叫
  • 適合:Web 應用、後端服務整合

🔑 MCP 新思維

  • 一層在 API 之上:不是取代,而是延伸
  • 上下文驅動:模型能理解工具的功能與使用方式
  • 活的介面:API 不再只是死板的路由,而是可被模型推理的資源
  • 多工具串接:AI Agent 可同時探索 Gmail、Notion、Jira 等服務

📊 差異比較

面向API 傳統模式MCP 新模式
層級定位基礎呼叫介面API 之上的語境層
呼叫方式固定端點上下文推理
整合難度需硬編碼自動探索
適用場景Web/後端服務AI Agent、多工具串接
彈性

🚀 新的開發方式
代表開發者不再需要為每個服務寫死 API 整合,而是透過 MCP,讓模型自己理解並運用工具。


📌 總結
MCP 不是 API 的競爭者,而是 新一層協議,讓 AI Agent 能把 API 從「死板路由」變成「活的介面」,真正能推理與探索。這是 AI 開發的基礎重建,也是未來 Agent 生態系的關鍵。

👉 這就是為什麼影片強調:「It's not a direct comparison!」MCP 正在重塑 API 的角色。

Google 原始影片出處:



什麼是 OpenDNS? OpenDNS 突然斷線怎麼辦?!

這兩天, 家裡的 Wi-Fi 一直無法連上網, 原來是我設的 OpenDNS 晚上可能流量太大了, 造成 DNS 錯誤...今天才找出來問題. 後來我改成 Google DNS, Router 馬上就可以上網了, 家裡大大小小的裝置也都能連網了~😅



OpenDNS(208.67.222.222 / 208.67.220.220)是一個由 Cisco 提供的公共 DNS 服務。它的特色在於 安全性與過濾功能:除了基本的網域名稱解析,它還能阻擋惡意網站、釣魚攻擊,並提供家長控制與內容過濾。對於需要額外安全層級的使用者或企業,OpenDNS 是一個常見的選擇。

為什麼使用 OpenDNS

⭐安全防護:自動過濾惡意網站,降低中毒或被釣魚的風險。

⭐穩定性:全球分布的伺服器,通常能提供快速且可靠的解析。

⭐額外功能:可設定內容過濾、家長控制,適合家庭或教育環境。

當你遇到的情況一樣,出現連線不穩定,導致路由器顯示「無法連線」。這時候改用 Google DNS (8.8.8.8 / 8.8.4.4) 或 Cloudflare DNS (1.1.1.1 / 1.0.0.1),就能恢復正常連線! 

怎麼設定呢?


進入你的路由器, 找到網際網路, 會有一個 DNS 位置的欄位, 
把要用的那一組 DNS 輸入即可!


  • OpenDNS: (208.67.222.222 / 208.67.220.220)
  • Google DNS (8.8.8.8 / 8.8.4.4)
  • Cloudflare DNS (1.1.1.1 / 1.0.0.1)






2026/07/11

我的第一片用 AI 設計 PCB 冒險 - 終於成功了!!

我的第一片用 AI 設計 PCB 冒險 - 終於成功了!!





但是, 我最後還是請專業的來...😅才完成的! 因為, AI 會跟你說, 沒問題了, 可以送洗了... 結果我送洗兩次都失敗了! 我的 $$ 🥲

或許是我要的功能有點複雜, 又要 USB-C 供電, 又要它充電, 拔掉 USB-C 時, 又要能從鋰電池供電, 全部要設計在電路上. 能插拔的只有 ESP32-C3, 0.96" OLED, MPU-6050 6軸感應器. AI 也許也跟我提醒了, 可能我無法了解~😅

經過這一次用 AI 來設計 PCB 的實驗, 只能說, 如果你真的要使用 AI 來幫助設計 PCB 最好本身對電子電路設計有一定的概念, 拿 Vibe coding 那一套來設計 PCB 基本上行不通 (個人感受)!

你也試過使用 AI 來設計過 PCB 設計嗎? 歡迎和大家分享~



2026/07/10

2026-07-10 現在可以把 GitHub 專案, 導回到 AI Studio 裡!!

 以前我們只能夠把寫好的Google AI Studio程式推送到 GitHub上面儲存. 無法把 Github 的專案導入到 AI Studio 專案裡! 這樣子就造成了我只能夠在 AI studio裡面改變更有的專案, 當我的專案發生了重大的問題, 無法由 GitHub下載回來, 覆蓋專案重新開始做....但是從今天開始你可以囉!!

在AI Studio裡面打開一個新專案, 再按對話框底下這個加號再選擇 Import from GitHub就可以了!😊

⭐平時就養成好習慣, 做到一個段落就把程式推到 GitHub 上面, 這樣子就不怕AI程式改錯又救不回來! 我們隨時可以有 GitHub導回到AI Studio來繼續做這個專案!
把 AI Studio 專案推到 GitHub 去儲存

現在可以把 GitHub 專案, 導回到 AI Studio 裡 👍👍



2026/07/05

健康促進 - 以 AI Coding 製作喝水提醒裝置

 昨天 7/3 受楊老師與黃組長邀請,到嘉義女中擔任新興科技活動講師!這次的主題是「健康促進」。經過幾天思考,我決定以 AI coding 製作一個「喝水提醒裝置」作為示範。





過去在竹科公司擔任產品經理時,總希望把每件事做到最好。這次也不例外——從電子零件的選擇、軟體撰寫、EasyEDA 畫電路圖與拉線、送板、除錯,到 3D 圖檔繪製與列印,全都自己嘗試搞定。



當然,過程中也遇到不少「意外」:一開始用 AI 幫忙畫電路圖,結果送洗兩次都無法使用..我的 $$$🥲;最後還是找了一位 Freelancer 協助,付出一筆費用,才終於完成。歷經三個月,這個裝置總算誕生了!這也讓我更清楚,AI 雖然能提供靈感,但要畫好一片 PCB,還是需要專業的經驗。

學生透過這個裝置,可以學習 Arduino/ESP32 的基本知識,並認識到裝置上使用的各種元件:RGB LED、ESP32-C3、MPU6050 六軸感測器、SSD1306 顯示器等。每個元件我都設計了兩到三個實作範例,並鼓勵學生自行發想不同應用方向,激發創造力!



如果您對這套「AI coding + Arduino 實作課程」也有興趣,歡迎與我聯絡,一起探索更多可能性!😊



#stonez56 #Stonez56創客工坊 #智慧喝水管家 #喝水提醒裝置 #Arduino手作課程 

2026/07/01

台北城市科大 AI 智慧開發課程

 昨天很榮幸受邀到臺北城市科技大學,以 AI 智慧開發 為主題進行授課。工程學院黃院長親自跟我介紹校園環境,依山傍水,窗外即可遠眺觀音山與新落成的淡江大橋,真的是好山好水、令人心曠神怡。



這次課程主要分享如何運用 Google Antigravity IDE 2.0 快速進行 AI coding,對象是機械工程系、電機工程系、資訊工程系以及電腦與通訊工程系的老師與教授們。經過三個小時的交流,大家對 AI Coding 已建立了清晰的概念。

我也介紹了自己開發的研究小幫手——文獻矩陣生成器,並展示完整的開發流程,最後提供我製作的文獻網站給老師們試用。

這次的分享收穫滿滿,也感受到師生們對 AI 技術的高度興趣。期待未來還有機會再次到城市科大與大家交流!

最後還要感謝謝茶米老師(黃信溢)推薦!! 茶米老師教室😊

#ai教學 #aicoding #stonez56 Stonez56 創客工坊 







2026/05/23

Google Antigravity IDE 2.0 最新公告 + 額外更新

最近 IDE 改動讓開發者炸鍋,Google 員工在 r/Google_antigravity 上回應:


👉 IDE 支援並沒有被移除,只是溝通不清楚

👉 Antigravity 2.0 改善 IDE 連線、修復 Windows 啟動問題

👉 提供還原 IDE 設定與擴充套件的指引

👉 新版 IDE & Antigravity 2.0 已經推出

👉 本週 Gemini 使用量全員重置


更猛的是,Google 工程師 Varun Mohan 在 X 宣布:

👉 所有付費層級的 Gemini 模型速率限制直接 3 倍提升!

👉 再次重置大家的 Gemini 配額; 3 倍提升是永久性的~~ 👍


Antigravity IDE 爭議暫時止血,但你覺得這樣的補償能挽回信任嗎?


Reddit 公告:
https://www.reddit.com/r/google_antigravity/comments/1tkuqxe/antigravity_ide_feedback/


Varun Mohan X 貼文:
https://x.com/_mohansolo/status/2057331857755422922

 


2026/05/21

ESP32-C3 與 MPU6050 的進階開發

 


引言 (Introduction)

在嵌入式開發與 Maker 的世界裡,微機電感測器(MEMS)的讀取通常是踏入硬體互動的第一步。然而,當我們試圖在底層硬體(ESP32-C3 SuperMini)上,將生硬的 MPU6050 角度數據轉化為流暢、具備擬真物理互動的 OLED 遊戲或模擬時,往往會踩入一連串教科書上沒寫的「硬體與演算法地雷」。

本篇文章將完整記錄如何從開機死鎖(Hang)的黑畫面一步步排查,導入精確的感測器融合(Sensor Fusion)與全零點校正,並最終在記憶體受限的單晶片上,徒手刻出一個支援 30 顆方塊實時碰撞、相互依靠堆疊的輕量級物理引擎。

第一章:幽靈的開機死鎖——解密 ESP32-C3 的 Strapping Pins 陷阱

很多初學者在將 MPU6050 連接上 ESP32-C3 SuperMini 並使用預設的 I2C 腳位(SDA=8, SCL=9)後,會遇到一個極其詭異的現象:程式燒錄成功(Upload OK),但序列埠監視器(Serial Monitor)永遠只印出第一行引導碼:

Plaintext
ESP-ROM:esp32c3-api1-20210207

隨後整個系統陷入無限期的死鎖,連 setup() 裡最頂端的 Serial.println() 都來不及執行。

核心原因分析:

問題不在軟體,而在硬體的「開機配置腳(Strapping Pins)」。ESP32-C3 晶片在硬體重置(Reset)的瞬間,會去偵測 GPIO 8 與 GPIO 9 的電位狀態,以決定晶片是要進入「SPI Boot 正常開機」還是「ROM Boot 燒錄模式」。

當 MPU6050 模組上的 4.7kΩ I2C 上拉電阻(Pull-up Resistors)直接把 GPIO 8 的電位拉高或拉低到異常狀態時,晶片在開機瞬間就會誤判啟動模式,進而硬體級鎖死。

工程解決方案:

徹底避開衝突腳位,在軟體中手動重新映射通訊軌道。我們將 I2C 匯流排改至安全且完全不影響開機配置的 GPIO 4 (SDA)GPIO 5 (SCL)

C++
Wire.begin(4, 5); // 徹底避開 GPIO 8 開機地雷
Wire.setTimeOut(50); // 設置硬體超時防線

透過更換安全引腳與加入 setTimeOut 超時防線,即便硬體通訊中斷,底層函式庫也不會再讓 CPU 無限期死等硬體回應。

第二章:桌上的「鬧鬼」滑行——全感測器零點深度校正

當 I2C 通訊順利暢通後,我們嘗試在 OLED 上繪製一個基準框,並讓小球隨角度滑動。此時第二個經典盲點浮現:將板子平放在絕對靜止的桌面上,小球卻在幾秒鐘內自己緩緩「滑出平台」撞牆。

為什麼單純校正陀螺儀(Gyro)是不夠的?

一般的範例程式只會在開機時對陀螺儀進行取樣取平均,以扣除角速度的漂移(Drift)。然而,放在桌上靜止時,加速度計(Accelerometer)本身也帶有硬體偏置误差(Offset)

受限於晶片封裝、洞洞板表面的銲接傾角、或是桌面本身的微小傾斜,加速度計讀到的 $X, Y$ 軸絕對不會是完美的 0.0。由於互補濾波器(Sensor Fusion)會不斷參考加速度計的絕對角度,這 $\pm 2^\circ \sim 3^\circ$ 的微小硬體誤差會被誤判為持續的傾斜,導致小球產生「自動滑行」的靈異現象。

深度水平校正演算法:

我們必須在開機時執行取樣(例如 200 次),不僅記錄陀螺儀偏置,更要把當前桌面狀態下的加速度計絕對三角角度(Roll/Pitch)直接記錄下來,並在 loop 運算中扎實地扣除它:

C++
// 減去開機時的桌面偏置,將當前狀態定義為「絕對 0 度基準」
float accRoll  = rawAccRoll - errorAccRoll;
float accPitch = rawAccPitch - errorAccPitch;

這樣一來,不論銲接再怎麼歪、桌面再怎麼斜,只要放在桌上不動,數值就會死死咬在 0 度,水晶球便能滑順地定格在正中央。

第三章:從冰面滑行到重力暴衝——非線性物理與 LERP 緩動

為了提升視覺的擬真度與互動的爽快感,系統的滾動速度不能是死板的線性移動,必須引入真正的加速度(Acceleration)與慣性阻尼(Friction)

  1. 重力加速度累積:傾斜角度(Roll/Pitch)作為力(Force)施加在物體上,速度隨時間持續累積($V = V + a$)。手腕傾斜角度越大,施加的加速度越高,物體會呈現指數級的暴衝感。

  2. LERP (線性插值) 濾波緩動:為了消除未過濾的手震雜訊,我們不讓方塊直接瞬移到目標物理座標,而是利用緩動公式:

    $$\text{Current Position} += (\text{Target Position} - \text{Current Position}) \times \text{Factor}$$

    這讓物體在畫面上移動時,產生了一種如同在冰面上滑行的油潤液壓感與重力慣性。

第四章:極限壓榨效能——30 顆粒子實時碰撞堆疊引擎

專案的終極挑戰,是在單晶片上實施群體粒子模擬:在 OLED 畫面上繪製最大邊界框,生成 30 個 $4 \times 4$ 像素的獨立小方塊,當它們受到重力滑向特定牆角時,必須互相堆疊依靠、自然緊密排列,且彼此絕不產生重疊或穿透。

幽靈隱形牆的 Debug 經驗:

在初期測試中,主迴圈明明只命令 U8g2 繪製 30 個方塊,但當方塊滑落到底部時,卻會在距離底壁還有 10 像素的地方「憑空卡住」,死死地排成一列,彷彿撞上了隱形牆。

經查,元凶在於交叉碰撞檢查(Axis-Aligned Bounding Box, AABB)的內部迴圈上限被硬編碼寫死了常數:

C++
for (int j = 0; j < 30; j++) { ... } // ❌ 越界讀取地雷

當這個常數與實際陣列大小產生偏差時,C++ 在執行碰撞判定時,會讀取到陣列邊界之外的未初始化記憶體垃圾數據(Uninitialized Memory)。這些垃圾數據在物理邏輯上被誤判為「已經死死躺在底部的方塊」,導致真實的 30 個方塊在移動時,提前撞上了這些看不到的記憶體幽靈。

工業級物理引擎解法:

  1. 內存徹底清空:開機時使用 memset(boxes, 0, sizeof(boxes)); 徹底洗淨陣列,抹除一切硬體隨機殘留值。

  2. 多重鬆弛迭代(Relaxation Iterations):當多個方塊在牆角同時擠壓時,方塊 A 撞 B、B 又同時撞牆。我們在單次 loop 內加入 3 次迭代解算(Sweep),在極短的時間差 $dt$ 內反覆修正重疊座標,讓 30 顆方塊能夠展現出如同沙子般完美、扎實的依靠堆疊視覺特效。

C++
// 核心多重鬆弛迭代碰撞檢查結構
for (int k = 0; k < 3; k++) { 
  for (int i = 0; i < NUM_BOXES; i++) {
    // 預計移動的新座標計算與 AABB 矩形碰撞判定...
    // 發生重疊時,精確倒推邊緣座標並將該軸向速度(vx/vy)安全歸零
  }
}

結語 (Conclusion)

透過這一連串的硬體引腳更換、雙重零點校正、LERP 緩動機制,以及修正越界內存的碰撞演算法,原本生硬跳動的感測器訊號,在 ESP32-C3 上成功被賦予了真實的動態生命力。

完整的粒子堆疊物理引擎代碼已開源(詳見上文),不論你是想為你的機器人專案加入更滑順的角度追蹤,還是想在小螢幕上實作精緻的街機互動,這套整合了 Sytem Architecture (SA) 穩定防禦UI/UX 視覺美學 的底層框架,都能為你的下一個 Maker 作品打下最扎實的技術基石!