README.md

metadata

title: 我們的旅遊清單
emoji: 🗺️
colorFrom: blue
colorTo: indigo
sdk: gradio
sdk_version: 5.36.2
app_file: app.py
pinned: false

我們的旅遊清單 - 共編旅遊計畫

一個支援即時協作的旅遊清單應用程式，讓情侶或朋友可以一起規劃旅遊行程。

功能特色

• 🔐 代碼存取: 使用唯一代碼存取共同的旅遊清單
• ✅ 核取方塊: 完成的項目會自動移到清單底部
• 📝 即時編輯: 雙方可以同時編輯，每5秒自動同步
• 🎨 美觀介面: 響應式設計，支援桌面和手機
• 💾 資料持久化: 使用SQLite資料庫儲存資料

部署到Hugging Face Spaces

1. 準備檔案

確保您的專案包含以下檔案：

travel_list_backend/
├── src/
│   ├── models/
│   │   └── travel.py          # 資料模型
│   ├── routes/
│   │   └── travel.py          # API路由
│   ├── static/                # 前端建置檔案
│   │   ├── index.html
│   │   └── assets/
│   ├── database/
│   │   └── app.db            # SQLite資料庫
│   └── main.py               # Flask主程式
├── requirements.txt          # Python依賴
├── README.md                # 說明文件
└── app.py                   # Hugging Face入口檔案

2. 建立Hugging Face Space

1. 前往 Hugging Face Spaces
2. 點擊 "Create new Space"
3. 填寫以下資訊：
   • Space name: travel-list-app (或您喜歡的名稱)
   • License: Apache 2.0
   • SDK: Gradio
   • Hardware: CPU basic (免費)
   • Visibility: Public

3. 上傳檔案

有兩種方式上傳檔案：

方式一：使用Git (推薦)

# 複製您的Space repository
git clone https://huggingface.co/spaces/YOUR_USERNAME/travel-list-app
cd travel-list-app

# 複製所有檔案到Space目錄
cp -r /path/to/travel_list_backend/* .

# 提交並推送
git add .
git commit -m "Initial commit: Travel list app"
git push

方式二：使用網頁介面

1. 在Space頁面點擊 "Files" 標籤
2. 點擊 "Add file" > "Upload files"
3. 上傳所有必要檔案

4. 設定環境變數 (如果需要)

在Space設定中新增環境變數：

• FLASK_ENV: production
• SECRET_KEY: 您的密鑰

5. 檢查部署狀態

• 上傳完成後，Hugging Face會自動開始建置
• 在 "Logs" 標籤中查看建置進度
• 建置成功後，您的應用程式將在Space URL上可用

本地開發

如果您想在本地運行應用程式：

# 進入專案目錄
cd travel_list_backend

# 啟動虛擬環境
source venv/bin/activate

# 安裝依賴
pip install -r requirements.txt

# 運行應用程式
python src/main.py

應用程式將在 http://localhost:5000 上運行。

使用說明

1. 建立清單: 在首頁點擊"建立新清單"，系統會產生唯一代碼
2. 分享代碼: 將代碼分享給另一半或朋友
3. 加入清單: 使用代碼進入共同的旅遊清單
4. 新增項目: 在輸入框中新增想去的地方
5. 標記完成: 點擊核取方塊標記已完成的項目
6. 即時同步: 所有變更會自動同步給其他使用者

技術架構

• 後端: Python Flask + SQLite
• 前端: React + Tailwind CSS + shadcn/ui
• 部署: Hugging Face Spaces
• 即時同步: 輪詢機制 (每5秒)

授權

MIT License