Introduction: Education Web-app

Picture of Education Web-app

This project was created as an assignment for the video and digital television course in which we had to solve the problem of teaching and learning in three levels: Methodological, Functional and conceptual.

This project was created as an assignment for the course of video and digital television, in which we had to solve the problem of teaching and learning in these three levels: Methodological, Functional and conceptual.
We decided to solve this problem using a web platform, in which students and teachers of the course can log in. The students can also access the teaching videos covering topics such as codecs and video formats, after they have learnt the conceptual part of the topic they can proceed to do an evaluation. The evaluation consists of three activities; each activity is going to have a sort of videos teaching topics related to codecs and video formats and at the same time each activity has a different purpose, so with this platform we can achieve the teaching and evaluation of the methodological, functional and conceptual part. To achieve all of this, we used Angular 4 and Firebase, using libraries such as AngularFire5 and dragula. For the videos we used the web-app "PowToon".

For this instructable you will need:

  • NodeJs
  • Angular4
  • Firebase Project
  • A computer

Step 1: Installation

  • Install nodejs 8.9.1 with NPM (Node Package Manager) https://nodejs.org/es/
  • Install Angular-CLI (Command Line Interface) typing at the console "npm install -g @angular/cli"

Step 2: Creating Project

  • Create a project using "ng new my-app"
  • Install node packages with "npm install"
  • Install dragula with "npm install dragula --save"
  • Install AngularFire2 with "npm install firebase angularfire2 --save"

Step 3: Firebase

Picture of Firebase

For this you can check the images of this step

  • Create a google account
  • Click on "Go to console"
  • create a project
  • Go to general and grab the client keys

Step 4: Creating Components

Picture of Creating Components

For this you can check the images of this step

Create the components for the app.

Using "ng g c "component name" " for each of the following components:

  • Course Page
  • Topics Page
  • Video Page
  • Evaluation Page
  • Methodological Page
  • Conceptual Page
  • Functional Page
  • Comments component
  • Admin

Step 5: Course Page

Picture of Course Page

For this you can check the images of this step

  • Create the html and the ts

In the ts you will write the logic behind the autentication, if the user is an student or an Admin, and you will write a table with the course information from the student. For that you can use an authentication service and a database service both provided at the end of this instructable.

Step 6: Topics Page

Picture of Topics Page

For this you can check the images of this step

In this component you will write the html and ts.

Similar to the course page except you dont have to check if the user is an admin or student, you will only have to write authentication and provide with the lists of topics in the course.

Step 7: Video Page

Picture of Video Page

For this you can check the images of this step

In this component you will write the html and ts.

For this component you will provide the link from powToon in order to play the video, and the comment component

Step 8: Evaluation Page

Picture of Evaluation Page

For this you can check the images of this step

for this ocmponent you will use the same video component with a diferent video in wich you will explain the evaluation process.

Then just have a button that links to the conceptual page

Step 9: Conceptual Page

Picture of Conceptual Page

For this you can check the images of this step

In this page you will create both html and ts.

  • Create two video components with a button
  • Create an array of two videos with a boolean "isCorrect"
  • Write a CheckScore() function
  • Upload the score to the database
  • Transport to the next page

Step 10: Methodological Page

Picture of Methodological Page

For this you can check the images of this step

In this page you will create both html and ts.

  • You will make use of dragula, for that read the docs of dragula https://github.com/bevacqua/dragula
  • Create array of videos
  • Create the order of videos
  • write a Check Score
  • Upload Score
  • Go to next page

Step 11: Functional Page

Picture of Functional Page

For this you can check the images of this step

In this page you will create both html and ts.

  • Same as the conceptual page you will have buttons and videos as options.
  • In the html write a problem for the user to solve
  • Then place the videos in an array with a boolean "IsCorrect"
  • Upload the score to the database

Step 12: Login Page

Picture of Login Page
For this you can check the images of this step
  • Create the html and ts
  • Place in the html the image
  • Write the form in the html
  • Submit the form in the ts to the auth service
  • Save the user in the database

Step 13: Download Full Code of Components and Services

In case you had problems, here is the rar with the components and services

Comments

About This Instructable

67views

2favorites

License:

More by SebastianB108:Education Web-appSmart Vertical Garden
Add instructable to: