Keyboard Hero Dokumentace

O aplikaci

Keyboard Hero je webová aplikace vyvinutá pro žáky Základní umělecké školy Moravský Krumlov. Jejím hlavním cílem je hravou a motivující formou vést děti k pravidelnému domácímu cvičení na hudební nástroj.

Odznáčky a ukazatele

V horním panelu rozhraní žáka se zobrazují metriky jeho cvičebního pokroku:

Uživatelská příručka pro žáka

1. Registrace a přihlášení

• Registrace: Při prvním spuštění klikněte na Chci se zaregistrovat, vyplňte uživatelské jméno bez diakritiky (např. jannovak), své celé jméno a heslo.
• Schválení účtu: Po registraci vyčkejte, než váš účet učitel schválí v administraci.
• Přihlášení: Zadejte uživatelské jméno a heslo. Volba Zapamatovat si mě vás udrží přihlášené i po zavření prohlížeče.

2. Funkce v rozhraní žáka

• 🎼 Kalendář: Přehledně zobrazuje aktuální měsíc. Dny, kdy žák odeslal cvičení, jsou barevně zvýrazněny.
• 🎤 Nahrávání cvičení: Stisknutím tlačítka mikrofonu zahájíte nahrávání. Dalším stisknutím nahrávání ukončíte a nahrávka se automaticky odešle učiteli.
• 💬 Hodnocení od učitele: V této sekci žák vidí zpětnou vazbu a komentáře, které učitel zanechal k jeho nahrávkám.
• 🎧 Nedávné nahrávky: Seznam posledních nahrávek s možností jejich stažení. Pozor: starší nahrávky se z úložiště průběžně promazávají!
• 🏆 Žebříček: Přehled nejlepších žáků seřazený podle aktivity.
• 🔔 Novinky: Důležitá upozornění a zprávy vložené učitelem.

Uživatelská příručka pro učitele (Admin)

1. Přihlášení do administrace

Do administrace se vstupuje přes odkaz Admin Login na přihlašovací stránce nebo přímo na souboru admin.html. Účet musí mít v databázi nastavenou roli admin.

2. Schvalování žáků

V sekci Čekající registrace se zobrazují nově zaregistrovaní žáci. Učitel může každou žádost schválit nebo zamítnout.

3. Správa žáků a hodnocení

• Úprava hodnot (Streak a Koncerty): Učitel může tlačítky + / - upravit počet dní v denní řadě (🔥) nebo udělit hvězdičky za koncert (⭐) a změny uložit.
• Poslech a komentáře: Kliknutím na nahrávky žáka lze přehrát audio soubor, připsat k němu hodnocení/komentář nebo nepotřebnou nahrávku trvale smazat.

Architektura & Databáze

Aplikace je postavena na čisto klientském JS s využitím cloudové platformy Supabase pro backendové služby (Auth, Postgres DB a Storage).

Generování vnitřních e-mailů

Jelikož děti v ZUŠ často nemají vlastní e-mailové adresy, aplikace automaticky převádí uživatelské jméno na vnitřní e-mailový tvar:

function makeInternalEmail(username) {
  const cleanUsername = username.trim().toLowerCase().replace(/\s+/g, '');
  return `${cleanUsername}@keyboardhero.internal`;
}

Databázové tabulky v Supabase

• profiles – Profil uživatele (jméno, role, streak, stars, status schválení is_approved).
• practice_logs – Záznamy o odeslaných cvičeních a odkazy na audio nahrávky.
• comments – Slovní hodnocení učitele přiřazená k nahrávkám.
• news – Systémové novinky a oznámení pro žáky.

Struktura projektu