【EP-21】怎麼使用 AI 生成前端網頁，用 Google 試算表當資料庫？
你用過 Google 試算表嗎？你知道它除了與 Google 表單串接，或者當作線上 Excel 使用，它還可以當作網站資料庫嗎？
各位一定有用過 Google 表單（Google Forms）以及 Google 試算表（Google Sheets）吧？
Google Workspace 是 Google 推出好幾年的雲端服務，中間改了好幾次名字，其中的 Google 文件、Google 表單、Google 試算表廣受歡迎。
我自己用 Google 表單做了記帳表，讓我跟我老婆將每日購物的消費金額，只要是與家庭共同開支有關，就記在表單內。
當我們做好表單，只要點選「回覆」→「在試算表中查看」，就會建立新的試算表。
Google 表單拿來記帳沒什麼問題，只是使用 Google 表單就會受限於它原本的功能。
例如我希望計算每月消費情況，想知道兩個人當月各自花了多少錢。
原本的 Google 表單的原始設計只是用來做問卷調查，所以太過細緻的計算它沒辦法做到。
但是我們可以透過 Google 試算表的 Apps Script 功能，在裡面添加程式碼，來滿足進階的需求。
Google 試算表的 Apps Script 功能
要使用試算表的 Apps Script 功能，點擊試算表的「擴充功能」→「Apps Script」。
Apps Script 不是新功能，遠在 ChatGPT 推出之前就存在了。
但是因為要寫程式，所以造成相當的門檻，一般沒學過程式的人也不太會使用此功能。
可是現在有了 AI 的幫助，這些都不是問題，只要你讀過本篇文章，就知道怎麼做。
打開 Apps Script 後會進入以下畫面，你要添加的程式就在「程式碼.gs」。
接著開啟 ChatGPT ，輸入以下類似的提示詞：
我希望使用 Google Sheets 裡面的 Apps Script 功能，在裡面撰寫程式碼，以下是我的需求：
我希望能夠有一前端頁面（HTML），能夠顯示Google Sheets內，每個月「老公」及「老婆」，各自花費多少錢。
關於 Google Sheets 的相關資訊如下：
table name：表單回應 1
表格欄位：
時間戳記：2025/3/8 下午 12:20:57（範例）
你是誰？：有 2 個選項，老公、老婆
消費項目：有 4 個選項，飲食、水電費、家用品、其他
金額
附註說明
此時 ChatGPT 4o 應該會給你兩段程式碼。
第一段的程式碼會是後端邏輯，把它貼到 Apps Script 內的「程式碼 .gs」 ，然後要記得存檔。
接著 4o 應該也有產製前端 HTML 語法給你，你必須在 Apps Script 內新增 HTML 檔，再把 4o 給你的程式碼貼上去。
新增 HTML 檔的操作方式如下：
部署程式
接著點選右上角的「部署」→「新增部署作業」，此時會跳出新視窗。
點選新視窗左上角的齒輪，點選「網頁應用程式」，在設定部分填寫說明，切記要在「誰可以存取」欄位，選擇「所有人」。
再來就依照指示往下按，如果中途跳出視窗顯示無法授權什麼的，就選擇「進階」，然後再繼續往下按。
到最後系統會提供給你網址，複製此網址，就可以新網頁上看到結果。
測試成功！
這是一個很簡單的功能，所以很適合用 AI 來做，接著還可以使用 AI 做更多進階功能。
例如每個月寄信通知我，誰應該給對方多少錢，統計每個項目的花費等等，甚至做成圖表。
技術細節
要在 App Script 寫程式，要注意幾件事，
使用
SpreadsheetApp操作表單這是 Apps Script 特有的語法，不能直接套用在一般的 JavaScript 或 Node.js 裡。
常用物件包括：SpreadsheetApp: 用來操作整個 SpreadsheetgetActiveSpreadsheet(): 取得目前開啟的文件getSheetByName(name): 取得特定名稱的工作表
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('表單回應 1');取得表格資料要用
getDataRange().getValues()const data = sheet.getDataRange().getValues();上述會回傳整個表單的「二維陣列」資料，第一列是欄位名稱。這個陣列是
Object[][]，所以無法像pandas或 JS 的物件直接索引，可以使用header.indexOf("欄位名")找出欄位索引。使用 HtmlService.createHtmlOutputFromFile() 建立前端
function doGet() { return HtmlService.createHtmlOutputFromFile('index'); }上述是建立前端畫面的方式，讓你可以把
.html當成前端頁面使用。Apps Script 的執行配額限制
執行時間：單次最多 6 分鐘
呼叫 Spreadsheet 的 API：每天最多 90,000 次
上述這些語法也不用記，你只要記得在 Apps Script 有 Google 自定義的函式。其他細節 AI 都能夠幫你完成，只是你下提示詞時務必要提醒 AI 。
然後使用 Google 試算表當資料庫，只能當作小型應用，最好是你個人、家庭，或者小公司內部使用。別想說拿這個當作官網資料庫。
App Script 適合作更多一系列的研究，所以最近幾期我都會針對 App Script 分享相關應用程式，歡迎持續關注。
最後，如果你對於用 AI 寫程式也有興趣，歡迎加入 Vibe Coding 的行列，它的意思是使用 AI ，在一種輕鬆的氛圍下寫程式，而不是注意程式細節。
2025 年台灣第一屆 Vibe Coding 黑客松已經開始報名，目前相關規則都在籌辦中，官網如下：