前言
自從萌生「露營小幫手」這個點子後，我就想同時用兩條路線實作：
- 寫程式碼
- 用自動化工具把流程拼起來
原本一直猶豫該先走哪一條。跟朋友討論訂閱哪個模型時，對方說：「不然用 Cursor 試試看？它是 AI 協作的開發環境，能寫 code、也能跟 AI 對話，甚至可以請它一條龍搞定。」
於是我就多了一個更直覺的選項：先把可動的東西做出來，再回頭比較別的做法。
不負責任聲明
這系列只是紀錄個人開發過程與踩坑心得，Cursor 或 Google AI Studio 都只是練習工具。
所以不會有一步一步的正式教學。想完整學習，網路上已有很多大神的文章與影片，可以自行延伸！
用 Cursor 開始動手
某個週末一股衝動，下載好 Cursor 就直接出張嘴。
我先把需求講清楚，讓 AI 幫我「對齊」對工具的理解，並請它在開工前檢查整體架構、預估會遇到的挑戰。它列完架構後，反問了兩個關鍵問題：
1. 交通工具是什麼？機車為主
2. 要在哪個平台呈現？網頁版
第一次嘗試所謂的「AI coding」（名稱是否精準先不管）。確認需求後，AI 就開始執行。起初它在轉圈，我才發現要按下 Accept，它才會把產出的程式碼寫進去、繼續下一步（老實說當下我也沒細看）。
完成後，我請它自我測試，並幫我 review 哪些段落可能不合邏輯或冗餘。接著讓它建立專案目錄、資料夾與檔案，準備開跑。
💡 提醒 ： 安裝 Cursor 時，記得給它本機使用權限。
安裝與本機測試（Windows）
- 叫出「命令提示字元」（Win + R）並輸入
cmd - 切到專案資料夾：
cd 你的資料夾路徑 - 安裝套件：
npm install - 這時我才發現沒裝 Node.js
- 立刻去 Node.js 官網下載並安裝
- 安裝好後，關掉命令提示字元、重新打開，再跑一次第 2、3 步
- 啟動：
npm start - 打開 AI 提供的連結：
http://localhost:3000
初版功能
- 預設交通工具：機車
- 輸入起點與終點
- 顯示預計路徑與時間
- 列出抵達目的地前約 30 分鐘會遇到的補給點（超商或超市）
我先測試下個月想去的營區——結果「幽默了」，那一段完全沒有補給點 XDD。換測其他營區或地點就正常顯示了。初版雖然能跑，但離正式使用還有一大段距離，很多細節要調整，先讓它跑起來，之後慢慢補。
踩坑與小建議
- 列出補給點的上限
- 目前 AI 產出的程式碼最多列 15 個補給點。可以依需求自行調整，太多其實也不一定比較好用。
- 地圖資料與 API 成本
- 先採用 Google Maps API 來抓地點，準確度高，但會吃到 API 使用量。不過以個人用途、請求次數不多的情況，Google 的免費額度通常夠用。
- 通知與上線考量
- 如果未來真的要上線用，還需要一個「提醒自己」的機制。之後可能會加 LINE Messaging API 或 Gmail 的寄信流程，讓出發時有訊息可以參考。
下一步規劃
- 用 Google AI Studio 再做一版，對比介面與製作邏輯
- 思考是否加入快取與成本控管（例如限制請求、簡化查詢範圍）
- 調整補給點的篩選條件與排序（例如優先顯示某幾種店型）
- 加入通知機制（LINE 或信箱）、以及簡易的部署方式
心得
看著 AI 迅速產出生可動的東西，腦袋同時也有點緊張——所謂的 vibe coding 真的會讓人「先接受成果、再慢慢理解」。但「看不懂」這件事會讓我焦慮，我其實還是想看懂 XDD，這樣後續才改得動。
先分享到這裡。下次用 Google AI Studio 來實踐一下，再比較兩種路線的感覺。
