Mündəricat:

Təhsil Veb tətbiqi: 13 addım
Təhsil Veb tətbiqi: 13 addım

Video: Təhsil Veb tətbiqi: 13 addım

Video: Təhsil Veb tətbiqi: 13 addım
Video: Kim nə başa düşdü ❓ 2024, Iyul
Anonim
Təhsil veb proqramı
Təhsil veb proqramı

Bu layihə, tədris və öyrənmə problemini üç səviyyədə həll etməli olduğumuz video və rəqəmsal televiziya kursu üçün bir tapşırıq olaraq yaradılmışdır: Metodik, Funksional və konseptual.

Bu layihə, tədris və öyrənmə problemini bu üç səviyyədə həll etməli olduğumuz video və rəqəmsal televiziya kursu üçün bir tapşırıq olaraq yaradılmışdır: Metodoloji, Funksional və konseptual. Kursun tələbələri və müəllimləri daxil ola bilərlər. Tələbələr mövzunun konseptual hissəsini öyrəndikdən sonra qiymətləndirməyə davam edə biləcəkləri kimi kodeklər və video formatları kimi mövzuları əhatə edən tədris videolarına da daxil ola bilərlər. Qiymətləndirmə üç fəaliyyətdən ibarətdir; hər bir fəaliyyətin kodeklər və video formatları ilə əlaqəli mövzuları öyrədən bir növ videoları olacaq və eyni zamanda hər bir fəaliyyətin fərqli bir məqsədi var, buna görə də bu platforma ilə metodoloji, funksional və konseptual hissənin tədrisinə və qiymətləndirilməsinə nail ola bilərik. Bütün bunlara nail olmaq üçün AngularFire5 və dragula kimi kitabxanalardan istifadə edərək Angular 4 və Firebase istifadə etdik. Videolar üçün "PowToon" veb tətbiqindən istifadə etdik.

Bu təlimat üçün sizə lazım olacaq:

  • NodeJs
  • Açısal 4
  • Firebase Layihəsi
  • Kompüter

Addım 1: Quraşdırma

  • Nodejs 8.9.1 -i NPM (Node Package Manager) ilə quraşdırın
  • Konsola "npm install -g @angular/cli" yazaraq Angular -CLI (Komanda Satırı Arayüzü) yazın.

Addım 2: Layihə Yaradın

  • "Yeni tətbiqetmədən" istifadə edərək bir layihə yaradın.
  • Node paketlərini "npm install" ilə quraşdırın
  • "Npm install dragula --save" ilə dragulanı quraşdırın
  • AngularFire2 -ni "npm firebase angularfire2 qur -saxla" ilə quraşdırın

Addım 3: Firebase

Firebase
Firebase

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

  • Google hesabı yaradın
  • "Konsola keç" düyməsini basın
  • bir layihə yaratmaq
  • Ümumi gedin və müştəri açarlarını götürün

Addım 4: Komponentlərin yaradılması

Komponentlərin yaradılması
Komponentlərin yaradılması

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

Tətbiq üçün komponentlər yaradın.

Aşağıdakı komponentlərin hər biri üçün "ng g c" komponent adı "" istifadə edərək:

  • Kurs Səhifəsi
  • Mövzular Səhifəsi
  • Video Səhifəsi
  • Qiymətləndirmə Səhifəsi
  • Metodiki Səhifə
  • Konseptual Səhifə
  • Funksional Səhifə
  • Şərh komponenti
  • Admin

Addım 5: Kurs Səhifəsi

Kurs Səhifəsi
Kurs Səhifəsi
Kurs Səhifəsi
Kurs Səhifəsi

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

HTML və ts yaradın

İstifadəçi tələbə və ya İdarəçidirsə, ts -də autentifikasiyanın arxasındakı məntiqi yazacaqsınız və tələbənin kurs məlumatları olan bir cədvəl yazacaqsınız. Bunun üçün bu təlimatın sonunda verilən bir identifikasiya xidmətindən və bir verilənlər bazası xidmətindən istifadə edə bilərsiniz.

Addım 6: Mövzular səhifəsi

Mövzular Səhifəsi
Mövzular Səhifəsi
Mövzular Səhifəsi
Mövzular Səhifəsi

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

Bu komponentdə html və ts yazacaqsınız.

İstifadəçinin idarəçi və ya tələbə olduğunu yoxlamaq məcburiyyətində olmadığınız halda kurs səhifəsinə bənzər şəkildə, yalnız doğrulama yazmalı və kursdakı mövzuların siyahısını təqdim etməlisiniz.

Addım 7: Video Səhifəsi

Video Səhifəsi
Video Səhifəsi
Video Səhifəsi
Video Səhifəsi

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

Bu komponentdə html və ts yazacaqsınız.

Bu komponent üçün videonu oynatmaq üçün powToon -un bağlantısını və şərh komponentini təqdim edəcəksiniz

Addım 8: Qiymətləndirmə Səhifəsi

Qiymətləndirmə Səhifəsi
Qiymətləndirmə Səhifəsi
Qiymətləndirmə Səhifəsi
Qiymətləndirmə Səhifəsi

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

Qiymətləndirmə prosesini izah edəcəyiniz bu fərqli komponent üçün fərqli bir video ilə eyni video komponentini istifadə edəcəksiniz.

Sonra konseptual səhifəyə bağlantı verən bir düyməyə sahib olun

Addım 9: Konseptual Səhifə

Konseptual Səhifə
Konseptual Səhifə
Konseptual Səhifə
Konseptual Səhifə

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

Bu səhifədə həm html, həm də ts yaradacaqsınız.

  • Bir düymə ilə iki video komponenti yaradın
  • Boolean "isCorrect" ilə iki videodan ibarət bir sıra yaradın
  • CheckScore () funksiyası yazın
  • Verilənləri bazaya yükləyin
  • Növbəti səhifəyə nəql edin

Addım 10: Metodiki Səhifə

Metodiki Səhifə
Metodiki Səhifə
Metodiki Səhifə
Metodiki Səhifə

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

Bu səhifədə həm html, həm də ts yaradacaqsınız.

  • Draguladan istifadə edəcəksiniz, bunun üçün dragulanın sənədlərini oxuyun
  • Bir sıra videolar yaradın
  • Videoların sırasını yaradın
  • bir Çek Puanı yazın
  • Hesab Yüklə
  • Növbəti səhifəyə keçin

Addım 11: Funksional Səhifə

Funksional Səhifə
Funksional Səhifə
Funksional Səhifə
Funksional Səhifə

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

Bu səhifədə həm html, həm də ts yaradacaqsınız.

  • Konseptual səhifədə olduğu kimi, seçim olaraq düymələr və videolar olacaq.
  • Html -də istifadəçinin həll etməsi üçün bir problem yazın
  • Sonra videoları "IsC korreksiyası" ilə bir sıra yerləşdirin
  • Verilənləri bazaya yükləyin

Addım 12: Giriş Səhifəsi

Giriş Səhifəsi
Giriş Səhifəsi
Giriş Səhifəsi
Giriş Səhifəsi

Bunun üçün bu addımın şəkillərini yoxlaya bilərsiniz

  • HTML və ts yaradın
  • Şəkli html -də yerləşdirin
  • Formanı html -də yazın
  • Ts -dəki formu təsdiq xidmətinə təqdim edin
  • İstifadəçini verilənlər bazasında qeyd edin

Addım 13: Komponentlərin və Xidmətlərin Tam Kodunu Yükləyin

Problemləriniz varsa, burada komponentlər və xidmətlər nadirdir

Tövsiyə: