別再從零開始 AI 寫程式:讓 AI Agent 直接幫你搞定 Google Apps Script 串接與開發

以 AI 變廢為寶 —用 Claude Design & Claude Code 打造屬於你的個人桌面 Dashboard 為例。

https://medium.com/media/488577f1a34898594b6da98d4e710915/href

完成品 Demo

https://medium.com/media/830e31b282946ca57fce6cba27ca24ac/href
把塵封在抽屜許多年的 iPhone 8 Plus 搖身一變成個人專屬的桌上 Dashboard Deck,內容完全客製化、製作完全免費。

前言

TL;DR 如果你只在意怎麼用 AI 打造屬於你的個人桌面 Dashboard 請忽略此章節。

大約是從 2021 年開始用 Google Apps Script 開發小工具串接自動化優化工作流程;那個年代沒有 AI、RPA 流程自動化也很少人在討論;很單純只是希望提升團隊協作效率,或提高個人生活舒適度,所有腳本都是我一行一行手刻出來的(用現在來看就是古法寫程式),但最難的其實不是寫程式本身,而是能不能串接?要怎麼串接?思維要怎麼跳脫框架?

之前做過的案例

  1. 目標 —對外公開的 Email 窗口收到信時希望能轉發到 Slack 工作 Channel。
    技術上 Google Apps Script 沒有當 Gmail 收到信件的事件
    ,因此我們換一條思路用排程功能每分鐘(或更長)執行一次:檢查未讀信件 ➡️ 讀取內容️️ ➡️ Strip HTML 轉發到 Slack ➡️ 標記已讀。
    如果只想針對特定信件(寄件人、標題內容)那就在 Gmail 上設定 Label Filter、檢查未讀信件改成 檢查未讀信件+Label 就能達成。
    ref: 「運用 Google Apps Script 轉發 Gmail 信件到 Slack
  2. 目標 — 自動查詢 GA 流量/Crash-free rate 發到 Slack 工作 Channel。
    Google Apps Script 本身就有現成的 AnalyticsData / AdSense Library,只要引入並設定好參數就能直接使用,幾乎是無痛整合。
    如果 App 想查詢閃退 Issue 細節、Top 10,只要再多做一步 Firebase to BigQuery 再從 Google Apps Script 引入 BigQuery Library 然後下 SQL 查詢就能做到。
    ref: 「Crashlytics + Google Analytics 自動查詢 App Crash-Free Users Rate」、「Crashlytics + Big Query 打造更即時便利的 Crash 追蹤工具
  3. 目標 — 自動彙整營運數據到 Google Sheet。
    承上做法,當時多做個 Web App 讓整個營運數據能在團隊的電視牆上一目瞭然;那時候遇到的技術問題是部分數據是在內部,外網無法穿透,所幸反過來改內網排程,每日發送數據到 Google Apps Script Web App,接收後處理填回 Google Sheet。
    ref:「使用 Google Apps Script 實現每日數據報表 RPA 自動化
  4. 目標 — 用現有資源建置一個簡易的 App 打包平台
    當時的背景是 App 打包服務遷移至 GitHub Actions,但是非工程團隊也會有 App 打包需求,以往都是透過人工處理;需要一個公司團隊內都可以用的服務來串接 GitHub Actions 來執行打包。
    用 Google Apps Script Web App 當平台、鎖住只有組織內帳號可使用,在平台表單填好打包資訊轉手觸發 GitHub Actions (GitHub API) 並發送打包 Slack 通知給對方。
    App 打包好是上傳到 Firebase App Distribution,可是 Google Apps Script 沒有內建的 Library,不過研究了一下可以直接用 googleapis 達成,最後也是無痛的串起來。
    ref:「使用 Google Apps Script Web App 串接 GitHub Actions 建置免費易用的打包工具平台

還有一些太小的案例就不列舉出來了,總之想傳達的是「辦法總比困難多」實際寫程式反而是最簡單的,要如何突破重重障礙串接起來才是困難的

技術限制

「辦法總比困難多」的前提,是技術上可行且合理;換句話說「方向錯了,努力也是徒勞」,我們可以不用實際寫程式但一定要知道何時可以「選擇」使用 Google Apps Script 開發小工具。

  • User-Agent 無法自訂:基於安全與防止濫用原因,Google Apps Script User-Agent 是無法自己指定的。(但其他 Header 欄位可以指定)
    影響:有些罕見的 API 服務需要帶資料在 User-Agent、目標網站 / API 封鎖 Google Apps Script User-Agent,這兩種情況都是硬限制、無法使用。
    Workaround:如果你硬要用的話可以透過 Cloudflare Worker 進行 Proxy 橋接。
  • 最長執行 6 分鐘:每次執行最多 6 分鐘,任務太大太多建議分段處理。
    另外總額度也有上限例如 Trigger 一天最多執行 90 分鐘。(但這條似乎是軟限制,我的腳本很多應該超過上限了卻沒有被阻擋)
  • 單次執行以同步阻塞為主:你無法在單次 execution 內派發多個執行緒並行處理任務;若任務耗時或需要大量並行處理,建議拆成多次執行、排程觸發。
  • 冷啟動:Faas 服務的通病,當任務太久沒觸發會進入睡眠、再次觸發時需要等待較長的時間。
    這問題加上任務需同步(阻塞)執行的限制,如果是部署成 Webhook 讓其他服務來呼叫很容易會被判斷成請求失敗,可能會重複請求、重複收到、重複執行。
    例如:Slack 硬要求 Webhook 服務端需在 3 秒內回應,以往經驗很常踩到這個問題。
  • Web App API 會跳轉址:基於安全性,Content service 回傳的內容會 redirect 到一次性 script.googleusercontent.com URL;HTTP client 需要支援 follow redirects。
    有的 Webhook 服務不會自動 302 跳轉就會失敗(例如:Jira Webhook)。
  • Web App HTML:網頁頂部會有防濫用聲明、無法達成真 RWD (頁面實際是 iframe 在 google 框架內)、網址很醜無法自訂、無法做到 PWA 滿版頁面。
  • 服務限制:還有一些服務取用的限制,不過正常使用下不太會踩到上限,除非你是需要高頻檢查即時響應,那就很容易摸到限制。
https://developers.google.com/apps-script/guides/services/quotas?hl=zh-tw

優勢與功能

了解完限制再來看看有哪些優勢、功能。

最大的優勢是直接無痛串接 Google 本家相關服務,Web App 存取方式可以選擇腳本擁有者本人身份、組織內人員、已登入 Google 的帳號、所有人,不需要自己做複雜的 OAuth 流程,一鍵設定一鍵完成一鍵開始執行

內建整合服務 Built-in Services:
不需在 GAS 服務中引用就能使用。

  • DocumentApp → Google Docs
  • SpreadsheetApp → Google Sheets
  • SlidesApp → Google Slides
  • FormApp → Google Forms
  • GmailApp → Gmail
  • CalendarApp → Google Calendar
  • DriveApp → Google Drive
  • SitesApp → Google Sites
  • Maps → 地圖 / 距離 / 路線
  • Translate → 翻譯

進階服務 Advanced Services:
需在 GAS 服務中引用才能使用。

  • Sheets API
  • Drive API
  • Calendar API
  • Gmail API
  • Analytics API / Analytics Data API
  • BigQuery API
  • Adsense API
  • YouTube Data API
  • Tasks API
  • Googleapis (Other/GCP)

工具 / 系統服務:

  • UrlFetchApp → 呼叫外部 API
  • PropertiesService → Key-Value 儲存
  • CacheService → 快取
  • LockService → 防併發控制
  • Utilities → 日期 / Hash / Base64
  • Logger → Log 輸出
  • HtmlService → 建立 Web UI、支援 Ajax 非同步更新內容
  • ContentService → 建立 API endpoint
  • Trigger → 排程自動執行

基本上開發上需要的東西該有的都有了,實務上就是把這些服務組合串接起來,就能達成流程自動化,例如:

  • 自動查詢 GA 流量/Crash-free rate 發到 Slack 工作 Channel:
    Analytics Data API 查資料、PropertiesService 儲存 Slack Bot Token、UrlFetchApp 打 Slack Send Message API
  • 自動彙整營運數據到 Google Sheet、數據 Dashboard Web:
    Trigger 排程執行 Function、LockService 確保只有我在執行、Analytics Data API 查資料、UrlFetchApp 取得外部服務資料、SpreadsheetApp 寫入 Google Sheet、HtmlService 輸出 Web App 介面、ContentService 輸出 JSON 資料+CacheService 資料緩存。

與 Cloud Function / Lambda 之類的 FAAS 差異

Google Apps Script 可以視為是環繞 Google 服務場景的 FAAS 腳本工具,限制較多但是目前完全免費、無痛串接 Google 服務;其他 FAAS 服務通常需要付費,但有部分免費額度、串接 Google 服務需要走正規 IAM or OAuth 流程比較複雜繁瑣。

不適合的場景

  • 本身非 Google 家族,例如想串接 Microsoft Office or OneNote…
  • 地端雲端混合,這比較適合 n8n or AI Agent 來做
  • 複雜計算或是大量資料處理,每個執行階段最多 6 分鐘會跑不完
  • 大型網站爬蟲、搶票程式,這也不用想了,Google Apps Script 很容易封鎖或是被 Cloudflare 反爬蟲阻擋

適合的場景

個人或是團隊內工作流程串接,以我個人來說我有很多腳本在幫我管理日常例行公事,例如每日通知 zhgchg.li 網站流量概況、GitHub Repo Issues 甚至是更新持股 Google Sheet 上的現價;團隊來說,App 發版流程可以結合 Google Calendar,檢查行事曆事件然後觸發(呼叫 GitHub Actions)對應的 CI/CD 流程,然後發送訊息到團隊 Slack Channel、轉發 App 送審失敗信件到 Slack。

以上是以人的視角重新回顧一次這幾年開發 Google Apps Script 的心得感受,再來是最近開始使喚 AI Agent 從 0 直接幫我開發 GAS 的實作感想與實際案例 —個人桌面 Dashboard Deck 。

讓 AI Agent 直接幫你搞定 Google Apps Script 串接與開發

最近開始嘗試從 0 就使用 AI 直接開發 Google Apps Script,結合上方的基礎知識(即使沒有,AI 掌握度也很高);完成度與準確性幾乎是 100%,可以說「從零開始 AI 寫程式」的時代也過去了。

實戰 — AI 變廢為寶 — 用 Claude Design & Claude Code 打造屬於你的個人桌面 Dashboard

問題

一直有一台汰換下來的 iPhone 8 Plus (iOS 16.7) 放在抽屜裡毫無用處,想說可以把它當成桌面小螢幕 Dashboard 呈現我想看到的即時訊息。

基礎建設

要讓 AI Agent 可以幫你開發 Google Apps Script,我們需要完成一些基本的基礎建設。

就算不是要給 AI 開發,也強烈建議開發中大型腳本時務必要使用,Web Editor 有時候會當機或是不小心多開 Tab 舊的覆蓋掉新的 Code,用 Clasp 可以更方便、安全的撰寫管理程式源碼。
其他使用案例:Google Apps Script Project 同時上傳到 Git Repo 做版控 (排除 .clasprc.json 和 .clasp.json)、加上 CI 自動跑 Jest JS 單元測試、CD 用 Clasp Token 拉取最新程式碼、可以用 .claspignore 排除沒有要上傳到 Google Apps Script Project 的檔案。

1.安裝 clasp Google Apps Script CLI (官方本地開發套件)

2. 執行 clasp login 登入、產生授權 Token (選擇 Google Apps Script 對應的帳號)

3. 將 clasprc (Clasp Token) 儲存到 Keychain 讓 AI Agent 能安全的調用

security add-generic-password \
-U \
-s "com.google.clasp" \
-a "$USER" \
-w "$(cat ~/.clasprc.json)"

如果你想要複製出 Clasp Token 放到 CI/CD Secret 上執行任務可以用 cat ~/.clasprc.json | base64 | pbcopy (記得加上 base64 encode),使用時再 echo "$CLASPRC" | base64 — decode > ~/.clasprc.json && chmod 600 ~/.clasprc.json

4. 建立專案目錄

必須建立一個專案目錄然後進入

5. 在目錄內建立 Google Apps Script Project (透過 clasp)

clasp create
會直接用目錄名稱當專案名稱。

目前專案是空的,只有 appsscript.json 一個設定檔。

我的設計

GitHub - zhgchgli0718/GASDashboardExample

如果你想節省 Token,可以直接 git clone 我的 GAS Web App 復用我的設計跟已開發好的 GAS 程式碼。

使用 Claude Design or Design Agent Skill 設計 Dashboard

方式 1 — Claude Design
上一篇文章「Jekyll Blog 自訂主題設計|用 Claude Design + Claude Code 快速打造專屬風格」中有介紹過,照相同的步驟調整到滿意的設計然後匯出 Project 解壓縮放到專案的 ./Design 目錄下。

方式 2 — Design Agent Skill
使用第三方 設計 Skill 完成設計,我的 Prompt 大致如下:

/huashu-design
設計一個可以在 iPhone 8 Plus 上橫放的網頁 Dashboard,把設計結果放到 ./Design 目錄下
- 之後會部署在 Google Apps Script Web App
- 上方有固定顯示日期星期還有翻頁時鐘
- 下方 tab 會定時切換,會顯示定時進度條
- 下方 tab 有:
-- 天氣狀況
-- 行事曆:當前行程 or 當日即將到來的行程、顯示剩餘事件
-- 倒數/計數日
我使用 Model: Opus 4.7 (1M context) / Effort: Medium

⏺ 我先掌握了脈絡:iPhone 8 Plus 橫放 = 736×414 CSS px,內容資料結構(天氣 / 行事曆 / 倒數)已在 CLAUDE.md 定義清楚。
樣式你還沒指定,我按「設計方向顧問」給你 3 個明顯不同流派 的方向,請選一個(或混搭,例如 "A 的字型 + C 的配色"),我再做完整 hi-fi。
---
🅐 方向一 · Massimo Vignelli 式瑞士網格(信息建筑派)
▎ Vignelli 替紐約地鐵設計的網格美學——Helvetica + 嚴格欄位 + 紅黑白三色。資訊本身就是裝飾,不靠插圖、icon、漸變。
- 字型:Neue Haas Grotesk / Inter Tight(display)+ IBM Plex Mono(時鐘/數字)
- 配色:純白底 #FAFAFA · 純黑墨 #0A0A0A · 單一朱紅 accent #E63946(用在進度條與當前 tab)
- 版面:12 欄 baseline grid,所有元素對齊;翻頁時鐘是黑底白字大字 + 細水平分隔線;tab 是無圓角的色塊
- 氣質關鍵字:理性 / 克制 / 印刷品 / 資訊密度 / 永恆
- 適合:你想要不會過時、像一張高品質報紙頭版的儀表板
---
🅑 方向二 · Dieter Rams × Braun 工業儀表(極簡產業派)
▎ Rams 為 Braun 設計的 ET66 計算機、Audio 系統的美學——淺米灰底 + 圓角硬體面板 + 單一橙色 accent +
▎ 物理按鍵質感。每個區塊像一個獨立的儀器面板。
- 字型:Söhne / Inter(標籤)+ JetBrains Mono(時鐘走 LCD 七段碼風)
- 配色:暖米灰 #E5E1DA · 深炭 #2B2B2B · Braun 橙 #E85D2C accent · 翻頁時鐘走 LCD 黃綠 #A8B547 仿舊液晶
- 版面:每個 card 有微弱的內陰影與 1px hairline 邊框,像實體儀表的凹陷感;tab 切換像按鍵下沉
- 氣質關鍵字:產業設計 / 觸感 / 1970s Braun / 沉穩 / 工程師審美
- 適合:你喜歡硬體感、想要長時間注視也舒服
---
🅒 方向三 · Teenage Engineering OP-1 / 終端機(運動詩學派)
▎ TE 的 OP-1 合成器面板與老 OLED 終端機美學——深炭灰底 + OLED 青綠光暈 + mono 字 + 細網格背景。翻頁時鐘做成大型 OLED
▎ 翻牌,進度條像音序器步進燈。
- 字型:JetBrains Mono / IBM Plex Mono(全場)+ Berkeley Mono(display 大字)
- 配色:底 #0E0F0D · 主文字 #E8E5DA 米白 · OLED 青 #9DEF8F accent · 警示橙 #FFB454
- 版面:背景有極淡 8px dot grid;翻頁時鐘大字佔 1/3 寬,帶微弱掃描線;tab 進度條走 LED 步進;天氣用 ASCII 風小圖
- 氣質關鍵字:OLED / cyberdeck / 模擬合成器 / hacker chic / 駭客文化
- 適合:你想要它在書桌上像一台「設備」而不是一張「網頁」
---
請告訴我選哪個(或哪幾個元素混搭),我接著做完整 hi-fi 進 ./Design/。 也可以說「都不對,再來幾個」我換流派重推。

可以選擇喜歡的風格或是跟 AI 說自己想要的風格,例如 紙感風格,米白宣紙 + 朱印章美學。

等待 AI 完成設計…AI 可能會在完成後用 Playwright 截圖驗證,如果想省 Token、自己驗證結果可以加在 Prompt 跟他說。

在目錄裡直接點擊 .html 檔案查看設計結果:

調整到滿意後再進下一步開發。

建立倒數日資料來源 Google Sheet

最後順手建立一個倒數日資料來源 Google Sheet,以後要加資料只要增加到這個 Sheet。

title,date,repeat
生日,1994-07-18,yes
日本行,2026-12-12,
repeat=yes: 每年循環的事件
記下 Sheet Id: 上圖網址紅底部分 / Gid: 0(第一張 Sheet)。

註冊交通部中央氣象署 API Key:

使用 Claude Code 開發實現 Dashboard

先 Init Claude Code Memory Markdown:

/init
⏺ 建立了 CLAUDE.md,內容聚焦本 repo 實際狀態:
- 專案階段:早期 GAS 專案,目前只有 appsscript.json / .clasp.json / Design/Paper Dashboard.html,還沒任何 .gs 程式碼。
- 檔案用途:manifest 設定(V8、America/New_York、Stackdriver)、clasp 綁定的 scriptId、以及 React+CDN 的純視覺原型(不含
google.script.run)。
- 常用指令:以 clasp 為主(push / pull / open / logs / deploy),目前沒有 lint 或 test runner。
- push 前要注意:skipSubdirectories: false 會把 Design/Paper Dashboard.html 一起上傳;manifest 還沒宣告 oauthScopes;時區設定的位置。
- 工作範圍:明確要求只用本 repo 內容,不參考其他專案(呼應你的 memory 規則)

執行 Plan 規劃開發工作:

/plan
實現 ./Design 的 Dashboard 網頁功能與設計,部署到 Google Apps Script Web App。
- 天氣使用交通部中央氣象署 API https://opendata.cwa.gov.tw/api/v1/rest/datastore/F-C0032-00
- 顯示 臺北市 天氣,有什麼欄位就顯示什麼
- 在開發階段你可以自己產一個 Token 然後部署 Web App 自主觸發必要方法與測試驗證,開發完畢務必移除這個開口
- Web App 部署成所有人都可存取,但是透過自訂的 Token 保護,初次使用使用者可輸入 Token 或是從網址帶入
- 行事曆默認讀取:primary
- 倒數日從我給你的 Google Sheet 裡讀取,title,date,repeat,如果 repeat 是 yes 代表是年循環倒數,多顯示已經過了 x 年 y 月 (無條件捨去)
- API Key, Google Sheet ID/GID... 統一都放在 PropertiesService 設定
- 直接幫我使用 clasp push & deploy,clasprc login token 在 keychain security add-generic-password \ -U \ -s "com.google.clasp" \ -a "$USER"
- 如果需要我手動處理的地方請用繁體中文告訴我每個步驟
- oauthScopes": [ "https://www.googleapis.com/auth/script.external_request", "https://www.googleapis.com/auth/calendar", "https://www.googleapis.com/auth/spreadsheets", "https://www.googleapis.com/auth/script.scriptapp" ]
- 特別確認 google.script.run 串接取用格式是否確
- The live GAS Web App HTML is rendered inside an iframe wrapper.
- ./Design 等等不用上傳到 Google Apps Script 的檔案加入到 .claspignore
  • Web App 有四種存取權限:所有人、只有自己、只有已登入的人、已登入&組織內的帳號
  • 上面範例的設計是簡單做:所有人都可以存取但需要輸入正確的亂數 Token 才能看到資料、天氣可以改成自己所在的地區,也能多個地區。
  • 行事曆默認只處理主行事曆,如果你有其他行事曆可以從行事曆 設定與共用 -> 整合日曆 -> 日曆 ID 取得
  • 這邊加了一段懶人開發,直接請 AI 部署測試用 Web App 入口讓他邊開發邊測試邊修正,都好了再叫我
Plan 完如果有問題再回答 AI,沒有就可以開始實作了!

泡咖啡等 AI 開發…

AI Agent Question:

  Action needed from you (one-time):

1. Open the editor: https://script.google.com/d/1KEWgIql-gqTNI_Tv_w2-5t7VE_R0eBtjAtd3iqLqabYLOnzJZ8Ga8N4s/edit
2. Top-right "部署 / Deploy" → "管理部署作業 / Manage deployments"
3. Delete both existing deployments (the bare @HEAD and dev v1 — the pencil-icon edit doesn't let you change access type)
4. Then "新增部署 / New deployment" → 類型: 網路應用程式 → 執行身分: 我(your account)→ 誰可以存取: 任何人 / Anyone → 部署
5. Grant OAuth on the consent screen (calendar.readonly, spreadsheets.readonly, external_request)
6. Copy the new web app URL (looks like https://script.google.com/macros/s/AKfycb.../exec) and paste it here

Also paste:
- CWA API Key (交通部中央氣象署 Open Data Authorization)
- 倒數日 Sheet ID (the long part in the Sheet URL between /d/ and /edit)
- Sheet GID (the number after gid= in the URL — defaults to 0 for the first tab)

Once I have the URL + secrets, I'll seed Properties via the dev endpoint, mint the access token, verify each handler, and wire you in.

(1.) 第一次執行還是需要我們授權,AI Agent 之後才能自己跑,前往 Script Editor 網址:

隨便選擇一個有函式的檔案,選擇一個函式點偵錯:

  • 只有第一次執行或是有新增權限時會需要授權
如果 AI 一直說有權限問題,但是實際執行又沒跳授權視窗可以先去專案設定勾選「在編輯器中顯示「appsscript.json」資訊清單檔案」然後回到編輯器編輯 appsscript.json 改變一下 oauthScopes 的內容執行一次再改回來執行應該就會跳出授權流程了。

只有 1. 需要自己處理其他可以叫 AI 自己做:

1. OK,你直接幫我部署
CWA API Key: CWA-XXXX-XXXX-XXXX-XXXX-XXXX
倒數日 Sheet ID: XXXX / GID: 0

協助 AI 設定 Google Apps Script..

⏺ Scope is updated and pushed but the deployer's OAuth grant needs to be re-authorized for the new scope. The web app runs under your account — newly added
scopes require you to re-grant.

Please do this once:

1. Open the editor: https://script.google.com/d/1KEWgIql-gqTNI_Tv_w2-5t7VE_R0eBtjAtd3iqLqabYLOnzJZ8Ga8N4s/edit
2. From the function dropdown at the top, pick setupConfig (or any function)
3. Click 執行 / Run — Google will pop a "需要授權 / Authorization required" dialog
4. Allow → grants the upgraded auth/spreadsheets scope
5. Tell me when done and I'll re-test the countdown handler

雖然我們都跟 AI 說好了但他還是有可能卡在一些地方需要人工幫忙,例如以上訊息;我們也很簡單就是照他步驟點擊執行一次函式再跟他說 OK 就好,就當幫個忙。(如果沒出現他說的方法就重整一下網頁)

AI 開發完成,驗收!

如果發現問題,可以再請 AI 修正。

用 AI 打造屬於你的個人桌面 Dashboard — 成果

桌面版

iPhone 手機版

GAS Web App 無法做到滿版 PWA 隱藏網址列,如果想做到 100% 體驗請參考進階內容。

最終程式碼

GitHub - zhgchgli0718/GASDashboardExample

後續任務

  • [required] 跟 AI 說:開發完畢請移除所有開發階段的介面/端點
  • [optional] Google Apps Script Project -> 專案設定 -> 指令碼屬性 -> ACCESS_TOKEN -> 重新產生一個亂數字串,網址上的 ?token= 也換成這個字串
    macOS 可以用這個指令產生亂數字串:openssl rand -hex 32
  • [optional] 重新產生交通部中央氣象署API Key 授權碼 並填入 Google Apps Script Project -> 專案設定 -> 指令碼屬性 -> CWA_API_KEY
⚠️根據 Claude Code 警告:所有暴露在對話內容的 Token 都有機會洩漏,需當成已洩漏,但是為了驗證開發方便所以先直接輸入,驗證完沒問題後需要重新產生填入。
如果你熟悉 GAS 也可以在一開始就自己先設好 指令碼屬性 然後跟 AI 說直接使用。

延伸

如果這篇文章有激起你的創意,不妨想想還能串接顯示什麼,例如我多串接了 Yahoo Finance 取得我關注的股票即時股價、串接 AnalyticsData / AdSense 取得網站的流量與廣告狀況。

進階

因為 GAS Web App 無法達成真 RWD、滿版 PWA (隱藏網址列),所以我自己是把 GAS Web App 當 API 服務只回傳 JSON 資料,然後另外用 GitHub Pages 實現前端功能,部署成正式網頁;這樣就能達到完整使用的體驗。

iOS 滿版 PWA 網頁設定 -> Safari 打開網址 -> 分享 -> 加入主畫面

這條路會比較複雜一點,可以在 /plan 階段跟 AI 說:

- GAS Web App 只做後端服務,輸出 JSON 給前端使用
- 前端使用 GitHub Pages 進行設計呈現和部署,幫我完成所有程式開發和部署任務開發
- 前端與後端之間用自訂亂數字串 Token 保護

總結

以上就是這次使用 AI Agent 直接進行 Google Apps Script 的開發體驗介紹,最近也有在用 AI 重整之前開發過的中大型 GAS 專案,效果都不錯,還能請他在本地端加上函式單元測試(用 Jest、MOCK Google APIs) 提升穩定性(跑在 CI/CD 端、結合 clasp pull & backup GAS Project);AI 對 GAS 的掌握度與產出正確性都接近 100%。

如果是 2021 年…

如果是那個沒有 AI 的年代,手搓從 0 包含設計、切版、程式邏輯開發到上線,我預估大約需要 30 小時左右;如今用 AI 3 小時內就能搞定。

基本上我以後應該不會再從頭開發 GAS,也不會從零開始 AI 寫程式,而是從零開始叫 AI 做好產品給我 (程式? IDGAF)。

案例(2) — 個人持股清單管理

最近嘗試的另一個 AI 直接搞定 Google Apps Script 的案例,請他把我的 Google Sheet 持股表格轉成可視化 Web App,結合 Yahoo Finance 取得最新股價做成表格顯示給我看,下方也可以快速地輸入買入賣出紀錄,會再串接寫入回 Google Sheet。

案例 (3) — Jekyll Blog 自訂主題設計|用 Claude Design + Claude Code 快速打造專屬風格 ⬅️

花了一個週末的午後時光用 Claude Design 設計喜歡的 Blog 樣式與功能,再透過 Claude Code 實作並套用回 Jekyll Blog,把用了 5 年的 Chirpy Theme 介面完美替換成我心目中理想的個人 Blog 樣式。

延伸閱讀

TL;DR 這些都是之前手搓的 GAS 服務、工具
https://medium.com/media/8652ffa596b15d4e2a3dc94591c00522/href

有任何問題及指教歡迎與我聯絡


別再從零開始 AI 寫程式:讓 AI Agent 直接幫你搞定 Google Apps Script 串接與開發 was originally published in ZRealm Dev. on Medium, where people are continuing the conversation by highlighting and responding to this story.

Visit Website