Claude AI 教學：會自動更新 12 個月營收的網頁

Claude AI 教學包括取得資料、程式撰寫、部署上線，每個流程都對應實際的工作流程，本文如何用 Claude Code 完成一個會自動更新12個月營收的網頁，搭配Google試算表、HTML文件、Netlify網頁，教你如何做出台積電的營收分析儀表板。

一、Google Sheets 試算表發布到網路

一開始示範時，贊贊小屋先在 Google Sheets 試算表記錄 2026 年第一季三個月資料，欄位包括「當月營收」「月增率%」「去年同月營收」「年增率%」「當月累計營收」「去年累計營收」「累計年增率%」，後面再用 4 月資料測試自動更新效果。要讓這份試算表成為儀表板的資料來源，第一步是點選「檔案」，展開選單後依序進入「共用」→「發布到網路」，這裡要特別注意「共用」選單下有兩個子選項，「與他人共用」是設定編輯或檢視權限，「發布到網路」才是這次需要的功能。

進入「發布到網路」對話框後，右側格式下拉選單展開，可以看到「網頁」「逗號分隔 (.csv)」「定位點分隔值檔案 (.tsv)」「PDF 文件 (.pdf)」等選項，這裡選擇「定位點分隔值檔案 (.tsv)」，左側分頁下拉同步確認為「月營收」，確認後按下「發布」。

這裡選擇 TSV 而不是 CSV，原因出在財務數字的格式。營收資料經常帶有千分位逗號，例如 401,255,128，如果改用 CSV，這個逗號很容易和欄位分隔符號混在一起，導致程式解析時資料錯位。TSV 使用 Tab 鍵作為欄位分隔，完全避開這個問題，對後續 JavaScript 解析來說更為單純。至於網頁格式或 PDF，雖然也能公開，但都是給人看的輸出形式，不適合作為自動化資料來源。這一步看起來只是改個設定，實際上是把 Google Sheets 從人工閱讀的表格，轉成網頁可以直接讀取的公開資料出口。

二、取得 TSV 公開網址並交給 Claude Code

按下「發布」之後，對話框上方出現「這份文件已發布至網路」的確認文字，下方同時出現一則提醒：「檢視者可能可以存取已發布圖表的基礎資料」，以及一串完整的 TSV 公開網址，複製備用。

接著開啟 Claude Code Desktop，將這個 TSV 網址直接貼入對話框，Claude Code 主動回應「Let me fetch the content of that spreadsheet.」（讓我來抓取試算表的內容），畫面上顯示「Browsed the web, used a tool」（瀏覽網頁、使用工具）的執行紀錄，隨即顯示解析結果，Claude Code 已成功把資料讀成結構化表格，三個月份的欄位與數字都正確解析，欄位依序為 Month（月份）、Revenue（當月營收）、MoM Change（月增率）、YoY Change（年增率）、Cumulative YoY（累計年增率）。

這裡 Claude Code 出現的是英文介面，因為贊贊小屋尚未下指令切換語言，Claude Code 預設以英文回覆。網址尾端的 output=tsv 參數是關鍵，它告訴伺服器只輸出純文字資料，而不是一般的 Google Sheets 網頁畫面。發布後的網址本質上是公開的，任何人只要有這個連結就能取得資料內容，以這次示範的台積電月營收來說本來就是公開資訊，沒有保密問題；但如果要把同樣的做法套用在公司內部業績或客戶資料，就必須事先評估是否適合公開。

三、下指令生成 HTML 儀表板並上傳 Netlify

確認資料讀取正確後，贊贊小屋在 Claude Code 輸入框下指令：「請說中文，另外，請幫我以中文做個分析儀表板的html檔案。」Claude Code 回覆說資料齊全，開始製作儀表板 HTML 檔案，畫面上出現「Created revenue_dashboard.html +424 -0」的建立紀錄，代表新增了 424 行程式碼。Claude Code 截圖確認畫面正常後，在左側回覆說明儀表板包含標題列「2026 年營收分析儀表板」與「Q1 季報」標籤、四張 KPI 卡片、四張圖表；右側 localhost 預覽畫面同步顯示儀表板完整樣式與標題區塊。

有了 HTML 檔案之後，登入 Netlify 進入「Projects」（專案）頁面，左側選單「Projects」標示目前所在位置，右側列出贊贊小屋既有的三個已部署專案「zanzan-tsmc」「zanzan-course45」「zanzan-course11」。頁面最下方有一個拖曳部署區，說明文字「Drag and drop your project folder, zip file, or a single HTML file to deploy instantly.」（直接拖曳專案資料夾、zip 壓縮檔或單一 HTML 檔案即可立即部署），將桌面上的 revenue_dashboard.html 拖曳至此，Netlify 幾秒內完成部署。關於 Netlify 的完整操作說明，可以參考Netlify 教學；如果只是要把單一 HTML 檔案快速上線，Netlify Drop 是更輕量的入口。

這一步的核心價值，是 Claude Code 不只是寫一段程式碼，而是把資料理解、版面設計、HTML 生成與本機預覽串成同一個工作流程。對非工程背景的人來說，過去要做這種儀表板，可能要懂 HTML、CSS、JavaScript 與圖表套件；現在則是用自然語言描述想要的成果，由 Claude Code 產生可以直接上傳的 HTML 檔案。Netlify 在這裡扮演最後一哩路的角色，把只能在自己電腦開啟的檔案，變成可以分享給主管、客戶或學員的正式網址。想更瞭解這部工具，可以參考Claude Code 概述的官方說明文件。

四、瀏覽器確認網頁並檢視 HTML 原始碼

部署完成後，在瀏覽器輸入 zanzan-tsmc2.netlify.app，儀表板正常載入，畫面呈現「2026 年營收分析儀表板」標題、資料期間「2026/01–2026/03」、四張 KPI 卡片與圖表。在頁面任意位置按右鍵，展開選單後點選「檢視網頁原始碼」，右下角同時可以看到「年增率趨勢（%）」折線圖，確認儀表板視覺效果正常。

來到原始碼頁面，網址列變成 view-source:https://zanzan-tsmc2.netlify.app，第 176 行出現 <div class="container">，這是整個儀表板內容的最外層容器。往下看到第 180 至 183 行，是第一張 KPI 卡片的完整 HTML 結構，包含 <div class="kpi-label">Q1 累計營收</div>、<div class="kpi-value">11.34 億</div>、<div class="kpi-sub up">較去年同期 +35.13%</div>。

這一節看原始碼的目的，不是要求讀者看懂每一行程式，而是確認這個儀表板本質上就是一個 HTML 檔案，畫面上看到的每一個數字都原封不動地寫在程式碼裡。這正是第一版儀表板的本質：一張精心設計的靜態網頁，資料已經固定在 HTML 檔案中，日後試算表更新，這個網頁不會自動跟著變動。理解這一點，才能真正體會下一節要解決的問題是什麼。

五、Google Sheets 自動抓取：靜態網頁變成動態儀表板

看著原始碼裡寫死的數字，贊贊小屋意識到靜態 HTML 的限制，於是在 Claude Code 輸入框附上儀表板與原始碼的雙視窗截圖，同時下指令：「請你參考截圖，我會將這個html檔案上傳到netlify成為網頁，這個網頁是固定不變的，但我在試算表的資料是會更新的。你剛才會再去抓一次試算表資料，可以把網頁設計成自動去抓最新的試算表資料？」Claude Code 回覆說明「運作方式」與「你需要做的事」，包括頁面每次載入時自動用 fetch() 去抓 Google Sheets 公開 TSV 網址、解析 TSV 動態繪製 KPI 卡片與圖表，以及完成這次架構更新後，日後只要試算表資料變動，就不需要重新上傳 HTML 也能看到最新資料。

將更新後的 HTML 檔案重新上傳 Netlify 後，再次開啟 zanzan-tsmc2.netlify.app，這次頁面先出現等待畫面，標題區塊顯示「台積電月營收分析儀表板」與「資料載入中…」，畫面中央出現旋轉載入動畫，下方文字顯示「正在從 Google Sheets 抓取最新資料…」。等待幾秒後資料載入完成，完整儀表板呈現在畫面上，標題列顯示「資料期間：2026/01–2026/03」，右下角「年增率趨勢（%）」折線圖與所有 KPI 卡片數字均與試算表一致。

這一步是整篇文章的關鍵轉折。原本的 HTML 像是一張做好的海報，資料寫死在畫面裡；改成自動抓取 Google Sheets 之後，HTML 就變成一個會讀資料的儀表板。每次開啟或重新整理頁面，瀏覽器都會重新向 Google Sheets 取得最新 TSV，再由 JavaScript 重新計算 KPI、更新圖表與資料期間。這就是「資料與前端分離」的概念：試算表負責維護資料，HTML 負責呈現畫面，兩者不再綁死在同一份檔案裡。類似的自動化思路，在戰情室儀表板也有完整示範。

六、Claude Code 說明背後的 5 大核心技術

看到儀表板自動更新的效果，贊贊小屋好奇背後的原理，在 Claude Code 輸入框追問：「這麼厲害，你是怎麼做到的？稍微介紹一下用到的技術。」Claude Code 開始說明第 1 點「Google Sheets 發布到網路功能」與第 2 點「Fetch API（瀏覽器內建）」，其中第 1 點說明：「Google Sheets 有一個很方便的功能：可以把試算表公開發布成純文字格式（CSV / TSV），只要加上 ?output=tsv 參數，任何人都可以用網址直接抓到最新資料，不需要 API 金鑰、不需要登入。」第 2 點則說明 Fetch API 是現代瀏覽器原生支援的功能，可以讓網頁在不重新整理的情況下去抓取外部資料，並附上程式碼示範。

接著 Claude Code 說明第 3 點「TSV 解析（純 JavaScript）」：「TSV（Tab-Separated Values）格式很簡單，用 \n 切行、\t 切欄，自己寫幾行就能解析」，並附上 parseTSV 函式的完整程式碼；第 4 點「Chart.js（圖表庫）」說明「用 CDN 引入的開源圖表庫，只需要傳入資料就能畫出漂亮的圖」，附上 new Chart 的基本語法，並補充「支援柱狀圖、折線圖、圓餅圖等，而且是響應式的，自動適應視窗大小」。

最後第 5 點「純靜態 HTML（無後端）」說明整個儀表板只有一個 HTML 檔案，所有邏輯都在瀏覽器端執行，資料流向為試算表更新→使用者開啟/重整網頁→瀏覽器 fetch TSV→JavaScript 解析→動態渲染 DOM + 圖表，並以「整體架構總結」表格收尾：資料儲存使用 Google Sheets、資料傳輸使用 Fetch API + TSV、圖表使用 Chart.js（CDN）、網站托管使用 Netlify，費用欄全部標示免費。這五項技術分工明確，把一個看起來複雜的自動化儀表板，拆解成每個環節都可以獨立理解的清楚架構，對職場應用來說是一套門檻低、維護成本幾乎為零的輕量級資料展示方案。更多關於 Claude Code 可以做什麼，可以參考贊贊小屋的系列整理。

七、Claude AI 教學：試算表更新儀表板自動同步

Claude AI 教學價值在於將麻煩的事情變得簡單，本文範例困難在於如何讓網頁去抓取Google試算表資料自動更新，透過適當提問得到方法及實際操作之後，驗證自動更新效果的方法很直接，在瀏覽器開啟「台積電月營收 – Google 試算表」，確認是同一份試算表後，在第 5 列新增 2026/04 的完整月營收資料，B5 儲存格輸入當月營收 410,725,118，其餘欄位依序填入月增率 -1.08%、去年同月營收 349,566,940、年增率 17.50%、當月累計營收 1,544,828,558、去年累計營收 1,188,820,604、累計年增率 29.50%，第 5 列整列資料輸入完成。

不需要重新開啟 Claude Code，也不需要重新上傳任何檔案，直接回到瀏覽器重新整理 zanzan-tsmc2.netlify.app，儀表板標題區塊的資料期間自動從「2026/01–2026/03」更新為「2026/01–2026/04」，第一張 KPI 卡片也從「累計營收（2026 Q1）」更新為「累計營收（2026 Q2）」，下方「當月營收 vs 去年同期」長條圖多出第四個月的資料欄，圖表 X 軸延伸至「2026/04」。

這次先用 4 個月資料示範，但只要欄位格式一致，後續新增到 12 個月時，儀表板也會自動延伸。5 月、6 月一路新增到 12 月，儀表板就會持續抓取最新列數，逐步變成完整年度的 12 個月營收分析網頁。對財會人員來說，這才是最實用的地方：不是每個月重做一次報告，而是先把架構做好，之後每月補資料、重新整理網頁即可。想進一步了解 Claude Code 的整體應用，歡迎參考Claude Code 大全集課程。

一個 HTML 檔案讓試算表自己說話

這次實作最重要的收穫，不是做出了一個台積電月營收分析儀表板，而是看見 HTML 的角色改變了。先前 Netlify Drop 的做法，只是把一個固定網頁放到網路上；這一篇則讓網頁每次載入時都從 Google Sheets 的公開 TSV 連結抓取最新資料，試算表一更新，網頁就跟著更新。

這種做法很像替試算表裝上一個漂亮的前台。資料仍然放在大家熟悉的 Google Sheets 裡，不需要另外架資料庫，也不需要登入後台管理系統；HTML 則負責把資料整理成 KPI 卡片、長條圖、折線圖與分析畫面。對贊贊小屋來說，這不只可以用在財務資料，也可以用在課程大綱展示頁、活動清單、公開教材目錄，甚至是各種小型工作儀表板。

Claude Code 真正厲害的地方，也在這裡慢慢浮現。它不是只幫忙寫一段程式，而是能把試算表資料、HTML 前端、圖表呈現、Netlify 上線串成一條可以實際運作的流程。當一個 HTML 檔案開始讀取資料，試算表就不再只是試算表，它變成了一個簡易資料後台，網頁則成為資料對外說話的窗口。前一篇是把 AI 作品放上網，這一篇是讓 AI 作品開始讀資料，這正是贊贊小屋繼續探索 Claude Code 教學的動力所在。

學會計、學Excel、學習AI工具，歡迎加入贊贊小屋社群。

AI對未來工作的影響：黃仁勳GTC 2026十大啟示

Claude Code是什麼、ChatGPT怎麼用？、ChatGPT Excel教學、ChatGPT寫ExcelVBA、Gemini是什麼？、Notion教學、AI對會計的影響。

贊贊小屋AI課程：Claude Code、ChatGPT課程、AI工具全攻略、Notion課程。