(2025/12/03)
(常用功能)使用EZPage來協助將網頁上傳Github https://gg90052.github.io/ezpage/
我的Youtube頻道:本次錄影影片會放在此 https://www.youtube.com/channel/UC0a9tu9sy79wV-t2DuyPORA
20251008鳳山國中錄影檔(供參):
本次上課錄影檔:
開始小故事:
我的教師情緒彩虹卡,就這樣產生了!!
一、什麼是Vibe coding
Vibe coding是一種最近在軟體開發圈子裡開始流行的概念,其核心是把「用自然語言(或比較直覺的方式)溝通想法」與「由 AI 來產出程式碼」作結合。也就是說,你不必一行一行寫程式語法,而是告訴 AI 你想做什麼功能、效果、流程,讓 AI 幫你把程式碼寫出來,你再去調整、除錯、優化。此詞最早由 AI / 機器學習圈的重要人物 Andrej Karpathy 在 2025 年初提出:“There’s a new kind of coding I call ‘vibe coding’, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.”
潛在的風險與挑戰
安全性 / 敏感資料處理:若含有資料庫存取、API 金鑰之類敏感的部分,AI 可能在安全上有漏洞或不恰當的實作。
資安問題:釣魚網站可能越來越多了
可維護性與程式品質:AI 自動產出的程式碼可能結構混亂、不易閱讀或重構,頭痛醫頭、腳痛醫腳的沒系統的特性,需要人工介入整理與改寫,反而花更多時間。
適用範圍有限:目前 vibe coding 在簡潔、規模較小、功能明確的專案上比較實用;在大型系統、複雜企業應用、性能要求極高的情況下還有很大挑戰。
怎麼開始/如何應用於教學或案子中
可以拿簡單的小專案(例如:小遊戲、留言板、圖片上傳、簡易儀表板)作為練習題,讓 AI 幫你生成一版雛形,你再去改
二、常見的網頁(站)類型
網頁與網站的差異
網頁 (Page):通常是單一頁面。
網站 (Site):由多個網頁組合而成。
網頁程式的基礎:大部分網頁由以下三種語言組成:
HTML:用來建立內容與結構。(是網頁的骨架 )
CSS:用來設計版面與美化網頁。(負責網頁的美化 )
JavaScript:用來增加互動與功能。
我請AI做的【HTML&CSS教學網站】
常見的網頁類型
(1) 遊戲類網頁
透過網頁程式可以設計各式小遊戲,例如:
五子棋、翻翻樂、數獨、貪吃蛇、跳恐龍、俄羅斯方塊、大富翁、彈珠台、小蜜蜂...
現在常見的遊戲大都使用:請生成"XX遊戲"一行提示詞,就可以成功生成基本型的遊戲了!!
(2) 教學小工具
這類工具能成為老師課堂上的好幫手,例如:
學生加扣分系統、特殊表現記錄、抽籤工具、倒數計時器、聯絡簿記錄、作業檢查、點名系統、請假紀錄、排座位工具、班級圖書管理系統、校園修繕系統、場地預約系統...
(3) 教學網站(或教學教具)
針對不同科目,老師可以設計教學網站(教學教具),提供老師教學或學生自學與練習用!
總結
網頁的應用非常廣泛,不論是遊戲、教學小工具,還是完整的學習網站,都能透過 HTML + CSS + JavaScript 來實現。未來我們將透過 AI 協助,更快速地完成這些網頁設計!
三、AI工具介紹與比較
Gemini Canvas:https://gemini.google.com/app?hl=zh-TW (請用私人gmail帳號,才能分享)
無顯示版本:可在最前方加上"每次修正或更新都會產生一個新的版本檔案(版本從1.0.0開始),不覆蓋,保留舊檔。"
可先用免費版"快捷",使用"思考型"可能聊不到3句就沒了!但快捷版容易跑偏,PRO可以一次多問幾個問題
可上傳參考附件(圖片、PDF檔或影片)來建立網頁,輸入網址感覺助益不大!
可以開啟別人設計的作品,點擊右下角的"試用Gemini Canvas"的按鈕,就可以站在巨人肩膀上來繼續創作!!
需要使用資料庫時,會直接使用內建的Firestone資料庫
使用到內建資料庫時,只能用分享網址,不能上傳到自己的網頁空間!!
Canva AI:https://www.canva.com/
美工的部份是Canva的強項,感覺做起來會比較美
會顯示版本(一次約可做到60個版本)
不能上傳參考附件,但可提供網址供參考
最近新增了Canva Sheet 當資料庫(類似Excel),使用到內建資料庫時,只能用Canva發佈的網址(不能放外部空間)
如果個人帳號沒有Canva AI,請加入新上國小的團隊:https://www.canva.com/brand/join?token=qlECckIYpMLVsh2XkUtsiQ&brandingVariant=edu&referrer=team-invite
四、實作看看
重點:是您一定要知道接下來要做什麼?AI才能幫您的忙!!
一個案子,運氣好可能一下子就完成了,但如果要做到完美可能要花好多天,甚至完成不了!!
實作一:遊戲類
(實作)請設計一個"數獨"遊戲
遊戲設計範例說明
Gemini Canvas設計五子棋遊戲 (Gemini Canvas製作過程)
C anva AI設計翻翻樂
增加功能:增加提示、增加音效、增加難易度、最後導入【排行榜】,增加內建資料庫的使用!!根據需要來加入功能
完成後直接上傳到Github (下方有介紹如何上傳到Github)
實作二:教學小工具
(實作)請設計一個"教師情緒彩虹卡"(設計過程)
我製作的教學小工具總表
班級小管家:https://wenyu8787-rgb.github.io/classmanager2/ (HTML檔下載)
互動式班級座位表:https://wenyu8787-rgb.github.io/classseat/ (HTML檔下載)
閱讀打卡牆
內建firestone資料庫:https://g.co/gemini/share/db702443a108
請將UserID為XXXX,設為管理人員
個人firestone資料庫:https://gemini.google.com/share/ac126752f8b1
GAS+Google Sheet當資料庫:gemini使用教育版帳號無法分享
Canva+Canva Sheet資料庫:https://wenyu168.my.canva.site/read2 (管理者密碼是 admin999 )
感恩夢想牆:(內建firestone資料庫)
多人作文平台
班書管理借用系統:(內建firestone資料庫)
班級圖書管理系統(帳號/密碼
https://gemini.google.com/share/6e1048fb98dd (admin@123.com)
課後社團報名系統 (帳號/密碼,個人firestone資料庫)
PDF萬用工具箱
實作三:資料庫的使用
Firestone資料庫
內建Firestone資料庫
個人Firestone資料庫
實作:簡易圖書管理系統
您希望將這個圖書管理系統改為網路共享版本,讓所有登入的使用者都能看到、新增、修改和清空同一份圖書資料。為了實現這個功能,我需要調整 Firebase Firestore 的資料儲存路徑,將資料從原本的個人私有路徑 (Private Data) 轉移到共享的公開路徑 (Public Data) 下。
實作四:教學網站(或教學教具)製作
教學網站建置
三大書商電子書
康軒數位高手
進入後,選【教學資源】
南一數位資源入口網
先進入【南一數位資源整合】,進入後,選【教材資源】
翰林行動大師
進入後,選【教材資源】
PDF萬用工具箱(這也是我自己針對自己的需要來產生的網站)
請先下載一個單元的PDF檔
請針對附件內容,整理出各章節介紹、好教好學的動畫呈現、重點整理、評量、好玩互動遊戲、網路資源...
好的,我理解您的要求!您希望將這個圖書管理系統改為網路共享版本,讓所有登入的使用者都能看到、新增、修改和清空同一份圖書資料。
為了實現這個功能,我需要調整 Firebase Firestore 的資料儲存路徑,將資料從原本的個人私有路徑 (Private Data) 轉移到共享的公開路徑 (Public Data) 下。
五、免費的網頁空間
Google Sites 有時有一些特效出不來
Gemini Canvas 內建空間 (別人可以複製我們的作品)
產生網頁的程式碼可修改
Canva 內建空間
產生網頁的程式碼不可修改,但可複製
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 Apps Script
Google Sheets 本身不像 Firestore 那樣提供內建的即時監聽(Real-time Listener)功能,也無法直接從前端網頁(瀏覽器)安全地進行寫入操作。
一個可行的現代方法是使用 Google Apps Script (GAS)作為中間層,將 HTTP 請求(從網頁送出)轉發給 Google Sheet。
請AI提供code.gs程式碼
有更改過程式,重新部署時
📋 故障排除步驟:
開啟瀏覽器開發者工具:
按 F12 或右鍵選擇「檢查」
切換到「Console」分頁
嘗試新增書籍:
輸入一些測試書籍
觀察控制台的詳細日誌
檢查常見問題:
404 錯誤:WEB_APP_URL 不正確
403 錯誤:權限設定問題,需要設為「任何人」
302 錯誤:Web App 未正確部署