Hariduse veebirakendus: 13 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:46

See projekt loodi video- ja digitaaltelevisiooni kursuse ülesandena, kus pidime lahendama õpetamise ja õppimise probleemi kolmel tasandil: metoodiline, funktsionaalne ja kontseptuaalne.

See projekt loodi video- ja digitaaltelevisiooni kursuse ülesandena, mille käigus pidime lahendama õpetamise ja õppimise probleemi nendel kolmel tasandil: metoodiline, funktsionaalne ja kontseptuaalne. Otsustasime selle probleemi lahendada veebiplatvormi abil, Kursuse õpilased ja õpetajad saavad sisse logida. Õpilased pääsevad juurde ka õppevideotele, mis hõlmavad selliseid teemasid nagu koodekid ja videovormingud. Pärast teema kontseptuaalse osa õppimist saavad nad jätkata hindamist. Hindamine koosneb kolmest tegevusest; igal tegevusel on omamoodi videod, mis õpetavad kodekite ja videovormingutega seotud teemasid ning samal ajal on igal tegevusel erinev eesmärk, nii et selle platvormiga saame saavutada metoodilise, funktsionaalse ja kontseptuaalse osa õpetamise ja hindamise. Selle kõige saavutamiseks kasutasime Angular 4 ja Firebase, kasutades selliseid teeke nagu AngularFire5 ja dragula. Videote jaoks kasutasime veebirakendust "PowToon".

Selle juhendamise jaoks vajate:

• Sõlmed
• Nurk4
• Firebase'i projekt
• Arvuti

Samm: paigaldamine

• Installige nodejs 8.9.1 koos NPM -iga (Node Package Manager)
• Installige Angular -CLI (käsurealiides), kirjutades konsooli "npm install -g @angular/cli"

2. samm: projekti loomine

• Projekti loomine "uue minu rakenduse" abil
• Installige sõlmepaketid "npm install" abil
• Installige dragula "npm install dragula --save" abil
• Installige AngularFire2 funktsiooni "npm install firebase angularfire2 --save" abil

3. toiming: Firebase

Selleks saate vaadata selle sammu pilte

• Looge Google'i konto
• Klõpsake "Mine konsooli"
• projekti luua
• Minge jaotisse Üldine ja haarake kliendivõtmed

4. samm: komponentide loomine

Selleks saate vaadata selle sammu pilte

Looge rakenduse komponendid.

Kasutades "ng g c" komponendi nime "" iga järgmise komponendi jaoks:

• Kursuse leht
• Teemade leht
• Video leht
• Hindamisleht
• Metoodiline leht
• Kontseptuaalne leht
• Funktsionaalne leht
• Kommentaaride komponent
• Administraator

Samm: kursuse leht

Selleks saate vaadata selle sammu pilte

Looge html ja ts

TS -is kirjutate autoriseerimise loogika, kui kasutaja on õpilane või administraator, ja kirjutate tabeli õpilase kursuse teabega. Selleks saate kasutada autentimisteenust ja andmebaasiteenust, mis on mõlemad antud juhendi lõpus.

6. toiming: teemade leht

Selleks saate vaadata selle sammu pilte

Sellesse komponenti kirjutate html ja ts.

Sarnaselt kursuse lehele, välja arvatud juhul, kui te ei pea kontrollima, kas kasutaja on administraator või üliõpilane, peate kirjutama ainult autentimise ja esitama kursuse teemade loendid.

Samm: videoleht

Selleks saate vaadata selle sammu pilte

Sellesse komponenti kirjutate html ja ts.

Selle komponendi jaoks esitate video esitamiseks lingi PowToonist ja kommentaarikomponendi

8. samm: hindamisleht

Selleks saate vaadata selle sammu pilte

selle sündmuse puhul kasutate sama videokomponenti erineva videoga, milles selgitate hindamisprotsessi.

Siis on lihtsalt nupp, mis viitab kontseptuaalsele lehele

9. samm: kontseptuaalne leht

Selleks saate vaadata selle sammu pilte

Sellel lehel loote nii html kui ka ts.

• Looge nupuga kaks videokomponenti
• Looge kahest videost koosnev tõeväärtusega „isCorrect”
• Kirjutage funktsioon CheckScore ()
• Laadige skoor andmebaasi üles
• Transport järgmisele lehele

10. samm: metoodiline leht

Selleks saate vaadata selle sammu pilte

Sellel lehel loote nii html kui ka ts.

• Kasutate dragulat, selleks lugege dragula dokumente
• Looge hulgaliselt videoid
• Looge videote järjestus
• kirjutage tšeki skoor
• Üleslaadimise skoor
• Mine järgmisele lehele

11. samm: funktsionaalne leht

Selleks saate vaadata selle sammu pilte

Sellel lehel loote nii html kui ka ts.

• Sama, mis kontseptuaalsel lehel, on teil valikuna nupud ja videod.
• Kirjutage html -s ülesanne, mille kasutaja peab lahendama
• Seejärel asetage videod massiivi, kasutades tõeväärtust "IsCorrect"
• Laadige skoor andmebaasi üles

12. samm: sisselogimisleht

Selleks saate vaadata selle sammu pilte

• Looge html ja ts
• Asetage pilt html -i
• Kirjutage vorm html -i
• Esitage vorm ts -is autentimisteenusele
• Salvestage kasutaja andmebaasi

Samm: laadige alla komponentide ja teenuste täielik kood

Kui teil on probleeme, on siin komponentide ja teenustega seotud rar