admin
e7b4ec571e
Profil: Begrüßung in Zielsprache, Kategorie-Punkte-Übersicht, ruhigerer Header (kein rotierender Avatar/Online-Dot), Notch-Fix und kompaktere Aktivitäts-Heatmap. Außerdem Capacitor-iOS-Projekt und diverse Auth/Feed/Audio-Verbesserungen aus dem Premium-Redesign. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
13 KiB
13 KiB
Funktionsübersicht — Snakkimo iOS-App
Zweck: Vollständige Liste aller Funktionen der iOS-App (Endnutzer-App) zur Funktionsüberprüfung durch das Team. Jede Funktion hat eine Soll-Beschreibung (so muss es sich verhalten) und eine abhakbare Checkbox. Backend-/Admin-Tools (CMT, Content-Pipeline) sind nicht Teil dieses Dokuments.
Technischer Rahmen
- iOS-App = Capacitor-Wrapper um eine React-19/Vite-Single-Page-App (
webDir: dist). - Bundle-ID:
com.hyggecraftery.hejyou· App-Name (iOS-Homescreen): Snakkimo. - Alle Inhalte/Logins kommen live vom Backend (
VITE_API_URL) — es gibt keinen Offline-Modus, ohne Netz funktioniert die App nicht. - Aktiv unterstützte Sprachen: Deutsch 🇩🇪, Englisch 🇬🇧, Schwedisch 🇸🇪.
⚠️ Branding-Inkonsistenz (für QA wichtig): Auf dem Login-Screen steht „HejYou", der iOS-App-Name ist „Snakkimo", der Browser-/Webview-Titel ist „Language App". Bitte als bekannten Punkt behandeln, nicht als neuen Bug.
1. Allgemeiner Rahmen
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 1.1 | App-Start / Ladezustand | Beim Start erscheint ein Spinner, bis Profil geladen ist. | ☐ |
| 1.2 | Auth-Gating | Ohne gültiges Profil (Username + Mutter- + Zielsprache) erscheint immer der Auth-Screen. | ☐ |
| 1.3 | Session-Persistenz | Login bleibt nach App-Neustart erhalten (Token in localStorage: hejyou_token). |
☐ |
| 1.4 | Auto-Logout bei ungültigem Token | Ist der Token abgelaufen/ungültig, wird er verworfen und der Auth-Screen erscheint. | ☐ |
| 1.5 | Untere Navigation (BottomNav) | 4 Tabs: Feed · Game · Pro · Profil. Aktiver Tab ist hervorgehoben. | ☐ |
| 1.6 | Seitenwechsel-Animation | Beim Tab-Wechsel spielt eine kurze Einblend-Animation (page-enter). |
☐ |
| 1.7 | Safe-Area / Notch | Layout respektiert iPhone-Notch/Home-Indicator (viewport-fit=cover). |
☐ |
| 1.8 | Design/Theme | Warmes Creme-/Gold-Design, durchgängige Schrift- und Farb-Tokens. | ☐ |
2. Onboarding & Authentifizierung
2.1 Login (Tab „Anmelden")
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 2.1.1 | Login/Register-Umschalter | Oben umschaltbar zwischen „Anmelden" und „Registrieren"; letzte Wahl wird gemerkt (hejyou_last_mode). |
☐ |
| 2.1.2 | Eingabe E-Mail + Passwort | Beide Felder Pflicht; leeres Feld → Fehlermeldung „Bitte E-Mail und Passwort eingeben.". | ☐ |
| 2.1.3 | Erfolgreicher Login | Token wird gespeichert, Profil geladen, App öffnet den Feed. | ☐ |
| 2.1.4 | Falsche Zugangsdaten | Fehlermeldung vom Server wird angezeigt (z. B. „Invalid credentials"). | ☐ |
| 2.1.5 | Login eines Accounts ohne Profil | Springt direkt in Profil-Schritt (Step 2) statt in den Feed. | ☐ |
| 2.1.6 | Lade-Status | Button zeigt „Anmelden…" und ist während des Requests deaktiviert. | ☐ |
2.2 Registrierung — Schritt 1 (E-Mail + Passwort)
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 2.2.1 | Schritt-Anzeige | Zeigt Fortschrittspunkte „Schritt 1 von 2". | ☐ |
| 2.2.2 | Passwort-Mindestlänge | Passwort < 8 Zeichen → „Passwort muss mindestens 8 Zeichen haben.". | ☐ |
| 2.2.3 | E-Mail bereits vergeben | Server-Fehler „Email already registered" wird angezeigt. | ☐ |
| 2.2.4 | Erfolg | Weiter zu Schritt 2 (Profil). | ☐ |
2.3 Registrierung — Schritt 2 (Profil)
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 2.3.1 | Username-Regeln | 3–20 Zeichen, nur Buchstaben/Zahlen/Unterstrich; Verstoß → klare Fehlermeldung. | ☐ |
| 2.3.2 | Username-Verfügbarkeit | Vergebener Username → „Dieser Username ist bereits vergeben.". | ☐ |
| 2.3.3 | Muttersprache wählen | Dropdown mit Flaggen + Sprachnamen (vom Server geladen). | ☐ |
| 2.3.4 | Zielsprache wählen | Dropdown; die gewählte Muttersprache ist hier ausgeblendet. | ☐ |
| 2.3.5 | Gleiche Sprachen verhindern | Mutter- = Zielsprache → „… dürfen nicht gleich sein.". | ☐ |
| 2.3.6 | Profil anlegen | Bei Erfolg: Token persistiert, Profil geladen, Erfolgs-Screen erscheint. | ☐ |
| 2.3.7 | Sprachen-Ladefehler | Können Sprachen nicht geladen werden, ist der Button deaktiviert + Hinweis. | ☐ |
2.4 Erfolgs-Screen & Logout
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 2.4.1 | Willkommens-Screen | Nach Registrierung: „Willkommen, {Username}!" mit Häkchen-Icon. | ☐ |
| 2.4.2 | Logout | Über das Logout-Icon im Profil; Token wird gelöscht, zurück zum Auth-Screen. | ☐ |
3. Feed (Kernbereich „Lernen")
3.1 Feed-Grundgerüst
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 3.1.1 | Karten laden | Beim Öffnen werden bis zu 20 Lernkarten in der Zielsprache geladen. | ☐ |
| 3.1.2 | EP-Abzeichen oben | Zeigt Fortschritts-Ring (Tagesziel-%), Gesamt-EP und „X/Y heute". | ☐ |
| 3.1.3 | Karte abschließen | Nach Lösen verschwindet die Karte aus der Liste (bis App-Neustart). | ☐ |
| 3.1.4 | Fortschritt speichern | Jede gelöste Karte sendet EP/Richtig-Falsch an den Server (EP/Streak aktualisiert sich). | ☐ |
| 3.1.5 | Ladezustand | „Lade Karten…" während des Ladens. | ☐ |
| 3.1.6 | Leerer Feed | Keine Inhalte → „Noch keine Inhalte verfügbar.". | ☐ |
| 3.1.7 | Alles gelöst | Alle Karten erledigt → „Super! Alle Karten abgeschlossen. 🎉". | ☐ |
3.2 Gemeinsame Karten-Mechaniken (alle Kartentypen)
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 3.2.1 | Bild | Jede Karte zeigt oben ein Bild (Platzhalter 🖼️, falls keins). | ☐ |
| 3.2.2 | Satz vorlesen (Audio) | Tippen auf den Satz oder den Lautsprecher-Button spielt echtes Audio. | ☐ |
| 3.2.3 | Verlangsamtes Audio | Audio wird bewusst in 0,7-facher Geschwindigkeit abgespielt. | ☐ |
| 3.2.4 | Nur ein Audio gleichzeitig | Startet man ein neues Audio, stoppt das vorherige. | ☐ |
| 3.2.5 | Karaoke-Hervorhebung | Während des Vorlesens wird das aktuell gesprochene Wort im Satz hervorgehoben. | ☐ |
| 3.2.6 | Wort-Chip antippen | Markiertes Wort antippen → zugehöriges Label-Abzeichen auf dem Bild. | ☐ |
| 3.2.7 | Objekt-Chip antippen | Objekt-Wort antippen → Bildregion umrandet, Rest abgedunkelt, Label sichtbar. | ☐ |
| 3.2.8 | Objekt-Sync beim Vorlesen | Wird ein Objekt-Wort vorgelesen, wird seine Bildregion (nur Umriss) live hervorgehoben. | ☐ |
| 3.2.9 | Übersetzungs-Hinweis | Unter dem Satz steht die Übersetzung in der Muttersprache (Hint). | ☐ |
| 3.2.10 | Defensive Token-Anzeige | Unaufgelöste Pipeline-Tokens (⟦PHn:wort⟧) werden als reines Wort angezeigt, nicht roh. |
☐ |
3.3 Kartentyp „Satz / Lesen" (PairSentenceCard, text) — 2 EP
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 3.3.1 | „Verstanden" gesperrt | Button ist gesperrt, bis man entweder vorgelesen oder übersetzt hat. | ☐ |
| 3.3.2 | Halten-zum-Übersetzen | Übersetzungs-Button 2 Sekunden halten → Übersetzung blendet ein, Button entsperrt. | ☐ |
| 3.3.3 | Halte-Fortschrittsring | Während des Haltens läuft ein Ring 2 s lang voll. | ☐ |
| 3.3.4 | TTS-Fallback | Existiert kein Audio-File, wird per Browser-Sprachsynthese vorgelesen (de/en/sv). | ☐ |
| 3.3.5 | Vokabel-Chips | Im Satz markierte Vokabeln werden als separate Chips gelistet. | ☐ |
| 3.3.6 | Abschluss | „Verstanden" → Konfetti, Karte zählt als richtig (2 EP). | ☐ |
3.4 Kartentyp „Ja/Nein" (PairYesNoCard, yes_no) — 2 EP
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 3.4.1 | Zwei Antwort-Buttons | „✗ Nein" und „✓ Ja". | ☐ |
| 3.4.2 | Auswertung | Antwort wird gegen die korrekte Lösung des Satzes geprüft. | ☐ |
| 3.4.3 | Richtig | Konfetti + „✓ Richtig!" (2 EP). | ☐ |
| 3.4.4 | Falsch | „✗ Die Antwort war: Ja/Nein"; richtige/falsche Buttons farblich markiert. | ☐ |
| 3.4.5 | Mehrfachklick-Schutz | Nach Beantwortung sind die Buttons gesperrt. | ☐ |
3.5 Kartentyp „Wort wählen" (PairWordCard, word & question) — 3 EP
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 3.5.1 | Frage + Bild + Audio | Zeigt Frage-Satz, Bild und Vorlesen wie alle Karten. | ☐ |
| 3.5.2 | Wort-Optionen | Mischung aus richtigen + falschen Wörtern, zufällig gemischt. | ☐ |
| 3.5.3 | Mehrfachauswahl | Mehrere Optionen an-/abwählbar, dann „Bestätigen". | ☐ |
| 3.5.4 | „Bestätigen" gesperrt | Solange nichts gewählt ist, ist „Bestätigen" gesperrt. | ☐ |
| 3.5.5 | Auswertung | Richtig, wenn nur richtige Wörter gewählt sind (Teilauswahl der richtigen erlaubt, kein falsches dabei). | ☐ |
| 3.5.6 | Feedback richtig/falsch | Richtig → Konfetti + „✓ Richtig!"; falsch → „✗ Richtig wären: …". | ☐ |
| 3.5.7 | Übersetzungs-Hinweis | Nach Bestätigen werden bei richtigen Optionen die muttersprachlichen Hints gezeigt. | ☐ |
4. Game (Tab „Game")
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 4.1 | Platzhalter-Screen | Zeigt „Bald verfügbar"-Karte „Spielend lernen" mit Teaser-Punkten. | ☐ |
| 4.2 | Keine Funktion | Es gibt noch keine spielbare Funktion (bewusst Platzhalter, kein Bug). | ☐ |
5. Pro (Tab „Pro")
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 5.1 | Platzhalter-Screen | Zeigt „Bald verfügbar"-Karte „Snakkimo Pro" mit Teaser-Punkten. | ☐ |
| 5.2 | Keine Kauf-/Abo-Funktion | Es gibt noch keine Bezahl-/Abo-Funktion (bewusst Platzhalter, kein Bug). | ☐ |
6. Profil (Tab „Profil")
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 6.1 | Avatar + Initialen | Kreis mit den ersten 2 Buchstaben des Usernamens, Online-Punkt. | ☐ |
| 6.2 | Level-Abzeichen | Sechseck mit Level-Zahl (Level = Gesamt-EP ÷ 500, abgerundet). | ☐ |
| 6.3 | Name + Handle | Anzeigename und „@username". | ☐ |
| 6.4 | Streak-Anzeige | „🔥 X Tage Streak", wenn Streak > 0. | ☐ |
| 6.5 | Tagesziel-Karte | Ring mit Tagesziel-%, „heutige EP / Ziel", Restwert-Hinweis bzw. „Geschafft 🎉". | ☐ |
| 6.6 | Fortschritts-Karte | Zielsprache (Flagge+Name), Gesamt-EP, XP-Balken, Level-Pille, „EP bis Level X+1". | ☐ |
| 6.7 | Wochen-Aktivität | Balkendiagramm der letzten 7 Tage (heutiger Tag markiert). | ☐ |
| 6.8 | Aktivitäts-Kalender | Heatmap der letzten 12 Wochen (Farbintensität nach EP/Tag). | ☐ |
| 6.9 | Eckdaten-Kacheln | „Karten geübt", „Genauigkeit %", „Tage Streak". | ☐ |
| 6.10 | Fähigkeiten-Radar | Radar-Chart Vokabular / Lesen / Verständnis (Genauigkeit je Skill). | ☐ |
| 6.11 | Leerzustand Skills | Ohne Daten: „Leg los — deine Stärken erscheinen, sobald du Karten löst.". | ☐ |
| 6.12 | Tracking-Hinweis | Ist die Statistik (noch) nicht verfügbar: dezenter Hinweis „… komm morgen wieder! 🌱". | ☐ |
| 6.13 | Logout | Abmelde-Button oben rechts (siehe 2.4.2). | ☐ |
Mapping Skills: Vokabular = Kartentypen
word+question; Lesen =text; Verständnis =yes_no.
7. iOS-spezifische Prüfpunkte
| # | Funktion | Soll-Verhalten | OK |
|---|---|---|---|
| 7.1 | App-Icon & Name | Auf dem Homescreen erscheint „Snakkimo". | ☐ |
| 7.2 | Start ohne Netz | Ohne Internet lädt nichts (Login/Feed schlagen fehl) — Verhalten dokumentieren. | ☐ |
| 7.3 | Audio-Wiedergabe iOS | Vorlesen funktioniert auch im iOS-WebView (Touch löst Audio aus). | ☐ |
| 7.4 | Touch-Halten (Übersetzen) | 2-Sekunden-Halten funktioniert per Touch (nicht nur Maus). | ☐ |
| 7.5 | Scrollen | Auth- und Profil-Screens lassen sich vollständig scrollen, ohne „Gummiband"-Leaks. | ☐ |
| 7.6 | Safe-Area / Statusleiste | Kein Inhalt liegt unter Notch/Statusleiste oder Home-Indicator. | ☐ |
| 7.7 | Hintergrund/Wiederkehr | App nach Hintergrund zurückholen → Session noch aktiv, Feed nutzbar. | ☐ |
8. Bekannte Einschränkungen / Auffälligkeiten (für QA, kein Bug-Report nötig)
- Game & Pro sind reine „Bald verfügbar"-Platzhalter.
- Kein Offline-Modus — App braucht durchgehend Verbindung zum Backend.
- Feed-Wiederholung: Bereits gelöste Karten verschwinden nur lokal; nach App-Neustart können dieselben Karten erneut erscheinen (keine Spaced-Repetition-Logik in der App).
- Branding uneinheitlich: „HejYou" (Login) vs. „Snakkimo" (App-Name) vs. „Language App" (Webview-Titel).
- Nur 3 Sprachen (de/en/sv) auswählbar.
- Inhaltsmenge begrenzt: Der Feed kann bei intensivem Üben schnell leer sein („Alle Karten abgeschlossen").
9. Kompakte Test-Checkliste (Smoke-Test, ~10 Min)
- Registrierung (neue E-Mail) → Profil anlegen → landet im Feed
- Logout → erneuter Login → Feed
- Login bleibt nach App-Neustart bestehen
- Feed: Satz-Karte vorlesen (Audio + Karaoke-Highlight)
- Feed: Wort-Chip antippen → Bild-Label; Objekt-Chip → Bildregion umrandet
- Feed: „Verstanden"-Karte über 2-Sek-Halten entsperren und lösen
- Feed: Ja/Nein-Karte richtig + falsch testen (Konfetti / korrekte Lösung)
- Feed: Wort-Wahl-Karte mit Mehrfachauswahl lösen
- EP-Abzeichen oben steigt nach Lösen einer Karte
- Profil: EP/Level, Streak, Wochen-Balken, Heatmap, Radar werden angezeigt
- Game-Tab & Pro-Tab zeigen „Bald verfügbar"
- iOS: Safe-Area korrekt, Touch-Halten & Audio funktionieren