Vzdělávací webová aplikace: 13 kroků

2025 Autor: John Day | [email protected]. Naposledy změněno: 2025-01-23 14:38

Tento projekt vznikl jako zadání kurzu pro video a digitální televizi, ve kterém jsme museli vyřešit problém výuky a učení ve třech úrovních: metodické, funkční a koncepční.

Tento projekt byl vytvořen jako zadání kurzu video a digitální televize, ve kterém jsme museli vyřešit problém výuky a učení v těchto třech úrovních: metodické, funkční a koncepční. Rozhodli jsme se tento problém vyřešit pomocí webové platformy, do kterého se mohou přihlásit studenti a učitelé kurzu. Studenti mají také přístup k výukovým videím pokrývajícím témata, jako jsou kodeky a formáty videa, poté, co se naučí koncepční část tématu, mohou přistoupit k hodnocení. Hodnocení se skládá ze tří činností; každá aktivita bude mít nějaká videa vyučující témata související s kodeky a formáty videa a zároveň každá aktivita má jiný účel, takže s touto platformou můžeme dosáhnout výuky a hodnocení metodické, funkční a koncepční části. Abychom toho všeho dosáhli, použili jsme Angular 4 a Firebase pomocí knihoven jako AngularFire5 a dragula. Pro videa jsme použili webovou aplikaci „PowToon“.

K tomuto pokynu budete potřebovat:

• NodeJs
• Úhlová 4
• Projekt Firebase
• Počítač

Krok 1: Instalace

• Nodejs 8.9.1 nainstalujte pomocí NPM (Node Package Manager)
• Nainstalujte Angular -CLI (rozhraní příkazového řádku) zadáním do konzoly „npm install -g @angular/cli“

Krok 2: Vytvoření projektu

• Vytvořte projekt pomocí „ng new my-app“
• Nainstalujte balíčky uzlů pomocí „npm install“
• Nainstalujte dragula pomocí "npm install dragula --save"
• Nainstalujte AngularFire2 pomocí „npm install firebase angularfire2 --save“

Krok 3: Firebase

K tomu můžete zkontrolovat obrázky tohoto kroku

• Vytvořte si účet Google
• Klikněte na „Přejít na konzolu“
• vytvořit projekt
• Přejděte na obecné a uchopte klientské klíče

Krok 4: Vytváření komponent

K tomu můžete zkontrolovat obrázky tohoto kroku

Vytvořte komponenty pro aplikaci.

Použití názvu součásti „ng g c““„ pro každou z následujících komponent:

• Stránka kurzu
• Stránka témat
• Stránka s videem
• Stránka hodnocení
• Metodická stránka
• Konceptuální stránka
• Funkční stránka
• Složka komentářů
• Admin

Krok 5: Stránka kurzu

K tomu můžete zkontrolovat obrázky tohoto kroku

Vytvořte html a ts

Do ts napíšete logiku autentizace, pokud je uživatel student nebo administrátor, a napíšete tabulku s informacemi o kurzu od studenta. K tomu můžete použít ověřovací službu a databázovou službu, které jsou k dispozici na konci tohoto pokynu.

Krok 6: Stránka Témata

K tomu můžete zkontrolovat obrázky tohoto kroku

V této komponentě budete psát html a ts.

Podobně jako na stránce kurzu kromě toho, že nemusíte kontrolovat, zda je uživatel administrátor nebo student, budete muset pouze napsat autentizaci a poskytnout seznamy témat v kurzu.

Krok 7: Stránka s videem

K tomu můžete zkontrolovat obrázky tohoto kroku

V této komponentě budete psát html a ts.

Pro tuto komponentu poskytnete odkaz od powToon pro přehrávání videa a komponentu pro komentáře

Krok 8: Stránka hodnocení

K tomu můžete zkontrolovat obrázky tohoto kroku

pro tento prvek použijete stejnou komponentu videa s odlišným videem, ve kterém vysvětlíte proces hodnocení.

Pak stačí mít tlačítko, které odkazuje na koncepční stránku

Krok 9: Koncepční stránka

K tomu můžete zkontrolovat obrázky tohoto kroku

Na této stránce vytvoříte html i ts.

• Pomocí tlačítka vytvořte dvě komponenty videa
• Vytvořte řadu dvou videí s logickou hodnotou „isCorrect“
• Napište funkci CheckScore ()
• Nahrajte skóre do databáze
• Přechod na další stránku

Krok 10: Metodická stránka

K tomu můžete zkontrolovat obrázky tohoto kroku

Na této stránce vytvoříte html i ts.

• Využijete dragula, k tomu si přečtěte dokumenty dragula
• Vytvářejte řadu videí
• Vytvořte pořadí videí
• napište kontrolní skóre
• Nahrát skóre
• Přejít na další stránku

Krok 11: Funkční stránka

K tomu můžete zkontrolovat obrázky tohoto kroku

Na této stránce vytvoříte html i ts.

• Stejné jako koncepční stránka budete mít tlačítka a videa jako možnosti.
• Do html napište problém, který má uživatel vyřešit
• Poté umístěte videa do pole s logickou hodnotou „IsCorrect“
• Nahrajte skóre do databáze

Krok 12: Přihlašovací stránka

K tomu můžete zkontrolovat obrázky tohoto kroku

• Vytvořte html a ts
• Umístěte obrázek do html
• Napište formulář do html
• Odešlete formulář v TS autorizační službě
• Uložte uživatele do databáze

Krok 13: Stáhněte si úplný kód komponent a služeb

V případě, že máte problémy, zde je rar s komponentami a službami