First commit - es tut schon mal ganz gut
This commit is contained in:
219
MIGRATION.md
Normal file
219
MIGRATION.md
Normal file
@@ -0,0 +1,219 @@
|
||||
# Migration Guide: Von Ausgaben (PHP/jQuery) zu Ausgaben-Next
|
||||
|
||||
Dieser Leitfaden hilft Ihnen bei der Migration von der alten PHP/jQuery-basierten Ausgaben-Anwendung zur neuen Next.js-Version.
|
||||
|
||||
## Übersicht
|
||||
|
||||
### Alte Version (`../Ausgaben`)
|
||||
- **Frontend:** HTML + jQuery + jqGrid
|
||||
- **Backend:** PHP
|
||||
- **Styling:** Custom CSS
|
||||
- **Datums-Handling:** jQuery UI Datepicker
|
||||
- **Tab-System:** jQuery UI Tabs
|
||||
|
||||
### Neue Version (`ausgaben-next`)
|
||||
- **Frontend:** React 19 + TypeScript
|
||||
- **Backend:** Next.js API Routes
|
||||
- **Styling:** Tailwind CSS v4
|
||||
- **Datums-Handling:** Native HTML5 Date Input
|
||||
- **Tab-System:** React State Management
|
||||
|
||||
## Was bleibt gleich?
|
||||
|
||||
✓ **Datenbank:** Gleiche MySQL-Datenbank (`RXF.Ausgaben_Tag`)
|
||||
✓ **Datenstruktur:** Identische Tabellenfelder
|
||||
✓ **Funktionalität:** Alle Features der alten Version
|
||||
✓ **Look & Feel:** Ähnliches Design (angelehnt an werte-next)
|
||||
|
||||
## Feature-Vergleich
|
||||
|
||||
| Feature | Alte Version | Neue Version | Status |
|
||||
|---------|-------------|--------------|---------|
|
||||
| Eingabe-Formular | ✓ jQuery | ✓ React | ✓ Implementiert |
|
||||
| Letzte 10 Einträge | ✓ jqGrid | ✓ React Table | ✓ Implementiert |
|
||||
| Liste aller Einträge | ✓ jqGrid | ✓ React Table | ✓ Implementiert |
|
||||
| Monats-Statistiken | ✓ PHP + AJAX | ✓ API Routes | ✓ Implementiert |
|
||||
| Bearbeiten | ✓ | ✓ | ✓ Implementiert |
|
||||
| Löschen | ✓ | ✓ | ✓ Implementiert |
|
||||
| Datepicker | ✓ jQuery UI | ✓ HTML5 | ✓ Implementiert |
|
||||
| Wochentag auto | ✓ | ✓ | ✓ Implementiert |
|
||||
| OK-Checkbox | ✓ | ✓ | ✓ Implementiert |
|
||||
| Tab-Navigation | ✓ jQuery UI | ✓ React | ✓ Implementiert |
|
||||
|
||||
## Datenbank
|
||||
|
||||
Die Datenbanktabelle bleibt **unverändert**:
|
||||
|
||||
```sql
|
||||
Ausgaben_Tag (
|
||||
ID int(11) AUTO_INCREMENT,
|
||||
Datum date,
|
||||
WochTag varchar(20),
|
||||
Wo varchar(255),
|
||||
Was varchar(500),
|
||||
Wieviel decimal(10,2),
|
||||
Wie varchar(50),
|
||||
OK tinyint(1)
|
||||
)
|
||||
```
|
||||
|
||||
### Wichtig:
|
||||
- Beide Anwendungen können parallel auf **derselben Datenbank** laufen!
|
||||
- Keine Datenmigration notwendig
|
||||
- Bestehende Daten werden automatisch übernommen
|
||||
|
||||
## Parallelbetrieb
|
||||
|
||||
Sie können beide Versionen gleichzeitig laufen lassen:
|
||||
|
||||
1. **Alte Version:** Bleibt unter ihrem bisherigen Pfad aktiv
|
||||
2. **Neue Version:** Läuft auf eigenem Port (z.B. 3001)
|
||||
3. **Datenbank:** Wird von beiden genutzt
|
||||
|
||||
### Vorteile:
|
||||
- Sanfte Migration ohne Downtime
|
||||
- Training mit neuer Version möglich
|
||||
- Fallback zur alten Version jederzeit möglich
|
||||
- Schrittweise Umstellung der Nutzer
|
||||
|
||||
## Unterschiede im Verhalten
|
||||
|
||||
### 1. Datepicker
|
||||
**Alt:** jQuery UI Datepicker mit Pop-up
|
||||
**Neu:** Native HTML5 Date Input (Browser-native Erscheinung)
|
||||
|
||||
### 2. Auto-Complete
|
||||
**Alt:** jQuery Autocomplete für "Wo" und "Was" Felder
|
||||
**Neu:** Noch nicht implementiert (kann später hinzugefügt werden)
|
||||
|
||||
### 3. Tab-Umschaltung
|
||||
**Alt:** Seite bleibt identisch, nur Tabs wechseln
|
||||
**Neu:** React State Management, kein Page Reload
|
||||
|
||||
### 4. Datums-Formatierung
|
||||
**Alt:** Server-seitig (PHP) formatiert
|
||||
**Neu:** Client-seitig (JavaScript Intl API)
|
||||
|
||||
## Migrationsschritte
|
||||
|
||||
### Schritt 1: Installation
|
||||
```bash
|
||||
cd /home/rxf/Projekte/ausgaben-next
|
||||
npm install
|
||||
```
|
||||
|
||||
### Schritt 2: Umgebungsvariablen
|
||||
```bash
|
||||
cp .env.example .env
|
||||
# Bearbeiten Sie .env und verwenden Sie die gleichen
|
||||
# Datenbankzugangsdaten wie die alte Version
|
||||
```
|
||||
|
||||
### Schritt 3: Test
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
Öffnen Sie http://localhost:3000 und testen Sie die Funktionalität.
|
||||
|
||||
### Schritt 4: Production Build
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Schritt 5: Docker Deployment (Optional)
|
||||
```bash
|
||||
docker-compose -f docker-compose.local.yml up -d
|
||||
```
|
||||
|
||||
### Schritt 6: Parallelbetrieb testen
|
||||
- Alte Version: Weiter unter bisheriger URL
|
||||
- Neue Version: Unter Port 3001 (oder konfiguriert)
|
||||
- Beide greifen auf gleiche Datenbank zu
|
||||
|
||||
### Schritt 7: Umstellung
|
||||
Wenn Sie mit der neuen Version zufrieden sind:
|
||||
1. Ändern Sie die Ports/URLs in Ihrer Infrastruktur
|
||||
2. Leiten Sie Traffic zur neuen Version um
|
||||
3. Behalten Sie alte Version als Backup
|
||||
|
||||
## Was wurde verbessert?
|
||||
|
||||
### Performance
|
||||
- ✓ Schnelleres Loading durch Server-Side Rendering
|
||||
- ✓ Optimierte Bundles durch Webpack/Turbopack
|
||||
- ✓ Lazy Loading von Komponenten
|
||||
|
||||
### Entwicklung
|
||||
- ✓ TypeScript für bessere Code-Qualität
|
||||
- ✓ Moderne React Patterns (Hooks)
|
||||
- ✓ Wiederverwendbare Komponenten
|
||||
|
||||
### Wartbarkeit
|
||||
- ✓ Klare Trennung von Logik und Präsentation
|
||||
- ✓ Testbare Komponenten
|
||||
- ✓ Moderne Toolchain
|
||||
|
||||
### Security
|
||||
- ✓ Aktuellere Dependencies
|
||||
- ✓ Keine direct SQL-Queries im Frontend
|
||||
- ✓ Input Validation
|
||||
|
||||
## Bekannte Einschränkungen
|
||||
|
||||
1. **Auto-Complete:** Noch nicht implementiert für "Wo" und "Was" Felder
|
||||
2. **Drucken:** Print-Funktionalität noch nicht implementiert
|
||||
3. **Anleitung-Seite:** Noch nicht erstellt (kann kopiert werden)
|
||||
|
||||
Diese Features können bei Bedarf hinzugefügt werden.
|
||||
|
||||
## Rollback-Plan
|
||||
|
||||
Falls Sie zur alten Version zurück müssen:
|
||||
|
||||
1. Stoppen Sie den Next.js Server/Container
|
||||
2. Die alte PHP-Version funktioniert weiterhin
|
||||
3. Keine Datenbank-Änderungen notwendig
|
||||
|
||||
## Support und Wartung
|
||||
|
||||
### Alte Version
|
||||
- PHP 7.4+ erforderlich
|
||||
- jQuery und jQuery UI müssen geladen bleiben
|
||||
- Keine aktive Weiterentwicklung geplant
|
||||
|
||||
### Neue Version
|
||||
- Node.js 22+
|
||||
- Regelmäßige Dependency-Updates empfohlen
|
||||
- Moderne Stack ermöglicht einfache Erweiterungen
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
Nach erfolgreicher Migration:
|
||||
|
||||
1. **Auto-Complete implementieren** (optional)
|
||||
- Suche nach häufigen "Wo"-Einträgen
|
||||
- Vorschläge für "Was"-Einträge
|
||||
|
||||
2. **Print-Funktion** (optional)
|
||||
- CSS für Print-Layout
|
||||
- Export als PDF
|
||||
|
||||
3. **Anleitung-Seite**
|
||||
- Kopieren Sie die alte Anleitung
|
||||
- Passen Sie sie an die neue UI an
|
||||
|
||||
4. **Mobile Optimierung**
|
||||
- Responsive Design ist bereits vorhanden
|
||||
- Kann weiter optimiert werden
|
||||
|
||||
5. **Erweiterte Statistiken**
|
||||
- Jahresübersichten
|
||||
- Grafische Darstellungen
|
||||
- Kategorien-Auswertungen
|
||||
|
||||
## Fragen?
|
||||
|
||||
Bei Problemen oder Fragen:
|
||||
- Prüfen Sie [DEPLOYMENT.md](DEPLOYMENT.md)
|
||||
- Lesen Sie [README.md](README.md)
|
||||
- Kontakt: rxf@gmx.de
|
||||
Reference in New Issue
Block a user