santatecla-listados-1

VIDEO

https://www.youtube.com/watch?v=YpddcBuo2FY&feature=youtu.be

PHASE 0

APP Name

AULA VIRTUAL - MOODDLE

Group members

Name and Surname	Mail	Github
Hector Mediero de la Morena	[email protected]	HectorM15
Ana Álvarez Ortiz	[email protected]	ana11alvarez
Aitana Cerezo Camino	[email protected]	Aitanaceca
Sandra Cañadas Gómez	[email protected]	sandra1012
Ernesto Baltasar Nve Obono	[email protected]	nveobono

Auxiliary tools

TRELLO

To organize the tasks and assign them we have used the trello tool: Trello grupo 9.
For the development of the application we have used : WEBSTROM
The requirements document: https://docs.google.com/document/d/1eq-zIDgxicw_UoEpP-LEa3dN-9cM59FqMHtBGM7VUPw/edit?usp=sharing

Bibliography

PHASE 1

Screenshots

Login: It is a view, where the user's login is required. There are three login options: through Facebook, twitter or Google, by using email and password or in guest / visitor mode. Depending on the type of user, it takes us to the corresponding main view type.

Teacher Started View: In this view, the topics and concepts appear, and the option to delete or add them, which only appear if you have logged in as a teacher. There is also a button to see a diagram with progress, another to return to start and another to close the session. We also add the option to search, to access a topic or concept faster.

Student / Visitor Started View: In this view, we only have the reading mode of the topics and concepts because the session has been logged as a student or visitor. In the started view of the student or visitor mode, we also find the start button, the diagrams button, the log out button and the search option.

Teacher Concept View: In this view we have two tables, one with already corrected items, where the correct or incorrect option is already checked and there is also the option to delete. In the second table we have uncorrected answers where there are two options per answer to mark if it is correct or incorrect. Below the first table, we have a button to add items, where a pop up appears. And in the upper right corner we have the option of log out.

Student / Visitor Concept View: In this view we have a table with two parts: corrected questions and questions to be corrected. The corrected questions appear with a tick or with a cross depending on whether the question is correct or not. Below is an icon of a sum, to add an item, and the button of diagrams, where we have used a modal to have a pop up where we can see the progress once we have data. Finally, in the upper right corner, we have the option of log out.

Questions: It is a view to add questions, where in each type of question there is a generate button to create the dialogue of the question of that type.

Navigation diagrams

Bibliography

PHASE 2

Navigation diagrams

screenshots

Main Page Teacher :

Main Page Student:

Main Page Visitor:

Teacher concept view:

Student concept view:

Add question:

Development environment

To begin with we had to decide what environment we wanted to use. In our case it was INTELLIJ. The configuration of the environment was not very laborious, since it has a spring initializer, which creates the project with the dependencies that you mark (mustache, security ....). Once this was done we decided that the first step was to connect to the database, download MYSQL Workbench to put it to work and MYSQLServer to manage a server on localhost. The sentences introduced in our case can be found in the aplication.properties:

spring.jpa.hibernate.ddl-auto = create-drop spring.datasource.url = jdbc: mysql: // localhost: 3306 / daw_group9? useSSL = false & useLegacyDatetimeCode = false & serverTimezone = UTC spring.datasource.username = Group9 spring.datasource.password = URJCDAWGrupo9 server.port = 8443 server.ssl.key-store = classpath: keystore.jks server.ssl.key-store-password = password server.ssl.key-password = secret

spring.http.multipart.max-file-size = 10MB spring.http.multipart.max-request-size = 10MB

Once connected to the environment we had to familiarize ourselves with the tags @ Entity, @ ManyToOne .... And so we finally managed to create a DB according to our requirements.

Entity diagram

The database is composed of the following entities:Answer, Concept, Question, Item, User and Lesson. Each of the entities has a series of field, as we can see in the photo

Association relations:

Answer with Question

Composition relations:

Lesson with Concept
User with Answer
Concept with Question
Concept with Item

Class diagram and templates

Complete diagram, all classes and relationshp:

Since there are so many classes and relationships, the diagram looks very bad, so we have summarized the diagram as follows:

We use the MVC architecture patter( Model-View-Controller).

MODEL:

@Service
Repository
@Entity
@Component
@Configuration

CONTROLLER

@Controller
@SpringBootApplication

VIEW

Templates
Error

All entities and all repositories have a composition relationship with DatabaseInitializer.

@Service

ItemService has an association relationship with Concept
AnswerService has an association relationship with: Question and User
ConceptService
LessonService
QuestionService

Repository (Interface)

LessonRepository
QuestionRepository has an association relationship with Concept
AnswerRepository has an association relationship with: Question and User
UserRepository
ConceptRepository
ItemRepository has an association relationship with Concept

@Entity: Concept, Question, Answer, Item, User and Lesson. The relationships between them are the same as the picture of the entity diagram

@Component

DatabaseInitializer
AuthenticationProviderUser has an association relationship with: UserComponent, UserRepository and User.
UserComponent

@Configuration: CSRFHandlerConfiguration and SecurityConfiguration

Error

Templates

StartedView_Visitor
header
StartedView_Teacher
footer
Items
TeacherConcept_View has an association relationship with: header and footer
MainPageStudent
MainPageTeacher
StudentConceptView has an association relationship with: header and footer
MainPage
ModalMainPage
Sign_in has an association relationship with: footer and header
Login has an association relationship with: footer and header
lesson
addnewQuestion

@Controller

QuestionController has an association relationship with: QuestionService, Concept, ConceptService, ItemService, Item, Question, StudentConceptView, TeacherConcept_View and addnewQuestions.
AnswerController has an association relationship with: Answer, AnswerService, Question, QUestionService, UserComponent and TeacherConcept_View
ConceptController has an association relationship with: Concept, ConceptRepository, ConceptService, ItemRepository, LessonService, QuestionRepository, AnswerRepository, UserRepository, Lesson and MainPage
IndexController has an association relationship with: UserRepository and login
ItemController has an association relationship with: Concept, ConceptService, Item, ItemRepository, ItemService, QuestionRepository, TeacherConcept_View and Items
LessonController has an association relationship with: Lesson, LessonService, UserComponent, MainPage and lesson
MainController has an association relationship with: AnswerRepository, Concept, ConceptRepository, ConceptService, ItemRepository, ItemSrvice, LessonService, Question, QuestionRepository, User, UserComponent, UserRepository, QuestionService, Answer, AnswerService, StudentConceptView, sign_in, login, TeacherConcept_View, addnewQuestion and MainPage

@SpringBootApplication

DawApplication

All classes and all views have a composition relationship with DawApplication.

Bibliography

PHASE 3

API REST Documentation

All URLs begin with: https://localhost:8443

ANSWER

The format of the answer URLs is: /api/answer

For each operation the format changes, words or parameters are added

Operations:

GET

Get Answer: /{id}
Get Answer by User: /user/{idUser}
Get Answer by Question: /concept/{idConcept}

POST

Create Answer: /{idQuestion}
Correct Answer 1: /sendAnswerTypeOne/{idQuestion}
Correct Answer 2: /sendAnswerTypeTwo/{idQuestion}/{ret}/{total}

Below we can see the format of the input and output information:

CONCEPT

The format of the answer URLs is: /api/concept

For each operation the format changes, words or parameters are added

Operations:

GET

Get Concept: /{id}
Get Concepts by Id Lesson: /lesson/{idLesson}

POST

Create Concept: /lesson/{idLesson}. If we add to the URL: /?page=0&size=10, we get the pagination
Upload image: /image/{id} to accese to image uploaded is with https://loacalhost/uploads/{filename}

DELETE

Delete Concept: /{id}

Below we can see the format of the input and output information:

EXAMPLE UPDATING AND SEEING IMAGE

ITEMS

The format of the answer URLs is: /api/items

For each operation the format changes, words or parameters are added

Operations:

GET

Get item: /{id}
Get Items by Concept: /concept/{idConcept}

POST

Create Item: /concept/{idConcept}

DELETE

Delete item: /{id}

Below we can see the format of the input and output information:

LESSON

The format of the answer URLs is: /api/lesson

For each operation the format changes, words or parameters are added

Operations:

GET

Show lessons: /pag. If we add to the URL: /?page=1&size=10, we get the pagination
Show lesson: /{id}

POST

Create Lesson: /

DELETE

Delete lesson: /{id}

Below we can see the format of the input and output information:

QUESTION

The format of the answer URLs is: /api/question

For each operation the format changes, words or parameters are added

Operations:

GET

Get Question: /{id}

POST

Create Question: /concept/{idConcept}

DELETE

Delete Question: /{id}

Below we can see the format of the input and output information:

USER

The format of the answer URLs is: /api/user

For each operation the format changes, words or parameters are added

Operations:

GET

Login: /login
Logout: /logout
Get User by name: /{name}

POST

Below we can see the format of the input and output information:

Class diagram updates

In the following image we can see the diagram of classes and templates summarized and updated:

As we can see, the classes @RestController and @ControllerAdvice have been added. These classes are part of the Controller.

New classes:

MODEL: @Service

UploadFileServiceImpli

Repository (Interface)

IUploadFileService

@Configuration

MvcConfig
SecurityApiRest
JsonAdapterWithPageable

All classes and all views have a composition relationship with DawApplication.

CONTROLLER: @RestController

ConceptRest has an association relationship with: Concept, Question, Item, Lesson, UploadFileServiceImpli, LessonService and ConceptService
QuestionRest has an association relationship with: Concept, Question, Item, Answer, ConceptService and QuestionService
ItemRest has an association relationship with: Concept, Question, Item, ConceptService and ItemService
AnswerRest has an association relationship with: Question, Answer, User, UserComponent, ConceptService, QuestionService and AnswerService
LessonsRest has an association relationship with: Concept, Lesson and LessonService
UserRest has an association relationship with: User, UserService and UserComponent

All @RestController inherit from class OperationsRest

OperationsRest

@ControllerAdvice

RestControllerExceptionHandler

Dockerized application execution instructions

First of all we're going to explain the configuration files and scripts we have. -Dockerfile: File for building the app image. -docker-compose.yml: Here we definied the two services that we have used, database(daw_grupo9) and app (daw). -syncWithDB.sh: The funcionality of this file is sync up the app with the database. -create_image.sh: This script is responsible for creating the app image, build and push to the DockerHub. The database image is the mysql official image we have in DockerHub.

Run the dockerized application - Terminal

Execute the script: sh create_image.sh
Start docker-compose: docker-compose up If we want execute it in background we need to use the command: docker-compose up -d (Deamon mode)

Preparation of development environment

We use IntelliJ IDEA Ultimate and Docker-Desktop. When we created the configuration files (Dockerfile and docker-compose.yml), IntelliJ detected it automatically, we didn't have to install any plugin.

Run the dockerized application - IntelliJ

Edit Configuration: In Run / Debug we have a Docker section, here we can choose between docker, docker image and docker compose, last one is the option we choose for this project.
Settings Server Docker: In this step, we have to edit some fields with the next information: Server: Docker Compose file: ./docker-compose.yml;
Run: Now we can run the application as we normally do, but before check if we have selected docker-compose.yml as chosen application.

Thing to keep in mind: If we use some script in our configuration files we have to give the corresponding permissions to IntelliJ for executing it.

Bibliography

PHASE 4

Preparation of development environment

Before starting download Node.js (JavaScript runtime).

We start with an existing angular application, from the main menu we import the project and then we install the dependencies, for this, we write in the terminal 'npm install'.

Run: To execute our application we follow the following steps: Run - Edit configurations ... - + - npm. In package.json we look for where that file is and in Scripts we put 'start', we give Apply and OK and then run, we wait for it to compile and we can open our browser with http://localhost:4200/. In order to see all the data in our database, we have to execute the spring project and then the angular one, because each one was in a project.

Once we had the application ready, we added it to the spring project, so that it works we have to compile it in a different way. Let's go to the intellij IDEA terminal, write 'cd ng' and then 'npm install'. To execute our application we follow the following steps: Run - Edit configurations ... - + - npm. In package.json we look for where that file is and in Scripts we put 'build', we give Apply and OK and then run, we wait for it to compile.

After this a folder called dist is created inside ng and within dist the my-app folder, the files that are generated in this folder after the build must be moved to the project folder Daw/src/main/resources/static/new. Once we have this done we start spring, to see the angular application we open our browser and we put https://localhost:8443/new/.

Run with Docker: For the dockerized execution we have made a script with the following steps: 1.We build and start the docker container with nodejs, through its console, in it we execute the commands build and install. 2.Once we have the files of the build, we copy them in the folder src / resources / static / new /. 3.Then we made through a container with maven and alpine the construction of the jar of our application.

Finally we execute the command "docker-compose up" to execute the application linked to the database with its corresponding synchronization. Once the application has been started, we can access the traditional application through the URL https://localhost:8080/ and the angular application through the URL https://localhost:8080/new/.

Class diagram and templates

In the following image we can see the diagram of classes and templates:

We use the MVC architecture patter( Model-View-Controller).

MODEL:

Colour - Green

answer.model.ts
concept.model.ts
item.model.ts
lesson.model.ts
page.concept.ts
page.item.ts
page.lesson.ts
question.model.ts
user.model.ts

Colour - Yellow

answer-service.ts
concept-service.ts
item-service.ts
lesson-service.ts
question-service.ts
user-service.ts

Colour - Pink

error.interceptor.ts

CONTROLLER

Colour - Blue

mainpage.component.ts
student-concept-view.component.ts
teacher-concept-view.component.ts
app.component.ts
login.component.ts
app.routing.ts
app.module.ts

VIEW

Colour - Purple

mainpage.component.html
student-concept-view.component.html
teacher-concept-view.component.html
app.component.html
index.html
login.component.html

RELATIONS

answer.model.ts has an association relationship with: user.model.ts and question.model.ts
user.model.ts has an association relationship with: answer.model.ts
question.model.ts has an association relationship with: concept.model.ts and answer.model.ts
page.lesson.ts has an association relationship with: lesson.model.ts
lesson.model.ts has an association relationship with: concept.model.ts
concept.model.ts has an association relationship with: question.model.ts
page.concept.ts has an association relationship with: concept.model.ts
item.model.ts
page.item.ts has an association relationship with: item.model.ts
item-service.ts has an association relationship with: item.model.ts
answer-service.ts has an association relationship with: answer.model.ts
concept-service.ts has an association relationship with: concept.model.ts
lesson-service.ts has an association relationship with: lesson.model.ts
question-service.ts has an association relationship with: question.model.ts
login.service.ts has an association relationship with: user.model.ts
user-service.ts
config.service.ts
login.component.html
app.component.html
mainpage.component.html
teacher-concept-view.component.html
student-concept-view.component.html
login.component.ts has an association relationship with: login.service.ts and user.model.ts
app.component.ts
mainpage.component.ts has an association relationship with: concept.model.ts, concept-service.ts, page.concept.ts, item-service.ts, lesson.model.ts, question.model.ts, item.model.ts, page.item.ts, login.service.ts
teacher-concept-view.component.ts has an association relationship with: page.item.ts, item.model.ts, item-service.ts, login.service.ts, answer.model.ts, answer-service.ts and concept-service.ts
student-concept-view.component.ts has an association relationship with: login.service.ts, question-service.ts, question.model.ts, answer.model.ts, answer-service.ts, concept-service.ts, concept.model.ts and page.concept.ts
app.module.ts has an association relationship with: all component and service
app.routing.ts has an association relationship with: teacher-concept-view.component.ts, student-concept-view.component.ts, mainpage.component.ts, mainpage.component.html, teacher-concept-view.component.html and student-concept-view.component.html
error.interceptor has an association relationship with: login.service.ts

nveobono / santatecla-listados-1 Goto Github PK