LibACE

Video Demo

Index

• Introduction
• Development team
• Web features
  • Entities
  • User permissions
  • Images
  • Charts
  • Complementary technology
  • Advanced algorithms
  • Trello
  • Screenshots
  • Navigation
  • Classes and Templates Diagram
  • Classes and Templates Diagram (Frontend)
  • Members contribution
  • Execution instructions
  • Execution instructions in remote machine
  • API Documentation
  • Execution instructions with Angular

Introduction

LibACE

LibACE is a web application where you can access courses

Development team

Member	Mail	Git username
Sergio Rodríguez Gil	s.rodriguezgi.2021@alumnos.urjc.es	NeoDaru
David Cereceda Catalán	d.cereceda.2021@alumnos.urjc.es	DavidCCGithubURJC
Marcos Alejandro Pascual Rojas	ma.pascual.2020@alumnos.urjc.es	Markos9
Sergio Lopez Cuesta	s.lopezc.2018@alumnos.urjc.es	sergio2000-hub
Gonzalo García Castillo	g.garciac.2022@gmail.com	g-garciac2022

Web Features

Entities

Users

UNREGISTERED USER: Has the ability to view all available courses on the website, and the option to log in/register.

REGISTERED USER: In addition to access all available courses, they can access the content of the courses. They can also add comments on the courses and modify their profile.

ADMIN (MANAGE/EDIT COURSES, CREATE/DELETE): Has the ability to add, delete, and modify courses and comments. They also can see the information of all courses and the ability to delete users.

Courses

Users can view courses, admins can create, modify and delete courses

Comment

The courses have comments, comments can be created by registered users

Material

Admins can add materials to the courses

---

Entities diagram

---

User permissions

Feature	Unregistered User	Registered User	Admin
See available courses	✅	✅	✅
Create courses	❌	❌	✅
Edit courses	❌	❌	✅
Delete courses	❌	❌	✅
Add material to courses	❌	❌	✅
Create an account	✅	❌	❌
Log in	✅	✅	✅
View charts and statistics about courses	✅	✅	✅
Delete accounts	❌	❌	✅
Join a course	❌	✅	✅
Download diploma	❌	✅	✅
See material of courses	❌	✅	✅
Write comments in courses	❌	✅	✅

---

Images

Images of courses

User profile pictures

---

Charts

Number of users chart

The chart shows the courses with the most users currently

---

Complementary technology

Generate Diploma PDF

When the user finish a course, he can generate a Diploma in PDF

---

Advanced algorithms

Filter system

An algorithm to filter courses based on a tag provided by the user.

Trello

• Trello

Screenshots

Index

Login

Register

Create course

Users list

Course

Profile page

Modify profile

Login error

Register error

Course access error

Generic error

Navigation diagram

Classes and Templates Diagram (backend, phase 2)

Classes and Templates Diagram (frontend, phase 3)

Members contribution

David Cereceda Catalán

I have been responsible for implementing the home page (view courses, graph, filter and delete courses), the header (login), the create and edit course form pages, and I have taken care of adding the frontend phase to the Dockerfile.

Commit	Description
1º	Implemented courses in home page
2º	Implemented home page chart
3º	Implemented login
4º	Added angular stage to dockerfile
5º	Edit course working

File	Name
1º	course.service.ts
2º	login.service.ts
3º	homepage.component.ts
4º	Dockerfile
5º	new-course.component.ts

Sergio Rodríguez Gil

I was responsible for implementing everything related to the modify profile page, and a part of the profile page. Being able to redirect the user when accessing this pages without being authenticated was also my job.

Commit	Description
1º	Redirects to login when not authenticated
2º	Modify profile works excluding image update
3º	Change edit profile page appearance
4º	Working redirection to edit profile page
5º	Fix modify profile image

File	Name
1º	modify-profile.component
2º	profile-page.component
3º	user.service
4º	modify-profile.component.html
5º	app.module

Sergio López Cuesta

I implemented the user-list component, the error pages, and worked on the services

Commit	Description
1º	User-list.component.ts done
2º	User-list.component.html finished
3º	User.service.ts updated
4º	User-list.component.html started
5º	Minor changes on services

File	Name
1º	User-list.component.ts
2º	User-list.component.html
3º	UserService.ts
4º	error.component.html
5º	login.service.ts

Marcos Alejandro Pascual Rojas

I worked in the develop of the Course Page, implementing the upload, download and delete of materials, and the functionality of the comment section.

Commit	Description
1º	Added course component and template
2º	Course page shows corresponding materials
3º	Feature show comments in course page
4º	Feature users can add comments
5º	Feature admin can delete comments

File	Name
1º	comment.service
2º	course.service
3º	material.service
4º	course.component
5º	CommentRestController

Gonzalo García Castillo

My job consisted mostly in implementing the logic behind registrations and user profile (creating the neccesary service), while also update the class diagram and fixing minor issues.

Commit	Description
1º	Implement registration form and service integration
2º	Add profile page component and user service integratio
3º	Fixed user image logic to use service and updated backend for fallback
4º	Fixed api call not using service
5º	Refactor course component to use getters for login and admin status

File	Name
1º	user.service.ts
2º	register.component.ts
3º	register.component.html
4º	user.dto.ts
5º	profile-page.component.ts

Execution instructions

1. Install VSCode
2. Install Java, Maven and Spring Boot extensions in VSCode
3. Download MySQL and MySQL Workbench (use "password" as your password). Create a schema named "libace"
4. Download this repository code and execute it on VSCode (is easier with the Spring Boot Dashboard extension)
5. Introduce this URL in your browser (it will tell you its not secure, but that just because its on development, nothing to worry about): https://localhost:8443/

Execution instructions in remote machine

1. Connect to the remote machine: Run ssh -i ssh-keys/appWeb03.key in GitBash from the appWeb03 folder containing the ssh-keys folder and type yes if a warning message appears.
2. Run git clone https://github.com/CodeURJC-DAW-2024-25/webapp03
3. Access the docker directory with cd webapp03/docker
4. Give execution permissions to create_image.sh (chmod +x create_image.sh)
5. Run ./create_image.sh
6. Give execution permissions to publish_image.sh (chmod +x create_image.sh)
7. Run ./publish_image.sh
8. Run docker compose up -d
9. Access the URL https://appweb03.dawgis.etsii.urjc.es/ in any browser

API Documentation

API Documentation (HTML)

API Documentation (YAML)

API Documentation (Link)

Execution instructions with Angular

1. Install Angular with: npm install -g @angular/cli
2. Clone the repository: git clone https://github.com/CodeURJC-DAW-2024-25/webapp03.git
3. Access to /frontend/libace
4. Run npm install (only first time)
5. Run ng build --configuration=production
6. Copy files from /frontend/libace/dist/libace/browser to /backend/src/main/resources/static/new
7. Run backend (Execution instructions)
8. The SPA application with Angular will be available at https://localhost:8443/new
9. To run on a remote machine, the same steps as in the previous version are followed (Execution instructions in remote machine) and the app will be available at https://appweb03.dawgis.etsii.urjc.es/new