Application Web pour l'éducation : 13 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Ce projet a été créé comme un devoir pour le cours de vidéo et de télévision numérique dans lequel nous devions résoudre le problème de l'enseignement et de l'apprentissage à trois niveaux: méthodologique, fonctionnel et conceptuel.

Ce projet a été créé comme une mission pour le cours de vidéo et de télévision numérique, dans lequel nous devions résoudre le problème de l'enseignement et de l'apprentissage dans ces trois niveaux: méthodologique, fonctionnel et conceptuel. Nous avons décidé de résoudre ce problème en utilisant une plate-forme Web, dans lequel les étudiants et les enseignants du cours peuvent se connecter. Les étudiants peuvent également accéder aux vidéos pédagogiques couvrant des sujets tels que les codecs et les formats vidéo, après avoir appris la partie conceptuelle du sujet, ils peuvent procéder à une évaluation. L'évaluation comprend trois activités; chaque activité va avoir une sorte de vidéos enseignant des sujets liés aux codecs et aux formats vidéo et en même temps chaque activité a un objectif différent, donc avec cette plate-forme, nous pouvons réaliser l'enseignement et l'évaluation de la partie méthodologique, fonctionnelle et conceptuelle. Pour réaliser tout cela, nous avons utilisé Angular 4 et Firebase, en utilisant des bibliothèques telles que AngularFire5 et dragula. Pour les vidéos, nous avons utilisé l'application Web "PowToon".

Pour cette instructable, vous aurez besoin de:

• NodeJs
• Angulaire4
• Projet Firebase
• Un ordinateur

Étape 1: Installation

• Installez nodejs 8.9.1 avec NPM (Node Package Manager)
• Installez Angular-CLI (Command Line Interface) en tapant sur la console "npm install -g @angular/cli"

Étape 2: Création du projet

• Créer un projet en utilisant "ng new my-app"
• Installer les packages de nœuds avec "npm install"
• Installez dragula avec "npm install dragula --save"
• Installez AngularFire2 avec "npm install firebase angularfire2 --save"

Étape 3: Firebase

Pour cela vous pouvez consulter les images de cette étape

• Créer un compte google
• Cliquez sur "Aller à la console"
• créer un projet
• Allez au général et récupérez les clés du client

Étape 4: Création de composants

Pour cela vous pouvez consulter les images de cette étape

Créez les composants de l'application.

En utilisant "ng g c "nom du composant" " pour chacun des composants suivants:

• Page du cours
• Page des sujets
• Page vidéo
• Page d'évaluation
• Page Méthodologique
• Page conceptuelle
• Page fonctionnelle
• Composante Commentaires
• Administrateur

Étape 5: Page du cours

Pour cela vous pouvez consulter les images de cette étape

Créer le html et le ts

Dans le ts, vous écrivez la logique derrière l'authentification, si l'utilisateur est un étudiant ou un administrateur, et vous écrivez un tableau avec les informations de cours de l'étudiant. Pour cela, vous pouvez utiliser un service d'authentification et un service de base de données tous deux fournis à la fin de cette instructable.

Étape 6: Page des sujets

Pour cela vous pouvez consulter les images de cette étape

Dans ce composant, vous allez écrire les fichiers html et ts.

Similaire à la page du cours, sauf que vous n'avez pas à vérifier si l'utilisateur est un administrateur ou un étudiant, vous n'aurez qu'à écrire une authentification et à fournir les listes de sujets du cours.

Étape 7: page vidéo

Pour cela vous pouvez consulter les images de cette étape

Dans ce composant, vous allez écrire les fichiers html et ts.

Pour ce composant, vous fournirez le lien de powToon afin de lire la vidéo, et le composant de commentaire

Étape 8: Page d'évaluation

Pour cela vous pouvez consulter les images de cette étape

pour cet élément, vous utiliserez le même composant vidéo avec une vidéo différente dans laquelle vous expliquerez le processus d'évaluation.

Ensuite, il suffit d'avoir un bouton qui renvoie vers la page conceptuelle

Étape 9: page conceptuelle

Pour cela vous pouvez consulter les images de cette étape

Dans cette page, vous allez créer à la fois html et ts.

• Créer deux composants vidéo avec un bouton
• Créer un tableau de deux vidéos avec un booléen "isCorrect"
• Écrire une fonction CheckScore()
• Télécharger le score dans la base de données
• Passer à la page suivante

Étape 10: Page Méthodologique

Pour cela vous pouvez consulter les images de cette étape

Dans cette page, vous allez créer à la fois html et ts.

• Vous vous servirez de dragula, pour cela lisez la doc de dragula
• Créer un tableau de vidéos
• Créer l'ordre des vidéos
• écrire un pointage de contrôle
• Télécharger le score
• Aller à la page suivante

Étape 11: Page fonctionnelle

Pour cela vous pouvez consulter les images de cette étape

Dans cette page, vous allez créer à la fois html et ts.

• Identique à la page conceptuelle, vous aurez des boutons et des vidéos comme options.
• Dans le code html, écrivez un problème à résoudre par l'utilisateur
• Ensuite, placez les vidéos dans un tableau avec un booléen "IsCorrect"
• Télécharger le score dans la base de données

Étape 12: page de connexion

Pour cela vous pouvez consulter les images de cette étape

• Créer le html et ts
• Placer dans le html l'image
• Ecrire le formulaire en html
• Soumettez le formulaire dans le ts au service auth
• Enregistrer l'utilisateur dans la base de données

Étape 13: Télécharger le code complet des composants et services

Au cas où vous auriez eu des problèmes, voici le rar avec les composants et services