Obrazovna web-aplikacija: 13 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:05

Ovaj projekt je nastao kao zadatak za tečaj video i digitalne televizije u kojem smo morali riješiti problem nastave i učenja na tri nivoa: metodološkom, funkcionalnom i konceptualnom.

Ovaj projekt je nastao kao zadatak za tečaj video i digitalne televizije, u kojem smo morali riješiti problem nastave i učenja na ova tri nivoa: metodološkom, funkcionalnom i konceptualnom. Odlučili smo riješiti ovaj problem pomoću web platforme, u koje se studenti i nastavnici kursa mogu prijaviti. Studenti mogu pristupiti nastavnim video zapisima koji pokrivaju teme kao što su kodeci i video formati, nakon što nauče konceptualni dio teme, mogu pristupiti evaluaciji. Evaluacija se sastoji od tri aktivnosti; svaka aktivnost će imati svojevrsne video zapise koji podučavaju teme vezane za kodeke i video formate, a istovremeno svaka aktivnost ima različitu svrhu, pa pomoću ove platforme možemo postići podučavanje i vrednovanje metodološkog, funkcionalnog i konceptualnog dijela. Da bismo sve ovo 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
• Angular4
• Firebase projekat
• Kompjuter

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: Kreiranje projekta

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

Korak 3: Firebase

Za ovo možete provjeriti slike ovog koraka

• Kreirajte google nalog
• Kliknite na "Idi na konzolu"
• kreirati projekat
• Idite na općenito i uzmite ključeve klijenta

Korak 4: Kreiranje komponenti

Za ovo možete provjeriti slike ovog koraka

Kreirajte komponente za aplikaciju.

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

• Stranica kursa
• Stranica sa temama
• Video stranica
• Evaluation Page
• Metodološka stranica
• Konceptualna stranica
• Funkcionalna stranica
• Komponenta komentara
• Admin

Korak 5: Stranica kursa

Za ovo možete provjeriti slike ovog koraka

Kreirajte html i ts

U ts ćete napisati logiku iza autentifikacije, ako je korisnik student ili administrator, a vi ćete napisati tabelu sa podacima o kursu 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 sa temama

Za ovo možete provjeriti slike ovog koraka

U ovoj komponenti ćete napisati html i ts.

Slično stranici kursa, osim što ne morate provjeravati je li korisnik administrator ili student, samo ćete morati napisati provjeru autentičnosti i dostaviti liste tema na kursu.

Korak 7: Video stranica

Za ovo možete provjeriti slike ovog koraka

U ovoj komponenti ćete napisati html i ts.

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

Korak 8: Stranica za evaluaciju

Za ovo možete provjeriti slike ovog koraka

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

Zatim samo pritisnite dugme koje vodi do konceptualne stranice

Korak 9: Konceptualna stranica

Za ovo možete provjeriti slike ovog koraka

Na ovoj stranici ćete stvoriti html i ts.

• Kreirajte dvije video komponente pritiskom na dugme
• Kreirajte niz od dva videozapisa s logičkim "isCorrect"
• Napišite funkciju CheckScore ()
• Učitajte rezultat u bazu podataka
• Prijevoz na sljedeću stranicu

Korak 10: Metodološka stranica

Za ovo možete provjeriti slike ovog koraka

Na ovoj stranici ćete stvoriti i html i ts.

• Koristit ćete dragulu, za to pročitajte dokumente dragule
• Kreirajte niz video zapisa
• Kreirajte redoslijed videozapisa
• napišite Čekovni rezultat
• Upload Score
• Idi na sljedeću stranicu

Korak 11: Funkcionalna stranica

Za ovo možete provjeriti slike ovog koraka

Na ovoj stranici ćete stvoriti html i ts.

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

Korak 12: Stranica za prijavu

Za ovo možete provjeriti slike ovog koraka

• Kreirajte html i ts
• Postavite sliku u html
• Napišite obrazac u html -u
• Pošaljite obrazac u ts servisu za autorizaciju
• Sačuvajte korisnika u bazi podataka

Korak 13: Preuzmite potpuni kod komponenti i usluga

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