Web-app per l'istruzione: 13 passaggi

Sommario:

Passaggio 1: installazione
Passaggio 2: creazione del progetto
Passaggio 3: Firebase
Passaggio 4: creazione di componenti
Passaggio 5: pagina del corso
Passaggio 6: pagina degli argomenti
Passaggio 7: pagina video
Passaggio 8: pagina di valutazione
Passaggio 9: pagina concettuale
Passaggio 10: pagina metodologica
Passaggio 11: pagina funzionale
Passaggio 12: pagina di accesso
Passaggio 13: scaricare il codice completo di componenti e servizi

2025 Autore: John Day | [email protected]. Ultima modifica: 2025-01-13 06:57

Questo progetto nasce come incarico per il corso di video e televisione digitale in cui dovevamo risolvere il problema dell'insegnamento e dell'apprendimento in tre livelli: Metodologico, Funzionale e concettuale.

Questo progetto nasce come incarico per il corso di video e televisione digitale, in cui dovevamo risolvere il problema dell'insegnamento e dell'apprendimento in questi tre livelli: Metodologico, Funzionale e concettuale. Abbiamo deciso di risolvere questo problema utilizzando una piattaforma web, in cui possono accedere studenti e docenti del corso. Gli studenti possono anche accedere ai video didattici che trattano argomenti come codec e formati video, dopo aver appreso la parte concettuale dell'argomento possono procedere a fare una valutazione. La valutazione si compone di tre attività; ogni attività avrà una sorta di video che insegna argomenti relativi a codec e formati video e allo stesso tempo ogni attività ha uno scopo diverso, quindi con questa piattaforma possiamo ottenere l'insegnamento e la valutazione della parte metodologica, funzionale e concettuale. Per ottenere tutto ciò, abbiamo utilizzato Angular 4 e Firebase, utilizzando librerie come AngularFire5 e dragula. Per i video abbiamo utilizzato la web-app "PowToon".

Per questo istruibile avrai bisogno di:

NodeJs
Angolare4
Progetto Firebase
Un computer

Passaggio 1: installazione

Installa nodejs 8.9.1 con NPM (Node Package Manager)
Installa Angular-CLI (Command Line Interface) digitando alla console "npm install -g @angular/cli"

Passaggio 2: creazione del progetto

Crea un progetto usando "ng new my-app"
Installa i pacchetti del nodo con "npm install"
Installa dragula con "npm install dragula --save"
Installa AngularFire2 con "npm install firebase angularfire2 --save"

Passaggio 3: Firebase

Per questo puoi controllare le immagini di questo passaggio

Crea un account Google
Fare clic su "Vai alla console"
creare un progetto
Vai in generale e prendi le chiavi del cliente

Passaggio 4: creazione di componenti

Per questo puoi controllare le immagini di questo passaggio

Creare i componenti per l'app.

Utilizzo di "ng g c "nome componente" " per ciascuno dei seguenti componenti:

Pagina del corso
Pagina degli argomenti
Pagina video
Pagina di valutazione
Pagina metodologica
Pagina concettuale
Pagina funzionale
Componente commenti
amministratore

Passaggio 5: pagina del corso

Per questo puoi controllare le immagini di questo passaggio

Crea l'html e il ts

Nel ts scriverai la logica dietro l'autenticazione, se l'utente è uno studente o un Admin, e scriverai una tabella con le informazioni sul corso dello studente. Per questo è possibile utilizzare un servizio di autenticazione e un servizio di database entrambi forniti alla fine di questo tutorial.

Passaggio 6: pagina degli argomenti

Per questo puoi controllare le immagini di questo passaggio

In questo componente scriverai html e ts.

Simile alla pagina del corso tranne per il fatto che non devi controllare se l'utente è un amministratore o uno studente, dovrai solo scrivere l'autenticazione e fornire gli elenchi degli argomenti del corso.