frank/streamertool

Watch

Fork 0

Config-Assistant: Geführtes Onboarding bis zum ersten Stream #19

New issue

Closed

opened 2026-07-12 01:33:38 +02:00 by frank · 0 comments

frank commented

2026-07-12 01:33:38 +02:00

Owner

Kontext

Neue Nutzer starten Streamertool und landen direkt in der Admin-UI mit den Bereichen Overlays, Verbindungen, Erweiterungen und Einstellungen. Die notwendigen Schritte bis zum ersten funktionierenden Stream (Twitch verbinden, Overlay-URL in OBS einbinden, optional OBS/Streamer.Bot anbinden) sind über mehrere Seiten verteilt und in der README dokumentiert — nicht in der App selbst.

Das erhöht die Einstiegshürde: Nutzer wissen nicht, in welcher Reihenfolge sie konfigurieren sollen, welche Schritte Pflicht vs. optional sind, und ob die Einrichtung erfolgreich war.

Vorhandene Bausteine, auf denen der Assistant aufbauen kann:

Twitch-Connector mit OAuth-Flow und manueller Token-Eingabe
OBS WebSocket v5 Connector (#2, teilweise)
Streamer.Bot WebSocket Connector (#3, teilweise)
Overlay-Server mit kopierbaren Browser-Source-URLs
Connector-Status und Diagnose (#16, geplant)
Dashboard mit Live-Kennzahlen (#18, geplant) als Abschluss-/Erfolgsansicht

Ziel

Ein Config-Assistant (Wizard / geführter Setup-Flow), der Nutzer beim ersten Start — und optional jederzeit über „Einrichtung fortsetzen“ — Schritt für Schritt von der leeren App bis zum ersten streambaren Setup führt.

Leitidee

„In 10 Minuten von Installation zu einem funktionierenden Chat-Overlay in OBS — ohne die README lesen zu müssen.“

Vorgeschlagene Schritte (MVP)

#	Schritt	Pflicht	Erfolgskriterium
1	Willkommen	✓	Nutzer versteht Zweck der App und startet den Wizard
2	Twitch verbinden	✓	OAuth oder manueller Token; Channel gesetzt; Chat-Status `connected`
3	Overlay wählen	✓	Mindestens ein Overlay (z. B. Twitch Chat) aktiv; URL sichtbar
4	OBS einrichten	✓	Anleitung: Browser Source anlegen, URL einfügen, Transparenz; optional OBS-WebSocket verbinden (#2)
5	Test & Abschluss	✓	Checkliste: Chat-Nachricht erscheint im Overlay; Connector-Status grün; Link zum Dashboard (#18)

Optionale Schritte (nach MVP oder als „Später einrichten“)

Streamer.Bot verbinden (#3)
EventSub-Scopes prüfen / nachziehen (#1, #8)
Erweiterungen installieren
LAN/Multi-PC (#6) — Verweis auf docs/multi-pc.md
Server-Port und Token (Einstellungen)

UI / UX

Erster Start: Modal oder Vollbild-Wizard statt direkter Sidebar-Navigation; Fortschrittsanzeige (Schritt X von Y)
Wiederaufrufbar: Menüpunkt oder Button „Einrichtungsassistent“ in Einstellungen / Sidebar
Kontextuelle Hilfe: Kurze Erklärungen pro Schritt, Links zu Twitch Developer Console, OBS-Hilfe
Inline-Aktionen: OAuth-Button, URL kopieren, Connector testen — ohne Seitenwechsel, wo möglich
Validierung: Nächster Schritt erst aktiv, wenn Pflichtkriterium erfüllt (oder explizit „Überspringen“ mit Warnung)
Zustand persistieren: Abgebrochener Wizard wird beim nächsten Start fortgesetzt (onboarding.completed, onboarding.step)
Sprache: Deutsch (konsistent mit bestehender UI)

Technik (Vorschlag)

Frontend: neuer Wizard-State (React), Schritt-Komponenten; bestehende API-Calls wiederverwenden
Backend: optional GET/PUT /api/onboarding für Fortschritt und Abschluss-Flag in SQLite (Settings-Schema #13 beachten)
Erkennung „Erststart“: fehlende Twitch-Verbindung + onboarding.completed !== true
Health-Checks pro Schritt über bestehende Connector-Status-Endpunkte

Akzeptanzkriterien

Beim ersten Start (oder wenn Onboarding unvollständig) erscheint der Config-Assistant automatisch
Nutzer kann Pflichtschritte 1–5 durchlaufen und landet mit funktionierendem Chat-Overlay-Setup
Fortschritt wird gespeichert; Abbruch und Fortsetzung funktionieren
Assistant ist jederzeit manuell aufrufbar (Reset / erneut durchlaufen)
Optionale Schritte sind klar als optional markiert und blockieren den Abschluss nicht
Nach Abschluss: normale Sidebar-Navigation; optional Hinweis auf Dashboard (#18)
make test / make ci grün

Abhängigkeiten / Verknüpfung

Nutzt bestehende Twitch-OAuth- und Connector-UI (kein Parallel-Setup)
OBS-Anleitung profitiert von vollständigem OBS-Connector (#2) für Live-Status im letzten Schritt
Dashboard (#18) als sinnvolle Zielseite nach Abschluss
Settings-Versionierung (#13) für persistente Onboarding-Flags
Nicht duplizieren: #10 (Config-Dialog Hotkey) — anderer Scope (macOS-Systemsteuerung)

Offene Punkte

Wizard als Modal vs. eigene Route vs. dedizierter Onboarding-Modus in der Shell
„Erster Stream“ definieren: nur Overlay in OBS, oder auch „Go Live“ mit OBS-Streaming-Status?
Soll der Assistant nach App-Updates erneut erscheinen (z. B. neue Pflicht-Connectoren)?
Video/GIF-Snippets für OBS Browser-Source-Anleitung vs. reine Textschritte

## Kontext Neue Nutzer starten Streamertool und landen direkt in der Admin-UI mit den Bereichen **Overlays**, **Verbindungen**, **Erweiterungen** und **Einstellungen**. Die notwendigen Schritte bis zum ersten funktionierenden Stream (Twitch verbinden, Overlay-URL in OBS einbinden, optional OBS/Streamer.Bot anbinden) sind über mehrere Seiten verteilt und in der README dokumentiert — nicht in der App selbst. Das erhöht die Einstiegshürde: Nutzer wissen nicht, in welcher Reihenfolge sie konfigurieren sollen, welche Schritte Pflicht vs. optional sind, und ob die Einrichtung erfolgreich war. Vorhandene Bausteine, auf denen der Assistant aufbauen kann: - Twitch-Connector mit OAuth-Flow und manueller Token-Eingabe - OBS WebSocket v5 Connector (#2, teilweise) - Streamer.Bot WebSocket Connector (#3, teilweise) - Overlay-Server mit kopierbaren Browser-Source-URLs - Connector-Status und Diagnose (#16, geplant) - Dashboard mit Live-Kennzahlen (#18, geplant) als Abschluss-/Erfolgsansicht ## Ziel Ein **Config-Assistant** (Wizard / geführter Setup-Flow), der Nutzer beim ersten Start — und optional jederzeit über „Einrichtung fortsetzen“ — Schritt für Schritt von der leeren App bis zum **ersten streambaren Setup** führt. ### Leitidee > „In 10 Minuten von Installation zu einem funktionierenden Chat-Overlay in OBS — ohne die README lesen zu müssen.“ ### Vorgeschlagene Schritte (MVP) | # | Schritt | Pflicht | Erfolgskriterium | |---|---------|---------|------------------| | 1 | **Willkommen** | ✓ | Nutzer versteht Zweck der App und startet den Wizard | | 2 | **Twitch verbinden** | ✓ | OAuth oder manueller Token; Channel gesetzt; Chat-Status `connected` | | 3 | **Overlay wählen** | ✓ | Mindestens ein Overlay (z. B. Twitch Chat) aktiv; URL sichtbar | | 4 | **OBS einrichten** | ✓ | Anleitung: Browser Source anlegen, URL einfügen, Transparenz; optional OBS-WebSocket verbinden (#2) | | 5 | **Test & Abschluss** | ✓ | Checkliste: Chat-Nachricht erscheint im Overlay; Connector-Status grün; Link zum Dashboard (#18) | ### Optionale Schritte (nach MVP oder als „Später einrichten“) - Streamer.Bot verbinden (#3) - EventSub-Scopes prüfen / nachziehen (#1, #8) - Erweiterungen installieren - LAN/Multi-PC (#6) — Verweis auf `docs/multi-pc.md` - Server-Port und Token (Einstellungen) ## UI / UX - **Erster Start:** Modal oder Vollbild-Wizard statt direkter Sidebar-Navigation; Fortschrittsanzeige (Schritt X von Y) - **Wiederaufrufbar:** Menüpunkt oder Button „Einrichtungsassistent“ in Einstellungen / Sidebar - **Kontextuelle Hilfe:** Kurze Erklärungen pro Schritt, Links zu Twitch Developer Console, OBS-Hilfe - **Inline-Aktionen:** OAuth-Button, URL kopieren, Connector testen — ohne Seitenwechsel, wo möglich - **Validierung:** Nächster Schritt erst aktiv, wenn Pflichtkriterium erfüllt (oder explizit „Überspringen“ mit Warnung) - **Zustand persistieren:** Abgebrochener Wizard wird beim nächsten Start fortgesetzt (`onboarding.completed`, `onboarding.step`) - **Sprache:** Deutsch (konsistent mit bestehender UI) ## Technik (Vorschlag) - Frontend: neuer Wizard-State (React), Schritt-Komponenten; bestehende API-Calls wiederverwenden - Backend: optional `GET/PUT /api/onboarding` für Fortschritt und Abschluss-Flag in SQLite (Settings-Schema #13 beachten) - Erkennung „Erststart“: fehlende Twitch-Verbindung + `onboarding.completed !== true` - Health-Checks pro Schritt über bestehende Connector-Status-Endpunkte ## Akzeptanzkriterien - [ ] Beim ersten Start (oder wenn Onboarding unvollständig) erscheint der Config-Assistant automatisch - [ ] Nutzer kann Pflichtschritte 1–5 durchlaufen und landet mit funktionierendem Chat-Overlay-Setup - [ ] Fortschritt wird gespeichert; Abbruch und Fortsetzung funktionieren - [ ] Assistant ist jederzeit manuell aufrufbar (Reset / erneut durchlaufen) - [ ] Optionale Schritte sind klar als optional markiert und blockieren den Abschluss nicht - [ ] Nach Abschluss: normale Sidebar-Navigation; optional Hinweis auf Dashboard (#18) - [ ] `make test` / `make ci` grün ## Abhängigkeiten / Verknüpfung - Nutzt bestehende Twitch-OAuth- und Connector-UI (kein Parallel-Setup) - OBS-Anleitung profitiert von vollständigem OBS-Connector (#2) für Live-Status im letzten Schritt - Dashboard (#18) als sinnvolle Zielseite nach Abschluss - Settings-Versionierung (#13) für persistente Onboarding-Flags - Nicht duplizieren: #10 (Config-Dialog Hotkey) — anderer Scope (macOS-Systemsteuerung) ## Offene Punkte - [ ] Wizard als Modal vs. eigene Route vs. dedizierter Onboarding-Modus in der Shell - [ ] „Erster Stream“ definieren: nur Overlay in OBS, oder auch „Go Live“ mit OBS-Streaming-Status? - [ ] Soll der Assistant nach App-Updates erneut erscheinen (z. B. neue Pflicht-Connectoren)? - [ ] Video/GIF-Snippets für OBS Browser-Source-Anleitung vs. reine Textschritte

frank referenced this issue from a commit

2026-07-12 08:38:38 +02:00

feat: add guided setup assistant (#19)

frank closed this issue

2026-07-12 08:38:46 +02:00

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

frank/streamertool#19

No description provided.

Rows
Columns