186 lines
4.3 KiB
Markdown
186 lines
4.3 KiB
Markdown
# Werte Next.js - Gesundheitsdaten Tracking
|
|
|
|
Eine moderne Next.js-Anwendung zur Erfassung und Verwaltung von Gesundheitsdaten, basierend auf dem ursprünglichen Werte-Projekt.
|
|
|
|
## Features
|
|
|
|
- ✅ **Eingabeformular** für Gesundheitsdaten:
|
|
- Datum und Zeit
|
|
- Blutzucker (mg/dl)
|
|
- Mahlzeiten-Informationen
|
|
- Gewicht (kg)
|
|
- Blutdruck (systolisch/diastolisch in mmHg)
|
|
- Puls
|
|
|
|
- ✅ **Anzeige der letzten 10 Einträge** mit Löschfunktion
|
|
- ✅ **Responsive Design** mit Tailwind CSS
|
|
- ✅ **TypeScript** für Type-Safety
|
|
- ✅ **MySQL-Datenbankanbindung** (Docker-Container)
|
|
|
|
## Technologie-Stack
|
|
|
|
- **Framework**: Next.js 16.x (App Router)
|
|
- **Sprache**: TypeScript
|
|
- **Styling**: Tailwind CSS
|
|
- **Datenbank**: MySQL 5.6 (Docker)
|
|
- **ORM**: mysql2
|
|
|
|
## Voraussetzungen
|
|
|
|
- Node.js 18.x oder höher
|
|
- Docker (für MySQL-Container)
|
|
- Die MySQL-Datenbank muss bereits laufen (siehe docker-compose.yml im übergeordneten Verzeichnis)
|
|
|
|
## Installation
|
|
|
|
1. **Dependencies installieren**:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. **Umgebungsvariablen konfigurieren**:
|
|
Die Datei `.env.local` ist bereits mit den korrekten Datenbankzugangsdaten angelegt:
|
|
```
|
|
DB_HOST=mydbase_mysql
|
|
DB_USER=root
|
|
DB_PASS=SFluorit
|
|
DB_NAME=RXF
|
|
```
|
|
|
|
3. **Datenbank prüfen**:
|
|
Stelle sicher, dass die MySQL-Datenbank läuft und die Tabelle `RXF.Werte_BZG` existiert.
|
|
|
|
## Entwicklung
|
|
|
|
Development-Server starten:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Die Anwendung ist dann unter [http://localhost:3000](http://localhost:3000) erreichbar.
|
|
|
|
## Produktion
|
|
|
|
### Lokale Produktion
|
|
|
|
Build erstellen:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Produktions-Server starten:
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
### Docker Deployment
|
|
|
|
Für das Deployment auf einem externen Server ist die Anwendung vollständig containerisiert. Alle Details zur Installation und Verwaltung finden Sie in der **[DEPLOYMENT.md](DEPLOYMENT.md)**.
|
|
|
|
Kurzanleitung:
|
|
|
|
```bash
|
|
# Docker-Container bauen und starten
|
|
docker-compose up -d --build
|
|
|
|
# Status prüfen
|
|
docker-compose ps
|
|
|
|
# Logs anschauen
|
|
docker-compose logs -f
|
|
```
|
|
|
|
Die Anwendung ist dann unter `http://<server-ip>:3000` erreichbar.
|
|
|
|
## Projekt-Struktur
|
|
|
|
```
|
|
werte_next/
|
|
├── app/
|
|
│ ├── api/
|
|
│ │ └── werte/
|
|
│ │ ├── route.ts # GET/POST API für Einträge
|
|
│ │ └── [id]/
|
|
│ │ └── route.ts # DELETE API für einzelne Einträge
|
|
│ ├── layout.tsx # Root Layout
|
|
│ ├── page.tsx # Hauptseite
|
|
│ └── globals.css # Globale Styles
|
|
├── components/
|
|
│ ├── WerteForm.tsx # Eingabeformular
|
|
│ └── WerteList.tsx # Liste der letzten Einträge
|
|
├── lib/
|
|
│ └── db.ts # Datenbankverbindung
|
|
├── types/
|
|
│ └── werte.ts # TypeScript-Typen
|
|
├── .env.local # Umgebungsvariablen (lokal, gitignored)
|
|
└── package.json
|
|
```
|
|
|
|
## API-Endpunkte
|
|
|
|
### GET /api/werte
|
|
Holt die letzten N Einträge aus der Datenbank.
|
|
|
|
**Query Parameters**:
|
|
- `limit` (optional): Anzahl der Einträge (Standard: 10)
|
|
|
|
**Response**:
|
|
```json
|
|
{
|
|
"success": true,
|
|
"data": [...]
|
|
}
|
|
```
|
|
|
|
### POST /api/werte
|
|
Erstellt einen neuen Eintrag.
|
|
|
|
**Request Body**:
|
|
```json
|
|
{
|
|
"Datum": "2026-02-21",
|
|
"Zeit": "14:30",
|
|
"Zucker": 120,
|
|
"Essen": "nüchtern",
|
|
"Gewicht": 75.5,
|
|
"DruckS": 130,
|
|
"DruckD": 85,
|
|
"Puls": 72
|
|
}
|
|
```
|
|
|
|
### DELETE /api/werte/[id]
|
|
Löscht einen Eintrag anhand der ID.
|
|
|
|
## Design
|
|
|
|
Das Design orientiert sich am ursprünglichen Werte-Projekt:
|
|
- **Hintergrundfarbe**: #FFFFDD (hellgelb)
|
|
- **Eingabebereich**: #CCCCFF (hellblau)
|
|
- **Buttons**: #85B7D7 (blau)
|
|
- **Schriftarten**: Arial, Verdana, Helvetica
|
|
|
|
## Unterschiede zum Original
|
|
|
|
- **Modernes Framework**: Next.js statt PHP
|
|
- **TypeScript**: Type-Safety für bessere Wartbarkeit
|
|
- **React**: Komponentenbasierte Architektur
|
|
- **API Routes**: RESTful API statt direkter PHP-Skripte
|
|
- **Vereinfachte Features**: Fokus auf Eingabe und letzte 10 Einträge (Listen- und Statistik-Tabs wurden weggelassen wie gewünscht)
|
|
|
|
## Bekannte Einschränkungen
|
|
|
|
- Die Tabs "Liste" und "Statistik" aus dem Original wurden bewusst nicht implementiert
|
|
- Die jqGrid-Funktionalität wurde durch eine einfache Tabelle ersetzt
|
|
|
|
## Support
|
|
|
|
Bei Fragen oder Problemen: [rxf@gmx.de](mailto:rxf@gmx.de)
|
|
|
|
## Lizenz
|
|
|
|
Private Nutzung
|