零基礎也能寫出有後台的網頁！阿剛老師「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 幫忙搞定。如阿剛老師所說：「寫程式出狀況是正常的」，重點是多練習。不管是製作班級點數系統、大富翁遊戲，還是作品互評網頁，現在你都有能力自己動手做做看囉！