merged readme
This commit is contained in:
parent
7017df5fa3
commit
cb52732b00
4 changed files with 256 additions and 726 deletions
185
README-Docker.md
185
README-Docker.md
|
|
@ -1,185 +0,0 @@
|
|||
# Tschunk Order - Docker Deployment
|
||||
|
||||
Diese Anleitung beschreibt, wie Sie die Tschunk Order Anwendung mit Docker Compose deployen können.
|
||||
|
||||
## Voraussetzungen
|
||||
|
||||
- Docker
|
||||
- Docker Compose
|
||||
|
||||
## Projektstruktur
|
||||
|
||||
```
|
||||
tschunkorder/
|
||||
├── docker-compose.yml # Haupt-Konfiguration
|
||||
├── frontend/
|
||||
│ ├── Dockerfile # Frontend Container
|
||||
│ ├── nginx.conf # Frontend Nginx-Konfiguration
|
||||
│ └── .dockerignore
|
||||
├── backend/
|
||||
│ ├── Dockerfile # Backend Container
|
||||
│ └── .dockerignore
|
||||
└── nginx/
|
||||
├── nginx.conf # Haupt-Nginx-Konfiguration
|
||||
└── conf.d/
|
||||
└── default.conf # Reverse Proxy-Konfiguration
|
||||
```
|
||||
|
||||
## Services
|
||||
|
||||
### 1. Frontend (Vue.js + Vite)
|
||||
- **Port**: Intern 80, extern über Nginx
|
||||
- **Technologie**: Vue.js 3 mit Vite
|
||||
- **Container**: `tschunk-frontend`
|
||||
|
||||
### 2. Backend (FastAPI)
|
||||
- **Port**: Intern 8000, extern 8000 (optional)
|
||||
- **Technologie**: FastAPI mit Uvicorn
|
||||
- **Container**: `tschunk-backend`
|
||||
|
||||
### 3. Nginx Reverse Proxy
|
||||
- **Port**: 80 (HTTP), 443 (HTTPS, optional)
|
||||
- **Funktion**: Reverse Proxy für Frontend und Backend
|
||||
- **Container**: `tschunk-nginx`
|
||||
|
||||
## Deployment
|
||||
|
||||
### 1. Anwendung starten
|
||||
|
||||
```bash
|
||||
# Alle Services bauen und starten
|
||||
docker-compose up --build
|
||||
|
||||
# Im Hintergrund starten
|
||||
docker-compose up --build -d
|
||||
```
|
||||
|
||||
### 2. Anwendung stoppen
|
||||
|
||||
```bash
|
||||
# Services stoppen
|
||||
docker-compose down
|
||||
|
||||
# Services und Volumes löschen
|
||||
docker-compose down -v
|
||||
```
|
||||
|
||||
### 3. Logs anzeigen
|
||||
|
||||
```bash
|
||||
# Alle Logs
|
||||
docker-compose logs
|
||||
|
||||
# Spezifischer Service
|
||||
docker-compose logs frontend
|
||||
docker-compose logs backend
|
||||
docker-compose logs nginx
|
||||
|
||||
# Logs folgen
|
||||
docker-compose logs -f
|
||||
```
|
||||
|
||||
## Zugriff auf die Anwendung
|
||||
|
||||
- **Frontend**: http://localhost/ (oder IP-Adresse)
|
||||
- **Backend API**: http://localhost/api/ (oder IP-Adresse)
|
||||
- **WebSocket**: ws://localhost/api/ws (oder IP-Adresse)
|
||||
- **Health Check**: http://localhost/health (oder IP-Adresse)
|
||||
|
||||
## API-Endpunkte
|
||||
|
||||
- `GET /api/orders` - Alle Bestellungen abrufen
|
||||
- `POST /api/orders` - Neue Bestellung erstellen
|
||||
- `DELETE /api/orders/{id}` - Bestellung löschen
|
||||
- `GET /api/drinks` - Verfügbare Getränke
|
||||
|
||||
## WebSocket
|
||||
|
||||
Der WebSocket-Endpunkt ist unter `ws://localhost/api/ws` verfügbar und unterstützt:
|
||||
- Echtzeit-Updates bei neuen/gelöschten Bestellungen
|
||||
- Ping/Pong für Verbindungsüberwachung
|
||||
- Bestellungen erstellen/löschen über WebSocket
|
||||
|
||||
## Konfiguration
|
||||
|
||||
### Umgebungsvariablen
|
||||
|
||||
#### Frontend
|
||||
- `VITE_API_BASE_URL`: Backend API URL (Standard: http://backend:8000)
|
||||
|
||||
#### Backend
|
||||
- `PYTHONUNBUFFERED`: Python Output nicht puffern (Standard: 1)
|
||||
|
||||
### Nginx-Konfiguration
|
||||
|
||||
Die Nginx-Konfiguration befindet sich in:
|
||||
- `nginx/nginx.conf` - Haupt-Konfiguration
|
||||
- `nginx/conf.d/default.conf` - Server-Konfiguration
|
||||
|
||||
#### Features
|
||||
- Rate Limiting für API und WebSocket
|
||||
- Gzip-Kompression
|
||||
- Security Headers
|
||||
- WebSocket-Support
|
||||
- SPA-Routing für Frontend
|
||||
- Vereinfachte Proxy-Logik (alle API-Endpunkte unter /api)
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Container startet nicht
|
||||
```bash
|
||||
# Logs prüfen
|
||||
docker-compose logs [service-name]
|
||||
|
||||
# Container neu bauen
|
||||
docker-compose build --no-cache [service-name]
|
||||
```
|
||||
|
||||
### Netzwerk-Probleme
|
||||
```bash
|
||||
# Netzwerk-Status prüfen
|
||||
docker network ls
|
||||
docker network inspect tschunkorder_tschunk-network
|
||||
```
|
||||
|
||||
### Port-Konflikte
|
||||
Falls Port 80 bereits belegt ist, ändern Sie in `docker-compose.yml`:
|
||||
```yaml
|
||||
nginx:
|
||||
ports:
|
||||
- "8080:80" # Statt "80:80"
|
||||
```
|
||||
|
||||
## Entwicklung
|
||||
|
||||
### Hot Reload (Entwicklung)
|
||||
Für die Entwicklung können Sie die Services einzeln starten:
|
||||
|
||||
```bash
|
||||
# Backend mit Hot Reload
|
||||
cd backend
|
||||
uvicorn main:app --reload --host 0.0.0.0 --port 8000
|
||||
|
||||
# Frontend mit Hot Reload
|
||||
cd frontend
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Datenbank-Persistenz
|
||||
Die aktuelle Implementierung verwendet eine In-Memory-Datenbank. Für Produktionsumgebungen sollten Sie eine persistente Datenbank hinzufügen.
|
||||
|
||||
## Sicherheit
|
||||
|
||||
- Alle Services laufen in isolierten Containern
|
||||
- Nginx bietet Rate Limiting und Security Headers
|
||||
- Backend läuft als non-root User
|
||||
- WebSocket-Verbindungen sind begrenzt
|
||||
|
||||
## Monitoring
|
||||
|
||||
### Health Checks
|
||||
- Backend: Automatischer Health Check alle 30 Sekunden
|
||||
- Nginx: `/health` Endpunkt
|
||||
|
||||
### Logs
|
||||
Alle Services loggen in stdout/stderr und können über `docker-compose logs` abgerufen werden.
|
||||
256
README.md
Normal file
256
README.md
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
# TschunkOrder
|
||||
|
||||
A modern web application for managing drink orders, specifically designed for Tschunk beverages. The application provides a real-time ordering system with a Vue.js frontend and FastAPI backend, featuring WebSocket support for live updates and Prometheus metrics for monitoring.
|
||||
|
||||
## Purpose
|
||||
|
||||
TschunkOrder is a full-stack application that allows users to:
|
||||
- Create and manage drink orders in real-time
|
||||
- Choose from various Tschunk variants (Tschunk, Tschunk Hannover-Mische, Tschunk alkoholfreier Rum, Virgin Tschunk)
|
||||
- Select between Flora Mate and Club Mate
|
||||
- Add custom notes and special requests
|
||||
- View order statistics and metrics
|
||||
- Receive live updates via WebSocket connections
|
||||
|
||||
## Quick Start with Docker
|
||||
|
||||
The easiest way to run the application is using the provided Docker Compose setup:
|
||||
|
||||
```bash
|
||||
# Clone the repository (if not already done)
|
||||
git clone ssh://gogs@git.hannover.ccc.de:3071/clarity/tschunkorder.git
|
||||
cd tschunkorder
|
||||
|
||||
# Start all services
|
||||
docker-compose up -d
|
||||
|
||||
# Access the application
|
||||
# Frontend: http://[url]
|
||||
# API Documentation: http://[url]/api/docs
|
||||
# Prometheus Metrics: http://[url]/metrics
|
||||
```
|
||||
|
||||
The Docker setup includes:
|
||||
- **Frontend**: Vue.js application served on port 80
|
||||
- **Backend**: FastAPI server with WebSocket support
|
||||
- **Nginx**: Reverse proxy with rate limiting and security headers
|
||||
|
||||
## Development Environment Setup
|
||||
|
||||
### Backend Development
|
||||
|
||||
**Prerequisites:**
|
||||
- Python 3.8+
|
||||
- pip
|
||||
|
||||
**Setup:**
|
||||
```bash
|
||||
cd backend
|
||||
|
||||
# Create virtual environment
|
||||
python -m venv venv
|
||||
|
||||
# Activate virtual environment
|
||||
# Linux/macOS:
|
||||
source venv/bin/activate
|
||||
# Windows:
|
||||
# venv\Scripts\activate
|
||||
|
||||
# Install dependencies
|
||||
pip install -r requirements.txt
|
||||
|
||||
# Run the development server
|
||||
python main.py
|
||||
# or
|
||||
uvicorn main:app --reload
|
||||
```
|
||||
|
||||
The backend will be available at `http://localhost:8000`
|
||||
|
||||
### Frontend Development
|
||||
|
||||
**Prerequisites:**
|
||||
- Node.js 18+
|
||||
- npm
|
||||
|
||||
**Setup:**
|
||||
```bash
|
||||
cd frontend
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The frontend will be available at `http://localhost:5173`
|
||||
|
||||
**Available Scripts:**
|
||||
- `npm run dev` - Start development server
|
||||
- `npm run build` - Build for production
|
||||
- `npm run preview` - Preview production build
|
||||
- `npm run lint` - Run ESLint
|
||||
- `npm run type-check` - Check TypeScript types
|
||||
|
||||
## API Description
|
||||
|
||||
The backend provides a RESTful API with WebSocket support for real-time updates.
|
||||
|
||||
### Base URL
|
||||
- Development: `http://[url]:8000`
|
||||
- Production: `http://[url]/api` (when setup via docker)
|
||||
|
||||
### REST Endpoints
|
||||
|
||||
#### Create Order
|
||||
```http
|
||||
POST /api/orders
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"drinks": [
|
||||
{
|
||||
"drink_type": "Tschunk",
|
||||
"mate_type": "Club Mate",
|
||||
"quantity": 2,
|
||||
"notes": "Extra cold please"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### Get All Orders
|
||||
```http
|
||||
GET /api/orders
|
||||
```
|
||||
|
||||
#### Delete Order
|
||||
```http
|
||||
DELETE /api/orders/{order_id}
|
||||
```
|
||||
|
||||
#### Get Available Drinks
|
||||
```http
|
||||
GET /api/drinks
|
||||
```
|
||||
|
||||
#### Get Drink Statistics
|
||||
```http
|
||||
GET /api/stats/drinks
|
||||
```
|
||||
|
||||
### WebSocket Endpoint
|
||||
|
||||
**Connection:** `ws://[url]:8000/api/ws` (development) or `ws://[url]/api/ws` (production)
|
||||
|
||||
**Message Types:**
|
||||
|
||||
1. **Create Order:**
|
||||
```json
|
||||
{
|
||||
"type": "create_order",
|
||||
"drinks": [...]
|
||||
}
|
||||
```
|
||||
|
||||
2. **Get All Orders:**
|
||||
```json
|
||||
{
|
||||
"type": "get_all_orders"
|
||||
}
|
||||
```
|
||||
|
||||
3. **Delete Order:**
|
||||
```json
|
||||
{
|
||||
"type": "delete_order",
|
||||
"order_id": "uuid"
|
||||
}
|
||||
```
|
||||
|
||||
4. **Ping/Pong:**
|
||||
```json
|
||||
{
|
||||
"type": "ping"
|
||||
}
|
||||
```
|
||||
|
||||
**Received Messages:**
|
||||
|
||||
- `order_created` - New order created
|
||||
- `order_deleted` - Order deleted
|
||||
- `all_orders` - All current orders
|
||||
- `pong` - Response to ping
|
||||
|
||||
### Available Drink Types
|
||||
- Tschunk
|
||||
- Tschunk Hannover-Mische
|
||||
- Tschunk alkoholfreier Rum
|
||||
- Virgin Tschunk
|
||||
|
||||
### Available Mate Types
|
||||
- Flora Mate
|
||||
- Club Mate
|
||||
|
||||
## Prometheus Metrics
|
||||
|
||||
The application exposes Prometheus metrics at `/metrics` endpoint for monitoring drink sales and application performance.
|
||||
|
||||
### Available Metrics
|
||||
|
||||
#### `tschunk_drinks_sold_total`
|
||||
- **Type:** Counter
|
||||
- **Labels:** `drink_type`, `mate_type`
|
||||
- **Description:** Total number of drinks sold by type and mate variety
|
||||
|
||||
**Example:**
|
||||
```
|
||||
# HELP tschunk_drinks_sold_total Total number of drinks sold
|
||||
# TYPE tschunk_drinks_sold_total counter
|
||||
tschunk_drinks_sold_total{drink_type="Tschunk",mate_type="Club Mate"} 15
|
||||
tschunk_drinks_sold_total{drink_type="Virgin Tschunk",mate_type="Flora Mate"} 8
|
||||
```
|
||||
|
||||
### Metrics Persistence
|
||||
|
||||
- Metrics are persisted to `drink_stats.json` in the backend directory
|
||||
- Counters are restored on application restart
|
||||
- Data survives container restarts when using Docker volumes
|
||||
|
||||
### Monitoring Integration
|
||||
|
||||
The metrics endpoint can be scraped by:
|
||||
- Prometheus server
|
||||
- Grafana dashboards
|
||||
- Other monitoring tools
|
||||
|
||||
**Example Prometheus configuration:**
|
||||
```yaml
|
||||
scrape_configs:
|
||||
- job_name: 'tschunkorder'
|
||||
static_configs:
|
||||
- targets: ['localhost:8000']
|
||||
metrics_path: '/metrics'
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
tschunkorder/
|
||||
├── backend/ # FastAPI backend
|
||||
│ ├── main.py # Main application entry point
|
||||
│ ├── models.py # Pydantic models
|
||||
│ ├── database.py # In-memory database
|
||||
│ ├── websocket_manager.py # WebSocket connection management
|
||||
│ ├── prometheus_metrics.py # Prometheus metrics
|
||||
│ └── requirements.txt # Python dependencies
|
||||
├── frontend/ # Vue.js frontend
|
||||
│ ├── src/ # Source code
|
||||
│ ├── package.json # Node.js dependencies
|
||||
│ └── vite.config.ts # Vite configuration
|
||||
├── nginx/ # Nginx configuration
|
||||
│ ├── nginx.conf # Main nginx config
|
||||
│ └── conf.d/ # Server configurations
|
||||
└── docker-compose.yml # Docker orchestration
|
||||
```
|
||||
|
|
@ -1,371 +0,0 @@
|
|||
# Tschunk Order API
|
||||
|
||||
Eine RESTful API für Tschunk-Bestellungen, entwickelt mit FastAPI.
|
||||
|
||||
## Features
|
||||
|
||||
- Bestellungen mit mehreren Getränken erstellen
|
||||
- Alle Bestellungen abrufen
|
||||
- Spezifische Bestellungen löschen
|
||||
- Unterstützung für verschiedene Tschunk-Varianten
|
||||
- Wahl zwischen Flora Mate und Club Mate
|
||||
- Mengenangabe für jedes Getränk (Standard: 1)
|
||||
- Anmerkungen und Sonderwünsche für jedes Getränk
|
||||
- **WebSocket-Unterstützung für Echtzeit-Updates**
|
||||
- **Automatisierte Tests mit pytest**
|
||||
|
||||
## Verfügbare Getränke
|
||||
|
||||
- **Tschunk**
|
||||
- **Tschunk Hannover-Mische**
|
||||
- **Tschunk alkoholfreier Rum**
|
||||
- **Virgin Tschunk**
|
||||
|
||||
## Mate-Sorten
|
||||
|
||||
- **Flora Mate**
|
||||
- **Club Mate**
|
||||
|
||||
## Installation
|
||||
|
||||
### Voraussetzungen
|
||||
|
||||
- Python 3.8+ installiert
|
||||
|
||||
### Setup
|
||||
|
||||
1. **Virtuelles Environment erstellen und aktivieren:**
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
|
||||
# Virtuelles Environment erstellen
|
||||
python -m venv venv
|
||||
|
||||
# Virtuelles Environment aktivieren
|
||||
# Unter Linux/macOS:
|
||||
source venv/bin/activate
|
||||
|
||||
# Unter Windows:
|
||||
# venv\Scripts\activate
|
||||
```
|
||||
|
||||
2. **Abhängigkeiten installieren:**
|
||||
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
## Verwendung
|
||||
|
||||
### Server starten
|
||||
|
||||
```bash
|
||||
# Stelle sicher, dass das virtuelle Environment aktiviert ist
|
||||
source venv/bin/activate # Linux/macOS
|
||||
# venv\Scripts\activate # Windows
|
||||
|
||||
# Server starten
|
||||
python main.py
|
||||
```
|
||||
|
||||
Oder mit uvicorn:
|
||||
|
||||
```bash
|
||||
uvicorn main:app --reload
|
||||
```
|
||||
|
||||
Der Server läuft dann auf `http://localhost:8000`
|
||||
|
||||
### API-Dokumentation
|
||||
|
||||
Die automatisch generierte API-Dokumentation ist verfügbar unter:
|
||||
- Swagger UI: `http://localhost:8000/docs`
|
||||
- ReDoc: `http://localhost:8000/redoc`
|
||||
|
||||
## API-Endpunkte
|
||||
|
||||
### 1. Bestellung erstellen
|
||||
```
|
||||
POST /orders
|
||||
```
|
||||
|
||||
Beispiel-Request:
|
||||
```json
|
||||
{
|
||||
"drinks": [
|
||||
{
|
||||
"drink_type": "Tschunk",
|
||||
"mate_type": "Club Mate",
|
||||
"quantity": 2,
|
||||
"notes": "Bitte extra kalt servieren"
|
||||
},
|
||||
{
|
||||
"drink_type": "Virgin Tschunk",
|
||||
"mate_type": "Flora Mate",
|
||||
"notes": "Ohne Eiswürfel"
|
||||
},
|
||||
{
|
||||
"drink_type": "Tschunk Hannover-Mische",
|
||||
"mate_type": "Club Mate",
|
||||
"quantity": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Hinweise:**
|
||||
- Das `quantity`-Feld ist optional. Falls nicht angegeben, wird automatisch 1 verwendet.
|
||||
- Das `notes`-Feld ist optional und kann für Sonderwünsche oder Anmerkungen verwendet werden (max. 500 Zeichen).
|
||||
- **Alle verbundenen WebSocket-Clients erhalten automatisch ein Update.**
|
||||
|
||||
### 2. Alle Bestellungen abrufen
|
||||
```
|
||||
GET /orders
|
||||
```
|
||||
|
||||
### 3. Bestellung löschen
|
||||
```
|
||||
DELETE /orders/{order_id}
|
||||
```
|
||||
|
||||
**Hinweis:** Alle verbundenen WebSocket-Clients erhalten automatisch ein Update.
|
||||
|
||||
### 4. Verfügbare Getränke anzeigen
|
||||
```
|
||||
GET /drinks
|
||||
```
|
||||
|
||||
### 5. WebSocket für Echtzeit-Updates
|
||||
```
|
||||
WS /ws
|
||||
```
|
||||
|
||||
**WebSocket-Nachrichten-Formate:**
|
||||
|
||||
#### Neue Bestellung:
|
||||
```json
|
||||
{
|
||||
"type": "order_created",
|
||||
"timestamp": "2024-01-15T10:30:00",
|
||||
"order": {
|
||||
"id": "uuid-here",
|
||||
"order_date": "2024-01-15T10:30:00",
|
||||
"drinks": [...]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Bestellung gelöscht:
|
||||
```json
|
||||
{
|
||||
"type": "order_deleted",
|
||||
"timestamp": "2024-01-15T10:35:00",
|
||||
"order_id": "uuid-here"
|
||||
}
|
||||
```
|
||||
|
||||
#### Alle Bestellungen (bei Verbindung):
|
||||
```json
|
||||
{
|
||||
"type": "all_orders",
|
||||
"timestamp": "2024-01-15T10:30:00",
|
||||
"orders": [...]
|
||||
}
|
||||
```
|
||||
|
||||
## Beispiel-Verwendung mit curl
|
||||
|
||||
### Bestellung erstellen:
|
||||
```bash
|
||||
curl -X POST "http://localhost:8000/orders" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"drinks": [
|
||||
{
|
||||
"drink_type": "Tschunk",
|
||||
"mate_type": "Club Mate",
|
||||
"quantity": 3,
|
||||
"notes": "Bitte mit Limettenscheibe garnieren"
|
||||
},
|
||||
{
|
||||
"drink_type": "Virgin Tschunk",
|
||||
"mate_type": "Flora Mate",
|
||||
"notes": "Allergie gegen Zitrusfrüchte"
|
||||
}
|
||||
]
|
||||
}'
|
||||
```
|
||||
|
||||
### Alle Bestellungen abrufen:
|
||||
```bash
|
||||
curl -X GET "http://localhost:8000/orders"
|
||||
```
|
||||
|
||||
### Bestellung löschen:
|
||||
```bash
|
||||
curl -X DELETE "http://localhost:8000/orders/{order_id}"
|
||||
```
|
||||
|
||||
## WebSocket-Client Beispiel
|
||||
|
||||
### JavaScript (Browser):
|
||||
```javascript
|
||||
const ws = new WebSocket('ws://localhost:8000/ws');
|
||||
|
||||
ws.onopen = function() {
|
||||
console.log('WebSocket verbunden');
|
||||
};
|
||||
|
||||
ws.onmessage = function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
switch(data.type) {
|
||||
case 'order_created':
|
||||
console.log('Neue Bestellung:', data.order);
|
||||
break;
|
||||
case 'order_deleted':
|
||||
console.log('Bestellung gelöscht:', data.order_id);
|
||||
break;
|
||||
case 'all_orders':
|
||||
console.log('Alle Bestellungen:', data.orders);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = function() {
|
||||
console.log('WebSocket getrennt');
|
||||
};
|
||||
```
|
||||
|
||||
### Python:
|
||||
```python
|
||||
import asyncio
|
||||
import websockets
|
||||
import json
|
||||
|
||||
async def websocket_client():
|
||||
async with websockets.connect('ws://localhost:8000/ws') as websocket:
|
||||
while True:
|
||||
message = await websocket.recv()
|
||||
data = json.loads(message)
|
||||
print(f"Empfangen: {data}")
|
||||
|
||||
asyncio.run(websocket_client())
|
||||
```
|
||||
|
||||
## Testing
|
||||
|
||||
Das Projekt enthält mehrere Test-Optionen:
|
||||
|
||||
### 1. Automatisierte Tests (Empfohlen)
|
||||
```bash
|
||||
# Stelle sicher, dass das virtuelle Environment aktiviert ist
|
||||
source venv/bin/activate
|
||||
|
||||
# Führe alle Tests automatisch aus
|
||||
python run_tests.py
|
||||
```
|
||||
|
||||
**Features der automatisierten Tests:**
|
||||
- ✅ **Kein Server-Start nötig** - Tests laufen automatisch
|
||||
- ✅ **Vollständige API-Abdeckung** - Alle Endpunkte getestet
|
||||
- ✅ **WebSocket-Tests** - Echtzeit-Funktionalität getestet
|
||||
- ✅ **Datenbank-Tests** - CRUD-Operationen getestet
|
||||
- ✅ **Validierung-Tests** - Pydantic-Modelle getestet
|
||||
- ✅ **Fehlerbehandlung** - Edge Cases getestet
|
||||
|
||||
### 2. Manuelle API-Tests
|
||||
```bash
|
||||
# Stelle sicher, dass das virtuelle Environment aktiviert ist
|
||||
source venv/bin/activate
|
||||
|
||||
# Test-Skript ausführen
|
||||
python test_api.py
|
||||
```
|
||||
|
||||
### 3. WebSocket-Tests
|
||||
```bash
|
||||
# Stelle sicher, dass das virtuelle Environment aktiviert ist
|
||||
source venv/bin/activate
|
||||
|
||||
# WebSocket-Test ausführen
|
||||
python test_websocket.py
|
||||
```
|
||||
|
||||
### 4. Erweiterte Test-Optionen
|
||||
```bash
|
||||
# Detaillierte pytest-Ausgabe
|
||||
python -m pytest test_automated.py -v
|
||||
|
||||
# Nur bestimmte Tests ausführen
|
||||
python -m pytest test_automated.py -k "test_create"
|
||||
|
||||
# Tests mit Coverage
|
||||
python -m pytest test_automated.py --cov=.
|
||||
|
||||
# Tests parallel ausführen
|
||||
python -m pytest test_automated.py -n auto
|
||||
```
|
||||
|
||||
## Projektstruktur
|
||||
|
||||
```
|
||||
backend/
|
||||
├── main.py # FastAPI-Anwendung
|
||||
├── models.py # Pydantic-Modelle
|
||||
├── database.py # In-Memory-Datenbank
|
||||
├── websocket_manager.py # WebSocket-Management
|
||||
├── test_automated.py # Automatisierte Tests (pytest)
|
||||
├── test_api.py # Manueller API-Test
|
||||
├── test_websocket.py # WebSocket-Test
|
||||
├── run_tests.py # Test-Runner
|
||||
├── pytest.ini # pytest-Konfiguration
|
||||
├── requirements.txt # Python-Abhängigkeiten
|
||||
├── .gitignore # Git-Ignore-Datei
|
||||
├── venv/ # Virtuelles Environment (wird ignoriert)
|
||||
└── README.md # Diese Datei
|
||||
```
|
||||
|
||||
## Hinweise
|
||||
|
||||
- **Virtuelles Environment**: Das Projekt verwendet ein virtuelles Environment, um Abhängigkeiten zu isolieren
|
||||
- **In-Memory-Datenbank**: Die API verwendet eine In-Memory-Datenbank, d.h. alle Daten gehen beim Neustart verloren
|
||||
- **Produktionsumgebung**: Für Produktionsumgebungen sollte eine persistente Datenbank verwendet werden
|
||||
- **Validierung**: Die API validiert automatisch alle Eingaben mit Pydantic
|
||||
- **Mengenangabe**: Jedes Getränk kann eine Menge haben (mindestens 1, Standard: 1)
|
||||
- **Anmerkungen**: Jedes Getränk kann optionale Anmerkungen haben (max. 500 Zeichen)
|
||||
- **Echtzeit-Updates**: WebSocket-Clients erhalten automatisch Updates bei Änderungen
|
||||
- **Automatisierte Tests**: Vollständige Test-Suite mit pytest für alle Funktionen
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Virtuelles Environment aktivieren
|
||||
Falls du eine Fehlermeldung bezüglich fehlender Module erhältst, stelle sicher, dass das virtuelle Environment aktiviert ist:
|
||||
|
||||
```bash
|
||||
# Status prüfen
|
||||
which python # Sollte auf venv/bin/python zeigen
|
||||
|
||||
# Falls nicht aktiviert:
|
||||
source venv/bin/activate
|
||||
```
|
||||
|
||||
### Port bereits belegt
|
||||
Falls Port 8000 bereits belegt ist, kannst du einen anderen Port verwenden:
|
||||
|
||||
```bash
|
||||
uvicorn main:app --reload --port 8001
|
||||
```
|
||||
|
||||
### WebSocket-Verbindungsprobleme
|
||||
Falls WebSocket-Verbindungen nicht funktionieren:
|
||||
- Stelle sicher, dass der Server läuft
|
||||
- Prüfe Firewall-Einstellungen
|
||||
- Verwende `ws://` für lokale Verbindungen, `wss://` für HTTPS
|
||||
|
||||
### Test-Probleme
|
||||
Falls Tests fehlschlagen:
|
||||
- Stelle sicher, dass alle Abhängigkeiten installiert sind: `pip install -r requirements.txt`
|
||||
- Aktiviere das virtuelle Environment: `source venv/bin/activate`
|
||||
- Führe Tests mit detaillierter Ausgabe aus: `python -m pytest test_automated.py -v`
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
# TschunkOrder Frontend
|
||||
|
||||
Das Frontend für die TschunkOrder-Anwendung - eine Vue.js-basierte Webanwendung zur Verwaltung von Getränkebestellungen.
|
||||
|
||||
## 📋 Übersicht
|
||||
|
||||
Das Frontend ist eine moderne Single-Page-Application (SPA), die mit Vue 3, TypeScript und Vite entwickelt wurde. Es bietet eine benutzerfreundliche Oberfläche für:
|
||||
|
||||
- **Bestellungen anzeigen**: Übersicht über alle bestehenden Bestellungen
|
||||
- **Neue Bestellungen erstellen**: Formular zum Erstellen neuer Getränkebestellungen
|
||||
- **Bestellungen verwalten**: Bearbeiten und Löschen von Bestellungen
|
||||
|
||||
## 🛠️ Technologie-Stack
|
||||
|
||||
- **Vue 3** - Progressive JavaScript Framework
|
||||
- **TypeScript** - Typsichere JavaScript-Entwicklung
|
||||
- **Vite** - Schneller Build-Tool und Development Server
|
||||
- **Vue Router** - Client-seitiges Routing
|
||||
- **Pinia** - State Management für Vue
|
||||
- **ESLint** - Code-Qualität und Konsistenz
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
### Voraussetzungen
|
||||
|
||||
- Node.js (Version 18 oder höher)
|
||||
- npm (wird mit Node.js installiert)
|
||||
|
||||
### Projekt einrichten
|
||||
|
||||
1. **Repository klonen** (falls noch nicht geschehen):
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd tschunkorder/frontend
|
||||
```
|
||||
|
||||
2. **Abhängigkeiten installieren**:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## 🚀 Entwicklung
|
||||
|
||||
### Development Server starten
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Der Development Server startet standardmäßig auf `http://localhost:5173`. Die Anwendung unterstützt Hot-Reload, sodass Änderungen automatisch im Browser aktualisiert werden.
|
||||
|
||||
### Code-Qualität
|
||||
|
||||
**Linting ausführen**:
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
|
||||
**TypeScript-Typen prüfen**:
|
||||
```bash
|
||||
npm run type-check
|
||||
```
|
||||
|
||||
## 🏗️ Build und Deployment
|
||||
|
||||
### Produktions-Build erstellen
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Der Build-Prozess erstellt optimierte Dateien im `dist/`-Verzeichnis.
|
||||
|
||||
### Build-Vorschau
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
Zeigt eine lokale Vorschau des Produktions-Builds an.
|
||||
|
||||
## 📁 Projektstruktur
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── src/
|
||||
│ ├── assets/ # Statische Assets (Bilder, Styles, etc.)
|
||||
│ ├── components/ # Wiederverwendbare Vue-Komponenten
|
||||
│ │ ├── icons/ # Icon-Komponenten
|
||||
│ │ ├── OrderCard.vue
|
||||
│ │ └── NewDrinkCard.vue
|
||||
│ ├── router/ # Vue Router Konfiguration
|
||||
│ ├── stores/ # Pinia State Management
|
||||
│ ├── types/ # TypeScript Typdefinitionen
|
||||
│ ├── views/ # Seiten-Komponenten
|
||||
│ │ ├── CreateOrderView.vue
|
||||
│ │ └── OrdersView.vue
|
||||
│ ├── App.vue # Haupt-App-Komponente
|
||||
│ └── main.ts # Anwendungs-Einstiegspunkt
|
||||
├── public/ # Öffentliche statische Dateien
|
||||
├── package.json # Projekt-Abhängigkeiten und Scripts
|
||||
├── vite.config.ts # Vite-Konfiguration
|
||||
├── tsconfig.json # TypeScript-Konfiguration
|
||||
└── eslint.config.ts # ESLint-Konfiguration
|
||||
```
|
||||
|
||||
## 🎨 Komponenten
|
||||
|
||||
### Views (Seiten)
|
||||
|
||||
- **OrdersView.vue**: Zeigt eine Übersicht aller Bestellungen an
|
||||
- **CreateOrderView.vue**: Formular zum Erstellen neuer Bestellungen
|
||||
|
||||
### Komponenten
|
||||
|
||||
- **OrderCard.vue**: Karten-Komponente zur Darstellung einzelner Bestellungen
|
||||
- **NewDrinkCard.vue**: Komponente zum Hinzufügen neuer Getränke zur Bestellung
|
||||
|
||||
## 🔧 Konfiguration
|
||||
|
||||
### Vite-Konfiguration
|
||||
|
||||
Die Vite-Konfiguration befindet sich in `vite.config.ts` und enthält:
|
||||
- Vue-Plugin-Konfiguration
|
||||
- Development-Tools-Integration
|
||||
- Build-Optimierungen
|
||||
|
||||
### TypeScript-Konfiguration
|
||||
|
||||
- `tsconfig.json`: Hauptkonfiguration
|
||||
- `tsconfig.app.json`: App-spezifische Einstellungen
|
||||
- `tsconfig.node.json`: Node.js-Umgebung
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Häufige Probleme
|
||||
|
||||
1. **Port bereits belegt**:
|
||||
- Vite versucht automatisch den nächsten verfügbaren Port
|
||||
- Oder manuell in `vite.config.ts` ändern
|
||||
|
||||
2. **TypeScript-Fehler**:
|
||||
```bash
|
||||
npm run type-check
|
||||
```
|
||||
|
||||
3. **Linting-Fehler**:
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
|
||||
## 📚 Nützliche Links
|
||||
|
||||
- [Vue 3 Dokumentation](https://vuejs.org/)
|
||||
- [Vite Dokumentation](https://vitejs.dev/)
|
||||
- [Vue Router Dokumentation](https://router.vuejs.org/)
|
||||
- [Pinia Dokumentation](https://pinia.vuejs.org/)
|
||||
- [TypeScript Dokumentation](https://www.typescriptlang.org/)
|
||||
|
||||
## 🤝 Beitragen
|
||||
|
||||
1. Fork des Repositories erstellen
|
||||
2. Feature-Branch erstellen (`git checkout -b feature/AmazingFeature`)
|
||||
3. Änderungen committen (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. Branch pushen (`git push origin feature/AmazingFeature`)
|
||||
5. Pull Request erstellen
|
||||
|
||||
## 📄 Lizenz
|
||||
|
||||
Dieses Projekt ist Teil der TschunkOrder-Anwendung.
|
||||
Loading…
Add table
Add a link
Reference in a new issue