Eğitim Web Uygulaması: 13 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:17

Bu proje, öğretme ve öğrenme problemini üç düzeyde çözmemiz gereken video ve dijital televizyon dersi için bir ödev olarak oluşturuldu: Metodolojik, İşlevsel ve kavramsal.

Bu proje, öğretme ve öğrenme problemini şu üç seviyede çözmemiz gereken video ve dijital televizyon dersi için bir ödev olarak oluşturuldu: Metodolojik, İşlevsel ve kavramsal. Bu problemi bir web platformu kullanarak çözmeye karar verdik, Dersin öğrenci ve öğretmenleri giriş yapabilirler. Öğrenciler ayrıca codec'ler ve video formatları gibi konuları içeren öğretim videolarına erişebilir, konunun kavramsal kısmını öğrendikten sonra bir değerlendirme yapabilirler. Değerlendirme üç aktiviteden oluşur; her aktivitenin codec ve video formatları ile ilgili konuları öğreten bir çeşit videosu olacak ve aynı zamanda her aktivitenin farklı bir amacı var, bu yüzden bu platform ile metodolojik, fonksiyonel ve kavramsal kısmın öğretimini ve değerlendirilmesini başarabiliriz. Tüm bunları başarmak için AngularFire5 ve dragula gibi kütüphaneleri kullanarak Angular 4 ve Firebase kullandık. Videolar için "PowToon" web uygulamasını kullandık.

Bu talimat için ihtiyacınız olacak:

• NodeJ'ler
• açısal4
• Firebase Projesi
• Bir bilgisayar

Adım 1: Kurulum

• NPM (Düğüm Paket Yöneticisi) ile nodejs 8.9.1'i kurun
• "npm install -g @angular/cli" konsoluna yazarak Angular-CLI (Komut Satırı Arayüzü) yükleyin

Adım 2: Proje Oluşturma

• "ng new my-app" kullanarak bir proje oluşturun
• "npm install" ile düğüm paketlerini kurun
• Dragula'yı "npm install dragula --save" ile kurun
• AngularFire2'yi "npm install firebase angularfire2 --save" ile kurun

3. Adım: Firebase

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

• google hesabı oluştur
• "Konsol'a git" e tıklayın
• proje oluştur
• Genele gidin ve istemci anahtarlarını alın

Adım 4: Bileşenler Oluşturma

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

Uygulama için bileşenleri oluşturun.

Aşağıdaki bileşenlerin her biri için "ng g c "bileşen adı" " kullanılması:

• Kurs Sayfası
• Konular Sayfası
• Video Sayfası
• Değerlendirme Sayfası
• Metodolojik Sayfa
• Kavramsal Sayfa
• İşlevsel Sayfa
• Yorumlar bileşeni
• yönetici

Adım 5: Kurs Sayfası

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

Html ve ts'yi oluşturun

Ts'lerde kullanıcı öğrenci veya Admin ise yetkilendirmenin arkasındaki mantığı yazacaksınız ve öğrenciden gelen ders bilgilerini içeren bir tablo yazacaksınız. Bunun için, bu talimatın sonunda sağlanan bir kimlik doğrulama hizmetini ve bir veritabanı hizmetini kullanabilirsiniz.

6. Adım: Konular Sayfası

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

Bu bileşende html ve ts'yi yazacaksınız.

Kullanıcının yönetici mi yoksa öğrenci mi olduğunu kontrol etmek zorunda olmamanız dışında, kurs sayfasına benzer şekilde, yalnızca kimlik doğrulama yazmanız ve kurstaki konu listelerini sağlamanız gerekir.

7. Adım: Video Sayfası

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

Bu bileşende html ve ts'yi yazacaksınız.

Bu bileşen için, videoyu oynatmak için powToon'dan bağlantı ve yorum bileşenini sağlayacaksınız.

8. Adım: Değerlendirme Sayfası

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

Bu bileşen için aynı video bileşenini farklı bir video ile kullanacaksınız ve bu videoda değerlendirme sürecini anlatacaksınız.

O zaman sadece kavramsal sayfaya bağlanan bir düğmeniz olsun

9. Adım: Kavramsal Sayfa

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

Bu sayfada hem html hem de ts oluşturacaksınız.

• Bir düğmeyle iki video bileşeni oluşturun
• Boole değeri "isCorrect" olan iki videodan oluşan bir dizi oluşturun
• Bir CheckScore() işlevi yazın
• Puanı veritabanına yükleyin
• Sonraki sayfaya taşıma

Adım 10: Metodolojik Sayfa

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

Bu sayfada hem html hem de ts oluşturacaksınız.

• Dragula'yı kullanacaksınız, bunun için dragula belgelerini okuyun
• Video dizisi oluşturun
• Videoların sırasını oluşturun
• bir Kontrol Puanı yaz
• Puan Yükle
• Sonraki sayfaya git

11. Adım: İşlevsel Sayfa

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

Bu sayfada hem html hem de ts oluşturacaksınız.

• Kavramsal sayfa ile aynı, seçenekler olarak düğmelere ve videolara sahip olacaksınız.
• Html'de kullanıcının çözmesi için bir problem yazın
• Ardından videoları boolean "IsCorrect" olan bir diziye yerleştirin
• Puanı veritabanına yükleyin

Adım 12: Giriş Sayfası

Bunun için bu adımın resimlerini kontrol edebilirsiniz.

• Html ve ts'yi oluşturun
• Resmi html içine yerleştirin
• Formu html'ye yazın
• ts'deki formu auth servisine gönderin
• Kullanıcıyı veritabanına kaydet

Adım 13: Bileşenlerin ve Hizmetlerin Tam Kodunu İndirin

Sorun yaşarsanız, bileşenleri ve hizmetleri içeren rar burada