ZhgChg.Li

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

個人或團隊想用 Google Apps Script 自動化流程卻苦於串接複雜?透過 AI Agent 直接從零開發,3 小時內完成高準確度專案,實現個人桌面 Dashboard 串接天氣、行事曆與倒數日資料,提升開發效率與穩定性。

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

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

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

完成品 Demo

把塵封在抽屜許多年的 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

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 一個設定檔。

我的設計

如果你想節省 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

執行 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% 體驗請參考進階內容。

最終程式碼

後續任務

  • [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 打開網址 -> 分享 -> 加入主畫面

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。

延伸閱讀

TL;DR 這些都是之前手搓的 GAS 服務、工具

在 GitHub 上補充修正
編輯這篇文章
本文首次發表於 Medium
點此查看原文
分享這篇文章
複製連結 · 分享到社群
ZhgChgLi
作者

ZhgChgLi

An iOS, web, and automation developer from Taiwan 🇹🇼 who also loves sharing, traveling, and writing.

留言 · Comments