/AMICOurses

Primary LanguageJavaScript

AMICOurses

VIDEO

Video

Phase I

Aim

In this repository we will place our web application, which is aimed to provide a study environment to teachers and students. Teachers will be able to control students' progress.


Entities

  • User
    • Student
    • Teacher
  • Subject
  • Message
  • Course
  • Study item

Graphic Information

The application will be able to show some information in graphics, like:

  • Students' califications (with filters individual student or a group of students).
  • Time series charts to compare students' progress with the average progress of the full group

Advanced funcionality

  • Restrictions in order to enter in a course
  • Recommend a course based on previous courses done by the student

Advanced Technology

  • Generate PDF with useful information (students' califications, final certificates)...

Collaborators

AMICO Group:


Other tools

Trello board: https://trello.com/b/8yzPSK13/amicourse


Phase II

Aim

In this phase, we started to define web's appearance, using HTML, CSS and Bootstrap 4 templates.

First of all, we defined an activity diagram to explain the main navigation into the page since the moment you enter into our application until you sign out and close your session.

Finally, with that diagram, we created the main pages of the application. Some of then were adaptations of Bootstrap 4 templates found in Internet, and some other are Bootstrap 4 pages created by us.


Activity Diagram

Activity Diagram

The user starts his road into the application in the main page, he/she can show and search courses to get information of them, or he can log in/sign up. When he/she enter into the course information, the user can suscribe into the course, but first he must have been logged into the system. When the user is into the course, he/she can see all the subjects the course have, and enter into anyone to show the resources, exams, califications... He/she also can enter into the mail and the forum of the subject, and in all pages the user can go into his profile, and can sigh out the system.


HTML Main Screenshots

Main Page

Main Page

As you can see in that image, into the main page you can search what course do you want to do, filtering by newest courses, best rated courses or another criterial you want. You can see also some entities who collaborate with us making the courses

Sign Up and Log In

Sign Up Log In

When you need to enter into the system, that are the pages you will see.

Course Introduction

Course Introduction

When u enter into the information of any course we offer into the page, you will see a short introduction of it, all the skills that the course give to their students, all the subjects the students will study during the course, and a contact tool to ask or suggest anything to the teachers.

Student and teacher course profile

Main profile page

Student and teacher profile page are similar, a little space where the user shares some personal information about him

Course List

Course List

In this page, into user's profile, the user can see all the courses he/she is doing or he/she did since he/she registered into our application, and the user can enter into them to revise something, continue learning about it or download again the document that certificate he/she passed the course

Course Subject List

Course Subject List

When the user is into a course, he/she can see all the subjects that belongs to the course, and he/she can enter into them to revise them or continue studying.

Main subject overview

Teacher

Teacher subject overview

Student

Student subject overview

These are the main environment of learning in our application. Students can see all his teachers and go into their profiles or contact them, or they can open their inbox to see all the mails they received, or they can enter into the subject's forums to ask questions to their classmates or their teachers. And, obviously, they are able to navigate between the tabs and see all the resources they have for learning, like videos, images, pdf, powerpoint presentations, excel sheets, external URLs, tests and califications...

On the other hand, teachers have same funcionalities than students into their subject main page, but they are able to see all the students registered into the course, or they can add, edit and delete resources and exams.

Forum

Forum main page Forum into topic Forum create topic

And last, but not least, the user can enter into the forum, where he can interact when all their classmates/other teachers and their teachers/students. He/she can read the latest news related to the subject, and post all his questions and suggestions in order to make easier his learning.


Phase III

Updated screenshots

Error pages

404

500

Admin page

Admin page 1

Admin page 2

Moodle page

Moodle page

Navigation Diagram

The navigation diagram haven't changed since the last phase

Entity Diagram

Entity Diagram List

Component Diagram

Component Diagram List

IDE Configuration

We created a Maven project and we imported in pom.xml all the dependencies we needed to manage the application. For the database connection, we used JPA Repository interfaces, based on CRUD method, to manage the queries and the modifications into the BD

Phase IV

Run in Postman Documentation API Rest

Updated Component Diagram

Component Diagram List

Docker

To deploy the application in docker it is necessary:

Create the image of the web application - from the docker directory execute create_image.bat

Optionally the image can be uploaded to docker hub. To upload the image to docker hub - from the docker directory run plublish_image.bat

Once the image is generated, from the docker directory, using docker-compose up, the containers are displayed. the application is available when "Tomcat started on port" appears

to stop docker-compose using docker-compose stop from the docker directory.

Phase V

Docker

Docker Community Edition (CE) for windows required Docker containers require the windows local drives to be shared

The create_image.ps1 (powershell script):

  1. builds the angular client files and publish them to the HTTP erver
  2. generates the jar files
  3. generates the docker image

The publish_image.bat uploads the docker image to the docker hub The docker-compose.yml file creates the MySQL and the application containers

The create_image.bat file execute the create_image.ps1 script in a windows CMD screen

To start the application:

  1. open a CDM windows
  2. go to docker directory and execute: 2.1. .\create_image.bat 2.2. docker-compose up

To stop the application execute in docker directory docker-compose stop

Component Diagram

Component Diagram Phase V