零基礎也能寫出有後台的網頁！阿剛老師「GAS 完美提示詞生成工具」完全攻略

 大家晚安大家好！在昨晚的「T+教育家年華」直播中，我展示了一款我用gemini開發的工具：GAS (Google Apps Script) 完美提示詞生成工具。它徹底解決了教育工作者想要建立互動式網頁（如學生作品上傳、點數存摺）卻苦於缺乏後台資料庫技術的痛點。這款工具能自動生成包含後台邏輯的 AI 提示詞，讓 AI 立即為您寫出完整的程式碼，實現零基礎架設互動網頁的夢想。本文將為您整理詳細的操作教學與避坑指南。

為什麼你需要這個工具？

一般的 AI 生成網頁通常只具備前端畫面，缺乏儲存資料的能力，導致資料無法持續追蹤。阿剛老師的工具結合了 Google Sheets (試算表) 與 GAS，巧妙地將試算表變身為輕量級的後台資料庫，為您的數位教具加上「記憶」功能。

工具特色

• 內建模版：已預設好 GAS 後台設定，解決一般老師不會寫後端程式的困難。
• 風格選擇：可一鍵選擇如「手繪風格」等多種介面設計，讓您的網頁更具個人特色。
• AI 優化功能：內建 AI 潤飾按鈕，幫助您優化功能描述，確保生成的程式碼更精準、更符合需求。

點擊前往 GAS 完美提示詞生成工具

實作教學：四步驟打造你的互動網頁

第一步：描述需求與生成提示詞

打開工具介面，輸入您的網頁功能需求，例如：「我要寫一個可以上傳學生作品並按讚的網頁，介面分教師端（可上傳）與學生端（可按讚）」。選擇風格後，點擊生成按鈕，工具將會產生一段包含前後端邏輯的完整提示詞。

第二步：讓 AI 寫程式

將工具生成的那一大段提示詞複製，貼給 AI（如 ChatGPT 或 Gemini）。AI 會迅速生成兩部分程式碼：負責資料存取的後端程式碼 (GAS)，以及負責畫面的前端程式碼 (HTML)。

第三步：部署 GAS 後台（關鍵步驟！）

這是讓網頁具備「記憶」的核心環節：

• 設定試算表：新增 Google 試算表，並在「擴充功能」中開啟 Apps Script。
• 貼上程式碼：將 AI 生成的「後端程式碼」貼入 Apps Script 編輯區並儲存。
• 部署設定：點擊「部署」->「新增部署」，類型選擇「網頁應用程式」。
• 權限設定：將存取權限設定為「所有人 (Anyone)」，這是讓學生能夠使用後台的關鍵。部署成功後，請複製獲得的「網頁應用程式網址」（即資料庫 API）。

第四步：連接前端與測試

將複製來的 GAS 網址，貼到 AI 生成的前端程式碼（HTML）中指定的「硬編碼設定區」或欄位。完成連接後，開啟網頁並測試功能。如果成功運行，您的 Google 試算表內就會自動出現對應的資料。

完整工具使用示範與實戰過程

如果您想看阿剛老師親自操作的完整示範，請觀看以下直播影片，將實作過程從頭到尾完整呈現：

進階技巧與常見問題 (QA)

在使用過程中可能會遇到一些疑問，這裡彙整了阿剛老師提供的專業建議：

• Q1：程式執行出錯怎麼辦？ 這是寫程式的必經之路！請按鍵盤的 F12 開啟瀏覽器的「開發人員工具」（Console/主控台），將顯示的紅色錯誤代碼複製貼給 AI，請它修正即可。
• Q2：可以使用學校的教育帳號 (.edu) 製作嗎？ 強烈建議使用個人 Gmail 帳號。教育帳號在權限上限制較多，可能無法開啟「分享給所有人」的權限，導致後台無法被讀取或無法使用分享功能。
• Q3：如果要修改功能怎麼辦？ 如果修改了後端（GAS）程式碼，必須重新部署，並選擇「建立新版本」，才能確保網址指向最新且有效的程式碼。
• Q4：不想每次都改程式碼來連結資料庫？ 阿剛老師的工具支援「免改碼連結」。將前端網頁上傳後，在網頁介面上直接貼上 GAS 網址即可，系統會自動生成帶有參數的 QR Code 或連結，學生掃描後即可直接連上你的資料庫。

雖然「寫程式」聽起來很難，但透過阿剛老師的「GAS 完美提示詞生成工具」，我們只需要負責「想像功能」和「複製貼上」，剩下的邏輯與架構都由 AI 幫忙搞定。如阿剛老師所說：「寫程式出狀況是正常的」，重點是多練習。不管是製作班級點數系統、大富翁遊戲，還是作品互評網頁，現在你都有能力自己動手做做看囉！

Firebase版現代極光風格班級榮譽點數系統分享

 其實，開發班級點數系統的初衷很簡單：我希望課堂上的獎懲能更透明且即時。早期的版本雖然堪用，但在更換電腦或分享給校內老師使用時，常要手動修改程式碼中的 Firebase 設定，這對不熟悉程式的老師來說是一道門檻。這次版本，我特別請 Gemini 協助，將「設定流程」徹底圖形化，並加入了「一鍵分享」的功能。現在，我們不需要動到任何一行程式碼，只要動動手指就能完成設定，大幅提升了系統的易用性與穩定性。

課堂教學上的實際應用與效益

這套現代極光風格的點數系統，不只在技術上實現了進化，更在課堂教學上成為了營造良性競爭氛圍的利器。以下是它在實際應用中帶來的顯著效益：

• 分組競賽：透過「分組檢視」功能，學生可以即時看到小組的平均得分。這能激發小組內部的互助精神，學生會主動提醒組員專心，共同為團隊爭取榮譽點數。
• 視覺化回饋：現代化的極光特效與加分時的發光動畫，讓點數不只是冷冰冰的數字，而是一種成就感的具現化，有效增強學生對正面行為的記憶。
• 親師聯繫：透過產生的「家長連結」，家長在家就能看到孩子在校的具體表現（如：幫助同學、創意表現等），減少了資訊落差，讓學校的獎勵機制可以順利延伸到家庭環境。

點擊前往體驗現代極光點數系統

軟體快速上手指南與影片教學

系統的設計已經極度簡化，讓不具備程式背景的老師也能快速上手。以下是佈署這套系統的五個關鍵步驟：

第一步：進入教師模式 為了安全起見，系統預設為唯讀的「家長模式」。請在網址末端加上 ?mode=teacher 才能開啟教師管理面板（例如：index.html?mode=teacher）。

第二步：設定資料庫 (Firebase) 點擊右上角的齒輪圖標，將您在 Firebase 申請的 apiKey 等六行資訊貼入文字方塊中儲存。系統會自動重連，您不需要編輯任何檔案。

第三步：建立學生名單 進入教師面板，點擊「管理學生」。您可以直接貼上名單，格式為「姓名」或「姓名,分組」，一行一位，快速完成佈署。

第四步：自訂行為項目 點擊「管理行為」，依照班級經營需求設定加分（如：準時交作業）或扣分（如：上課分心）的項目與點數。

第五步：分享與連線 利用「家長連結」功能產生 QR Code，印出來貼在教室後方或傳到班群，讓大家隨時檢視。

如果您想透過視覺方式學習設定過程，請參考下方的教學影片：(近期更新...)

這套現代極光風格的班級榮譽點數系統，不僅提供了美觀的視覺體驗，更透過簡化的後台設定，讓教師能夠將更方便的使用。

輕量化區網廣播與作業管理工具 V5.1 開放下載

 在學校電腦教室上課時，最常遇到的問題不是設備不夠好，而是「頻寬」與「管理」。市面上大型的廣播教學軟體雖然功能齊全，但安裝繁瑣，且對於網路環境的要求較高，有時還會造成系統卡頓。為了解決這個痛點，阿剛老師我一直在想，能不能開發一個 綠色、免安裝、夠輕量 的工具，只要在同一個區域網路內，就能快速同步老師的畫面、收作業，甚至能像跑馬燈一樣隨時提醒學生進度。於是，這款結合了 UDP 廣播與 Flask 網頁技術(我也不懂這是什麼技術，都是gemini幫我寫好的)的 V5.1 版就這樣誕生了。

輕量工具如何改變課堂教學上的實際應用？

這套工具專為優化電腦教室環境而設計，具備多項實用功能，能夠解決老師在課堂上最常遇到的溝通與管理問題。特別是利用「通知」發送文字讓學生可以 一鍵複製 程式碼或帳號，極大地提升了教學順暢度。它主要提供以下幾個實用場景：

• 一鍵複製，拯救打字慢的同學：老師直接用「通知」發送文字，學生端可以「一鍵複製」直接貼上使用。
• 網址自動導航：老師端點一下「派送網址」，全班學生的瀏覽器就會同步彈出該網頁，省去手動輸入時間。
• 無聲提醒與跑馬燈：透過跑馬燈功能，在螢幕上方輕輕帶過「剩餘時間 10 分鐘」，既不干擾又能精準傳達。
• 桌面動態同步：利用 MJPEG 串流技術，將老師的桌面即時轉播到學生的瀏覽器，學生不用抬頭看模糊的投影幕。
• 作業快速收繳與監看：學生端直接網頁上傳作業。

點擊前往 V5.1 軟體下載頁面

軟體操作教學步驟：讓您快速上手

輕量化工具的優勢在於操作直觀。以下是幾個核心功能的簡要操作指南：

1. 訊息通知與一鍵複製

在老師端輸入框輸入一段文字（如：通關密語、程式碼片段）。點擊「💬 發送通知」。學生端右下角會跳出通知視窗，學生只需點擊視窗內的「複製」按鈕，文字就會進入剪貼簿，直接在作業中貼上即可。

2. 自動開啟網頁

在老師端輸入或貼上網址（http://...）。點擊「送發送跑馬燈」。學生端電腦會立即啟動預設瀏覽器並開啟該頁面，省去手動輸入的時間。

3. 進行桌面廣播與作業收繳

在老師端設定「廣播畫質」，點擊「▶ 開始桌面廣播」。系統會詢問是否推播網址，點選「是」，學生端會自動同步開啟老師的操作畫面。若要收繳作業，點擊「📂 開啟作業上傳」，學生端即可透過網頁傳檔。(廣播桌面的網址，在同區網下，ipad開啟網址也可以觀看)

「電腦教室-區網廣播與作業管理工具 V5.1」是一款真正從教學現場需求出發的輕量化工具。它證明了高效管理不需要犧牲系統性能，同時減少了複雜軟體帶來的網路負擔。如果您正在尋找一個能夠提升電腦教室互動性、同時保持網路流暢的解決方案，歡迎立即前往下載頁面體驗，感受輕量化帶來的全新管理效率。

解決 Gemini 公開連結亂糟糟:Chrome擴充gemini分享連結整理分類工具

 您是否也遇過 Google Gemini 累積了大量「公開分享連結」，卻因為官方管理頁面過於簡陋而感到困擾？隨著分享的教學範例或草稿越來越多，我們發現 Google 提供的管理功能極為陽春，不僅缺乏分類、資料夾，甚至連基本的搜尋功能都沒有。為了徹底解決這個效率低下的痛點，我決定自己動手開發一款 Chrome 擴充功能，讓連結管理變得輕鬆有序。

軟體開發由來：連結大戶的痛點

每次要回溯或查找過去分享的特定連結，都必須耗費大量時間在頁面上滾動尋找，工作效率因此大打折扣。既然官方短期內似乎沒有計劃推出分類管理功能，我便決定自行開發一個簡單、實用、專門用於整理 Gemini 分享連結的 Chrome 擴充功能。雖然這個小工具介面設計追求平實簡單，但對於每天產生大量連結的使用者（例如我）來說，它絕對是提升效率的幫手。

點擊前往下載 Gemini 整理工具 (ZIP)

詳細安裝教學：如何手動載入擴充功能

由於這款工具目前尚未上架至 Chrome 線上應用程式商店，因此需要大家動手進行「手動載入」安裝。請不用擔心，整個過程並不複雜，只需按照以下步驟操作即可成功啟用擴充功能：

• Step 1. 下載並解壓縮：請將程式碼壓縮檔下載至電腦，並右鍵選擇解壓縮。您會得到一個包含 manifest.json、content.js 等檔案的資料夾。
• Step 2. 開啟 Chrome 擴充功能管理頁面：打開 Chrome 瀏覽器，在網址列輸入 chrome://extensions/ 並按下 Enter。
• Step 3. 開啟「開發者模式」：請在頁面右上角，點擊開關將「開發者模式 (Developer mode)」啟用。
• Step 4. 載入解壓縮後的資料夾：開啟開發者模式後，點擊頁面左上角的「載入解壓縮後的擴充功能 (Load unpacked)」。
• Step 5. 選取資料夾：在跳出的檔案視窗中，找到剛才 Step 1 解壓縮出來的那個資料夾（注意：請選取資料夾本身，不要點進去找檔案），然後點擊「選取資料夾」。
• Step 6. 完成安裝：如果您在瀏覽器中看到了「Gemini 分享連結整理工具」的圖示，就代表安裝成功了！現在您可以直接前往 Gemini 分享頁面開始使用。

軟體使用功能簡介：讓管理井然有序

安裝成功後，進入 Gemini 分享管理頁面即可使用以下核心功能：

• 側邊欄管理：頁面右側會出現一個分類控制面板，您可以輕鬆自訂和管理您的資料夾或分類標籤。
• 下拉選單分類：每個連結卡片都會多出一個選單，使用者可以透過選取快速將連結歸類到設定好的資料夾中。
• 備註與搜尋：點擊「✎」圖示可以為連結新增個人備註，強大的搜尋功能不僅能搜尋連結標題，連您撰寫的筆記內容也能一併找到。
• 支援匯出匯入：如果您需要在多台電腦上同步分類結果，可利用匯出及匯入功能，輕鬆將您的分類資料移轉至其他裝置。

這個自製的 Chrome 擴充功能雖然小巧，卻能大幅改善 Gemini 連結管理上的混亂局面。如果您也是重度使用者，經常被雜亂的分享連結所困擾，強烈建議您試試這款工具。希望它能幫助您輕鬆實現連結的分類與歸檔，讓工作流程更加順暢！