Švietimo žiniatinklio programa: 13 žingsnių

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:45

Šis projektas buvo sukurtas kaip užduotis vaizdo ir skaitmeninės televizijos kursams, kuriuose turėjome išspręsti mokymo ir mokymosi problemą trimis lygiais: metodiniu, funkciniu ir konceptualiu.

Šis projektas buvo sukurtas kaip vaizdo ir skaitmeninės televizijos kurso užduotis, kurioje turėjome išspręsti mokymo ir mokymosi problemą šiais trimis lygiais: metodiniu, funkciniu ir konceptualiu. Mes nusprendėme išspręsti šią problemą naudodami žiniatinklio platformą, kur gali prisijungti kurso studentai ir dėstytojai. Studentai taip pat gali pasiekti mokymo vaizdo įrašus, apimančius tokias temas kaip kodekai ir vaizdo įrašų formatai, sužinoję koncepcinę temos dalį, gali tęsti vertinimą. Vertinimas susideda iš trijų veiklų; kiekviena veikla turės tam tikrus vaizdo įrašus, mokančius temas, susijusias su kodekais ir vaizdo formatais, ir tuo pačiu metu kiekviena veikla turi skirtingą tikslą, todėl su šia platforma galime pasiekti metodinės, funkcinės ir konceptualiosios dalies mokymą ir vertinimą. Norėdami visa tai pasiekti, naudojome „Angular 4“ir „Firebase“, naudodami tokias bibliotekas kaip „AngularFire5“ir „dragula“. Vaizdo įrašams naudojome žiniatinklio programą „PowToon“.

Norėdami tai padaryti, jums reikės:

• Mazgai
• Kampinis4
• „Firebase“projektas
• Kompiuteris

1 žingsnis: diegimas

• Įdiekite „nodejs 8.9.1“naudodami NPM („Node Package Manager“)
• Įdiekite „Angular -CLI“(komandinės eilutės sąsaja), įvesdami konsolėje „npm install -g @angular/cli“

2 žingsnis: projekto sukūrimas

• Sukurkite projektą naudodami „ng new my-app“
• Įdiekite mazgų paketus naudodami „npm install“
• Įdiekite „Dragula“naudodami „npm install dragula --save“
• Įdiekite „AngularFire2“naudodami „npm install firebase angularfire2 --save“

3 veiksmas: „Firebase“

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

• Sukurkite „Google“paskyrą
• Spustelėkite „Eiti į konsolę“
• sukurti projektą
• Eikite į bendrąjį ir paimkite kliento raktus

4 žingsnis: komponentų kūrimas

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

Sukurkite programos komponentus.

Naudojant „ng g c“komponento pavadinimą „“kiekvienam iš šių komponentų:

• Kurso puslapis
• Temų puslapis
• Vaizdo įrašo puslapis
• Vertinimo puslapis
• Metodinis puslapis
• Konceptualus puslapis
• Funkcinis puslapis
• Komentarų komponentas
• Administratorius

5 žingsnis: Kurso puslapis

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

Sukurkite html ir ts

Į ts parašysite autentifikavimo logiką, jei vartotojas yra studentas arba administratorius, ir parašysite lentelę su kurso informacija iš studento. Tam galite naudoti autentifikavimo paslaugą ir duomenų bazės paslaugą, pateiktas šios instrukcijos pabaigoje.

6 veiksmas: temų puslapis

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

Šiame komponente parašysite html ir ts.

Panašiai kaip kurso puslapyje, išskyrus tai, kad jums nereikia patikrinti, ar vartotojas yra administratorius ar studentas, turėsite tik parašyti autentifikavimą ir pateikti kurso temų sąrašus.

7 veiksmas: vaizdo įrašo puslapis

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

Šiame komponente parašysite html ir ts.

Šiam komponentui pateiksite nuorodą iš „powToon“, kad galėtumėte paleisti vaizdo įrašą, ir komentaro komponentą

8 žingsnis: vertinimo puslapis

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

šiam renginiui naudosite tą patį vaizdo įrašo komponentą su skirtingu vaizdo įrašu, kuriame paaiškinsite vertinimo procesą.

Tada tiesiog turite mygtuką, kuris nukreipia į koncepcinį puslapį

9 žingsnis: koncepcinis puslapis

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

Šiame puslapyje sukursite ir html, ir ts.

• Sukurkite du vaizdo įrašo komponentus mygtuku
• Sukurkite dviejų vaizdo įrašų masyvą su loginiu „isCorrect“
• Parašykite „CheckScore“() funkciją
• Įkelkite rezultatą į duomenų bazę
• Perkelti į kitą puslapį

10 žingsnis: metodinis puslapis

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

Šiame puslapyje sukursite ir html, ir ts.

• Pasinaudosite „Dragula“, tam perskaitykite „Dragula“dokumentus
• Sukurkite vaizdo įrašų masyvą
• Sukurkite vaizdo įrašų tvarką
• parašykite čekio balą
• Įkėlimo balas
• Eiti į kitą puslapį

11 veiksmas: funkcinis puslapis

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

Šiame puslapyje sukursite ir html, ir ts.

• Kaip ir konceptualiame puslapyje, kaip parinktys turėsite mygtukus ir vaizdo įrašus.
• Į html parašykite problemą, kurią vartotojas turi išspręsti
• Tada įdėkite vaizdo įrašus į masyvą su logine „IsCorrect“
• Įkelkite rezultatą į duomenų bazę

12 veiksmas: prisijungimo puslapis

Norėdami tai padaryti, galite patikrinti šio veiksmo vaizdus

• Sukurkite html ir ts
• Įdėkite vaizdą į html
• Parašykite formą į html
• Pateikite formą TS autentifikavimo tarnybai
• Išsaugokite vartotoją duomenų bazėje

13 veiksmas: atsisiųskite visą komponentų ir paslaugų kodą

Jei kiltų problemų, čia rasite komponentų ir paslaugų rerą