Onderwys-web-app: 13 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:24

Hierdie projek is geskep as 'n opdrag vir die video- en digitale televisiekursus waarin ons die probleem van onderrig en leer op drie vlakke moes oplos: metodologies, funksioneel en konseptueel.

Hierdie projek is geskep as 'n opdrag vir die verloop van video en digitale televisie, waarin ons die probleem van onderrig en leer op hierdie drie vlakke moes oplos: Metodologies, funksioneel en konseptueel. Ons het besluit om hierdie probleem op te los met behulp van 'n webplatform, waarin studente en onderwysers van die kursus kan aanmeld. Die studente kan ook toegang kry tot die onderrigvideo's wat onderwerpe soos codecs en videoformate dek, nadat hulle die konseptuele deel van die onderwerp geleer het, en daarna 'n evaluering kan doen. Die evaluering bestaan uit drie aktiwiteite; elke aktiwiteit het 'n soort video wat onderwerpe bevat wat verband hou met codecs en videoformate, en terselfdertyd het elke aktiwiteit 'n ander doel, so met hierdie platform kan ons die onderrig en evaluering van die metodologiese, funksionele en konseptuele deel bereik. Om dit alles te bereik, het ons Angular 4 en Firebase gebruik, met behulp van biblioteke soos AngularFire5 en dragula. Vir die video's het ons die web-app 'PowToon' gebruik.

Vir hierdie instruksies benodig u:

• NodeJs
• Hoekig4
• Firebase -projek
• N rekenaar

Stap 1: Installasie

• Installeer nodejs 8.9.1 met NPM (Node Package Manager)
• Installeer Angular -CLI (Command Line Interface) tik by die konsole "npm install -g @angular/cli"

Stap 2: Skep van 'n projek

• Skep 'n projek met 'n nuwe my-app '
• Installeer node -pakkette met 'npm install'
• Installeer dragula met "npm install dragula --save"
• Installeer AngularFire2 met "npm install firebase angularfire2 --save"

Stap 3: Firebase

Hiervoor kan u die beelde van hierdie stap nagaan

• Skep 'n Google -rekening
• Klik op "Gaan na die konsole"
• 'n projek te skep
• Gaan na generaal en gryp die kliënt se sleutels

Stap 4: Skep komponente

Hiervoor kan u die beelde van hierdie stap nagaan

Skep die komponente vir die app.

Gebruik "ng g" komponentnaam "" vir elk van die volgende komponente:

• Kursusbladsy
• Onderwerpe Bladsy
• Videopagina
• Evalueringsbladsy
• Metodologiese bladsy
• Konseptuele bladsy
• Funksionele bladsy
• Kommentaar komponent
• admin

Stap 5: Kursusbladsy

Hiervoor kan u die beelde van hierdie stap nagaan

Skep die html en die ts

In die ts skryf u die logika agter die outentisering, as die gebruiker 'n student of 'n administrateur is, en u skryf 'n tabel met die kursusinligting van die student. Hiervoor kan u 'n verifikasiediens en 'n databasisdiens gebruik wat beide aan die einde van hierdie instruksies verskaf word.

Stap 6: Onderwerpsbladsy

Hiervoor kan u die beelde van hierdie stap nagaan

In hierdie komponent skryf u die html en ts.

Soortgelyk aan die kursusbladsy, behalwe dat u nie hoef te kyk of die gebruiker 'n administrateur of student is nie, hoef u slegs verifikasie te skryf en die lys van onderwerpe in die kursus te verskaf.

Stap 7: Videopagina

Hiervoor kan u die beelde van hierdie stap nagaan

In hierdie komponent skryf u die html en ts.

Vir hierdie komponent gee u die skakel van powToon om die video te speel, en die kommentaarkomponent

Stap 8: Evalueringsbladsy

Hiervoor kan u die beelde van hierdie stap nagaan

vir hierdie aspek gebruik u dieselfde videokomponent met 'n ander video waarin u die evalueringsproses sal verduidelik.

Het dan net 'n knoppie wat skakel na die konseptuele bladsy

Stap 9: Konseptuele bladsy

Hiervoor kan u die beelde van hierdie stap nagaan

Op hierdie bladsy skep u beide html en ts.

• Skep twee videokomponente met 'n knoppie
• Skep 'n skikking van twee video's met 'n booleaanse "isCorrect"
• Skryf 'n CheckScore () -funksie
• Laai die telling na die databasis op
• Vervoer na die volgende bladsy

Stap 10: Metodologiese bladsy

Hiervoor kan u die beelde van hierdie stap nagaan

Op hierdie bladsy skep u beide html en ts.

• U sal dragula gebruik, daarvoor lees u die dokumente van dragula
• Skep 'n reeks video's
• Skep die volgorde van video's
• skryf 'n tjek telling
• Laai telling op
• Gaan na die volgende bladsy

Stap 11: funksionele bladsy

Hiervoor kan u die beelde van hierdie stap nagaan

Op hierdie bladsy skep u beide html en ts.

• Net soos die konseptuele bladsy, sal u knoppies en video's as opsies hê.
• Skryf 'n probleem in die html wat die gebruiker kan oplos
• Plaas dan die video's in 'n skikking met 'n booleaanse 'IsCorrect'
• Laai die telling na die databasis op

Stap 12: Aanmeldbladsy

Hiervoor kan u die beelde van hierdie stap nagaan

• Skep die html en ts
• Plaas die prent in die html
• Skryf die vorm in die html
• Dien die vorm in die ts by die verifikasiediens in
• Stoor die gebruiker in die databasis

Stap 13: Laai die volledige kode van komponente en dienste af

As u probleme ondervind, is dit die rar met die komponente en dienste