---

title: "用 Gemini 做旅遊計劃 APP - 完整教學" status: published

用 Gemini 做旅遊計劃 APP - 完整教學

來源：@hau830404
發布時間：2025-11-25
原活動：第一屆《我用 Gemini 3 做的酷東西🤩》交流大會（@id30919）
觀看數：55.9K（原帖）+ 8.4K（作者回覆）
互動：8.4K 讚 | 303 留言 | 538 分享

---

🎯 專案簡介

用 Gemini Pro 打造的旅遊計劃 Web App，無需程式背景即可完成！

核心功能：

• ✅ 旅遊行程規劃
• ✅ 多人分賬
• ✅ 地圖整合
• ✅ Google 翻譯連結

線上體驗：goodtravelplan.netlify.app

---

📋 完整教學（7 步驟）

Step 1：下載原始檔案

從 Google Drive 下載網頁檔

Step 2：匯入 Gemini Pro

1. 把檔案匯入 Gemini Pro
2. 點選 Canvas 功能

Step 3：AI 匯入行程資料

把你每天的文字行程丟給 AI，請 AI 幫你把資料匯入到 APP

Step 4：建立 Firebase 資料庫（多人連線）

• 單機版：可直接使用，但多人共用較麻煩
• 多人版：需要 Firebase 資料庫
• 問 AI：「怎麼申請 Firebase 建立資料庫」

Step 5：整合 Firebase

把 Firebase 資料庫的代碼丟給 AI，請他整合

Step 6：產生網頁檔案

1. 把做好的代碼做成一個網頁檔
2. 命名必須是 index.html（重要！Netlify 和 GitHub 才讀得到）

Step 7：部署到 Netlify

1. 把 index.html 上傳到