Satura rādītājs:

Izglītības tīmekļa lietotne: 13 soļi
Izglītības tīmekļa lietotne: 13 soļi
Anonim
Izglītības tīmekļa lietotne
Izglītības tīmekļa lietotne

Šis projekts tika izveidots kā uzdevums video un digitālās televīzijas kursam, kurā mums bija jāatrisina mācīšanas un mācīšanās problēma trīs līmeņos: metodiskā, funkcionālā un konceptuālā.

Šis projekts tika izveidots kā uzdevums video un digitālās televīzijas kursam, kurā mums bija jāatrisina mācīšanas un mācīšanās problēma šajos trīs līmeņos: metodoloģiskā, funkcionālā un konceptuālā. Mēs nolēmām atrisināt šo problēmu, izmantojot tīmekļa platformu, kursa studenti un skolotāji var pieteikties. Studenti var piekļūt arī mācību videoklipiem, kas aptver tādas tēmas kā kodeki un video formāti, pēc tam, kad ir apguvuši tēmas konceptuālo daļu, viņi var turpināt novērtēšanu. Novērtējums sastāv no trim aktivitātēm; katrai aktivitātei būs sava veida video, kas māca tēmas, kas saistītas ar kodekiem un video formātiem, un vienlaikus katrai aktivitātei ir atšķirīgs mērķis, tāpēc ar šo platformu mēs varam sasniegt metodiskās, funkcionālās un konceptuālās daļas mācīšanu un novērtēšanu. Lai to visu sasniegtu, mēs izmantojām Angular 4 un Firebase, izmantojot tādas bibliotēkas kā AngularFire5 un dragula. Videoklipiem mēs izmantojām tīmekļa lietotni "PowToon".

Lai iegūtu šo pamācību, jums būs nepieciešams:

  • Mezgli
  • Leņķiskais 4
  • Firebase projekts
  • Dators

1. darbība: uzstādīšana

  • Instalējiet nodejs 8.9.1 ar NPM (Node Package Manager)
  • Instalējiet Angular -CLI (komandrindas interfeisu), ierakstot konsolē "npm install -g @angular/cli"

2. darbība: projekta izveide

  • Izveidojiet projektu, izmantojot “jaunu manu lietotni”
  • Instalējiet mezglu pakotnes ar "npm install"
  • Instalējiet dragula ar "npm install dragula --save"
  • Instalējiet AngularFire2 ar "npm install firebase angularfire2 -save"

3. darbība. Firebase

Firebase
Firebase

Šim nolūkam varat pārbaudīt šīs darbības attēlus

  • Izveidojiet Google kontu
  • Noklikšķiniet uz "Doties uz konsoli"
  • izveidot projektu
  • Dodieties uz vispārīgo un paņemiet klienta atslēgas

4. solis: komponentu izveide

Komponentu izveide
Komponentu izveide

Šim nolūkam varat pārbaudīt šīs darbības attēlus

Izveidojiet lietotnes komponentus.

Izmantojot "ng g c" komponenta nosaukumu "" katrai no šīm sastāvdaļām:

  • Kursa lapa
  • Tēmu lapa
  • Video lapa
  • Vērtēšanas lapa
  • Metodiskā lapa
  • Konceptuālā lapa
  • Funkcionālā lapa
  • Komentāru sastāvdaļa
  • Administrators

5. solis: Kursa lapa

Kursa lapa
Kursa lapa
Kursa lapa
Kursa lapa

Šim nolūkam varat pārbaudīt šīs darbības attēlus

Izveidojiet html un ts

Ja lietotājs ir students vai administrators, ts rakstīsiet loģiku, kas balstās uz autentifikāciju, un jūs uzrakstīsit tabulu ar kursa informāciju no studenta. Šim nolūkam varat izmantot autentifikācijas pakalpojumu un datu bāzes pakalpojumu, kas sniegti šīs instrukcijas beigās.

6. darbība. Tēmu lapa

Tēmu lapa
Tēmu lapa
Tēmu lapa
Tēmu lapa

Šim nolūkam varat pārbaudīt šīs darbības attēlus

Šajā komponentā jūs rakstīsit html un ts.

Līdzīgi kā kursa lapā, izņemot to, ka jums nav jāpārbauda, vai lietotājs ir administrators vai students, jums būs jāraksta tikai autentifikācija un jānodrošina kursa tēmu saraksti.

7. darbība: video lapa

Video lapa
Video lapa
Video lapa
Video lapa

Šim nolūkam varat pārbaudīt šīs darbības attēlus

Šajā komponentā jūs rakstīsit html un ts.

Šim komponentam jūs nodrošināsit saiti no powToon, lai atskaņotu videoklipu, un komentāru komponentu

8. darbība. Novērtēšanas lapa

Vērtēšanas lapa
Vērtēšanas lapa
Vērtēšanas lapa
Vērtēšanas lapa

Šim nolūkam varat pārbaudīt šīs darbības attēlus

šajā gadījumā jūs izmantosit to pašu video komponentu ar citu video, kurā jūs izskaidrosit novērtēšanas procesu.

Pēc tam vienkārši atrodiet pogu, kas novirza uz konceptuālo lapu

9. solis: konceptuālā lapa

Konceptuālā lapa
Konceptuālā lapa
Konceptuālā lapa
Konceptuālā lapa

Šim nolūkam varat pārbaudīt šīs darbības attēlus

Šajā lapā jūs izveidosit gan html, gan ts.

  • Izveidojiet divus video komponentus ar pogu
  • Izveidojiet divu videoklipu masīvu ar Būla vērtību “isCorrect”
  • Uzrakstiet funkciju CheckScore ()
  • Augšupielādējiet rezultātu datu bāzē
  • Pārvietot uz nākamo lapu

10. darbība: metodiskā lapa

Metodiskā lapa
Metodiskā lapa
Metodiskā lapa
Metodiskā lapa

Šim nolūkam varat pārbaudīt šīs darbības attēlus

Šajā lapā jūs izveidosit gan html, gan ts.

  • Jūs izmantosit dragulu, lai to izlasītu, skatiet dragula dokumentus
  • Izveidojiet videoklipu masīvu
  • Izveidojiet videoklipu secību
  • uzrakstiet pārbaudes punktu skaitu
  • Augšupielādes rādītājs
  • Doties uz nākamo lapu

11. darbība: funkcionālā lapa

Funkcionālā lapa
Funkcionālā lapa
Funkcionālā lapa
Funkcionālā lapa

Šim nolūkam varat pārbaudīt šīs darbības attēlus

Šajā lapā jūs izveidosit gan html, gan ts.

  • Tāpat kā konceptuālajā lapā, opcijas būs pogas un videoklipi.
  • Html ierakstiet lietotājam atrisināmu problēmu
  • Pēc tam ievietojiet videoklipus masīvā ar Būla vērtību “IsCorrect”
  • Augšupielādējiet rezultātu datu bāzē

12. solis: pieteikšanās lapa

Pieteikšanās lapa
Pieteikšanās lapa
Pieteikšanās lapa
Pieteikšanās lapa

Šim nolūkam varat pārbaudīt šīs darbības attēlus

  • Izveidojiet html un ts
  • Ievietojiet attēlu html
  • Ierakstiet veidlapu html
  • Iesniedziet veidlapu ts autentifikācijas pakalpojumā
  • Saglabājiet lietotāju datu bāzē

13. darbība: lejupielādējiet pilnu komponentu un pakalpojumu kodu

Ja jums ir problēmas, šeit ir rar ar komponentiem un pakalpojumiem

Ieteicams: