Կրթության վեբ-ծրագիր. 13 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:46

Այս նախագիծը ստեղծվել է որպես տեսաֆիլմերի և թվային հեռուստատեսության դասընթացի առաջադրանք, որի ընթացքում մենք պետք է լուծեինք ուսուցման և ուսուցման խնդիրը երեք մակարդակներով ՝ մեթոդաբանական, գործառական և հայեցակարգային:

Այս նախագիծը ստեղծվել է որպես տեսաֆիլմերի և թվային հեռուստատեսության դասընթացի առաջադրանք, որի ընթացքում մենք պետք է լուծեինք ուսուցման և ուսուցման խնդիրը այս երեք մակարդակներում ՝ մեթոդաբանական, գործառական և կոնցեպտուալ: Մենք որոշեցինք այս խնդիրը լուծել վեբ հարթակի միջոցով, Դասընթացի ուսանողներն ու ուսուցիչները կարող են մուտք գործել: Ուսանողները կարող են նաև օգտվել ուսուցման տեսահոլովակներից, որոնք ընդգրկում են թեմաներ, ինչպիսիք են կոդեկները և վիդեո ձևաչափերը, թեմայի հայեցակարգային հատվածին ծանոթանալուց հետո կարող են անցնել գնահատման: Գնահատումը բաղկացած է երեք գործողություններից. յուրաքանչյուր գործունեություն ունենալու է մի տեսակ տեսանյութեր, որոնք ուսուցանում են թեմաներ ՝ կապված կոդեկների և վիդեո ձևաչափերի հետ, և միևնույն ժամանակ յուրաքանչյուր գործունեություն ունի այլ նպատակ, ուստի այս հարթակով մենք կարող ենք հասնել մեթոդաբանական, գործառական և կոնցեպտուալ մասի ուսուցման և գնահատման: Այս ամենին հասնելու համար մենք օգտագործեցինք Angular 4 -ը և Firebase- ը ՝ օգտագործելով այնպիսի գրադարաններ, ինչպիսիք են AngularFire5- ը և dragula- ն: Տեսանյութերի համար մենք օգտագործել ենք «PowToon» վեբ ծրագիրը:

Այս հրահանգի համար ձեզ հարկավոր է.

• NodeJs
• Անկյունային 4
• Firebase նախագիծ
• Համակարգիչ

Քայլ 1: Տեղադրում

• Տեղադրեք nodejs 8.9.1 NPM- ով (Node Package Manager)
• Տեղադրեք Angular -CLI (Command Line Interface) մուտքագրումը «npm install -g @angular/cli» վահանակում

Քայլ 2: Նախագծի ստեղծում

• Ստեղծեք նախագիծ ՝ օգտագործելով «ng new my-app»
• Տեղադրեք հանգույցի փաթեթներ «npm install» - ով
• Տեղադրեք dragula «npm install dragula --save» -ով
• Տեղադրեք AngularFire2- ը «npm install firebase angularfire2 --save» -ով

Քայլ 3: Firebase

Դրա համար կարող եք ստուգել այս քայլի պատկերները

• Ստեղծեք Google հաշիվ
• Կտտացրեք «Գնալ դեպի մխիթարել»
• ստեղծել նախագիծ
• Գնացեք ընդհանուր և վերցրեք հաճախորդի բանալիները

Քայլ 4: Բաղադրիչների ստեղծում

Դրա համար կարող եք ստուգել այս քայլի պատկերները

Ստեղծեք հավելվածի բաղադրիչները:

Հետևյալ բաղադրիչներից յուրաքանչյուրի համար "ng g c" բաղադրիչի անվան օգտագործումը.

• Դասընթացի էջ
• Թեմաների էջ
• Տեսանյութի էջ
• Գնահատման էջ
• Մեթոդական էջ
• Հայեցակարգային էջ
• Ֆունկցիոնալ էջ
• Մեկնաբանությունների բաղադրիչ
• Ադմինիստրատոր

Քայլ 5: Դասընթացի էջ

Դրա համար կարող եք ստուգել այս քայլի պատկերները

Ստեղծեք html և ts

The -ում դուք կգրեք նույնականացման տրամաբանությունը, եթե օգտագործողը ուսանող է կամ Ադմինիստրատոր, և դուք կգրեք սեղան ՝ ուսանողի դասընթացի տեղեկատվությամբ: Դրա համար կարող եք օգտագործել նույնականացման ծառայություն և տվյալների բազայի ծառայություն, որոնք երկուսն էլ մատուցվում են այս հրահանգի վերջում:

Քայլ 6: Թեմաների էջ

Դրա համար կարող եք ստուգել այս քայլի պատկերները

Այս բաղադրիչում դուք կգրեք html և ts:

Դասընթացի էջի նման, բացառությամբ այն բանի, որ դուք պետք է ստուգեք, արդյոք օգտվողը ադմինիստրատոր է, թե ուսանող, դուք պետք է գրեք միայն վավերացում և տրամադրեք դասընթացի թեմաների ցանկեր:

Քայլ 7: Տեսանյութի էջ

Դրա համար կարող եք ստուգել այս քայլի պատկերները

Այս բաղադրիչում դուք կգրեք html և ts:

Այս բաղադրիչի համար դուք կտրամադրեք հղումը powToon- ից ՝ տեսանյութը նվագարկելու համար, և մեկնաբանության բաղադրիչը

Քայլ 8: Գնահատման էջ

Դրա համար կարող եք ստուգել այս քայլի պատկերները

Այս օժանդակ բաղադրիչի համար դուք կօգտագործեք նույն տեսաֆիլմը տարբեր տեսաֆիլմերով, որոնցում կբացատրեք գնահատման գործընթացը:

Հետո պարզապես մի կոճակ, որը հղում է դեպի հայեցակարգային էջ

Քայլ 9: Հայեցակարգային էջ

Դրա համար կարող եք ստուգել այս քայլի պատկերները

Այս էջում դուք կստեղծեք ինչպես html, այնպես էլ ts:

• Ստեղծեք երկու վիդեո բաղադրիչ `կոճակով
• Ստեղծեք երկու տեսահոլովակների զանգված ՝ բուլյան «isCorrect» - ով
• Գրեք CheckScore () գործառույթը
• Վերբեռնեք հաշիվը տվյալների բազայում
• Տրանսպորտ հաջորդ էջ

Քայլ 10: Մեթոդական էջ

Դրա համար կարող եք ստուգել այս քայլի պատկերները

Այս էջում դուք կստեղծեք ինչպես html, այնպես էլ ts:

• Դուք կօգտագործեք դրագուլան, դրա համար կարդացեք դրագուլայի փաստաթղթերը
• Ստեղծեք տեսանյութերի զանգված
• Ստեղծեք տեսանյութերի հերթականություն
• գրել ստուգման միավոր
• Վերբեռնման հաշիվ
• Գնացեք հաջորդ էջ

Քայլ 11: Ֆունկցիոնալ էջ

Դրա համար կարող եք ստուգել այս քայլի պատկերները

Այս էջում դուք կստեղծեք ինչպես html, այնպես էլ ts:

• Նույնը, ինչ հայեցակարգային էջը, կունենաք կոճակներ և տեսանյութեր ՝ որպես ընտրանքներ:
• HTML- ում գրեք խնդիր, որը պետք է լուծի օգտվողը
• Այնուհետև տեղադրեք տեսանյութերը զանգվածային բուլյան «IsCorrect» - ով
• Վերբեռնեք հաշիվը տվյալների բազայում

Քայլ 12: Մուտքի էջ

Դրա համար կարող եք ստուգել այս քայլի պատկերները

• Ստեղծեք html և ts
• Տեղադրեք պատկերը html- ում
• Գրեք ձևը html- ում
• Ներկայացրեք ձևը ts- ում `հեղինակային ծառայությանը
• Պահպանեք օգտվողին տվյալների բազայում

Քայլ 13: Ներբեռնեք բաղադրիչների և ծառայությունների ամբողջական ծածկագիրը

Խնդիրներ ունենալու դեպքում ահա rar բաղադրիչներով և ծառայություններով