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

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

Step 3：AI 匯入行程資料

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

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

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

Step 5：整合 Firebase

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

Step 6：產生網頁檔案

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

Step 7：部署到 Netlify

把 index.html 上傳到 Netlify
Netlify 會自動幫你做成網站
分享給一起旅行的朋友，開始使用吧～

加碼技巧：利用「加入捷徑」功能，可以放在桌面上，變成一般的 APP 使用！

🪄 魔法咒語

在 Gemini Pro 輸入：

Create web app

然後描述你要的功能即可！

💡 作者自述

「我本身剛使用 Gemini，沒有程式背景，但只要有想法就可以開始玩～」

🛠️ 技術棧

技術	用途
Gemini Pro	AI 生成代碼（Canvas 功能）
Firebase	多人連線資料庫
Netlify	網站部署平台
HTML	網頁檔案格式
Google 翻譯 API	翻譯功能整合
Google Maps API	地圖功能整合

⚠️ 常見問題 Q&A

Q1：網頁檔一定要命名 `index.html` 嗎？

A1：沒錯，檔案命名一定要是 index.html，Netlify 或 GitHub 才讀得到。但如果你是用別種網頁語言寫，就不一定～

Q2：實際使用資料並沒有回傳到 Firebase 該怎麼處理？

A2：（作者尚未回覆，可能需要檢查 Firebase 設定或權限問題）

Q3：CodePen 生成的檔案沒辦法丟到 Netlify？

A3：記得命名為 index.html，這是關鍵步驟！

🎨 專案特色

1️⃣ 零程式背景門檻

不需要會寫程式
用自然語言跟 AI 溝通
AI 自動生成完整代碼

2️⃣ 完整旅遊功能

每日行程規劃
多人分賬（重要！）
地圖導航整合
即時翻譯支援

3️⃣ 部署簡單

Netlify 一鍵部署
自動生成網址
可分享給朋友共用

4️⃣ 桌面 APP 化

加入捷徑功能
放在桌面使用
體驗如同原生 APP

📊 互動數據

指標	數值
原帖觀看數	55.9K
作者回覆觀看數	8.4K
讚數	8.4K
留言數	303
分享數	538
教學步驟互動	570 讚
魔法咒語回覆	180 讚

🚀 延伸可能

這個教學展示了：

AI 賦能非技術人員：沒有程式背景也能做出完整應用
Gemini Canvas 功能：可視化編輯，即時調整代碼
快速原型開發：從想法到上線，可能只需要幾小時
多人協作應用：Firebase 整合讓旅遊規劃更容易

💭 關鍵洞察

「只要有想法就可以開始玩」

這句話點出了 AI 時代的核心：

想法 > 技術：創意和需求比技術門檻更重要
AI 是工具：Gemini 降低了開發門檻
迭代很容易：不滿意就重新問 AI，快速調整

這個案例完美展示了：

如何用 AI 從零到一
如何整合多個服務（Firebase、Netlify、Google API）
如何把單機版升級為多人版

🔗 相關資源

線上體驗：goodtravelplan.netlify.app
原始檔案：Google Drive 下載
部署平台：Netlify
資料庫：Firebase

標籤：#Gemini #AI開發 #旅遊規劃 #WebApp #無程式背景 #Firebase #Netlify #Canvas功能