Obrazovna web-aplikacija: 13 koraka

2025 Autor: John Day | [email protected]. Zadnja promjena: 2025-01-23 14:47

Ovaj projekt nastao je kao zadatak za tečaj video i digitalne televizije u kojem smo morali riješiti problem poučavanja i učenja na tri razine: metodološkoj, funkcionalnoj i konceptualnoj.

Ovaj projekt nastao je kao zadatak za tečaj video i digitalne televizije, u kojem smo morali riješiti problem poučavanja i učenja na ove tri razine: metodološkoj, funkcionalnoj i konceptualnoj. Odlučili smo riješiti ovaj problem pomoću web platforme, u koje se studenti i nastavnici predmeta mogu prijaviti. Studenti također mogu pristupiti nastavnim videozapisima koji pokrivaju teme poput kodeka i video formata, nakon što nauče konceptualni dio teme, mogu pristupiti evaluaciji. Evaluacija se sastoji od tri aktivnosti; svaka će aktivnost imati svojevrsne videozapise s poučnim temama vezanim uz kodeke i video formate, a istovremeno svaka aktivnost ima različitu svrhu, pa s ovom platformom možemo postići poučavanje i vrednovanje metodološkog, funkcionalnog i konceptualnog dijela. Da bismo sve to postigli, koristili smo Angular 4 i Firebase, koristeći biblioteke poput AngularFire5 i dragula. Za video zapise koristili smo web-aplikaciju "PowToon".

Za ovu instrukciju trebat će vam:

• NodeJs
• Kutni4
• Firebase projekt
• Računalo

Korak 1: Instalacija

• Instalirajte nodejs 8.9.1 s NPM -om (Upravitelj paketa čvorova)
• Instalirajte Angular -CLI (sučelje naredbenog retka) upisujući na konzoli "npm install -g @angular/cli"

Korak 2: Izrada projekta

• Izradite projekt pomoću "ng new my-app"
• Instalirajte pakete čvorova s "npm install"
• Instalirajte dragulu s "npm install dragula --save"
• Instalirajte AngularFire2 s "npm install firebase angularfire2 --save"

Korak 3: Firebase

Za to možete provjeriti slike ovog koraka

• Izradite google račun
• Kliknite na "Idi na konzolu"
• stvoriti projekt
• Idite na općenito i uzmite klijentske ključeve

Korak 4: Stvaranje komponenti

Za to možete provjeriti slike ovog koraka

Izradite komponente za aplikaciju.

Korištenje "ng g c" naziva komponente "" za svaku od sljedećih komponenti:

• Stranica tečaja
• Stranica s temama
• Video stranica
• Evaluacijska stranica
• Metodološka stranica
• Konceptualna stranica
• Funkcionalna stranica
• Komponenta komentara
• Admin

Korak 5: Stranica tečaja

Za to možete provjeriti slike ovog koraka

Izradite html i ts

U ts ćete napisati logiku iza autentifikacije, ako je korisnik student ili administrator, a vi ćete napisati tablicu s podacima o tečaju od studenta. Za to možete koristiti uslugu provjere autentičnosti i uslugu baze podataka koja se nalazi na kraju ovog uputstva.

Korak 6: Stranica s temama

Za to možete provjeriti slike ovog koraka

U ovoj komponenti ćete napisati html i ts.

Slično stranici sa tečajem, osim što ne morate provjeravati je li korisnik administrator ili student, samo ćete morati napisati provjeru autentičnosti i dostaviti popise tema na tečaju.

Korak 7: Video stranica

Za to možete provjeriti slike ovog koraka

U ovoj komponenti ćete napisati html i ts.

Za ovu komponentu ćete navesti vezu od powToon -a za reprodukciju videozapisa i komponentu komentara

Korak 8: Stranica za procjenu

Za to možete provjeriti slike ovog koraka

za ovu ćete komponentu koristiti istu video komponentu s različitim video zapisom u kojem ćete objasniti postupak ocjenjivanja.

Zatim samo pritisnite gumb koji povezuje s idejnom stranicom

Korak 9: Konceptualna stranica

Za to možete provjeriti slike ovog koraka

Na ovoj stranici stvorit ćete html i ts.

• Gumbom izradite dvije video komponente
• Izradite niz od dva videozapisa s logičkim "isCorrect"
• Napišite funkciju CheckScore ()
• Učitajte rezultat u bazu podataka
• Prijenos na sljedeću stranicu

10. korak: Metodološka stranica

Za to možete provjeriti slike ovog koraka

Na ovoj stranici stvorit ćete html i ts.

• Koristit ćete dragulu, za to pročitajte dokumente dragule
• Stvorite niz video zapisa
• Kreirajte redoslijed videozapisa
• napišite kontrolni rezultat
• Prijenos rezultata
• Idite na sljedeću stranicu

Korak 11: Funkcionalna stranica

Za to možete provjeriti slike ovog koraka

Na ovoj stranici stvorit ćete html i ts.

• Isto kao i konceptualna stranica, kao opcije ćete imati gumbe i videozapise.
• U html napišite problem koji će korisnik riješiti
• Zatim postavite videozapise u niz s logičkim "IsCorrect"
• Učitajte rezultat u bazu podataka

Korak 12: Stranica za prijavu

Za to možete provjeriti slike ovog koraka

• Izradite html i ts
• Postavite sliku u html
• Napišite obrazac u html -u
• Pošaljite obrazac u ts servisu za autorizaciju
• Spremite korisnika u bazu podataka

Korak 13: Preuzmite cijeli kod komponenti i usluga

U slučaju da ste imali problema, evo rara sa komponentama i uslugama