車城國小｜網路程式設計輔助精靈

1 帳號與環境準備

🗺️ 網站架構與必備平台一覽

本系統完美整合了上述平台。請先在下方完成各平台的帳號註冊與金鑰申請，再進入下一步進行設定。

🟢 核心必要平台

必要

❶ GitHub 帳號

存放前端網頁，提供免費 https 網址。

🔗 前往申請 (github.com/signup)

注意：請直接用 Email 註冊，保持帳號獨立。

必要

❷ Google 帳號 (GAS)

後端邏輯與資料庫存放區。

🔗 前往 GAS (script.google.com)

若無特教需求，強烈建議使用「個人 @gmail.com」帳號以避開網域權限阻擋。

必要

❸ Google AI Studio

取得 Gemini API 金鑰，每天免費出題。

🔗 申請金鑰 (aistudio.google.com/app/apikey)

申請後請妥善保存金鑰，將於第 4 步填入。

🟣 進階建議與選用平台

建議

❹ Cloudflare Workers

解決教育版帳號 CORS 跨域問題中繼站。

🔗 註冊 CF (dash.cloudflare.com)

若您使用學校教育帳號發布 GAS，請務必申請。

建議

❺ Anthropic Claude API

進階 AI 選項，生成速度更快。

🔗 申請 Claude (platform.claude.com)

選用

❻ EZPage 網頁部署工具

存放教學精靈網站，推廣給其他老師，一鍵上傳 GitHub。

🔗 前往 EZPage (ezpage.tw 備用連結)

產出前端程式碼後，將會引導您使用此工具上傳。

2 網站門面 (前端與中介)

2-1 選擇 index.html 前端範例

UI 範例選擇

確認後，後端 (GAS) 的範例將會自動與您的選擇對應，確保 API 完全相容。

2-2 Cloudflare Workers 轉接設定 (架構圖 ❹)

這將成為前端與 GAS 中間的安全橋樑，負責解決 CORS 阻擋問題。

啟用 Cloudflare Worker

勾選後，系統將於第四步額外產生一份 worker.js 中繼檔。

3 建造雲端大腦 (GAS 設定)

3-1 後端參數與對應設定

已鎖定之後端 (Code.gs) 模組

系統已根據您在「前端 (UI)」的選擇，自動綁定了對應的後端程式碼。

建立雲端硬碟資料夾與取得 ID

若專案涉及檔案存取，系統需要您提供資料夾 ID。

範例網址：
drive.google.com/drive/folders/1A2B3C_xyz9876543210

☝️ 進入雲端資料夾後，網址中最後面的一串英文數字就是您的 ID。

務必對該資料夾開啟「知道連結的人皆可編輯或檢視」權限。

4 程式碼產出與發布中心

請於下方填寫對應的網址與 ID。填寫時，黑色框框內的程式碼會自動即時更新！

index.html (前端介面檔)

🚀 將網頁發布至全世界 (使用 EZPage + GitHub)

請先確認已點擊上方藍色按鈕下載 index.html 到電腦中。
前往 EZPage 部署平台 (架構圖 ❻)。
使用您的 GitHub 帳號 (架構圖 ❶) 登入授權。
選擇建立新專案，將剛剛下載的 index.html 上傳。
部署完成後，您將獲得一個專屬的 https://xxx.github.io/... 免費網址！

Code.gs (後端邏輯檔)

請將此完整程式碼貼入 Google Apps Script 專案中。