Web-app per l'istruzione: 13 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:00

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.

Passaggio 7: pagina video

Per questo puoi controllare le immagini di questo passaggio

In questo componente scriverai html e ts.

Per questo componente fornirai il link da powToon per riprodurre il video e il componente commento

Passaggio 8: pagina di valutazione

Per questo puoi controllare le immagini di questo passaggio

per questo evento utilizzerai lo stesso componente video con un video diverso in cui spiegherai il processo di valutazione.

Quindi basta avere un pulsante che collega alla pagina concettuale

Passaggio 9: pagina concettuale

Per questo puoi controllare le immagini di questo passaggio

In questa pagina creerai sia html che ts.

• Crea due componenti video con un pulsante
• Crea una serie di due video con un booleano "isCorrect"
• Scrivi una funzione CheckScore()
• Carica il punteggio nel database
• Trasporto alla pagina successiva

Passaggio 10: pagina metodologica

Per questo puoi controllare le immagini di questo passaggio

In questa pagina creerai sia html che ts.

• Utilizzerai dragula, per questo leggi i documenti di dragula
• Crea una serie di video
• Crea l'ordine dei video
• scrivere un punteggio di controllo
• Carica punteggio
• Vai alla pagina successiva

Passaggio 11: pagina funzionale

Per questo puoi controllare le immagini di questo passaggio

In questa pagina creerai sia html che ts.

• Come la pagina concettuale, avrai pulsanti e video come opzioni.
• Nell'html scrivi un problema che l'utente deve risolvere
• Quindi posiziona i video in un array con un booleano "IsCorrect"
• Carica il punteggio nel database

Passaggio 12: pagina di accesso

Per questo puoi controllare le immagini di questo passaggio

• Crea l'html e ts
• Inserisci nell'html l'immagine
• Scrivi il modulo in html
• Invia il modulo nel ts al servizio di autenticazione
• Salva l'utente nel database

Passaggio 13: scaricare il codice completo di componenti e servizi

Nel caso aveste problemi, ecco il rar con i componenti e i servizi