(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 可能在安全上有漏洞或不恰當的實作。
錯誤調試困難:AI 有時候會生成看起來合理但錯誤很難察覺的代碼,追錯可能比純手寫程式更複雜
適用範圍有限:目前 vibe coding 在簡潔、規模較小、功能明確的專案上比較實用;在大型系統、複雜企業應用、性能要求極高的情況下還有很大挑戰。
怎麼開始/如何應用於教學或案子中
可以拿簡單的小專案(例如:留言板、圖片上傳、簡易儀表板)作為練習題,讓 AI 幫你生成一版雛形,你再去改
在教學裡,可以讓學生先用自然語言構思功能,再與 AI 合作生成程式碼,讓學生理解「需求 → 程式」的橋樑
練習 prompt engineering(如何寫出讓 AI 輸出的品質比較好的 prompt)
同時也必須教學生怎麼 閱讀、理解、修改、測試、重構 AI 所產出的程式碼,才能把它變成可用的、健全的產品
二、常見的網頁(站)類型
網頁與網站的差異
網頁 (Page):通常是單一頁面。
網站 (Site):由多個網頁組合而成。
網頁程式的基礎:大部分網頁由以下三種語言組成:
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
敎育局虛擬機也可存放
常見的網頁類型
(1) 遊戲類網頁
透過網頁程式可以設計各式小遊戲,例如:
五子棋(範例示範)
數獨
貪吃蛇
跳恐龍
俄羅斯方塊
大富翁
彈珠台
小蜜蜂...
(2) 教學小工具
這類工具能成為老師課堂上的好幫手,例如:
學生加扣分系統
特殊表現記錄
抽籤工具
倒數計時器
聯絡簿記錄
作業檢查
點名系統
請假紀錄
排座位工具
班級圖書管理系統
校園修繕系統
場地預約系統...
把PDF檔轉成電子書
(3) 教學網站
針對不同科目,老師可以設計教學網站,提供學生自學與練習:
國語:作文教學、筆順示範、文體比較、唐詩宋詞賞析
數學:四則運算、分數教學、看時鐘、座標與比例、面積計算
自然:植物觀察、星空探索、電池接法、磁鐵原理
英語:英文配對記憶遊戲
其他:例如「HTML 與 CSS 語法入門教學網站」
由於
總結
網頁的應用非常廣泛,不論是遊戲、教學小工具,還是完整的學習網站,都能透過 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,設為管理人員
GAS+Google Sheet當資料庫:gemini使用教育版帳號無法分享
請將資料庫由個人firebase資料庫改為 GAS+Google Sheet
這次研習所設計的感恩夢想牆:(內建firebase資料庫)
設計一個學校班書(一箱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的「沙盒限制」在搞鬼啊!它把你的程式碼當成潛在的危險,很多酷炫功能都會被鎖住,真的很不方便!
可用以下方式來處理(資料取自瘋浪客)
function doGet(e){
return HtmlService.createHtmlOutputFromFile("index");
}
六、資料庫的使用
使用內建或個人的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 Sheets後台資料庫功能!
我已經成功為班級圖書借用系統加入了Google Sheets後台資料庫功能!
📊 新增的Google Sheets功能:
🔧 設定說明:
點擊「⚙️ Google Sheets 設定說明」按鈕查看詳細設定步驟
需要建立三個工作表:「書籍清單」、「學生名單」、「借閱記錄」
需要取得Google Sheets API金鑰
💾 自動儲存功能:
新增書籍時自動儲存到Google Sheets
新增學生時自動儲存到Google Sheets
借書/還書時自動更新書籍狀態和借閱記錄
所有操作都會顯示儲存進度提示
🔄 資料同步:
系統啟動時自動從Google Sheets載入資料
點擊「🔄 重新載入資料」按鈕可手動同步
載入時會顯示進度提示
📋 資料結構:
書籍清單: ID | 書名 | 作者 | 圖示 | 狀態 | 借閱者姓名 | 借閱者座號
學生名單: ID | 姓名 | 座號
借閱記錄: 時間 | 學生姓名 | 座號 | 書籍名稱 | 動作
目前系統使用模擬資料展示功能,要連接真實的Google Sheets需要:
建立Google Sheets試算表
在Google Cloud Console取得API金鑰
將程式碼中的YOUR_SHEET_ID和YOUR_API_KEY替換為實際值
現在您的圖書館系統具備了完整的雲端資料庫功能,所有資料都會安全地儲存在Google Sheets中!
我來幫你診斷並修復 Google Sheets 連線問題!
我已經加強了測試功能的診斷能力!現在測試按鈕會進行更詳細的檢查,幫你找出問題所在。
🔍 新的診斷功能會檢查:
基本連線測試 - 確認能否連接到你的 Google Sheets
權限檢查 - 驗證 API 金鑰和存取權限
工作表檢查 - 確認「書籍清單」工作表是否存在
詳細錯誤報告 - 提供具體的解決建議
📋 請按照以下步驟排查:
點擊測試按鈕 - 現在會顯示更詳細的錯誤訊息
檢查瀏覽器控制台 - 按 F12 打開開發者工具,查看 Console 分頁的詳細日誌
確認 Google Sheets 設定:
試算表必須設為「知道連結的使用者」可以檢視
必須有名為「書籍清單」的工作表
API 金鑰必須啟用 Google Sheets API
🛠️ 常見問題解決方法:
403 錯誤:試算表權限問題,需要設為公開或可分享
404 錯誤:試算表 ID 錯誤或試算表不存在
工作表不存在:需要手動建立「書籍清單」工作表
現在請點擊測試按鈕,它會告訴你具體是哪個步驟出了問題!
我看到問題了!你的 API 金鑰只有讀取權限,但沒有寫入權限。錯誤 401 表示沒有權限執行寫入操作。
讓我修改程式,改用只需要讀取權限的方式來測試連線,並提供解決方案!
我已經升級了診斷功能!現在它會進行完整的四步驟檢查,幫你找出確切的問題所在。
🔍 從你的錯誤訊息可以看出:
✅ 讀取權限正常 - 可以成功讀取試算表資訊
❌ 寫入權限失敗 - 出現 401 錯誤,這是權限不足的問題
🛠️ 問題原因:
Google Sheets API 的 API 金鑰只能用於讀取公開資料,無法用於寫入資料。寫入需要更高的權限認證。
💡 解決方案:
方法一:改用僅讀取模式(最簡單)
手動在 Google Sheets 輸入書籍和學生資料
程式只負責讀取和顯示
適合展示和查看用途
方法二:使用 Google Apps Script(推薦)
開啟你的 Google Sheets
點選「擴充功能」→「Apps Script」
建立一個網路應用程式來處理寫入操作
程式透過你的 Apps Script 來寫入資料
方法三:OAuth 2.0 認證(較複雜)
需要用戶登入 Google 帳號授權
可以獲得完整的讀寫權限
現在請點擊「🔍 診斷 Google Sheets 連線問題」按鈕,它會給你完整的診斷報告和具體的解決建議!
我來幫你改用 OAuth 2.0 認證方式,這樣就能獲得完整的讀寫權限了!
完成!我已經成功將系統升級為 OAuth 2.0 認證方式。現在你擁有一個具備完整讀寫權限的圖書館管理系統!
🔐 主要改進:
✅ OAuth 2.0 認證系統
用戶需要登入自己的 Google 帳號
安全的授權機制,完整的讀寫權限
不需要將試算表設為公開
✅ 智能登入狀態管理
即時顯示登入狀態和用戶資訊
自動啟用/禁用功能按鈕
登入後自動載入資料
✅ 完整的診斷功能
檢查 OAuth 設定是否正確
測試 API 載入和權限
提供詳細的設定指引
🛠️ 接下來需要做的:
建立 OAuth 2.0 憑證:
前往 Google Cloud Console
建立 OAuth 用戶端 ID
設定授權的網域
更新程式碼:
將 YOUR_CLIENT_ID.apps.googleusercontent.com 替換為實際的 Client ID
測試系統:
點擊「登入 Google 帳號」
授權應用程式存取 Google Sheets
開始使用完整功能!
現在點擊「🔍 診斷 OAuth 2.0 連線問題」按鈕,系統會引導你完成所有設定步驟。一旦設定完成,你就能享受無限制的讀寫功能了!
使用 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
設定步驟更少,更容易完成
✅ 完整的診斷工具
測試基本連線
測試資料載入和儲存
提供詳細的故障排除建議
🛠️ 設定步驟:
建立 Google Sheets:
建立新試算表,命名為「班級圖書館」
建立三個工作表:書籍清單、學生名單、借閱記錄
建立 Google Apps Script:
在 Google Sheets 中點擊「擴充功能」→「Apps Script」
貼上提供的完整程式碼
部署 Web App:
點擊「部署」→「新增部署作業」
選擇「網頁應用程式」
權限設為「任何人」
更新 URL:
將產生的 Web App URL 更新到程式碼中
🌟 Google Apps Script 的優點:
完全免費:無需付費 API,無使用限制
設定簡單:只需幾個步驟就能完成
自動權限:不需要複雜的認證流程
高度可靠:由 Google 託管,穩定性極佳
完整功能:支援所有 CRUD 操作
現在點擊「Google Apps Script 設定說明」按鈕,系統會提供完整的設定指南,包括詳細的程式碼和步驟說明!
請AI提供code.gs程式碼
有更改過程式,重新部署時
📋 故障排除步驟:
開啟瀏覽器開發者工具:
按 F12 或右鍵選擇「檢查」
切換到「Console」分頁
嘗試新增書籍:
輸入一些測試書籍
觀察控制台的詳細日誌
檢查常見問題:
404 錯誤:WEB_APP_URL 不正確
403 錯誤:權限設定問題,需要設為「任何人」
302 錯誤:Web App 未正確部署