沿途
ALONGWAY
沿途,都在這裡。

一個不會寫程式的人,把用了 15 年的旅行手帳,做成了自己的 App。

行程總覽:13 天 5 國,一頁看完這趟會看到什麼
單日路線:地圖編號 marker 對應當日地點清單
景點卡:現場資訊與拍照建議
國家資訊:匯率、插座、交通規則隨手查
緊急頁:當地救命電話、駐外館處與保險準備
15 YEARS OF PLANNING

旅遊規劃進化史

同一個人、同一種旅行方式,換過四種工具。

2012

紙本手冊,改一個字重印一頁

2012 京阪春櫻自由行紙本旅行手冊封面
NOTES / EXCEL

Notes 貼連結、Excel 對帳,一趟一個資料夾

Apple Notes 旅行計劃資料夾:一趟旅行一個資料夾
2023

開始用 AI 排行程,但東西還是散在各處

與 AI 對話排出的行程總表
2026

沿途,全部收在一張地圖上

沿途 App 地圖主畫面
WHAT'S INSIDE

打開沿途,有什麼

地圖即行程

打開就是地圖,每天的路線一目瞭然。
編號 marker 按當天順序排好,點一下就看得到營業時間、訂位狀態、導航。當天全彩、其他天灰階,一眼分得出「今天要走哪裡」。

D4 哥本哈根:一天的路線、編號 marker 與地點清單

問問行程

跟自己的行程對話,不用翻頁找答案。
「飯店幾點 check-in?」「明天要帶傘嗎?」「這家餐廳訂了嗎?」問題丟出去,答案是根據你這一趟的真實資料回的,不是網路上的通則。

問答面板:問「米蘭總共待多久?」,AI 依照行程資料回答

記帳 · 三本帳

行前、行程中、個人,帳分三本才算得清。
行前:機票訂房這種出發前就刷掉的。
行程中:路上花的,拍一張收據,金額、幣別、店名自動讀出來入帳。
個人:只存在自己手機(local),不上雲、不進共用帳,要分帳時再匯出檔案給同行的人。多幣別各自結算,回國不用重算一次。

旅費帳本(同行人姓名已模糊):行前已付、行程中、個人、全部總覽四分頁

訂單集中·離線也打得開

機票、訂房、票券,散落的確認信全部收進來。
訂房代碼放大用等寬字顯示、一鍵複製;PDF 附檔直接掛在那一天的地點下面。櫃檯要看確認信的時候,不用在信箱裡翻。
飛機上、地鐵裡、沒訊號的山區也一樣:訂房代碼、地址電話、當天路線都存在手機裡,附檔會變灰但關鍵資訊還在;網路回來自動同步。

下面是循環動圖:訂房代碼放大、一鍵複製 → 飛航模式下地圖載不出來,但代碼、備註與離線提示還在。

跨國資訊

每個國家一頁,落地查一次就好。
貨幣與匯率、插座規格、駕駛方向、當地交通規則、緊急電話。跨國那天只顯示當晚過夜的那一國,不讓你在兩套規則之間猜。

影片裡是同一頁的兩個分頁:先是丹麥的國家資訊(匯率、插座、駕駛方向、酒類規定),切一下就是緊急分頁:112、駐外館處、保险理賠、護照遺失、當地就醫。

▶ 6s

相關連結

這趟會用到的外部連結,收在該用到的那一天。
退稅流程與機場退稅櫃檯位置、車票官網、預約頁、當地交通 App;也有純粹好玩的——照著周杰倫走過的路線排的同款行程、小紅書上抄來的機位與拍照角度。查一次就存進來,不用每次重新 Google。

下面這段影片:翻開 D4「這天用得到的連結」→ 點「周董哥本哈根同款路線」→ 跳出去就是周杰倫那條同款路線的小紅書原文。

▶ 7s

這六件事,全部是一個不會寫程式的人,用說的做出來的。

開發日誌 / 完整開發故事 →
HOW IT WAS MADE

我用說的,把它做出來

不會寫程式,但知道自己要什麼。剩下的交給 AI 工作流。所有資料只有一個家:Notion;App 只是它最好看的樣子。

開發現場

「用說的」是字面意義。

我要地圖上的編號跟行程順序一樣
第二天,marker 會依每天的行程自動編號,當日全彩、其他天退成灰階小點
行程我改在 Notion 裡了
重新整理,App 上的地圖已經是新路線
100+
Notion 裡的行程節點(待確認)
v1.9
設計規範一路迭代到的版本
0 行
我自己寫的程式碼
IMPL-46
功能編號寫到的號碼(待確認)
完整開發故事 →
HOW IT'S PUT TOGETHER

用現成的東西,組成自己的 App

Notion 就是資料庫。行程、地點、訂單、國家資訊、費用全部整理在 Notion,App 直接抓 Notion 的資料,不另做一套後台。我在 Notion 改一行,重新整理,App 就是新的。

地點綁 Google Maps Place ID。Notion 裡一個地點只填一次,營業時間、地址、電話、評分、實拍照片與導航連結都由 Google 帶進來,景點改名、換地址、季節性休館都不用回頭改。點 marker,抽屜從底部滑上來:拉一點看名稱、營業時間、訂位狀態,拉高看實拍照片、備註、單據與導航,往下滑就收回去,地圖全程不用離開;反過來點抽屜裡的地點卡片,地圖也會自己飛過去,兩邊永遠對得上。

Zoom 也是聰明的。地圖已經夠近時點 marker 只平移不縮放,不會突然拉近拉遠讓人暈,地點快被抽屜擋住時,視角會自動上移讓開;迷路了按右下角「🎯 回到當日」,一鍵把當天所有地點重新框回畫面。Google 給的坐標不一定是你要站的位置——車站出口、飯店側門常差幾十公尺,所以每個地點可以再存一組手動位移校正,同一天太近的點會自動擠開,marker 編號不疊在一起。

行程 QA 走 Claude API。問題送出去時帶的是這一趟在 Notion 裡的真實資料,所以答得出「你的第 4 天」,而不是網路上的通則;問不到它會說不知道。

介面規範由 Claude 寫成一份設計規範(迭代到 v1.9):顏色、字級、圓角、間距、marker 樣式、抽屜行為都在裡面,要加新頁面先看規範再動手,所以十幾個頁面長得像同一個 App。

部署在 Zeabur,用 PWA 而不是原生 App。推上去就上線,不用管伺服器;一個網址加到主畫面就有 icon、全螢幕、可離線,不用送審、不用更新版本、不用叫同行的人下載什麼,把網址給他就有一樣的行程。

這個版本還在繼續疊代。它不是為了這一趟做完就收——希望下一趟旅程打開來,還能接著用。

每一趟旅行,
都值得一本自己的 App。

下一步:讓任何人都能客製化自己的旅行 App。

頁面用到的素材

影片 1跨國資訊 → 緊急分頁country_emergency_demo.mp4(6s)
影片 2相關連結 → 周杰倫同款路線小紅書原文copenhagen_to_jay_demo.mp4(7s)
動圖訂房代碼 ↔ 飛航模式離線畫面orders_loop.mp4(6s 循環)
Hero重點畫面輪播 ×5:行程總覽 → 單日路線 → 景點卡 → 國家資訊 → 緊急頁trip_overview_demo.pnghero_day_route.jpghero_poi_card.jpghero_country_info.jpghero_emergency.jpg
功能卡靜態截圖 ×3IMG_8563_demo.pngqa_answer_still.jpgexpense_today_masked.jpg(人名已模糊)
進化史15 年四個階段的真實照片evo_2012_handbook.jpgevo_notes_folders.jpgevo_ai_chat.jpgevo_2026_map.jpg
待確認文字而非圖片fun-fact 的 IMPL-46100+(「旅途即時筆記」按鈕已移除,待 blog 上線再加回)

畫面中的日期與代碼為實際行程資料(行程已結束)。