出國專用旅行 App

這是什麼

這是上一道〈把行程變成可愛網站〉的進階版：把行程網站變成出國用的小 App。底部有四個分頁：

• 行程：每天一條時間軸，去過的點打勾
• 收藏：想去的店和景點，分成吃、買、景點
• 記帳：誰付的、幾個人分，自動算出誰該給誰多少；拍收據就自動填好金額
• 資訊：日文小卡（點一下放大給店員看）、匯率換算、機票住宿

我做了一個東京三天兩夜的示範版。

誰需要

• 跟朋友、家人出國，每次結帳都在算誰欠誰的人
• 看不懂菜單、怕點太貴的人
• 不想為了一趟旅行裝記帳、翻譯、匯率好幾個 App 的人

要不要錢

App 本身免費，就是一個網頁檔。

只有「拍收據、拍菜單」要用 Google Gemini 的金鑰。Google 官方價格頁（2026-10-07 更新）寫明，目前的 Flash 模型在免費額度內，輸入、輸出都不用錢；但免費額度傳上去的內容，Google 會拿去改善產品，付費才不會。我用自己的付費金鑰測兩張圖，費用不到 1 塊台幣（估算）。

怎麼開始

1. 把行程和想去的地方整理成文字。如果已經照上一道做過行程網站，直接拿那份行程。
2. 把下面整段指令貼給 Claude，最後換成你的行程。
3. 到 Google AI Studio 申請一把 Gemini 金鑰，打開做好的 App，在「資訊」頁最下面貼上。

請把我的旅遊行程做成一個手機用的旅行 App（單一 HTML 檔），風格用日系繪本風：和紙白底、3px 墨灰粗線框、大圓角、平塗粉彩，字型用 https://fonts.googleapis.com/css2?family=Huninn&display=swap 載入。
底部四個分頁：行程、收藏、記帳、資訊。
- 行程：每日時間軸，每個點可以打勾「去過」；地點點了開 Google 地圖，用 https://www.google.com/maps/search/?api=1&query=地點名稱 這種短網址
- 收藏：我想去的店和景點，依「吃、買、景點」分類
- 記帳：項目、金額、日圓或台幣、日期、類別、誰付的、誰要分；自動算總花費，還有「誰該給誰多少」；可以匯出 CSV（開頭加 BOM，Excel 打開才不會亂碼），也可以備份和還原
- 拍收據：拍照後送給 Gemini（模型用 gemini-flash-latest），讀出店名和含稅總金額，自動填進記帳表單，讓我確認後再存
- 拍菜單：送給 Gemini 翻成繁體中文、列出價格，我選數量後自動換算台幣，可以記成一筆
- 資訊：常用日文小卡（點一下放大給店員看）、匯率換算（匯率可以自己改）、機票住宿、一起分帳的人名
資料規則：
1. 所有資料存在手機瀏覽器（localStorage），重新整理不能不見
2. Gemini 金鑰不要寫進程式碼，要在「資訊」頁讓我自己貼上，只存在這支手機，還要有「刪除金鑰」按鈕
3. 照片先縮到長邊 1280 像素再送
4. 金鑰錯誤、沒網路、額度用完、照片看不清楚，都要顯示看得懂的中文提示，不能卡住
手機優先、繁體中文。
行程與收藏：
（貼在這裡）

我實際怎麼用

我用這段指令做了一個東京三天兩夜的示範 App：淺草、晴空塔、明治神宮、澀谷、築地。這是示範，不是我真的要去的行程。

成品在這裡：東京三天兩夜示範 App。拍照辨識要先貼你自己的金鑰才能用。

我拿一張測試收據和一份測試菜單實際跑過。兩張都是我自己做的虛構店家，不是真的店：

• 收據：合計 ¥2,233，一次就讀對，店名也自動翻成中文填好，我只要按「記一筆」。
• 菜單：5 道菜全部翻成中文，價格都對。我選了天婦羅定食和親子丼，按一下就記成一筆 ¥2,560，兩個人平分。
• 故意貼錯金鑰：畫面直接說「金鑰不對或沒開通」，不會卡在「辨識中」。

很多人會擔心：沒有後台，重新整理資料會不會不見？我實測重新整理不會掉，資料存在手機的瀏覽器裡。但清除瀏覽器資料或換手機就會不見，所以我多做了「備份資料」和「還原備份」。

小提醒

• 金鑰就是你的錢包。 不要把寫了金鑰的檔案傳給別人，也不要貼在群組裡。這個 App 的金鑰只存在你自己的手機；萬一外流了，到 AI Studio 把它刪掉，重新開一把。
• 用免費金鑰時，照片會被 Google 拿去改善產品。 收據上如果有會員資料、卡號末四碼，自己斟酌要不要拍。
• AI 會讀錯。 存檔前看一眼金額，尤其是字很小、皺掉的收據。
• 匯率是我填的示範數字。 出發前到「資訊」頁改成當天的匯率。
• 出國前先在家測一次：貼好金鑰、拍一張家裡的收據試試看，到了當地才不會手忙腳亂。