40 Vibe coding(二)

(2025/12/03)

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

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

  • 20251008鳳山國中錄影檔(供參)：

    • 上集：https://youtu.be/ImmDpwwONgU 

    • 下集：https://youtu.be/fEAk79Upxkw 

  • 本次上課錄影檔：

    • 上集：https://youtu.be/lo0JD5xUglU 

    • 下集：https://youtu.be/dOOY73-bMf8 

• 開始小故事：

• • 我的教師情緒彩虹卡，就這樣產生了！！

  • 阿玉研習作業分享 

一、什麼是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 可能在安全上有漏洞或不恰當的實作。

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

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

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

  • 資安問題：釣魚網站可能越來越多了

    •  https://gemini.google.com/share/65edc72f8d22 

  • 可維護性與程式品質：AI 自動產出的程式碼可能結構混亂、不易閱讀或重構，頭痛醫頭、腳痛醫腳的沒系統的特性，需要人工介入整理與改寫，反而花更多時間。

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

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

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

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

1. 網頁與網站的差異

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

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

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

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

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

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

   • 我請AI做的【HTML&CSS教學網站】

3. 常見的網頁類型

(1) 遊戲類網頁

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

     • 五子棋、翻翻樂、數獨、貪吃蛇、跳恐龍、俄羅斯方塊、大富翁、彈珠台、小蜜蜂...

     • 現在常見的遊戲大都使用：請生成＂XX遊戲＂一行提示詞，就可以成功生成基本型的遊戲了！！

(2) 教學小工具

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

     • 學生加扣分系統、特殊表現記錄、抽籤工具、倒數計時器、聯絡簿記錄、作業檢查、點名系統、請假紀錄、排座位工具、班級圖書管理系統、校園修繕系統、場地預約系統...

(3) 教學網站(或教學教具)

3. • 針對不同科目，老師可以設計教學網站(教學教具)，提供老師教學或學生自學與練習用！

4.  總結

網頁的應用非常廣泛，不論是遊戲、教學小工具，還是完整的學習網站，都能透過 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)

• 實作二：教學小工具

  • 實作：請設計一個"教師情緒彩虹卡"

    • 設計過程，供參

    • 請設計一個教師情緒彩虹卡，每天老師抽一張，來激勵老師前進，不為小事而挫折，如＂你不孤單，你的努力都有被看到"，卡片內容至少有30張，且版面要美美的 

    • 最後再加個右下角的＂新增Gemini功能"

    • https://gemini.google.com/share/74f706f0192b   

• • 我製作的教學小工具總表

  • 班級小管家：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 

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

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

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

    • Canva+Canva Sheet資料庫：https://wenyu168.my.canva.site/read2 (管理者密碼是 admin999 )

  • 感恩夢想牆：(內建firestone資料庫)

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

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

  • 多人作文平台

    • https://wenyu8787-rgb.github.io/write/ 

  • 班書管理借用系統：(內建firestone資料庫)

    • https://gemini.google.com/share/b4d00a880e09  

  • 班級圖書管理系統(帳號/密碼

    • https://gemini.google.com/share/6e1048fb98dd (admin@123.com)

  • 課後社團報名系統 (帳號/密碼，個人firestone資料庫)

    • https://wenyu8787-rgb.github.io/afterschool/   

  • PDF萬用工具箱

    • https://gemini.google.com/share/37599e90f82c 

    • https://wenyu8787-rgb.github.io/wenyu_pdf/ 

• 實作三：資料庫的使用

  • Firestone資料庫

    • 內建Firestone資料庫

    • 個人Firestone資料庫 (進入 Firebase 平台，網址：https://console.firebase.google.com/ )

    • 有分私人版及共享版

  • 實作：簡易圖書管理系統

    • 參考的prompt如下：

      • 請設計一個資料庫欄位包含書名、作者、出版社及圖書簡介的一個簡易圖書管理系統

      • 請增加圖書資料匯出(Excel)、圖書資料匯入及清空圖書資料的功能  

      • 將本系統改為網路版，大家上線時看到同樣的資料庫內容 

      • 請將資料庫由內建資料庫改用firebase個人資料庫，資料庫相關參數如下：  apiKey: "AIzyDvw6GgPPqwt5f16ae93lvUqz_Mwrme0",  authDomain: "bok-251.firebaseapp.com",...

    • 各版本的結果如下：

      • 私人版：https://gemini.google.com/share/8c43fef349af 

      • 網路共享版本：https://gemini.google.com/share/df0f88ecc493 (同一份圖書資料)

      • 外部資料庫的私人版 https://gemini.google.com/share/40ce325d6a7a  (rule已改為共享版)

      • 外部資料庫的共享版https://gemini.google.com/share/69ac2f09cfee 

  • 您希望將這個圖書管理系統改為網路共享版本，讓所有登入的使用者都能看到、新增、修改和清空同一份圖書資料。為了實現這個功能，我需要調整 Firebase Firestore 的資料儲存路徑，將資料從原本的個人私有路徑 (Private Data) 轉移到共享的公開路徑 (Public Data) 下。

• 實作四：教學網站(或教學教具)製作

• 製作教學網站

  • 三大書商電子書

    • 康軒數位高手

      • https://digitalmaster.knsh.com.tw/

      • 進入後，選【教學資源】

    • 南一數位資源入口網

      • https://nanidigi.oneclass.com.tw/

      • 先進入【南一數位資源整合】，進入後，選【教材資源】

    • 翰林行動大師

      • https://edisc.hle.com.tw/

      • 進入後，選【教材資源】

  • PDF萬用工具箱(這也是我自己針對自己的需要來產生的網站)

    • https://gemini.google.com/share/37599e90f82c 

    • https://wenyu8787-rgb.github.io/wenyu_pdf/ 

    • 可針對PDF檔進行分割
      
      

• 實作：請製作一個教學網站

  • 請先下載一個單元的PDF檔

  • 請直接用canvas的【網頁】功能

    • 請針對附件內容做重點整理

  • 直接一開始就製作網站

    • 請針對附件內容，整理出各章節介紹、好教好學的動畫呈現、重點整理、評量、好玩互動遊戲、網路資源... 

• 製作教學教具

  • 如果需要在網頁上製作 3D 內容，請使用Three.js，Three.js 是一個基於 JavaScript 的 3D 繪圖框架

  • 三句話講完 Three.js

    • 它是讓你在網頁中顯示 3D 的工具。

    • 用 JavaScript 就能做出像遊戲引擎一樣的 3D 場景。

    • 非常適合教育、網頁互動、遊戲、科技展示。

  • 實作：請利用3DThree.js，製作出"太陽系互動模型"的教具

    • 請再加上以下功能：

      • 1.行星可自動旋轉、公轉

      • 2.滑鼠可控制視角

      • 3.點選行星可顯示介紹（如「木星是最大行星」）

      • 4.可讓學生加顏色、大小、速度來理解比例概念

    • 最後再點擊右下角的＂新增Gemini功能"

    • 結果如下：https://gemini.google.com/share/89a69cddbbae
      
      

  • 實作：請利用3DThree.js，製作出"3D 幾何立體教具（立方體、金字塔、球體）"

    • 請再加上以下功能：

      • 1.用滑鼠旋轉 3D 立體

      • 2.可切換透明模式（看到內部）

      • 3.可顯示邊長、面數、體積公式

      • 4.學生可調整長寬高或開啟展開圖（net）

    • 最後再點擊右下角的＂新增Gemini功能"

    • 結果如下：https://gemini.google.com/share/2f0f3b2e91ee 

附件一、免費的網頁空間

• Google Sites 有時有一些特效出不來

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

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

• Canva  內建空間

  • 產生網頁的程式碼不可修改，但可複製

• Gibhub：(推薦)

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

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

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

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

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

附件二、資料庫的使用

• 使用個人的Firebase Firestone資料庫

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

  • 將資料庫改用內建firestone資料庫或個人firestone資料庫

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

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

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

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

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

• 資料內容：

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

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

  • artifacts

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

  • public

  • data

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

• 使用 Google Apps Script

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

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

• 請AI提供code.gs程式碼

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

📋 故障排除步驟：

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

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

   • 切換到「Console」分頁

2. 嘗試新增書籍：

   • 輸入一些測試書籍

   • 觀察控制台的詳細日誌

3. 檢查常見問題：

   • 404 錯誤：WEB_APP_URL 不正確

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

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