沒錯！今天就要來分享我在年末統整說到的「數據儀表板」啦！先為不知情的讀者說明一下，這是我利用 AI 建出的小工具，它能在網頁上顯示 Google 試算表的資料，讓我確認文章在每個月的數據變化。
雖然近年有很多用 AI 寫程式的工具，但對一個沒有程式基礎的人來說，要串資料庫還是滿困難的（笑），我也是前後試了十幾遍才成功，想說也整理一下血淚談，為其他想嘗試 Vibe Coding 的新手提供個方向！
今天要介紹的內容非常基礎，主要是給那些沒有程式概念、連怎麼下指令給 AI 都不知道的新手們，所以如果你已經有 Vibe Coding 的經驗，可能就不太適合喔！
▌怎麼讓 AI 寫出可用的程式？
我想很多人一開始 Vibe Coding 會碰到的問題，就是把東西丟給 AI 後，它還額外生出了很多阿雜的東西，就像一個不受控制的廚師接了訂單後，端出了一盤看起來很豪華、但你根本不愛吃的料理一樣 XD。
所以進入正題之前，我想先告訴大家到底怎麼和 AI 溝通，才能生出你想要的程式碼。
① 切分你的任務
首先最重要的：不要一次把你的需求丟給 AI。
像我一開始常會不小心犯職業病，直接寫一篇洋洋灑灑的需求文件給 AI，結果就生出了一堆邏輯一團亂的程式。所以為了避免 AI 產生幻覺，建議大家可以在下指令之前，先切分需求裡的任務。
舉個例子，我的需求是：
一個記錄文章數據的 Dashboard，最上方有按鈕可以抓取 Google Sheet 的資料，中間區域需要顯示累積數據，最下方的表格則會顯示 Sheet 裡的文章標題、瀏覽量和完讀率，表格上方需要切換月份、房間和排序表格的功能。
這樣看起來很複雜對吧？為了讓後續施工更方便，我們先把需求拆成「資料」和「畫面」兩個部分：
- 資料（後端）
- 文章資料：文章標題、發佈日期、房間等
- 閱覽資料：月份、瀏覽量、完讀數等 - 畫面（前端）
- 上方：標題、同步數據按鈕
- 中間：累積數據區塊
- 下方：文章總表、數據變化圖表
拆完之後，就可以來構思這兩個部分要怎麼互相連接。比如當我打開網頁之後，要什麼時候去向資料庫拿資料？剛打開的時候嗎？還是點某個按鈕的時候？或者，當你的網頁中有填寫表單的功能，要什麼時候把資料傳回去？需不需要檢核欄位？
前期動線釐清得越清楚，後面就會越有方向。
② 開啟多個對話視窗
切分好任務之後，接下來我會在 AI 裡開兩個對話窗來分別處理前後端的任務。
後端主要處理資料的正確性，以這個例子來說，我要從試算表傳資料給前端，那我就要確保它傳出來的資料能被前端識別，不會抓錯欄位、算錯公式或發生錯誤。
至於前端則負責畫面的結構，我滿推薦大家一開始可以用 AI Studio 來生成介面，它能針對你的需求快速產出假模型，很適合剛有概念、但還沒想好怎麼做的人喔！
在 Build 輸入畫面需求
生成 Demo
③ 一個指令一個動作
最後一個提醒，不管哪個對話窗，記得一次下一個指令就好。千萬不要叫 AI 一邊串資料庫一邊改 UI，這樣很容易不小心改壞整段程式碼，一步一步慢慢做，反而更能建出你要的成果。
以上差不多就是我在使用 AI 時的心法啦！如果 Vibe Coding 的過程碰到狀況，其實也可以直接複製程式碼或截圖發給 AI，Windows 使用者按 Win + Shift + S、Mac 使用者按 Cmd + Shift + 4 就能擷取特定區域的畫面，再到 AI 對話窗 Crtl + V 貼上就行了。雖然 AI 偶爾還是會胡說八道 XD，但程式問題大多還是能解決的。
▌如何做出數據儀表板？
說完基本概念，接著就來分享我建造儀表板的流程吧！
我這次都是用 Google 旗下的工具，後端資料庫存在 Google 試算表裡、API 用 Google Apps Script（GAS）開發、前端畫面則是用剛剛提到的 AI Studio，這些工具的好處是都能免費使用，只有負責生成程式碼的 Gemini 我自己有訂閱 AI Pro，所以下指令的扣打會多一點，不過免費方案應該也沒問題！
① 設定好資料庫
由於儀表板的資料來源是 Google 試算表，一開始當然得先整理好這個檔案啦。
基本上試算表的配置沒有既定規則，只要有邏輯能讓程式抓到資料就好。像我自己是把文章和數據分成不同張工作表，第一張整理文章標題、分類、發佈日期，第二張以後則用來存放每個月的數據，月份就請它直接抓工作表的名稱。
整理好之後，我們可以點 Gemini 對話框左下角的「+」並「加入雲端檔案」，將這個試算表附在對話框裡，再請 AI 依照欄位邏輯產出適合的 GAS 程式碼。
（Gemini 使用者記得右邊模型選「Pro」，程式碼才會比較精準喔！）
② 利用 GAS 產出後端資料 API
Google Apps Script（GAS）是 Google 推出的開發工具，大部分 Google 程式都可以用 GAS 來達到互相連接或自動化處理的功能。比如有人填了你的 Google 表單，就能用 GAS 把資料整理進試算表並發送感謝信；或是在試算表裡按一個按鈕，就可以把選中的表格變成一份 PDF 存到雲端硬碟等。
這次我則是要用 GAS 把試算表的欄位轉譯成 API（前端能看懂的檔案），程式碼剛剛 Gemini 已經寫好了，只要在試算表上方的「擴充功能」找到「Apps Script」，把程式碼整段貼上去即可。
貼上之後先點視窗上方的「執行」，確認程式碼有沒有問題，要是碰到問題也沒關係，再把錯誤訊息丟回 Gemini，它就會幫你修改了 XD。
而若沒有問題，接著就依照 Gemini 的指令將程式公開部署，就會跑出 API 連結啦！
部署後的網址就是 API 連結囉！
③ 用 Google AI Studio 產出基礎介面
解決掉後端資料庫之後，再來就是前端畫面了！關於 AI Studio 的用法我在上面提過了，就不再特別說明，通常 AI Studio 產出介面之後，畫面數據會先用假資料來代替，而我們現在要做的，就是把假資料替換成 API 裡的真實數據。
AI Studio 左上方有個「Code」能切換到程式碼的頁面，我們先在 src 資料夾裡找到 App.tsx（名稱可能會不同，大家可以瀏覽一下程式碼的結構，找到你要顯示資料的那一頁就好）然後把整段程式碼貼給 Gemini，請它協助串接 API 的連結。
找到 App.tsx
複製並下指令給 Gemini
通常新手在這個步驟會卡最久 XD，常常 API 貼上去，資料還是怎麼跑都跑不出來，這是很正常的！因為 AI 生出的程式碼可能前後端的命名邏輯不一樣，大家多花點耐心把兩邊的程式傳給 Gemini，請它幫忙對齊就可以了！
④ 微調成你想要的樣子！
歷經千辛萬苦接好資料庫之後，最後就是打磨介面的時間啦！
還記得剛剛我們只是用 AI Studio 做了個基本介面，而在資料全部搞定後，就能來調整外觀啦！假如你想跟我一樣全部改頭換面，那建議直接在 AI Studio 下指令，請它在不更動資料邏輯的情況下，依照你提供的顏色、風格去更新整包程式碼。
這樣一來，就算生出來的介面不符合你的偏好，也可以直接點 Restore 回復到上一個版本、重下指令。
當 AI Studio 改好介面之後，這個專案就差不多完成了！當然要是你對介面比較講究，也可以再去微調程式碼，比如請 Gemini 設計一些小動態、調整版面的對齊、製作手機版適用的介面等，這方面就看大家想雕到哪種程度。
會轉動的小星星 ✦
⑤ 部署？
專案完成之後，可能有人會希望部署到網路上供大家參觀，但由於大部分部署工具都要額外付費，所以我自己是沒有特別研究 XD。
不過如果你只是希望有個連結能打開網頁，其實不用部署也能做到喔！在你的 AI Studio 網址列的？後面接上 fullscreenApplet=true，點進來就能直接使用了！只要你是登入同個 Google 帳號，不管是用電腦、平板還是手機打開都可以。
▌總結
終於整理完這次 Vibe Coding 的心得啦！其實我也不曉得沒有程式概念的讀者能不能看懂這一篇（笑），畢竟寫程式的專業術語真的很多，別說外行人了，連我這個 UI/UX 設計師也是撞牆撞了好幾個月才摸出一條路。
但平心而論，有了 AI 之後，寫程式的門檻真的比以前降低很多，之前一旦牽扯到資料庫，大部分還是要仰賴工程師幫忙，但現在只要花點時間跟 AI 釐清需求、來回確認，就能做出大致堪用的工具了。
那最後還是提醒大家，雖然 Vibe Coding 很方便，但千萬不要用 AI 處理機密資料，2023 年就發生過三星員工將會議紀錄和程式碼上傳到 ChatGPT 導致機密外洩的情況。而且今天介紹的方法是直接把 API 連結寫在前端畫面裡，一旦公開部署，理論上所有人都能看到你的資料庫，所以絕對不要把帳號密碼、身分證等個資放在裡面喔，建議大家還是做些無傷大雅的小工具玩玩就好。
更多【推工具】系列文章：
