|
|
--- |
|
|
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 |
|
|
|
|
|
|
