東京自由行 旅遊網站

01 / Context

背景與需求

02 / Challenge

需要解決的問題

1. C1

   部署後找不到資料檔

   API 用 node:fs 在執行時讀取 JSON，本機正常，部署到 Vercel 後卻找不到檔案，因為打包器無法追蹤動態路徑。

2. C2

   Notion 的 slug 不保證唯一

   同一間飯店住兩次時，會出現相同的 slug，行程詳情頁只用 slug 查詢會拿到錯誤的資料。

3. C3

   AI 額度用完時的備援

   Gemini 回傳 429 時，聊天功能就無法使用。

03 / Decision

技術方案與取捨

1. C1 → Deployment

   改用 Nitro 的 serverAssets 把資料內嵌進 server build，再透過 useStorage() 讀取。

   • Nitro
   • Vercel

2. C2 → Data Integrity

   再用第幾天區分行程，並把參數一起放進快取的 key，避免不同天拿到同一份快取。

   • Notion API
   • Cache

3. C3 → Reliability

   在伺服器攔截 429，自動改由 OpenAI 回答，使用者不用自己切換。

   • Gemini
   • OpenAI

技術組成

frontend

Nuxt 4 · Vue 3 · TypeScript · Nuxt UI · Tailwind CSS

content

Notion API

自己做後台的開發成本太高。Notion 本來就適合整理資料，也提供 API 可以讀取內容，所以直接拿來當 CMS。

ai

OpenAI · Gemini

services

Google Maps · Vercel

04 / Implementation

實作過程

1. F1

   Notion 內容管理

   行程、行李清單、購物清單與票券都在 Notion 維護，透過伺服器路由讀取，金鑰不會出現在前端。

   • 伺服器路由
   • Transformer
   • 60 秒快取
2. F2

   AI 旅遊助手

   可選擇 GPT 或 Gemini，也能上傳圖片一起詢問。Gemini 遇到請求過多時，會自動改用 OpenAI 回答。

   • GPT
   • Gemini
   • 圖片提問
   • 自動備援
3. F3

   地圖與迪士尼規劃

   用 Google Maps JavaScript API 標出項目與動線，並可查看整理成繁體中文的餐廳菜單。

   • Marker
   • Polyline
   • 菜單翻譯
4. F4

   花費與清單

   花費紀錄支援分類、付款方式與日幣換算；打勾狀態存在瀏覽器，不寫回 Notion。

   • 圖表統計
   • localStorage
   • Zod 驗證

實際畫面

點擊放大檢視，可用左右鍵或滑動切換。

05 / Validation

測試與驗證

• 9 月實際帶去東京自由行使用，主要功能都常用到，旅途中沒有遇到問題
• 在本機與 Vercel 部署環境都測試，因此發現菜單資料只有部署後才讀不到
• 同一間飯店住兩次時，確認不同天會顯示各自的行程
• 目前沒有自動化測試，以手動測試為主

06 / Reflection

限制與後續