File size: 3,483 Bytes
584318a
 
 
 
 
 
2cee616
584318a
 
 
 
db0210c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
---
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