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
|