Spletna aplikacija za izobraževanje: 13 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:03

Ta projekt je nastal kot naloga za tečaj video in digitalne televizije, v katerem smo morali rešiti problem poučevanja in učenja na treh ravneh: metodološki, funkcionalni in konceptualni.

Ta projekt je nastal kot naloga za tečaj video in digitalne televizije, v katerem smo morali rešiti problem poučevanja in učenja na teh treh ravneh: metodološki, funkcionalni in konceptualni. v kateri se lahko prijavljajo študentje in učitelji predmeta. Študenti lahko dostopajo tudi do učnih videov, ki pokrivajo teme, kot so kodeki in video formati, potem ko se naučijo konceptualnega dela teme, lahko nadaljujejo z ocenjevanjem. Ocenjevanje je sestavljeno iz treh dejavnosti; vsaka dejavnost bo imela svojevrstne video posnetke, ki poučujejo teme, povezane s kodeki in video formati, hkrati pa ima vsaka dejavnost drugačen namen, zato lahko s to platformo dosežemo poučevanje in vrednotenje metodološkega, funkcionalnega in konceptualnega dela. Za dosego vsega tega smo uporabili Angular 4 in Firebase z uporabo knjižnic, kot sta AngularFire5 in dragula. Za video posnetke smo uporabili spletno aplikacijo "PowToon".

Za to navodilo boste potrebovali:

• NodeJs
• Kotni4
• Projekt Firebase
• Računalnik

1. korak: Namestitev

• Namestite nodejs 8.9.1 z NPM (Node Package Manager)
• Namestite Angular -CLI (vmesnik ukazne vrstice) in vnesite na konzolo "npm install -g @angular/cli"

2. korak: Ustvarjanje projekta

• Ustvarite projekt z uporabo "ng new my-app"
• Namestite pakete vozlišč z "npm install"
• Namestite dragulo z "npm install dragula --save"
• Namestite AngularFire2 z "npm install firebase angularfire2 --save"

3. korak: Firebase

Za to lahko preverite slike tega koraka

• Ustvarite google račun
• Kliknite "Pojdi na konzolo"
• ustvarite projekt
• Pojdite na splošno in vzemite odjemalčeve ključe

4. korak: Ustvarjanje komponent

Za to lahko preverite slike tega koraka

Ustvarite komponente za aplikacijo.

Uporaba "ng g c" ime komponente "" za vsako od naslednjih komponent:

• Stran tečaja
• Stran s temami
• Video stran
• Stran za ocenjevanje
• Metodološka stran
• Konceptualna stran
• Funkcionalna stran
• Komponenta komentarjev
• Admin

5. korak: Stran tečaja

Za to lahko preverite slike tega koraka

Ustvarite html in ts

V ts boste napisali logiko za preverjanje pristnosti, če je uporabnik študent ali skrbnik, in napisali tabelo s podatki o tečaju od študenta. Za to lahko uporabite storitev preverjanja pristnosti in storitev zbirke podatkov, ki sta na voljo na koncu tega navodila.

6. korak: Stran s temami

Za to lahko preverite slike tega koraka

V to komponento boste zapisali html in ts.

Podobno kot na strani tečaja, razen če vam ni treba preverjati, ali je uporabnik administrator ali študent, boste morali samo napisati preverjanje pristnosti in navesti sezname tem v predmetu.

Korak: Video stran

Za to lahko preverite slike tega koraka

V to komponento boste zapisali html in ts.

Za to komponento boste zagotovili povezavo od powToon za predvajanje videoposnetka in komponento komentarja

8. korak: Stran za ocenjevanje

Za to lahko preverite slike tega koraka

za to komponento boste uporabili isto video komponento z različnim video posnetkom, v katerem boste razložili postopek ocenjevanja.

Nato imejte samo gumb, ki vodi do konceptualne strani

9. korak: Konceptualna stran

Za to lahko preverite slike tega koraka

Na tej strani boste ustvarili html in ts.

• Ustvarite dve video komponenti z gumbom
• Ustvarite niz dveh videoposnetkov z logično vrednostjo "isCorrect"
• Napišite funkcijo CheckScore ()
• Naložite rezultat v bazo podatkov
• Prenos na naslednjo stran

10. korak: Metodološka stran

Za to lahko preverite slike tega koraka

Na tej strani boste ustvarili html in ts.

• Uporabili boste dragulo, za to preberite dokumente dragule
• Ustvarite niz videoposnetkov
• Ustvarite vrstni red videoposnetkov
• napišite kontrolni rezultat
• Naloži oceno
• Pojdi na naslednjo stran

Korak: Funkcionalna stran

Za to lahko preverite slike tega koraka

Na tej strani boste ustvarili html in ts.

• Enako kot konceptualna stran boste imeli gumbe in videoposnetke kot možnosti.
• V html napišite težavo, ki jo mora uporabnik rešiti
• Nato videoposnetke postavite v niz z logično vrednostjo »IsCorrect«
• Naložite rezultat v bazo podatkov

Korak: Prijava stran

Za to lahko preverite slike tega koraka

• Ustvarite html in ts
• Postavite sliko v html
• Obrazec zapišite v html
• Predložite obrazec v ts storitvi za avtorizacijo
• Shranite uporabnika v bazo podatkov

Korak: Prenesite celotno kodo komponent in storitev

Če ste imeli težave, tukaj je rar s komponentami in storitvami