---
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](https://huggingface.co/spaces)
2. 點擊 "Create new Space"
3. 填寫以下資訊：
   - **Space name**: `travel-list-app` (或您喜歡的名稱)
   - **License**: Apache 2.0
   - **SDK**: Gradio
   - **Hardware**: CPU basic (免費)
   - **Visibility**: Public

### 3. 上傳檔案

有兩種方式上傳檔案：

#### 方式一：使用Git (推薦)

```bash
# 複製您的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上可用

## 本地開發

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

```bash
# 進入專案目錄
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