Sadržaj:
- Korak 1: Instalacija
- Korak 2: Kreiranje projekta
- Korak 3: Firebase
- Korak 4: Kreiranje komponenti
- Korak 5: Stranica kursa
- Korak 6: Stranica sa temama
- Korak 7: Video stranica
- Korak 8: Stranica za evaluaciju
- Korak 9: Konceptualna stranica
- Korak 10: Metodološka stranica
- Korak 11: Funkcionalna stranica
- Korak 12: Stranica za prijavu
- Korak 13: Preuzmite potpuni kod komponenti i usluga
2025 Autor: John Day | [email protected]. Zadnja izmjena: 2025-01-23 14:37
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
Preporučuje se:
DIY Robotics - Obrazovna ruka robota sa 6 osa: 6 koraka (sa slikama)
DIY Robotics | Edukativna ruka sa 6 osa: Obrazovna ćelija DIY-Robotics je platforma koja uključuje 6-osnu robotsku ruku, elektroničko upravljačko kolo i softver za programiranje. Ova platforma je uvod u svijet industrijske robotike. Kroz ovaj projekt, DIY-Robotics želi
Ponovno koristite modul web kamere HP WebCam 101 Aka 679257-330 kao opću USB web kameru: 5 koraka
Ponovna upotreba modula web kamere HP WebCam 101 Aka 679257-330 kao općenita USB web kamera: Želim začiniti svoj 14-godišnji Panasonic CF-18 potpuno novom web kamerom, ali Panasonic više ne podržava tu čudesnu mašinu, pa moram upotrijebite sivu tvar za nešto lakše od b & b (piva i hamburgera). Ovo je prvi dio
Creative Robotix - obrazovna platforma - TimEE: 12 koraka (sa slikama)
Creative Robotix - Obrazovna platforma - TimEE: Ova instrukcija gradi alternativnu podlogu za našu obrazovnu platformu Creative Robotix. Prvo konstruirajte platformu do koraka 23, a zatim nastavite izgradnju od sljedećeg koraka. Dizajn za TimEE inspirisan je kreativnom metodom koja se zove micro-S
Creative Robotix - Obrazovna platforma - Robee: 11 koraka (sa slikama)
Creative Robotix - Obrazovna platforma - Robee: Ovo uputstvo gradi alternativnu kožu za našu obrazovnu platformu Creative Robotix. Prvo konstruirajte platformu do koraka 23, a zatim nastavite izgradnju od sljedećeg koraka
IO vodič za Upravljački program web upravljačkog programa Korištenje web stranice uživo i primjeri rada: 8 koraka
IO vodič za IO web upravljačkog programa Korištenje web stranice uživo i primjeri rada: IO vodič za upravljački program web upravljača Korištenje web stranice uživo i primjeri rada Zadnje ažuriranje: 26.7.2015. (Često provjeravajte dok ažuriram ove upute s više detalja i primjera) Pozadina Nedavno sam imao zanimljiv izazov pred mene. Trebao sam