292 lines
8.1 KiB
Markdown
292 lines
8.1 KiB
Markdown
# 🏠 OpenWall
|
|
|
|
<div align="center">
|
|
|
|
|
|
|
|
**Ein Smart Home Dashboard für modernes Wohnen**
|
|
|
|
*Kalender-Synchronisation, Notizen und Einkaufslisten mit nahtloser Handy- und Tablet-Integration*
|
|
|
|
[](https://opensource.org/licenses/MIT)
|
|
[](https://nodejs.org/)
|
|
[](https://reactjs.org/)
|
|
[](https://electronjs.org/)
|
|
|
|
[Funktionen](#-funktionen) • [Architektur](#-architektur) • [Schnellstart](#-schnellstart) • [Installation](#-installation) • [Entwicklung](#-entwicklung)
|
|
|
|
</div>
|
|
|
|
---
|
|
|
|
## 🌟 Funktionen
|
|
|
|
### 📅 **Kalender-Integration**
|
|
- Synchronisation mit Ihren bevorzugten Kalender-Diensten
|
|
- Saubere, intuitive Benutzeroberfläche optimiert für Touch-Displays
|
|
- Perfekt für wandmontierte Tablets und Smart Displays
|
|
|
|
### 📝 **Notizen-Verwaltung**
|
|
- Schnelle Notizerstellung und -organisation
|
|
- Nahtlose Synchronisation zwischen Geräten
|
|
- Touch-freundliche Benutzeroberfläche für einfache Bedienung
|
|
|
|
### 🛒 **Intelligente Einkaufslisten**
|
|
- Gemeinsame Einkaufslisten für Familien
|
|
- Echtzeit-Synchronisation zwischen Geräten
|
|
- Mobile-optimierte Begleit-App
|
|
- Automatische Bereinigung erledigter Einträge
|
|
|
|
### 🎨 **Schönes Design**
|
|
- Moderne, responsive Benutzeroberfläche
|
|
- Optimiert für Hochformat-Displays (9:16 Verhältnis)
|
|
- Atemberaubende Hintergrundbilder
|
|
- Touch-First Interaktionsdesign
|
|
|
|
### 📱 **Multi-Platform Unterstützung**
|
|
- **Desktop**: Vollständiges Electron Dashboard
|
|
- **Mobile**: Progressive Web App für Einkaufslisten
|
|
- **Embedded**: Benutzerdefinierte Linux OS Installation für dedizierte Displays
|
|
|
|
## 🏗️ Architektur
|
|
|
|
OpenWall ist als modernes, skalierbares System mit mehreren Komponenten aufgebaut:
|
|
|
|
```
|
|
📦 OpenWall
|
|
├── 🖥️ dashboard/ # Electron Desktop-Anwendung
|
|
├── 📱 mobile-shopping/ # Mobile PWA für Einkaufslisten
|
|
├── 🔧 server/ # Express.js Backend API
|
|
└── 🐧 os/ # Linux OS Installer & Konfiguration
|
|
```
|
|
|
|
### Technologie-Stack
|
|
|
|
| Komponente | Technologie | Zweck |
|
|
|------------|-------------|-------|
|
|
| **Frontend** | React 19 + Vite | Moderne, schnelle UI-Entwicklung |
|
|
| **Desktop** | Electron 35 | Plattformübergreifende Desktop-App |
|
|
| **Mobile** | PWA + React | Native-ähnliche mobile Erfahrung |
|
|
| **Backend** | Express.js + SQLite | RESTful API & Datenpersistierung |
|
|
| **Styling** | Sass | Schöne, wartbare Stylesheets |
|
|
| **Package Manager** | pnpm | Schnelles, effizientes Dependency Management |
|
|
|
|
## 🚀 Schnellstart
|
|
|
|
### Voraussetzungen
|
|
|
|
- **Node.js** 18 oder höher
|
|
- **pnpm** (empfohlen) oder npm
|
|
- **Git**
|
|
|
|
### 1. Repository klonen
|
|
|
|
```bash
|
|
git clone https://github.com/yourusername/OpenWall.git
|
|
cd OpenWall
|
|
```
|
|
|
|
### 2. Backend-Server starten
|
|
|
|
```bash
|
|
cd server
|
|
pnpm install
|
|
pnpm start
|
|
```
|
|
|
|
Der Server startet auf `http://localhost:3001`
|
|
|
|
### 3. Dashboard starten
|
|
|
|
```bash
|
|
cd ../dashboard
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
Das Dashboard öffnet sich automatisch im Entwicklungsmodus.
|
|
|
|
### 4. Mobile App ausprobieren (Optional)
|
|
|
|
```bash
|
|
cd ../mobile-shopping
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
Zugriff auf die mobile App unter `http://localhost:5173`
|
|
|
|
## 🔧 Installation
|
|
|
|
### Option 1: Entwicklungsumgebung
|
|
|
|
Perfekt für Entwicklung und Tests:
|
|
|
|
```bash
|
|
# Alle Abhängigkeiten installieren
|
|
pnpm install
|
|
|
|
# Alle Services im Entwicklungsmodus starten
|
|
pnpm dev
|
|
```
|
|
|
|
### Option 2: Produktions-Deployment
|
|
|
|
Für dedizierte Wanddisplays und Smart Home Setups:
|
|
|
|
#### Manuelle Installation
|
|
|
|
```bash
|
|
# Dashboard bauen
|
|
cd dashboard
|
|
pnpm install
|
|
pnpm build
|
|
|
|
# Mobile App bauen
|
|
cd ../mobile-shopping
|
|
pnpm install
|
|
pnpm build
|
|
|
|
# Produktionsserver starten
|
|
cd ../server
|
|
pnpm install
|
|
NODE_ENV=production pnpm start
|
|
```
|
|
|
|
#### Automatisierte Linux Installation
|
|
|
|
Für Debian-basierte Systeme mit automatischem Kiosk-Modus Setup:
|
|
|
|
```bash
|
|
# Als root ausführen
|
|
sudo ./os/install.sh
|
|
```
|
|
|
|
Dieser Installer wird:
|
|
- ✅ Einen dedizierten Benutzeraccount erstellen
|
|
- ✅ Alle Abhängigkeiten installieren
|
|
- ✅ Wayland/Sway für Touch-Displays konfigurieren
|
|
- ✅ Auto-Start beim Booten einrichten
|
|
- ✅ Für 9:16 Hochformat-Displays optimieren
|
|
- ✅ Touch-Input-Kalibrierung aktivieren
|
|
|
|
## 💻 Entwicklung
|
|
|
|
### Projektstruktur
|
|
|
|
```
|
|
dashboard/ # Haupt-Electron-Anwendung
|
|
├── src/
|
|
│ ├── main/ # Electron Hauptprozess
|
|
│ ├── preload/ # Preload-Skripte
|
|
│ └── renderer/ # React Frontend
|
|
│ ├── src/
|
|
│ │ ├── pages/ # Anwendungsseiten
|
|
│ │ ├── common/ # Geteilte Komponenten
|
|
│ │ ├── services/ # API Services
|
|
│ │ └── utils/ # Hilfsfunktionen
|
|
│ └── index.html
|
|
├── build/ # Build-Assets (Icons, etc.)
|
|
└── package.json
|
|
|
|
mobile-shopping/ # Mobile PWA
|
|
├── src/
|
|
│ ├── services/ # API Integration
|
|
│ └── utils/ # Geteilte Hilfsmittel
|
|
└── public/ # PWA Assets
|
|
|
|
server/ # Backend API
|
|
├── models/ # Datenbank-Modelle
|
|
├── routes/ # API Routen
|
|
├── database.sqlite # SQLite Datenbank
|
|
└── index.js # Haupt-Server-Datei
|
|
|
|
os/ # System-Installation
|
|
├── install.sh # Automatisierter Installer
|
|
└── build-iso.sh # Custom ISO Builder
|
|
```
|
|
|
|
### Verfügbare Skripte
|
|
|
|
#### Dashboard (Electron)
|
|
```bash
|
|
pnpm dev # Entwicklungsmodus mit Hot Reload
|
|
pnpm build # Für Produktion bauen
|
|
pnpm start # Gebaute Anwendung starten
|
|
pnpm build:mac # macOS App bauen
|
|
pnpm build:win # Windows App bauen
|
|
pnpm build:linux # Linux App bauen
|
|
```
|
|
|
|
#### Mobile Shopping (PWA)
|
|
```bash
|
|
pnpm dev # Entwicklungsserver
|
|
pnpm build # Für Produktion bauen
|
|
pnpm preview # Gebaute App anzeigen
|
|
```
|
|
|
|
#### Server (Express.js)
|
|
```bash
|
|
pnpm start # Produktionsserver starten
|
|
pnpm dev # Entwicklung mit nodemon
|
|
```
|
|
|
|
### API Endpunkte
|
|
|
|
| Methode | Endpunkt | Beschreibung |
|
|
|---------|----------|--------------|
|
|
| `GET` | `/api/health` | Server-Gesundheitscheck |
|
|
| `GET` | `/api/shopping` | Alle Einkaufsartikel abrufen |
|
|
| `POST` | `/api/shopping` | Neuen Einkaufsartikel erstellen |
|
|
| `PUT` | `/api/shopping/:id` | Einkaufsartikel aktualisieren |
|
|
| `DELETE` | `/api/shopping/:id` | Einkaufsartikel löschen |
|
|
|
|
### Umgebungsvariablen
|
|
|
|
Erstellen Sie `.env` Dateien im Server-Verzeichnis:
|
|
|
|
```env
|
|
PORT=3001
|
|
NODE_ENV=development
|
|
DATABASE_URL=sqlite:./database.sqlite
|
|
```
|
|
|
|
## 🎯 Anwendungsfälle
|
|
|
|
### 🏠 **Smart Home Display**
|
|
Perfekt für wandmontierte Tablets in Küchen, Fluren oder Familienzimmern. Die Hochformat-Ausrichtung und touch-optimierte Benutzeroberfläche machen es ideal für schnelle Interaktionen.
|
|
|
|
### 👨👩👧👦 **Familienorganisation**
|
|
Halten Sie alle mit geteilten Kalendern, Familiennotizen und gemeinsamen Einkaufslisten synchron, die nahtlos auf allen Geräten funktionieren.
|
|
|
|
### 🏢 **Büro & Co-Working**
|
|
Verwenden Sie es in Büroumgebungen für Teamkalender, geteilte Notizen und Büromaterial-Verwaltung.
|
|
|
|
### 🎛️ **Digitaler Kiosk**
|
|
Einsatz als eigenständiges Kiosk-System mit der enthaltenen Linux-Installation für dedizierte Displays.
|
|
|
|
## 📄 Lizenz
|
|
|
|
Dieses Projekt ist unter der MIT-Lizenz lizenziert - siehe die [LICENSE](LICENSE) Datei für Details.
|
|
|
|
## 🙏 Danksagungen
|
|
|
|
- **Electron** Team für das exzellente Desktop-Framework
|
|
- **React** Community für das großartige Ökosystem
|
|
- **Pixabay** für die schönen Hintergrundbilder
|
|
|
|
## 📞 Support
|
|
|
|
- 🐛 **Issues**: [GitHub Issues](https://github.com/yourusername/OpenWall/issues)
|
|
- 💬 **Diskussionen**: [GitHub Discussions](https://github.com/yourusername/OpenWall/discussions)
|
|
- 📧 **E-Mail**: [your-email@example.com](mailto:your-email@example.com)
|
|
|
|
---
|
|
|
|
<div align="center">
|
|
|
|
**Erstellt mit ❤️ von [Mathias Wagner](https://git.gnm.dev/Mathias/OpenWall)**
|
|
|
|
*Verwandeln Sie Ihren Raum mit OpenWall in eine intelligente, vernetzte Umgebung*
|
|
|
|
</div> |