2026 沿途 Alongway｜出國一趟最常用的竟然是記帳：我用說的做出來的旅行 PWA

今年 8 月，久違的北歐峽灣＋南法大旅行。行前我做了一件事：自己做一個 PWA（網頁 App）。

把 Claude 課金到 MAX，本來只是想做一個跟 Google Maps 綁定的功能，沒想到越設計越多，到後來連我自己都覺得過度設計。還請 Claude 幫我取了產品名稱：沿途 Alongway（沿途，都在這裡）。這也是我跟 Claude 協作討論出來的，我覺得蠻貼近就直接用了。

這篇是「🛠️ 我用說的做出來」系列的第一篇（AI Vibecode 開發實錄：從一個需求，到每天真的會用的工具）。「用說的做出來」是我對 Vibecode 的個人詮釋：用自然語言跟 AI 協作，把每天真的需要的工具做出來。沿途PWA 是個我替自己客製化的旅遊規劃工具，沒有要商用，未來希望可以在一次旅行中優化功能疊代。純粹就是一個程式小白的開發流程紀錄。

圖說：沿途的五個主畫面：行程總覽 → 單日路線 → 景點卡 → 國家資訊 → 緊急頁（動圖，跟產品頁首頁同一段）。

📑 快速導覽目錄

• 🎯 先說結論：最常用的功能是記帳
• 🧭 我為什麼想做自己的旅行 App
• 🧩 沿途做了哪些功能
• 🗣️ 這次的 Vibecode 是怎麼進行的
• 🧱 它是怎麼組起來的
• 📱 為什麼是 PWA，不是原生 App
• ✈️ 實際帶出國後：留下來的，和過度設計的
• ⚠️ 踩雷筆記：五個真的踩過的坑
• 🔁 回來之後：繼續模組化
• ❓ 快速回答
• 🔗 工具入口與延伸閱讀

🎯 先說結論：最常用的功能是記帳

做到最後我有點過度設計，就是什麼都想加進去。地圖、行程問答、訂單、國家資訊、緊急聯絡，能想到的都塞了。

結果真的出國，用最兇的是記帳：

• 行前記帳：機票、訂房、稅費，出發前就刷掉的那些，先記一本
• 旅行中分帳：兩個人一起走，誰付了什麼直接記，回國不用對帳
• 掃描辨識發票：拍一張收據，金額、幣別、店名自動進帳，連這個都做了
• 個人記帳：買給自己的東西分開記，記到本地端，不上雲、不給同行的人看

圖說：旅費帳本的「行程中」分頁，D3 哥本哈根當天記了 6 筆，左下角就是拍收據。

旅行中「每天一定會發生好幾次」的動作就是掏錢，所以它贏了。地圖很炫，但一天打開幾次；記帳一天用十幾次。這件事我做的時候完全沒想到，是帶出國用了才知道。

🧭 我為什麼想做自己的旅行 App

規劃了 15 年的自助旅行，我的行程表一路換過：紙本手冊（改一個字重印一頁）、Apple Notes（連結貼滿，一趟一個資料夾）、ChatGPT 攻略（AI 幫忙排，但資料還是散在各平台）。

圖說：紙本手冊、Apple Notes 資料夾、ChatGPT 行程表，三個階段的真實檔案。

有一件事從來沒變：行程表永遠是「死的清單」。地點只是一行字，想看幾顆星要跳 Google Maps 搜一次、想看照片再搜一次、要導航又搜一次，運氣不好還會查到同名的另一間店。

今年出發前我做了一個決定：這趟不下載任何旅行 App，我用 AI 幫自己做一個。最初的需求真的只有一個：把行程裡每個地點釘上 Google，讓行程表變成一張活的地圖。後面那些功能，都是做著做著長出來的。

我要的不只是「排好行程」，是一個在旅途中真的會一直打開、一直用的工具。這句話後面會回頭驗證。

🧩 沿途做了哪些功能

地圖即行程
當天路線＋編號 marker景點卡
Google 評分、營業中相關連結
依使用日期排在行程裡

訂單集中
訂房代碼常駐（示意已打碼）跨國資訊
匯率、插座、交通規則問問行程
答的是我 Notion 裡的真實行程

圖說：六個功能各一張，帶出國後的使用頻率見下一節。

每一個功能都有自己的一段開發故事，這篇只講骨架；記帳和離線的細節值得各寫一篇，之後看要不要補。

🗣️ 這次的 Vibecode 是怎麼進行的

「全程用說的」聽起來像把工作丟給 AI 就好，實際上不是。這次的分工是這樣：

我負責的

• 決定這趟旅行真正需要什麼、不需要什麼
• 把行程、地點、訂單、國家資訊整理進 Notion（這是 AI 做不了的，資料是我的）
• 在真的 iPhone 上試每一個功能，不是在電腦瀏覽器裡看看就算
• 發現不對，用白話把問題講回去（「導航按下去跑到隔壁披薩店」「加到主畫面後鍵盤叫不出來」）
• 決定哪些功能留、哪些砍

Claude 負責的

• 把需求變成介面、程式碼、修改方案
• 出設計規範（Claude Design，做到 v1.9），讓十幾個頁面長得一致
• 寫小工具（批次解析地點的命令列工具、地點比對工作台）

整個流程就是一個循環：我描述需求 → Claude 產生介面和程式碼 → 我在真機上測 → 發現問題再重講一次 → Claude 修 → 再測。這個循環跑了幾十次。

所以 Vibecode 對我來說，不是「不用思考地叫 AI 寫程式」，而是把開發從「寫程式」換成「描述需求、真機測試、重講一次」。真正花時間的是後面兩件事。整個專案我自己寫的程式碼是 0 行，Notion 裡的節點超過 100 個。這不是我第一個用說的做出來的工具，第一個是韓文朗讀工具，只是這次規模大很多。

🧱 它是怎麼組起來的

一句話版本：資料在 Notion，前端是 PWA，部署在 Zeabur；地點資訊來自 Google Maps，問答走 Claude API，收據辨識用 Gemini。拆開講：

• Notion 做資料庫：行程、地點、訂單、國家資訊全部在 Notion，要修改直接在 Notion 上改，App 打開就是新的。我平常本來就在 Notion 排行程，所以資料不用搬兩次。
• 地點綁 Google Maps Place ID：每個景點釘上 Google 的 ID，在 App 裡直接看到營業時間、評分、照片，也不會導航到同名的另一間店。批次解析用一支 Claude 寫的命令列工具，米蘭 57 筆跑下來 API 成本約 0.29 美元（平均一筆不到 0.005 美元）；Google 認不出的功能性地名（「機場巴士上車點」這種），再用一個小工作台人工補。
• 行程 QA 走 Claude API：問題送出去的時候，帶的是這一趟在 Notion 裡的真實資料（一份約 155KB 的 JSON（大約幾萬字的純文字）整包塞進去，技術上叫 context-stuffing，沒有向量資料庫也沒有 RAG），所以它答得出「你的第 4 天」這種只有我知道的事。API 金鑰只放在後端，手機端完全沒有。
• 拍收據入帳走 Gemini 視覺辨識：讀金額、幣別、店名、日期，自動預填成一筆。歐洲收據的方言（逗號當小數點、IVA／MVA／moms 這些稅字）反而成了判斷幣別的線索。
• 部署在 Zeabur：推上去就上線，不用管伺服器。

📱 為什麼是 PWA，不是原生 App

這是被問最多的問題。對一個人的旅行 App 來說，PWA 的好處幾乎全拿：

• 一個網址加到主畫面，就有 icon、全螢幕
• 不用送審、不用更新版本，改完 Notion 即時生效
• 不用叫同行的人下載什麼，把網址給他，他就有一樣的行程

原生 App 的優勢（推播、深度系統整合）我這趟一個都不需要。

「可離線」要講清楚範圍，不是全功能離線：

• ✅ 憑證 PDF 和訂單資料：離線打得開（22 份憑證跟 App 一起部署，Notion 只存索引）
• ✅ 訂房代碼和飯店電話：常駐顯示
• ✅ 記帳：斷網照記，連網再背景同步
• ⚠️ 地圖：斷網時換成事先產好的每日路線靜態圖（Google 圖磚授權禁止快取，這是繞不過的紅線）
• ❌ AI 問答：需要網路，斷網時它會直說「問答需要網路」，不硬掰

圖說：飛航模式下的訂單頁：PDF 附檔變灰，但訂房代碼、飯店資訊照樣在，底下一條「目前離線」提示。

出發前的驗收是開飛航模式、把 App 完全關掉再打開，四項全綠才算過。

✈️ 實際帶出國後：留下來的，和過度設計的

照實際使用頻率排，六個功能是這個順序：

1. 記帳（一天十幾次）
2. 訂單集中（海關、check-in 時）
3. 當天路線地圖（每天早上一次）
4. 跨國資訊（每到一國一次）
5. 問問行程（偶爾）
6. 相關連結（幾乎沒點開）

前面說的「真的會一直打開的工具」，驗證結果是：一直打開的是記帳頁。

真的留下來的

• 記帳（三本帳＋拍收據），前面講過了
• 訂單集中，尤其是海關前那一刻
• 當天路線地圖，早上看一次定調

做了但用得少的

• 相關連結：資料整理進去很花時間，路上幾乎沒點開
• 問答裡的待辦查詢：行前用得多，出國後待辦都清完了
• 地圖上的「聰明縮放」細節：做的時候很講究，用的時候沒感覺（這可能才是好的設計，但確實是投入最不成比例的一塊）

限制，寫給想照做的人

• 這是一個人（加同行者）用的工具，沒有登入和權限設計，網址就是鑰匙，不適合直接公開給大量使用者
• Notion 當資料庫很方便，但地圖和行程頁讀的是 6 小時更新一次的快取，改完要按一下同步
• AI 問答的正確性完全取決於我餵進去的資料，資料沒整理好它就答不好
• 匯率是出發前更新一次的固定假設表，不即時抓；旅途中要的是穩定的估算基準，不是每小時跳動的數字

⚠️ 踩雷筆記：五個真的踩過的坑

**坑一：用座標導航，會導去隔壁店。**導航連結用經緯度當目的地，Google 會反查附近店家，飯店的導航按下去變成隔壁的披薩店。改用地點名稱字串綁定才解決。重來一次：一開始就用 Place ID 或地點名稱，不用座標。

**坑二：iOS 加入主畫面後，輸入框叫不出鍵盤。**Safari 裡正常，主畫面版怎麼點都沒反應。真機除錯七輪，真兇是地圖下方抽屜套件的無障礙機制把原生 focus 攔掉了。最後把整個套件拿掉，換成一個普通的 div，世界就安靜了。重來一次：從第一天就在真機上用「加入主畫面」的版本測，不在電腦瀏覽器裡開發。

**坑三：AI 會自己編連結、自己換匯。**要它附延伸閱讀，資料裡沒有連結它就生一個很像真的；問花費它熱心換算台幣，匯率是它想的。解法是白名單擋連結，加上硬性規定「一個台幣數字都不准給」。重來一次：提示詞裡先寫「不准做什麼」，再寫「要做什麼」。

**坑四：照片管線根本沒接通。**文件都寫「照片來自 Google」，做到 7 月才發現前端還停在假資料，照片欄位永遠是空的。這件事給我最大的教訓：真相源是程式碼，不是文件，後來這句話變成整個專案的紀律。重來一次：每個「文件說已完成」的功能，都在真機上親眼看到才打勾。

**坑五：一場「bug」的無罪開釋。**出發前兩天發現一筆帳同步後刪不掉，嫌疑最大的是同步邏輯。Claude 對著真實資料庫端到端重現，跑完一輪：邏輯無罪。真相是那筆是一個多月前的舊測試帳，我誤點到它了。教訓：測試資料要取一眼認得出的名字，例如「TEST 刪我」。

🔁 回來之後：繼續模組化

回來之後沒有把它收起來，接著繼續模組化：把這趟的設定抽出來，變成「開一趟新旅行」就能套用的架構，希望每趟旅行不論大小都可以用得到。進度會更新在我的 AI 生活時間軸。下一版真的會做的，是把記帳和訂單這兩個留下來的功能做穩，過度設計的那些先不動。

一個不會寫程式的人，把用了 15 年的旅行手帳，做成了自己的 App。這件事在 2026 年已經不稀奇，但真的做了一趟、真的帶出國用過，才知道哪些功能是「想要」、哪些是「需要」。答案是記帳，我自己也沒想到。

❓ 快速回答

沿途 Alongway 是什麼？
我用 Claude 協作做的個人旅行 PWA，把行程地圖、訂單、國家資訊、AI 問答和旅途記帳收在同一個網址裡，2026 年 8 月北歐、南法旅行實際使用。

它是怎麼做的？
Notion 當資料庫，地點綁 Google Maps Place ID，AI 問答走 Claude API（把整趟旅程資料連同問題一起送進去），拍收據辨識走 Gemini，部署在 Zeabur。我沒寫程式碼，全程用自然語言描述需求、真機測試、再修改。

為什麼不做原生 App？
自己和同行者用，需要的是網址分享、改完即時生效、跨裝置；不需要 App Store 審核和推播。PWA 加到主畫面就有 icon 和全螢幕，憑證與記帳可離線。

不會寫程式真的做得出來嗎？
做得出來，但「會講需求」比想像中重要：要能描述畫面、要能在手機上試出問題、要能把不對的地方講回去。這三件事佔了我八成的時間。

🔗 工具入口與延伸閱讀

• 🗺️ 產品頁（畫面與開發過程都在裡面，頁面也是 AI 做的）：沿途 Alongway
• ⏱️ 系列總目錄，我所有用說的做出來的工具按時間排：My AI Life Timeline · 我的AI生活時間軸
• 🎧 系列的起點，第一個用說的做出來的工具：【開發日誌】從 Gemini 到 Ghost：打造專屬韓文朗讀工具

✈️ 工商服務一下：出國上網我用 Airalo eSIM

這趟北歐＋南法我用 Airalo eSIM，免換卡、落地開機就有網路。如果你出國上網有 eSIM 需求可以使用：

• 新戶輸入 PINKJHS15 享 85 折，PINKJHS10 全用戶 9 折
• 👉 Airalo 購買連結
• 📖 我的實測分享：Airalo eSIM 設定教學