Web-App für Bildung - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:16

Dieses Projekt entstand als Aufgabenstellung für den Studiengang Video und digitales Fernsehen, in dem wir das Problem des Lehrens und Lernens auf drei Ebenen lösen mussten: Methodisch, Funktional und Konzeptionell.

Dieses Projekt entstand als Aufgabenstellung für den Studiengang Video und digitales Fernsehen, in dem wir das Problem des Lehrens und Lernens in diesen drei Ebenen lösen mussten: Methodisch, Funktional und Konzeptionell. in die sich Studierende und Lehrende des Studiengangs einloggen können. Die Studierenden können auch auf die Lehrvideos zu Themen wie Codecs und Videoformate zugreifen, nachdem sie den konzeptionellen Teil des Themas erlernt haben, können sie mit einer Evaluation fortfahren. Die Evaluierung besteht aus drei Aktivitäten; Jede Aktivität wird eine Art Videos enthalten, die Themen zu Codecs und Videoformaten vermitteln, und gleichzeitig hat jede Aktivität einen anderen Zweck, sodass wir mit dieser Plattform die Lehre und Bewertung des methodischen, funktionalen und konzeptionellen Teils erreichen können. Um all dies zu erreichen, haben wir Angular 4 und Firebase verwendet und Bibliotheken wie AngularFire5 und Dragula verwendet. Für die Videos haben wir die Web-App "PowToon" verwendet.

Für dieses instructable benötigen Sie:

• NodeJs
• Winkel4
• Firebase-Projekt
• Ein Computer

Schritt 1: Installation

• Nodejs 8.9.1 mit NPM (Node Package Manager) installieren
• Installieren Sie Angular-CLI (Command Line Interface), indem Sie in der Konsole "npm install -g @angular/cli" eingeben

Schritt 2: Projekt erstellen

• Erstellen Sie ein Projekt mit "ng new my-app"
• Knotenpakete mit "npm install" installieren
• Dragula installieren mit "npm install dragula --save"
• Installieren Sie AngularFire2 mit "npm install firebase anglefire2 --save"

Schritt 3: Firebase

Dazu können Sie die Bilder dieses Schrittes überprüfen

• Erstellen Sie ein Google-Konto
• Klicken Sie auf "Zur Konsole gehen"
• ein Projekt erstellen
• Gehen Sie zu Allgemein und schnappen Sie sich die Client-Schlüssel

Schritt 4: Komponenten erstellen

Dazu können Sie die Bilder dieses Schrittes überprüfen

Erstellen Sie die Komponenten für die App.

Verwenden von "ng g c "Komponentenname" " für jede der folgenden Komponenten:

• Kursseite
• Themenseite
• Videoseite
• Bewertungsseite
• Methodische Seite
• Konzeptionelle Seite
• Funktionsseite
• Kommentarkomponente
• Administrator

Schritt 5: Kursseite

Dazu können Sie die Bilder dieses Schrittes überprüfen

Erstellen Sie das HTML und das ts

In den ts schreiben Sie die Logik hinter der Authentifizierung, ob der Benutzer ein Student oder ein Admin ist, und Sie schreiben eine Tabelle mit den Kursinformationen des Studenten. Dafür können Sie einen Authentifizierungsdienst und einen Datenbankdienst verwenden, die beide am Ende dieser Anleitung bereitgestellt werden.

Schritt 6: Themenseite

Dazu können Sie die Bilder dieses Schrittes überprüfen

In dieser Komponente schreiben Sie html und ts.

Ähnlich wie auf der Kursseite, außer dass Sie nicht überprüfen müssen, ob der Benutzer ein Admin oder Student ist, Sie müssen nur eine Authentifizierung schreiben und die Themenlisten im Kurs bereitstellen.

Schritt 7: Videoseite

Dazu können Sie die Bilder dieses Schrittes überprüfen

In dieser Komponente schreiben Sie html und ts.

Für diese Komponente stellen Sie den Link von powToon bereit, um das Video abzuspielen, und die Kommentarkomponente

Schritt 8: Bewertungsseite

Dazu können Sie die Bilder dieses Schrittes überprüfen

Für diese Instanz verwenden Sie dieselbe Videokomponente mit einem anderen Video, in dem Sie den Bewertungsprozess erklären.

Dann haben Sie einfach eine Schaltfläche, die auf die konzeptionelle Seite verweist

Schritt 9: Konzeptionelle Seite

Dazu können Sie die Bilder dieses Schrittes überprüfen

Auf dieser Seite erstellen Sie sowohl html als auch ts.

• Erstellen Sie zwei Videokomponenten mit einer Schaltfläche
• Erstellen Sie ein Array aus zwei Videos mit einem booleschen "isCorrect"
• Schreiben Sie eine CheckScore()-Funktion
• Laden Sie die Partitur in die Datenbank hoch
• Transport zur nächsten Seite

Schritt 10: Methodische Seite

Dazu können Sie die Bilder dieses Schrittes überprüfen

Auf dieser Seite erstellen Sie sowohl html als auch ts.

• Sie werden Dragula verwenden, lesen Sie dazu die Dokumente von Dragula
• Erstellen Sie eine Reihe von Videos
• Erstellen Sie die Reihenfolge der Videos
• schreibe ein Prüfergebnis
• Punktzahl hochladen
• Gehe zur nächsten Seite

Schritt 11: Funktionsseite

Dazu können Sie die Bilder dieses Schrittes überprüfen

Auf dieser Seite erstellen Sie sowohl html als auch ts.

• Wie auf der Konzeptseite stehen Ihnen Schaltflächen und Videos als Optionen zur Verfügung.
• Schreiben Sie im HTML-Code ein Problem, das der Benutzer lösen soll
• Dann platzieren Sie die Videos in einem Array mit einem booleschen "IsCorrect"
• Laden Sie die Partitur in die Datenbank hoch

Schritt 12: Anmeldeseite

Dazu können Sie die Bilder dieses Schrittes überprüfen

• html und ts erstellen
• Platzieren Sie das Bild im HTML-Code
• Schreiben Sie das Formular in den html
• Senden Sie das Formular in den ts an den Authentifizierungsdienst
• Speichern Sie den Benutzer in der Datenbank

Schritt 13: Vollständigen Code der Komponenten und Dienste herunterladen

Falls Sie Probleme hatten, hier die Rar mit den Komponenten und Services