Vzdelávacia webová aplikácia: 13 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:56

Tento projekt bol vytvorený ako zadanie pre kurz video a digitálnej televízie, v ktorom sme museli vyriešiť problém výučby a učenia sa v troch úrovniach: metodickej, funkčnej a koncepčnej.

Tento projekt bol vytvorený ako zadanie pre kurz video a digitálnej televízie, v ktorom sme museli vyriešiť problém výučby a učenia sa v týchto troch úrovniach: metodickej, funkčnej a koncepčnej. Tento problém sme sa rozhodli vyriešiť pomocou webovej platformy, do ktorého sa môžu prihlásiť študenti a učitelia predmetu. Študenti majú tiež prístup k výukovým videám pokrývajúcim témy, ako sú kodeky a formáty videa, akonáhle sa naučia koncepčnú časť témy, môžu pokračovať v hodnotení. Hodnotenie pozostáva z troch aktivít; každá aktivita bude mať akési videá vyučujúce témy súvisiace s kodekmi a formátmi videa a zároveň každá aktivita bude mať iný účel, takže s touto platformou môžeme dosiahnuť výučbu a vyhodnotenie metodickej, funkčnej a koncepčnej časti. Aby sme to všetko dosiahli, použili sme Angular 4 a Firebase pomocou knižníc ako AngularFire5 a dragula. Na videá sme použili webovú aplikáciu „PowToon“.

Na tento návod budete potrebovať:

• NodeJs
• Uhlová 4
• Projekt Firebase
• Počítač

Krok 1: Inštalácia

• Nodejs 8.9.1 nainštalujte pomocou NPM (Node Package Manager)
• Nainštalujte Angular -CLI (rozhranie príkazového riadka) a zadajte do konzoly „npm install -g @angular/cli“

Krok 2: Vytvorenie projektu

• Vytvorte projekt pomocou „novej aplikácie“
• Nainštalujte balíky uzlov pomocou „npm install“
• Nainštalujte dragulu pomocou príkazu „npm install dragula --save“
• Nainštalujte AngularFire2 pomocou „npm install firebase angularfire2 --save“

Krok 3: Firebase

Za týmto účelom môžete skontrolovať obrázky tohto kroku

• Vytvorte si účet Google
• Kliknite na „Prejsť na konzolu“
• vytvoriť projekt
• Choďte na generálku a chyťte klientske kľúče

Krok 4: Vytváranie komponentov

Za týmto účelom môžete skontrolovať obrázky tohto kroku

Vytvorte komponenty pre aplikáciu.

Použitie názvu komponentu „ng g c“„“pre každý z nasledujúcich komponentov:

• Stránka kurzu
• Stránka s témami
• Stránka s videom
• Stránka hodnotenia
• Metodická stránka
• Koncepčná stránka
• Funkčná stránka
• Komponent komentárov
• Admin

Krok 5: Stránka kurzu

Za týmto účelom môžete skontrolovať obrázky tohto kroku

Vytvorte html a ts

Do TS napíšete logiku autentifikácie, ak je užívateľ študent alebo správca, a napíšete tabuľku s informáciami o kurze od študenta. Na tento účel môžete použiť autentifikačnú službu a databázovú službu, ktoré sú uvedené na konci tohto pokynu.

Krok 6: Stránka Témy

Za týmto účelom môžete skontrolovať obrázky tohto kroku

V tejto súčasti budete písať html a ts.

Podobne ako na stránke kurzu, okrem toho, že nemusíte kontrolovať, či je používateľ admin alebo študent, budete musieť iba napísať autentifikáciu a poskytnúť zoznamy tém v kurze.

Krok 7: Stránka s videom

Za týmto účelom môžete skontrolovať obrázky tohto kroku

V tejto súčasti budete písať html a ts.

K tomuto komponentu poskytnete odkaz od powToon na prehrávanie videa a komponent pre komentáre

Krok 8: Stránka hodnotenia

Za týmto účelom môžete skontrolovať obrázky tohto kroku

Na tento účel použijete ten istý komponent videa s iným videom, v ktorom vysvetlíte proces hodnotenia.

Potom stačí mať tlačidlo, ktoré odkazuje na koncepčnú stránku

Krok 9: Koncepčná stránka

Za týmto účelom môžete skontrolovať obrázky tohto kroku

Na tejto stránke vytvoríte html aj ts.

• Pomocou tlačidla vytvorte dve video komponenty
• Vytvorte pole dvoch videí s logickou hodnotou „isCorrect“
• Napíšte funkciu CheckScore ()
• Nahrajte skóre do databázy
• Transport na nasledujúcu stránku

Krok 10: Metodická stránka

Za týmto účelom môžete skontrolovať obrázky tohto kroku

Na tejto stránke vytvoríte html aj ts.

• Budete používať dragulu, na to si prečítajte dokumenty o dragule
• Vytvorte množstvo videí
• Vytvorte poradie videí
• napísať Kontrolné skóre
• Skóre nahrávania
• Prejdite na nasledujúcu stránku

Krok 11: Funkčná stránka

Za týmto účelom môžete skontrolovať obrázky tohto kroku

Na tejto stránke vytvoríte html aj ts.

• Rovnako ako na koncepčnej stránke budete mať k dispozícii tlačidlá a videá.
• Do html napíšte problém, ktorý má používateľ vyriešiť
• Potom umiestnite videá do poľa s logickou hodnotou „IsCorrect“
• Nahrajte skóre do databázy

Krok 12: Prihlasovacia stránka

Za týmto účelom môžete skontrolovať obrázky tohto kroku

• Vytvorte html a ts
• Vložte obrázok do html
• Napíšte formulár do html
• Odošlite formulár v TS autorizačnej službe
• Uložte používateľa do databázy

Krok 13: Stiahnite si úplný kód komponentov a služieb

V prípade, že máte problémy, tu je vzácnosť komponentov a služieb