405 lines
9.8 KiB
Markdown
405 lines
9.8 KiB
Markdown
# VBB Netz Status
|
|
|
|
> **Live-Nahverkehr für Berlin & Brandenburg**
|
|
> Eine Progressive Web App (PWA) für Echtzeit-Abfahrten, Routenplanung und Live-Fahrzeugverfolgung im VBB-Gebiet
|
|
|
|
[](https://opensource.org/licenses/MIT)
|
|
[](https://github.com/Serverlele30/VBB-Status-Web-App)
|
|
|
|
**Live-Demo:** [VBB-Status-Web-App](https://github.com/Serverlele30/VBB-Status-Web-App)
|
|
|
|
---
|
|
|
|
## 📱 Features
|
|
|
|
### 🚇 **Echtzeit-Abfahrten**
|
|
- **Live-Daten** für alle Stationen im VBB-Netz (Berlin + Brandenburg)
|
|
- **GPS-Standort** - Automatische Stationserkennung
|
|
- **Intelligente Suche** mit Autocomplete
|
|
- **Detaillierte Infos** - Verspätungen, Ausfälle, Gleis/Steig
|
|
- **Auto-Refresh** - Alle 30 Sekunden (optional)
|
|
- **Offline-Modus** - Gespeicherte Daten anzeigen
|
|
|
|
### 🗺️ **Intelligenter Routenplaner**
|
|
- **Start/Ziel-Suche** mit GPS-Unterstützung
|
|
- **5 Min. Umstiegszeit** garantiert
|
|
- **Detaillierte Fußwege** mit Gehzeit
|
|
- **Alternative Routen** - Mehrere Optionen
|
|
- **Robuste Stationserkennung** - Funktioniert auch bei unvollständigen Eingaben
|
|
|
|
### 🌍 **Live-Map**
|
|
- **Echtzeit-Fahrzeugverfolgung** auf Dark-Mode Karte
|
|
- **Authentische BVG-Farben** für alle Linien (U-Bahn, S-Bahn, Tram, Bus)
|
|
- **Dynamische Bounds** - Nur sichtbare Fahrzeuge laden (bis zu 69% weniger Daten)
|
|
- **Filter nach Fahrzeugtyp** - U-Bahn, S-Bahn, Tram, Bus, Fähre
|
|
- **API-optimiert** - Intelligentes Caching
|
|
|
|
### 📱 **Progressive Web App (PWA)**
|
|
- **Installierbar** - Als App auf Home-Screen
|
|
- **Offline-Fähig** - Service Worker mit Caching
|
|
- **Touch-optimiert** - Pull-to-Refresh, Wischgesten
|
|
- **Responsive** - Funktioniert auf Mobile & Desktop
|
|
- **Dark-Mode** - Schont die Augen
|
|
|
|
---
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### **Option 1: Direkt nutzen**
|
|
Öffne die App einfach im Browser - keine Installation nötig!
|
|
|
|
### **Option 2: Als PWA installieren**
|
|
|
|
**Mobile (iOS/Android):**
|
|
1. Öffne die App im Browser
|
|
2. Tippe auf "Teilen" → "Zum Home-Bildschirm"
|
|
3. Fertig! App ist jetzt auf deinem Home-Screen
|
|
|
|
**Desktop (Chrome/Edge):**
|
|
1. Öffne die App im Browser
|
|
2. Klicke auf das Install-Icon in der Adressleiste
|
|
3. Fertig! App ist jetzt in deinen Apps
|
|
|
|
---
|
|
|
|
## 🛠️ Installation (für Entwickler)
|
|
|
|
### **Voraussetzungen**
|
|
- Node.js (v16+)
|
|
- npm oder yarn
|
|
- HTTPS-Server (für PWA-Features)
|
|
|
|
### **Setup**
|
|
|
|
```bash
|
|
# Repository klonen
|
|
git clone https://github.com/Serverlele30/VBB-Status-Web-App.git
|
|
cd VBB-Status-Web-App
|
|
|
|
# Dependencies installieren
|
|
npm install
|
|
|
|
# HTTPS-Server starten
|
|
npm start
|
|
```
|
|
|
|
Die App ist jetzt verfügbar unter: `https://localhost:3000`
|
|
|
|
### **HTTPS-Server**
|
|
|
|
Die App benötigt HTTPS für PWA-Features (Service Worker, GPS, etc.).
|
|
|
|
**Server-Skript (`server.js`):**
|
|
```javascript
|
|
const https = require('https');
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
const { execSync } = require('child_process');
|
|
const mimeTypes = require('mime-types');
|
|
|
|
// Auto-generiert SSL-Zertifikate falls nicht vorhanden
|
|
// Nutzt OpenSSL für self-signed certificates
|
|
```
|
|
|
|
**SSL-Zertifikate werden automatisch generiert!**
|
|
|
|
---
|
|
|
|
## 📂 Projekt-Struktur
|
|
|
|
```
|
|
VBB-Status-Web-App/
|
|
├── index.html # Haupt-HTML (Single-Page App)
|
|
├── service-worker.js # PWA Service Worker
|
|
├── manifest.json # PWA Manifest
|
|
├── server.js # HTTPS Development Server
|
|
├── package.json # Node.js Dependencies
|
|
├── icons/ # App-Icons (verschiedene Größen)
|
|
│ ├── icon-192.png
|
|
│ ├── icon-512.png
|
|
│ └── icon-maskable.png
|
|
├── fonts/ # Custom Fonts
|
|
│ └── DotMatrix.ttf # BVG-Schriftart
|
|
└── data/ # Statische Daten
|
|
└── station_lines.json # Station-zu-Linie Mappings
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Design
|
|
|
|
### **Farbschema**
|
|
- **Primär:** `#FFED00` (BVG-Gelb)
|
|
- **Background:** `#000000` (Schwarz)
|
|
- **Sekundär:** `#1a1a1a` (Dunkelgrau)
|
|
- **Text:** `#ffffff` / `#cccccc`
|
|
- **Borders:** `#333333`
|
|
|
|
### **Typografie**
|
|
- **Haupt-Font:** DotMatrix (BVG-Stil)
|
|
- **Fallback:** Courier New, monospace
|
|
|
|
### **Icons & Emojis**
|
|
- 🚇 U-Bahn
|
|
- 🚊 S-Bahn
|
|
- 🚋 Tram
|
|
- 🚌 Bus
|
|
- ⛴️ Fähre
|
|
|
|
### **BVG-Linienfarben**
|
|
Authentische Farben für alle 40+ Linien:
|
|
- **U-Bahnen:** U1-U9 mit Original-Farben
|
|
- **S-Bahnen:** S-Bahn Grün + Ringbahn Orange
|
|
- **Trams:** Metro-Tram Rot + Tram Gelb
|
|
- **Busse:** Gelb + Metro-Bus Rot
|
|
|
|
---
|
|
|
|
## 🔧 Technische Details
|
|
|
|
### **APIs**
|
|
- **VBB Transport REST API v6**
|
|
- Endpoint: `https://v6.vbb.transport.rest`
|
|
- Rate Limit: 100 Requests/Minute
|
|
- [Dokumentation](https://v6.vbb.transport.rest/api.html)
|
|
|
|
### **Libraries**
|
|
- **Leaflet.js** - Interaktive Karten
|
|
- **CartoDB Dark Matter** - Karten-Tiles (Dark-Mode)
|
|
- Vanilla JavaScript (kein Framework!)
|
|
|
|
### **Browser-Support**
|
|
- Chrome/Edge 90+
|
|
- Firefox 88+
|
|
- Safari 14+
|
|
- Mobile Browser (iOS Safari, Chrome Mobile)
|
|
|
|
### **Performance**
|
|
- **First Contentful Paint:** < 1s
|
|
- **Time to Interactive:** < 2s
|
|
- **Lighthouse Score:** 95+
|
|
- **Bundle Size:** ~150KB (unkomprimiert)
|
|
|
|
---
|
|
|
|
## 🗺️ Datenquellen
|
|
|
|
### **Station-Line Mappings**
|
|
Präzise Station-zu-Linie Zuordnungen für 1000+ Stationen:
|
|
- Extrahiert via custom Node.js Script
|
|
- Analysiert echte Trip-Routen statt generische Location-Searches
|
|
- Deckt alle U-Bahn, S-Bahn, Tram und Metro-Linien ab
|
|
|
|
**Extraktion:**
|
|
```bash
|
|
node extract_station_lines.js
|
|
```
|
|
|
|
Generiert `data/station_lines.json` mit Format:
|
|
```json
|
|
{
|
|
"900000017101": {
|
|
"name": "U Spichernstr.",
|
|
"lines": ["U3", "U9"]
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 PWA-Features
|
|
|
|
### **Manifest.json**
|
|
```json
|
|
{
|
|
"name": "VBB Netz Status",
|
|
"short_name": "VBB Status",
|
|
"start_url": "/",
|
|
"display": "standalone",
|
|
"theme_color": "#FFED00",
|
|
"background_color": "#000000",
|
|
"icons": [...]
|
|
}
|
|
```
|
|
|
|
### **Service Worker**
|
|
- **Cache-First-Strategie** für statische Assets
|
|
- **Network-First** für API-Calls
|
|
- **Offline-Fallback** für alle Seiten
|
|
- **Auto-Update** bei neuer Version
|
|
|
|
**Cache-Versioning:**
|
|
```javascript
|
|
const CACHE_NAME = 'vbb-status-v27';
|
|
```
|
|
|
|
### **Offline-Features**
|
|
- ✅ Gespeicherte Abfahrten anzeigen
|
|
- ✅ Letzte Suchanfragen speichern
|
|
- ✅ Offline-Indikator
|
|
- ✅ Cached Karten-Tiles
|
|
|
|
---
|
|
|
|
## 🎯 Features im Detail
|
|
|
|
### **GPS-Standort**
|
|
```javascript
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
const { latitude, longitude } = position.coords;
|
|
findNearbyStops(latitude, longitude);
|
|
}
|
|
);
|
|
```
|
|
|
|
### **Auto-Refresh**
|
|
- **Standard:** 30 Sekunden
|
|
- **Togglebar:** An/Aus im Header
|
|
- **Smart:** Nur sichtbare Values aktualisieren (kein Re-Render)
|
|
|
|
### **Pull-to-Refresh**
|
|
```javascript
|
|
// Touch-basiert, nur auf Mobile
|
|
// Haptic Feedback via navigator.vibrate()
|
|
```
|
|
|
|
### **Autocomplete-Suche**
|
|
- **Debounced:** 300ms Verzögerung
|
|
- **Min. 2 Zeichen** für Suche
|
|
- **Keyboard-Navigation:** ↑↓ + Enter
|
|
- **Touch-optimiert:** Große Tap-Targets
|
|
|
|
### **Modal-Details**
|
|
- **Trip-Details** per Tap auf Abfahrt
|
|
- **Route-Details** mit Zwischenstopps
|
|
- **Fußweg-Anleitung** mit Distanz/Zeit
|
|
- **Swipe-to-Close** auf Mobile
|
|
|
|
---
|
|
|
|
## 🔒 Datenschutz
|
|
|
|
- ✅ **Keine Cookies**
|
|
- ✅ **Kein Tracking**
|
|
- ✅ **Keine Werbung**
|
|
- ✅ **Kein Analytics**
|
|
- ✅ **GPS nur auf Anfrage** (Browser-Permission)
|
|
- ✅ **Lokale Speicherung** (localStorage, keine Server)
|
|
|
|
**Alle Daten bleiben auf deinem Gerät!**
|
|
|
|
---
|
|
|
|
## 🐛 Bekannte Probleme
|
|
|
|
### **API-Limits**
|
|
- VBB API: 100 Requests/Minute
|
|
- Bei Überschreitung: 429 Error → Retry nach 60s
|
|
|
|
### **GPS-Genauigkeit**
|
|
- Abhängig von Gerät & Standort
|
|
- Indoor oft ungenau
|
|
- Fallback: Manuelle Suche
|
|
|
|
### **Browser-Kompatibilität**
|
|
- Service Worker: Nur HTTPS
|
|
- GPS: Nur Secure Context (HTTPS oder localhost)
|
|
- Ältere Browser: Eingeschränkte Features
|
|
|
|
---
|
|
|
|
## 🤝 Contributing
|
|
|
|
Contributions sind willkommen! 🎉
|
|
|
|
### **Workflow**
|
|
1. Fork das Repository
|
|
2. Erstelle einen Feature-Branch (`git checkout -b feature/AmazingFeature`)
|
|
3. Commit deine Änderungen (`git commit -m 'Add some AmazingFeature'`)
|
|
4. Push zum Branch (`git push origin feature/AmazingFeature`)
|
|
5. Öffne einen Pull Request
|
|
|
|
### **Code-Style**
|
|
- **Vanilla JavaScript** (kein TypeScript)
|
|
- **Kommentare** für komplexe Logik
|
|
- **Konsistente Formatierung** (2 Spaces, Semikolons)
|
|
- **BVG-Farbschema** beibehalten
|
|
|
|
---
|
|
|
|
## 📝 Changelog
|
|
|
|
Siehe [CHANGELOG.md](CHANGELOG.md) für Details zu allen Updates.
|
|
|
|
**Latest:** v27.0 - Credits & Header Update
|
|
|
|
---
|
|
|
|
## 📄 Lizenz
|
|
|
|
Dieses Projekt ist unter der **MIT License** lizenziert - siehe [LICENSE](LICENSE) für Details.
|
|
|
|
**Das bedeutet:**
|
|
- ✅ Kostenlos nutzbar
|
|
- ✅ Für private & kommerzielle Projekte
|
|
- ✅ Modifizierbar
|
|
- ✅ Weitergabe erlaubt
|
|
|
|
**Aber:**
|
|
- ⚠️ Ohne Garantie
|
|
- ⚠️ Auf eigene Verantwortung
|
|
|
|
---
|
|
|
|
## 🙏 Credits
|
|
|
|
### **Entwicklung**
|
|
- **Aaron K.** - Initial Development & Design
|
|
- **Claude (Anthropic)** - AI-Assisted Development
|
|
|
|
### **Daten & APIs**
|
|
- **VBB Transport REST API v6** - [v6.vbb.transport.rest](https://v6.vbb.transport.rest)
|
|
- **OpenStreetMap Contributors** - Kartendaten
|
|
- **CartoDB** - Dark Matter Map Tiles
|
|
|
|
### **Schriftart**
|
|
- **DotMatrix** by [@NikBLN](https://github.com/NikBLN)
|
|
|
|
### **Inspiration**
|
|
- **BVG** - Design & Farbschema
|
|
- **VBB** - Verkehrsverbund Berlin-Brandenburg
|
|
|
|
---
|
|
|
|
## 📬 Kontakt
|
|
|
|
**Repository:** [github.com/Serverlele30/VBB-Status-Web-App](https://github.com/Serverlele30/VBB-Status-Web-App)
|
|
|
|
**Issues:** [GitHub Issues](https://github.com/Serverlele30/VBB-Status-Web-App/issues)
|
|
|
|
---
|
|
|
|
## ⚠️ Disclaimer
|
|
|
|
Diese App ist ein **inoffizielles Projekt** und wird **nicht** von VBB oder BVG betrieben oder unterstützt.
|
|
|
|
Alle Daten stammen von der öffentlichen VBB Transport REST API.
|
|
|
|
**Keine Garantie für:**
|
|
- Richtigkeit der Daten
|
|
- Verfügbarkeit der API
|
|
- Fehlerfreien Betrieb
|
|
|
|
**Nutze die App auf eigene Verantwortung!**
|
|
|
|
---
|
|
|
|
<div align="center">
|
|
|
|
Made with ❤️ for Berlin & Brandenburg
|
|
|
|
**[⬆ Back to Top](#vbb-netz-status)**
|
|
|
|
</div>
|