Utbildningswebbapp: 13 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:38

Detta projekt skapades som ett uppdrag för video- och digital -tv -kursen där vi var tvungna att lösa problemet med undervisning och lärande på tre nivåer: Metodologisk, funktionell och konceptuell.

Detta projekt skapades som ett uppdrag för video- och digital -tv, där vi var tvungna att lösa problemet med undervisning och lärande på dessa tre nivåer: Metodologiskt, funktionellt och konceptuellt. Vi bestämde oss för att lösa detta problem med en webbplattform, där studenter och lärare i kursen kan logga in. Studenterna kan också få tillgång till undervisningsvideor som täcker ämnen som codecs och videoformat, efter att de har lärt sig den konceptuella delen av ämnet de kan fortsätta göra en utvärdering. Utvärderingen består av tre aktiviteter; varje aktivitet kommer att ha ett slags videor som undervisar ämnen relaterade till codecs och videoformat och samtidigt har varje aktivitet ett annat syfte, så med denna plattform kan vi uppnå undervisning och utvärdering av den metodologiska, funktionella och konceptuella delen. För att uppnå allt detta använde vi Angular 4 och Firebase, med hjälp av bibliotek som AngularFire5 och dragula. För videorna använde vi webbappen "PowToon".

För detta instruerbara behöver du:

• NodeJs
• Vinklad4
• Firebase -projekt
• En dator

Steg 1: Installation

• Installera nodejs 8.9.1 med NPM (Node Package Manager)
• Installera Angular -CLI (Command Line Interface) genom att skriva på konsolen "npm install -g @angular/cli"

Steg 2: Skapa projekt

• Skapa ett projekt med "ng new my-app"
• Installera nodpaket med "npm install"
• Installera dragula med "npm install dragula --save"
• Installera AngularFire2 med "npm install firebase angularfire2 --save"

Steg 3: Firebase

För detta kan du kontrollera bilderna i detta steg

• Skapa ett Google -konto
• Klicka på "Gå till konsolen"
• skapa ett projekt
• Gå till general och ta tag i klientnycklarna

Steg 4: Skapa komponenter

För detta kan du kontrollera bilderna i detta steg

Skapa komponenterna för appen.

Använda "ng g" komponentnamn "" för var och en av följande komponenter:

• Kurs sida
• Ämnesida
• Videosida
• Utvärderingssida
• Metodisk sida
• Konceptuell sida
• Funktionell sida
• Kommentarer komponent
• Administration

Steg 5: Kurssida

För detta kan du kontrollera bilderna i detta steg

Skapa html och ts

I ts skriver du logiken bakom autentiseringen, om användaren är student eller administratör, och du skriver en tabell med kursinformation från studenten. För det kan du använda en autentiseringstjänst och en databastjänst som båda tillhandahålls i slutet av denna instruerbara.

Steg 6: Ämnesida

För detta kan du kontrollera bilderna i detta steg

I den här komponenten skriver du html och ts.

I likhet med kurssidan förutom att du inte behöver kontrollera om användaren är administratör eller student, behöver du bara skriva autentisering och tillhandahålla listor över ämnen i kursen.

Steg 7: Videosida

För detta kan du kontrollera bilderna i detta steg

I den här komponenten skriver du html och ts.

För den här komponenten tillhandahåller du länken från powToon för att spela upp videon och kommentarkomponenten

Steg 8: Utvärderingssida

För detta kan du kontrollera bilderna i detta steg

för den här komponenten kommer du att använda samma videokomponent med en annan video där du kommer att förklara utvärderingsprocessen.

Sedan är det bara att ha en knapp som länkar till den konceptuella sidan

Steg 9: Konceptuell sida

För detta kan du kontrollera bilderna i detta steg

På den här sidan skapar du både html och ts.

• Skapa två videokomponenter med en knapp
• Skapa en array med två videor med en booleskt "isCorrect"
• Skriv en CheckScore () -funktion
• Ladda upp poängen till databasen
• Transport till nästa sida

Steg 10: Metodologisk sida

För detta kan du kontrollera bilderna i detta steg

På den här sidan skapar du både html och ts.

• Du kommer att använda dragula, för att läsa dokumenten om dragula
• Skapa en rad videor
• Skapa ordning på videor
• skriva en checkpoäng
• Ladda upp poäng
• Gå till nästa sida

Steg 11: Funktionell sida

För detta kan du kontrollera bilderna i detta steg

På den här sidan skapar du både html och ts.

• Samma som den konceptuella sidan du kommer att ha knappar och videor som alternativ.
• Skriv ett problem för användaren att lösa i html
• Placera sedan videorna i en array med en booleskt "IsCorrect"
• Ladda upp poängen till databasen

Steg 12: Inloggningssida

För detta kan du kontrollera bilderna i detta steg

• Skapa html och ts
• Placera bilden i html
• Skriv formuläret i html
• Skicka formuläret i ts till auktoritetstjänsten
• Spara användaren i databasen

Steg 13: Ladda ner hela koden för komponenter och tjänster

Om du hade problem, här är det sällsynta med komponenterna och tjänsterna