Koulutus-verkkosovellus: 13 vaihetta

2025 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2025-01-23 14:41

Tämä projekti luotiin tehtävänä video- ja digitaalitelevisio -kurssille, jossa meidän piti ratkaista opetuksen ja oppimisen ongelma kolmella tasolla: metodologinen, toiminnallinen ja käsitteellinen.

Tämä projekti luotiin tehtävänä video- ja digitaalitelevisiokurssille, jossa meidän oli ratkaistava opettamisen ja oppimisen ongelma näillä kolmella tasolla: metodologinen, toiminnallinen ja käsitteellinen. kurssin opiskelijat ja opettajat voivat kirjautua sisään. Opiskelijat voivat myös käyttää opetusvideoita, jotka kattavat aiheita, kuten koodekkeja ja videoformaatteja, opittuaan käsitteellisen osan oppiaineesta ja jatkaa arviointia. Arviointi koostuu kolmesta toiminnasta; Jokaisella toiminnalla on jonkinlainen video, joka opettaa koodekkeihin ja videoformaatteihin liittyviä aiheita, ja samalla jokaisella toiminnalla on eri tarkoitus, joten tällä alustalla voimme saavuttaa metodologisen, toiminnallisen ja käsitteellisen osan opetuksen ja arvioinnin. Kaiken tämän saavuttamiseksi käytimme Angular 4: tä ja Firebasea käyttämällä kirjastoja, kuten AngularFire5 ja dragula. Videoissa käytimme PowToon-verkkosovellusta.

Tätä ohjeistusta varten tarvitset:

• Solmut
• Kulmikas 4
• Firebase -projekti
• Tietokone

Vaihe 1: Asennus

• Asenna nodejs 8.9.1 NPM: llä (Node Package Manager)
• Asenna Angular -CLI (komentoriviliitäntä) kirjoittamalla konsoliin "npm install -g @angular/cli"

Vaihe 2: Projektin luominen

• Luo projekti käyttämällä uutta omaa sovellustani
• Asenna solmupaketit "npm install"
• Asenna dragula "npm install dragula --save" avulla
• Asenna AngularFire2 ja "npm install firebase angularfire2 -save"

Vaihe 3: Firebase

Tätä varten voit tarkistaa tämän vaiheen kuvat

• Luo Google -tili
• Napsauta "Siirry konsoliin"
• luo projekti
• Siirry yleiseen ja nappaa asiakasavaimet

Vaihe 4: Komponenttien luominen

Tätä varten voit tarkistaa tämän vaiheen kuvat

Luo sovelluksen komponentit.

Käytä "ng g c" komponentin nimeä "" jokaiselle seuraaville komponenteille:

• Kurssisivu
• Aiheet -sivu
• Videosivu
• Arviointisivu
• Metodologinen sivu
• Käsitteellinen sivu
• Toiminnallinen sivu
• Kommentit -komponentti
• Järjestelmänvalvoja

Vaihe 5: Kurssisivu

Tätä varten voit tarkistaa tämän vaiheen kuvat

Luo html ja ts

TS: ssä kirjoitat todennuksen logiikan, jos käyttäjä on opiskelija tai järjestelmänvalvoja, ja kirjoitat taulukon opiskelijan kurssitiedoista. Tätä varten voit käyttää todennuspalvelua ja tietokantapalvelua, jotka molemmat tarjotaan tämän ohjeen lopussa.

Vaihe 6: Aiheet -sivu

Tätä varten voit tarkistaa tämän vaiheen kuvat

Tähän komponenttiin kirjoitat html ja ts.

Kuten kurssisivulla, paitsi että sinun ei tarvitse tarkistaa, onko käyttäjä järjestelmänvalvoja vai opiskelija, sinun on vain kirjoitettava todennus ja toimitettava kurssin aiheluettelot.

Vaihe 7: videosivu

Tätä varten voit tarkistaa tämän vaiheen kuvat

Tähän komponenttiin kirjoitat html ja ts.

Tälle osalle annat powToon -linkin videon toistamiseen ja kommenttikomponentin

Vaihe 8: Arviointisivu

Tätä varten voit tarkistaa tämän vaiheen kuvat

Tässä osassa käytät samaa videokomponenttia eri videon kanssa, jossa selität arviointiprosessin.

Sitten on vain painike, joka linkittää käsitteelliselle sivulle

Vaihe 9: Käsitteellinen sivu

Tätä varten voit tarkistaa tämän vaiheen kuvat

Tällä sivulla luot sekä html että ts.

• Luo kaksi videokomponenttia painikkeella
• Luo kahden videon sarja, jossa on boolean "isCorrect"
• Kirjoita CheckScore () -funktio
• Lataa pisteet tietokantaan
• Kuljetus seuraavalle sivulle

Vaihe 10: Metodologinen sivu

Tätä varten voit tarkistaa tämän vaiheen kuvat

Tällä sivulla luot sekä html että ts.

• Käytät Dragulaa, lue sen vuoksi Dragula -asiakirjat
• Luo joukko videoita
• Luo videoiden järjestys
• kirjoittaa tarkistuspisteet
• Latauspisteet
• Siirry seuraavalle sivulle

Vaihe 11: Toiminnallinen sivu

Tätä varten voit tarkistaa tämän vaiheen kuvat

Tällä sivulla luot sekä html että ts.

• Kuten käsitteellisellä sivulla, sinulla on painikkeita ja videoita vaihtoehtoina.
• Kirjoita html -tiedostoon käyttäjän ratkaistava ongelma
• Aseta sitten videot joukkoon, jossa on boolean "IsCorrect"
• Lataa pisteet tietokantaan

Vaihe 12: Kirjautumissivu

Tätä varten voit tarkistaa tämän vaiheen kuvat

• Luo html ja ts
• Aseta kuva html -muotoon
• Kirjoita lomake html -tiedostoon
• Lähetä lomake ts: ssä todennuspalveluun
• Tallenna käyttäjä tietokantaan

Vaihe 13: Lataa koko komponenttien ja palvelujen koodi

Jos sinulla on ongelmia, tässä on rar komponenttien ja palveluiden kanssa