für Docker angepasst
This commit is contained in:
189
README.md
189
README.md
@@ -1,36 +1,185 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# Werte Next.js - Gesundheitsdaten Tracking
|
||||
|
||||
## Getting Started
|
||||
Eine moderne Next.js-Anwendung zur Erfassung und Verwaltung von Gesundheitsdaten, basierend auf dem ursprünglichen Werte-Projekt.
|
||||
|
||||
First, run the development server:
|
||||
## 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
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
Die Anwendung ist dann unter [http://localhost:3000](http://localhost:3000) erreichbar.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
## Produktion
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
### Lokale Produktion
|
||||
|
||||
## Learn More
|
||||
Build erstellen:
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
Produktions-Server starten:
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
## Deploy on Vercel
|
||||
### Docker Deployment
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
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)**.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user