Aplicație web pentru educație: 13 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

Acest proiect a fost creat ca o sarcină pentru cursul video și de televiziune digitală în care a trebuit să rezolvăm problema predării și învățării în trei niveluri: metodologic, funcțional și conceptual.

Acest proiect a fost creat ca o misiune pentru cursul de televiziune video și digitală, în care a trebuit să rezolvăm problema predării și învățării în aceste trei niveluri: metodologic, funcțional și conceptual. Am decis să rezolvăm această problemă folosind o platformă web, în care elevii și profesorii cursului se pot autentifica. Studenții pot accesa și videoclipurile didactice care acoperă subiecte precum codecuri și formate video, după ce au învățat partea conceptuală a subiectului, pot continua să facă o evaluare. Evaluarea constă din trei activități; fiecare activitate va avea un fel de videoclipuri care predă subiecte legate de codecuri și formate video și, în același timp, fiecare activitate are un scop diferit, astfel încât cu această platformă putem realiza predarea și evaluarea părții metodologice, funcționale și conceptuale. Pentru a realiza toate acestea, am folosit Angular 4 și Firebase, folosind biblioteci precum AngularFire5 și dragula. Pentru videoclipuri am folosit aplicația web „PowToon”.

Pentru acest instructiv, veți avea nevoie de:

• NodeJs
• Unghiular4
• Proiect Firebase
• Un calculator

Pasul 1: Instalare

• Instalați nodejs 8.9.1 cu NPM (Node Package Manager)
• Instalați tastarea Angular-CLI (Command Line Interface) la consola „npm install -g @ angular / cli”

Pasul 2: Crearea proiectului

• Creați un proiect folosind „ng my-app new”
• Instalați pachetele de noduri cu „npm install”
• Instalați dragula cu „npm install dragula --save”
• Instalați AngularFire2 cu „npm instalați firebase angularfire2 --save”

Pasul 3: Firebase

Pentru aceasta puteți verifica imaginile acestui pas

• Creați un cont google
• Faceți clic pe „Accesați consola”
• creați un proiect
• Accesați pagina generală și apucați cheile clientului

Pasul 4: Crearea componentelor

Pentru aceasta puteți verifica imaginile acestui pas

Creați componentele pentru aplicație.

Utilizarea numelui componentei "ng g c" pentru fiecare dintre următoarele componente:

• Pagina cursului
• Pagina Subiecte
• Pagina video
• Pagina de evaluare
• Pagina metodologică
• Pagina conceptuală
• Pagina funcțională
• Componenta comentarii
• Administrator

Pasul 5: Pagina cursului

Pentru aceasta puteți verifica imaginile acestui pas

Creați html și ts

În TS veți scrie logica din spatele autentificării, dacă utilizatorul este student sau administrator și veți scrie un tabel cu informațiile despre curs de la student. Pentru aceasta puteți utiliza un serviciu de autentificare și un serviciu de baze de date, ambele furnizate la sfârșitul acestui instructable.

Pasul 6: Pagina Subiecte

Pentru aceasta puteți verifica imaginile acestui pas

În această componentă veți scrie html și ts.

Similar cu pagina cursului, cu excepția cazului în care nu trebuie să verificați dacă utilizatorul este administrator sau student, va trebui doar să scrieți autentificare și să furnizați listele de subiecte din curs.

Pasul 7: Pagina video

Pentru aceasta puteți verifica imaginile acestui pas

În această componentă veți scrie html și ts.

Pentru această componentă veți furniza linkul de la powToon pentru a reda videoclipul și componenta de comentarii

Pasul 8: Pagina de evaluare

Pentru aceasta puteți verifica imaginile acestui pas

pentru acest moment vei folosi aceeași componentă video cu un videoclip diferit în care vei explica procesul de evaluare.

Apoi, aveți doar un buton care leagă pagina conceptuală

Pasul 9: Pagina conceptuală

Pentru aceasta puteți verifica imaginile acestui pas

În această pagină veți crea atât html, cât și ts.

• Creați două componente video cu un buton
• Creați o matrice de două videoclipuri cu un text „isCorrect” boolean
• Scrieți o funcție CheckScore ()
• Încărcați scorul în baza de date
• Transport la pagina următoare

Pasul 10: Pagina metodologică

Pentru aceasta puteți verifica imaginile acestui pas

În această pagină veți crea atât html, cât și ts.

• Veți folosi dragula, pentru aceasta citiți documentele dragula
• Creați o serie de videoclipuri
• Creați ordinea videoclipurilor
• scrie un Verifică Scorul
• Scor de încărcare
• Accesați pagina următoare

Pasul 11: Pagina funcțională

Pentru aceasta puteți verifica imaginile acestui pas

În această pagină veți crea atât html, cât și ts.

• La fel ca pagina conceptuală, veți avea butoane și videoclipuri ca opțiuni.
• În html scrieți o problemă pentru a fi rezolvată de utilizator
• Apoi plasați videoclipurile într-o matrice cu un „IsCorrect” boolean
• Încărcați scorul în baza de date

Pasul 12: Pagina de autentificare

Pentru aceasta puteți verifica imaginile acestui pas

• Creați html și ts
• Plasați în html imaginea
• Scrieți formularul în html
• Trimiteți formularul în ts către serviciul de autentificare
• Salvați utilizatorul în baza de date

Pasul 13: Descărcați codul complet al componentelor și serviciilor

În cazul în care ați avut probleme, iată rarul cu componentele și serviciile