40 Vibe coding

(2025/10/08)

• • (常用功能)使用EZPage來協助將網頁上傳Github  https://gg90052.github.io/ezpage/

  • 我的Youtube頻道：本次錄影影片會放在此  https://www.youtube.com/channel/UC0a9tu9sy79wV-t2DuyPORA 

一、什麼是Vibe coding

以下為chatGPT的答覆：https://chatgpt.com/share/68dc9849-d63c-8003-9c95-1e3fad3d0d4f 

Vibe coding是一種最近在軟體開發圈子裡開始流行的概念，其核心是把「用自然語言（或比較直覺的方式）溝通想法」與「由 AI 來產出程式碼」作結合。也就是說，你不必一行一行寫程式語法，而是告訴 AI 你想做什麼功能、效果、流程，讓 AI 幫你把程式碼寫出來，你再去調整、除錯、優化。

• 潛在的風險與挑戰

  • 可維護性與程式品質：AI 自動產出的程式碼可能結構混亂、不易閱讀或重構，需要人工介入整理與改寫。

  • 安全性 / 敏感資料處理：若含有資料庫存取、API 金鑰之類敏感的部分，AI 可能在安全上有漏洞或不恰當的實作。

    • 有人形容說這是小孩拿大槍

    • https://www.dcard.tw/f/softwareengineer/p/259905393 

    • https://www.facebook.com/photo/?fbid=1353627959466967&set=a.220165369479904 

  • 錯誤調試困難：AI 有時候會生成看起來合理但錯誤很難察覺的代碼，追錯可能比純手寫程式更複雜

  • 適用範圍有限：目前 vibe coding 在簡潔、規模較小、功能明確的專案上比較實用；在大型系統、複雜企業應用、性能要求極高的情況下還有很大挑戰。

• 怎麼開始／如何應用於教學或案子中

• • 可以拿簡單的小專案（例如：留言板、圖片上傳、簡易儀表板）作為練習題，讓 AI 幫你生成一版雛形，你再去改

  • 在教學裡，可以讓學生先用自然語言構思功能，再與 AI 合作生成程式碼，讓學生理解「需求 → 程式」的橋樑

  • 練習 prompt engineering（如何寫出讓 AI 輸出的品質比較好的 prompt）

  • 同時也必須教學生怎麼 閱讀、理解、修改、測試、重構 AI 所產出的程式碼，才能把它變成可用的、健全的產品

二、常見的網頁(站)類型

1. 網頁與網站的差異

   • 網頁 (Page)：通常是單一頁面。

   • 網站 (Site)：由多個網頁組合而成。

2. 網頁程式的基礎：大部分網頁由以下三種語言組成：

   • HTML：用來建立內容與結構。(是網頁的骨架 )

   • CSS：用來設計版面與美化網頁。(負責網頁的美化 )

   • JavaScript：用來增加互動與功能。

   • 我請AI做的【HTML&CSS教學網站】：(可順便介紹網頁空間)

     • 我是使用使用Gemini Canvas來製作：https://g.co/gemini/share/0f03654f2a56  

     • 我另外把上面程式放在Google協作平台：(整頁嵌入) https://sites.google.com/view/wenyutest2025/htmlcss%E6%95%99%E5%AD%B8 

       • 上例的範例1~範例10會出不來

       • 明明用Canva AI或Gemini Canvas 寫好了超炫的程式碼，想用Google Sites的「整頁嵌入」功能展示，結果...效果全部跑不出來！這就是Google Sites的「沙盒限制」在搞鬼啊！它把你的程式碼當成潛在的危險，很多酷炫功能都會被鎖住，真的很不方便！

       • 另一種用GAS的呈現方式 (下面有介紹如何使用！)
         https://script.google.com/macros/s/AKfycby9JK9D8Kmcc4Ynj99jARp6Qi5586plOHbgZNjz8EtEijNKzgFs8IEwMieaBuxLqBoB2A/exec  

     • Gibhub：https://wenyu8787-rgb.github.io/html_css/ 

     • 敎育局虛擬機也可存放

3. 常見的網頁類型

(1) 遊戲類網頁

3. • 透過網頁程式可以設計各式小遊戲，例如：

     • 五子棋（範例示範）

     • 數獨

     • 貪吃蛇

     • 跳恐龍

     • 俄羅斯方塊

     • 大富翁

     • 彈珠台

     • 小蜜蜂...

(2) 教學小工具

3. • 這類工具能成為老師課堂上的好幫手，例如：

     • 學生加扣分系統

     • 特殊表現記錄

     • 抽籤工具

     • 倒數計時器

     • 聯絡簿記錄

     • 作業檢查

     • 點名系統

     • 請假紀錄

     • 排座位工具

     • 班級圖書管理系統

     • 校園修繕系統

     • 場地預約系統...

     • 把PDF檔轉成電子書

(3) 教學網站

3. • 針對不同科目，老師可以設計教學網站，提供學生自學與練習：

     • 國語：作文教學、筆順示範、文體比較、唐詩宋詞賞析

     • 數學：四則運算、分數教學、看時鐘、座標與比例、面積計算

     • 自然：植物觀察、星空探索、電池接法、磁鐵原理

     • 英語：英文配對記憶遊戲

     • 其他：例如「HTML 與 CSS 語法入門教學網站」

   • 由於

4.  總結

網頁的應用非常廣泛，不論是遊戲、教學小工具，還是完整的學習網站，都能透過 HTML + CSS + JavaScript 來實現。未來我們將透過 AI 協助，更快速地完成這些網頁設計！

三、AI工具介紹

• 本次將介紹三種AI工具 (請chatGPT說明優缺點：https://chatgpt.com/share/68dc9849-d63c-8003-9c95-1e3fad3d0d4f )

  • Gemini Canvas：https://gemini.google.com/app?hl=zh-TW  (請用私人gmail帳號，才能分享)

    • 程式沒有列出版本數，所以常不能精確的返回到所要的版本

    • 常常聊一聊又創新了一個新主題，就要再導引回來原主題，但有時就回不來了！！

    • 可用【複製Canvas】回到原主題，但會使用2.5pro模型，免費帳號聊不到3句就沒了！

    • 如果使用匯入原始檔的方式，又會生成不是原本樣式的新版本。

    • 需要使用資料庫時，會直接使用內建的Firebase資料庫(這資料庫我們無法觀看、修改)

  • Canva AI：https://www.canva.com/

    • 美工的部份是Canva的強項，感覺做起來會比較美

    • 一次約可做到60個版本

    • 如果個人帳號沒有Canva AI，請加入新上國小的團隊：https://www.canva.com/brand/join?token=qlECckIYpMLVsh2XkUtsiQ&brandingVariant=edu&referrer=team-invite  

  • websim AI：https://websim.com/ 

    • 可選用模型，如Sonnet(我覺得這模型是寫程式中最強的，但所需點數高)，今天研習就不用它了！！

四、實作看看

• 重點：是您一定要知道接下來要做什麼？AI才能幫您的忙！！

• 除錯：按F12到Console，把相關資訊給AI處理

• 一個案子：運氣好可能一下子就完成了，但如果要做到完美可能要花好多天，甚至完成不了！！

• 遊戲類：

  • 請設計一個五子棋遊戲(https://wenyu8787-rgb.github.io/Gomoku/ )(Gemini Canvas製)

    • 完成後直接上傳到Github (下方有介紹如何上傳到Github)

  • 請設計一個俄羅斯方塊遊戲 (https://wenyu8787-rgb.github.io/Tetris) (Gemini Canvas製)

• 教學小工具

  • 請模仿classdojo製作一個學生上課表現加扣分的系統(https://wenyu8787-rgb.github.io/classmanager2/   )(websim AI製作)

  • 請設計一個互動式班級座位表(https://wenyu8787-rgb.github.io/classseat/ ) (Canva AI製)

    • 老師端使用的工具，可以把資料存在本機端即可

    • 如果按F5資料就不見，記得要加上＂使用瀏覽器的本地儲存 localStorage ＂

  • 請設計像附件的閱讀打卡牆(附件圖於下方) 

    • 使用資料庫：

      • 內建firebase資料庫：https://g.co/gemini/share/db702443a108  

        • 變成自己的：先【複製Canvas】，接下來：請將UserID為XXXX，設為管理人員

        • 內建firebase資料庫必需架購在Canvas的網址下

      • 個人firebase資料庫：https://gemini.google.com/share/ac126752f8b1 

        • 請將資料庫由內建firebase資料庫改為個人firebase資料庫

        • 請將UserID為XXXX，設為管理人員

        • 可獨立建置個人網站：https://wenyu8787-rgb.github.io/readbook2/ 

      • GAS+Google Sheet當資料庫：gemini使用教育版帳號無法分享 

        • 請將資料庫由個人firebase資料庫改為 GAS+Google Sheet

        • 可獨立建置個人網站：https://wenyu8787-rgb.github.io/readbook3/ 

  • 這次研習所設計的感恩夢想牆：(內建firebase資料庫)

    • 原始版：https://gemini.google.com/share/462bd5621746

    • 參考維真老師完成的可上傳圖片版：https://g.co/gemini/share/86e26bd38607   

  • 設計一個學校班書(一箱30本)，提供班級老師借用的班書管理系統

    • 內建firebase資料庫：https://g.co/gemini/share/b4d00a880e09 (這兩個是一樣的https://gemini.google.com/share/b4d00a880e09  )

  • 請設計一個班級圖書借用系統

    • 使用資料庫

      • 使用外部Firebase資料庫(https://wenyu8787-rgb.github.io/classlibrary1/ )(Gemini Canvas製)

        • 使用帳密登入(可自行註冊，管理：admin@123.com、001@123.com) (Gemini Canvas製)

      • 使用外部GAS+Google Sheet當資料庫(https://wenyu8787-rgb.github.io/classlibrary2/ )(Canva AI製)

  • 請設計一個校園修繕系統

    • 使用資料庫

      • 使用外部Firebase資料庫(匿名登入) (https://wenyu8787-rgb.github.io/repair/ )(Gemini Canvas製)

      • 做了兩款：

        • https://gemini.google.com/share/e020f263829c  (內建firebase資料庫)

        • https://gemini.google.com/share/de22b2906388 (個人firebase資料庫)

• 教學網站

  • HTML & CSS 入門教學 (https://wenyu8787-rgb.github.io/html_css/ )(Gemini Canvas製)

• 觀摩別人的好作品

  • 以下圖檔取自網路(https://story0228.my.canva.site/to-do-list )

  • 使用Gemini Canvas的附件加上下面圖片，幾乎可以達到原汁原味的地步！！(實作)

五、免費的網頁空間

• Gemini Canvas內建空間 (別人可以複製我們的作品，比較不建議)

  • 產生網頁的程式碼可修改

• Canva  內建空間

  • 產生網頁的程式碼不可修改，只能放Canva產生的網站

  • 有些功能在Canva AI平台，可能會顯示不出來！！因此上"匯出資料"常做不出來

• Gibhub：(推薦)

  • 使用EZPage來協助上傳 https://gg90052.github.io/ezpage/ 

  • 參考：阿剛老師的異想世界

• Google協作平台(有一些特效出不來)

  • 這就是Google Sites的「沙盒限制」在搞鬼啊！它把你的程式碼當成潛在的危險，很多酷炫功能都會被鎖住，真的很不方便！

  • 可用以下方式來處理(資料取自瘋浪客)

六、資料庫的使用

• 使用內建或個人的Firebase資料庫

  • 進入 Firebase 控制台，網址：https://console.firebase.google.com/ 

  • gemini內建firebase資料庫  https://g.co/gemini/share/db702443a108  

    • 內建的資料無法去資料庫觀看，最好加上匯出資料、匯入資料、清空資料的功能

  • 個人firebase資料庫 https://gemini.google.com/share/ac126752f8b1   

  • 這是一個很棒的升級！為了將您的校園修繕系統從模擬資料庫（如您檔案中使用的瀏覽器記憶體或 localStorage）轉換為 Firebase Firestore 雲端資料庫，我們需要引入 Firebase SDK、處理用戶身份驗證，並將所有資料操作（新增、更新、刪除、即時載入）替換為 Firestore API 呼叫。 

  • 個人資料庫的建置，如下

• 使用電子郵件/密碼登入

• • 上方左邊是應用程式，內有一些重要的設定值，再提供給AI放進我們的程式裡面

  • 上圖右邊是Rule，請AI提供給我們，放到規則裡面去

• 資料內容：

  • 在左側導覽列，點擊 Firestore Database。

• 頁面載入後，您應該會看到左側的樹狀結構。請依序點擊展開：

  • artifacts

  • 接下來，您會看到一個看起來很長的資料夾名稱，它就是您的 __app_id。

  • public

  • data

在 data 節點下，您就可以找到資料了，請特別注意第二步，那個資料夾名稱就是您的專案 ID。如果您能順利找到它，就能看到您的資料了。

• 總結：

  • 校園修繕系統：資料庫修改為個人firebase  https://g.co/gemini/share/de22b2906388 

  • https://console.firebase.google.com/ 

    • 建立專案(專案名稱不能用中文字)

    • 建立資料庫

    • 取得您的 Firebase 配置資訊，</> (Web) 按鈕來註冊一個新應用程式 ，請將Firebase 配置信息 替換到  index.html檔案中

    • 步驟三：開啟匿名身份驗證 (Authentication)

    • 此應用程式設計為任何人都可以匿名使用，但為了讓 Firestore 知道「使用者」正在操作，我們需要啟用匿名登入。

      • 在 Firebase 控制台，點擊左側導覽列的 Authentication (身份驗證)。

      • 切換到 Sign-in method (登入方法) 頁籤。

      • 找到並點擊 Anonymous (匿名)。

      • 點擊 Enable (啟用)，然後儲存。

    • 步驟四：設定 Firestore 安全規則 (Security Rules) (到這邊再建立資料庫也可以)

      • 這是最重要的一步！如果您的規則太嚴格，您的應用程式將無法讀取或寫入資料，會在瀏覽器控制台顯示 Permission Denied 錯誤。

      • 由於這是一個公開的校園修繕系統，我們允許任何已登入（即已完成匿名登入）的使用者進行讀寫。

      • 在 Firebase 控制台，點擊左側導覽列的 Firestore Database。

      • 切換到 Rules (規則) 頁籤。

      • 將規則替換為以下內容，然後點擊右上角的 Publish (發布)：

• 使用Google Sheet API (未成功使用)

  • 進入 Google cloud取得API Key（網址：https://console.cloud.google.com/  ）

• 使用 Google Apps Script

  • Google Sheets 本身不像 Firestore 那樣提供內建的即時監聽（Real-time Listener）功能，也無法直接從前端網頁（瀏覽器）安全地進行寫入操作。

  • 一個可行的現代方法是使用 Google Apps Script (GAS)作為中間層，將 HTTP 請求（從網頁送出）轉發給 Google Sheet。 

我來幫你改用 Google Apps Script 方法，這是最推薦的方式！

我已經成功將系統改用 Google Apps Script 方法！這個方法比 OAuth 2.0 更簡單且完全免費。

🎉 主要改進：

✅ Google Apps Script 整合

• 不需要複雜的 OAuth 2.0 認證

• 完全免費，無使用限制

• 自動處理 Google Sheets 權限

• 支援完整的讀寫功能

✅ 簡化的設定流程

• 只需要設定一個 Web App URL

• 不需要 API 金鑰或 Client ID

• 設定步驟更少，更容易完成

✅ 完整的診斷工具

• 測試基本連線

• 測試資料載入和儲存

• 提供詳細的故障排除建議

🛠️ 設定步驟：

1. 建立 Google Sheets：

   • 建立新試算表，命名為「班級圖書館」

   • 建立三個工作表：書籍清單、學生名單、借閱記錄

2. 建立 Google Apps Script：

   • 在 Google Sheets 中點擊「擴充功能」→「Apps Script」

   • 貼上提供的完整程式碼

3. 部署 Web App：

   • 點擊「部署」→「新增部署作業」

   • 選擇「網頁應用程式」

   • 權限設為「任何人」

4. 更新 URL：

   • 將產生的 Web App URL 更新到程式碼中

🌟 Google Apps Script 的優點：

• 完全免費：無需付費 API，無使用限制

• 設定簡單：只需幾個步驟就能完成

• 自動權限：不需要複雜的認證流程

• 高度可靠：由 Google 託管，穩定性極佳

• 完整功能：支援所有 CRUD 操作

現在點擊「Google Apps Script 設定說明」按鈕，系統會提供完整的設定指南，包括詳細的程式碼和步驟說明！

• 請AI提供code.gs程式碼

• 有更改過程式，重新部署時

📋 故障排除步驟：

1. 開啟瀏覽器開發者工具：

   • 按 F12 或右鍵選擇「檢查」

   • 切換到「Console」分頁

2. 嘗試新增書籍：

   • 輸入一些測試書籍

   • 觀察控制台的詳細日誌

3. 檢查常見問題：

   • 404 錯誤：WEB_APP_URL 不正確

   • 403 錯誤：權限設定問題，需要設為「任何人」

   • 302 錯誤：Web App 未正確部署