🎩 Alist

Table of contents

• Phase 0-1
  • Collaborators
  • Methodology
  • Entities
  • User permissions
  • Images
  • Graphs
  • Complementary Technology
  • Algorithm
• Phase 2
  • Guests
  • Logged user
  • Admin
  • Execution intructions
  • Class Diagram
  • Group members participation

A top list generator of any topic you want.

Phase 0-1

👤 Collaborators

Name	Email	Github Username
Alejandro Porras Torrecilla	[email protected]	skuzow
Gledrian Gutierrez Regala	[email protected]	gutche
Alberto Dekenó Maho	[email protected]	kr4ll
Frantzes Elzaurdia	[email protected]	franchescoURJC
Vicente González Pérez	[email protected]	Vicente1215

👷🛠️ Methodology

Agile methodology using scrum framework with jira.

💾 Entities

• User.
• List.
• Topic.
• Comments.

🚫 User permissions

• Guest: View posts and profiles.
• User: Create posts, manage profile, follow users, like posts, comment on posts.
• Admin: Manage posts, topics, files & user.

🌄 Images

📊 Graphs

This app has a pie chart that shows the popularity of topics based on the number of posts that use said topics.

⚙️ Complementary technology

Email verification for user registration.

🤔 Algorithm

Website is going to have a sort by votes algorithm. In order to show the posts sorted by the difference between upvotes and downvotes.

Phase 2

Database Diagram

Guests

Login page, from this page we are going to be able to log into our personal account. Two more options are offered here, to enter the page as a guest or to create an account.

Register page In case we don't own an account, we are going to be able to create one using the register page.

Feed page Once we are through the login process, the feed, the principal page is going to be shown. Here the navbar makes his appearance, as well as the posts sorted by date of creation.

Search From the navbar every user is going to be able to look for different posts and users by selecting an option or typing it

Profile interactions If u press the number of people who's following an account you'll be able to see the list of accounts

Now selecting one of the user from the list we're going to be redirected to the profile we have just selected.

Logged user

Profile page When the user icon is pressed at the navbar, the profile page shows up. Here we can see information about users such as number of people that he follows or his description.

Profile page of other users When we browse a profile page that isn't ours, if we are logged in we are going to be able to see a button to follow the account.

Comments and comment section When the user is logged he can use the comments section to place his thoughs about the post.

CreateList page This page allow the logged in users to create their own Top-List. By adding photos and descriptions to the list items.

For me page Once you have logged in you can decide to only see posts from people you are currently following, by pressing the heart button at the navbar

Admin

Admin Panel page From this page the admins are going to be able to manage user activities and study the topics graphics !

Execution intructions

• The first point, docker must be installed in order to be able to use the database.

• Once you have docker installed it must be linked with mysql database.

• Assuming that the user is using Visual Studio Code, to run the application in visual you need to install the extensions for Springboot as well as an extension for java plus the jdk-17 and Maven 4.0.0

• Once this is pulished, u can run the application. However, to create an account u need to run maildev, for the confirmation email.

• Once this is finished we can fully run the application

Class Diagram

Screen Navigation

Group members participation

Frantzes

Textual description: Login, registration (email verification), security configuration (encryption, CSRF protection, HTTPS), search bar, navbar, admin-panel and general styling changes.

The five most important commits:

Commit number	Description
#1	Top-list page with comments
#2	Search bar with autocomplete
#3	Email verification for register
#4	Login and registration
#5	Admin-panel layout with collapse and mustache

The five most participated files:

File number	File
#1	RegistrationService.java
#2	AdminPanelController.java
#3	RegisterController.java
#4	WebSecurityConfig.java (and entire net.daw.alist.security package)
#5	searchbar.html

Vicente

Textual description: Database models, database initialize, admin page

The five most important commits:

Commit number	Description
#1	Complete Admin Panel
#2	Database Initialize
#3	Pie chart
#4	Follow users
#5	Add topics

The five most participated files:

File number	File
#1	create-chart.js
#2	Post.java
#3	AdminPanelController.java
#4	DatabaseInitializer.java
#5	User.java

Alberto

Textual description:

The five most important commits:

Commit number	Description
#1	create list logic
#2	creation of posts with several topics
#3	models adjusment
#4	topic selector
#5	Votes logic

The five most participated files:

File number	File
#1	CreateListController.java
#2	topic handler
#3	PostItemService
#4	VotesService
#5	VotesController

Alejandro

Textual description: Profile & Create List, also some models and database init

The five most important commits:

Commit number	Description
#1	Profile
#2	Create List
#3	Models & Database
#4	Spring init
#5	Docker

The five most participated files:

File number	File
#1	ProfileController.java
#2	profile.html
#3	CreateListController.java
#4	create-list.html
#5	/models

Gledrian

Implemented Home page and For me page that required lazy loading and very specific SQL queries.

Five most important commits:

Commit number	Description
#1	Lazy loading script
#2	Navbar
#3	Home page
#4	For me page
#5	SQL queries

Five most participated files:

File number	File
#1	load-data.js
#2	PostController.java
#3	PostRepository.java
#4	navbar.html
#5	/posts models

Phase 3

Rest Class Diagram

Docker Image Construction

1. Make sure to have Docker and git installed.
2. Open your terminal.
3. Clone this repository using the command "git clone https://github.com/CodeURJC-DAW-2022-23/webapp1.git".
4. Execute the command cd ./webapp1/back/docker.
5. Run "create_image.sh [DockerUsername]/[TagName]".

Instructions to run the app

In order to run the dockerized app follow the next steps:

1. Make sure to have Docker and git installed.
2. Open your terminal.
3. Clone this repository using the command "git clone https://github.com/CodeURJC-DAW-2022-23/webapp1.git".
4. Execute the command cd ./webapp1/back/docker.
5. Execute the command "docker-compose up" on the shell.
6. Open the following url "https://localhost:8443".

OpenAPI Specification (SpringDoc)

YAML file: https://github.com/CodeURJC-DAW-2022-23/webapp1/blob/main/back/api-docs/api-docs.yaml

Visualize HTML file: https://raw.githack.com/CodeURJC-DAW-2022-23/webapp1/main/back/api-docs/api-docs.html

Group members participation

Frantzes

Textual description: Rest security configuration, AuthRestController, UserRestController register/banUser/getUser methods and SpringDoc generation.

The five most important commits:

Commit number	Description
#1	Rest security config added
#2	Autowired Utils class removes repeated code
#3	getUser and banUser methods added to UserRestController
#4	register method added inside UserRestController, documentation added, refactors and fixes to follow and upvote/downvote methods
#5	Added SpringDoc

The five most participated files:

File number	File
#1	AuthRestController.java
#2	UserRestController.java
#3	RestSecurityConfig.java
#4	jwt package
#5	PostRestController.java

Vicente

Textual description: CommentRestController and general fixes

The five most important commits:

Commit number	Description
#1	CommentRestController methods added
#2	createComment added and documented
#3	CommentRestController documented
#4	getUserComments and getPostComments implemented
#5	banUser fixed

The five most participated files:

File number	File
#1	CommentRestController.java
#2	AList.postman_collection.json
#3	PostService.java
#4	UserRestController.java
#5	Comment.java

Alberto

Textual description: Methods for Post RestController and UserRestController

The five most important commits:

Commit number	Description
#1	Post RestController postman
#2	Topic RestController postman
#3	Following methods
#4	Votes methods
#5	votes and following documentation

The five most participated files:

File number	File
#1	PostRestController.java
#2	UserRestController.java
#3	AList.postman_collection.json

Alejandro

Textual description: Post and topic rest controller. Docker compose.

The five most important commits:

Commit number	Description
#1	Post rest controller
#2	Topic rest controller
#3	Database wait on
#4	Dockerfile
#5	Docker compose

The five most participated files:

File number	File
#1	PostRestController.java
#2	TopicRestController.java
#3	DatabaseWaitConfigurator.java
#4	Dockerfile
#5	docker-compose.yml

Gledrian

Textual description: Ajax rest controller implementation

Five most important commits:

Commit number	Description
#1	Ajax rest controller implementation
#2	Ajax rest controller docs
#3	Ajax rest controller postman
#4	Post controller postman
#5	Fix for empty ajax rest controller in postman collection

Most participated files:

File number	File
#1	AList.postman_collection.json
#2	AjaxRestController.java

Phase 4

App Demo:

https://youtu.be/vr3C2wiKIMQ

Class diagram

Instructions for developer environment

In order to execute the SPA application in a dev environment you should follow the next steps:

1. Install Docker Desktop.
2. Create and account on Dockerhub.
3. Open any shell of type "bash".
4. Clone this repository using the command "git clone https://github.com/CodeURJC-DAW-2022-23/webapp1.git".
5. Use command "cd" until you get to the folder "Docker".
6. Execute the command "docker-compose -f docker-compose-build.yml up" on the shell.
7. Use command "cd" until you get to the /front/src/app directory.
8. Run "npm install" followed by "ng serve" to download dependencies and run the app.
9. The app is now running on "https://localhost:4200" for development.

Instructions to run the app

In order to run the dockerized app follow the next steps:

1. Make sure to have Docker and git installed.
2. Open your terminal.
3. Clone this repository using the command "git clone https://github.com/CodeURJC-DAW-2022-23/webapp1.git".
4. Execute the command cd ./webapp1/back/docker.
5. Run "create_image.sh [DockerUsername]/[TagName]"

To use the SPA version add /new to URL´s

Intructions to deploy the app

In order to deploy the app follow the next steps:

1. Config private ssh key to access the machine via ssh
2. Connect to the machine via ssh: ssh -i ssh-file-directory-path machine-user@ip-machine-address
3. Clone repo with git clone
4. Go to docker folder inside back and run docker-compose

SPA Classes and Templates Diagram

Group members participation

Frantzes

Textual description:

Five most important commits:

Commit number	Description
#1	Top-list page
#2	Home and following page
#3	Gmail verification
#4	Rest API fixes
#5	Ajax comments

Five most participated files:

File number	File
#1	posts.service.ts
#2	feed.component.ts
#3	top.component.ts
#4	post.component.ts
#5	comment-form.comonent.ts

Vicente

Textual description:

Five most important commits:

Commit number	Description
#1	Create post paga working
#2	Topic choosing
#3	Images
#4	Create post logic
#5	CreatePost API method

Five most participated files:

File number	File
#1	create-post.component.ts
#2	create-post.component.html
#3	create-post.component.css
#4	post.service.ts
#5	PostRestController

Alejandro

Textual description: Angular init, auth & profile related

Five most important commits:

Commit number	Description
#1	Generic feed component
#2	Logged user consistency
#3	Profile basis
#4	Register reactive form
#5	Angular init components

Five most participated files:

File number	File
#1	auth.guard.ts
#2	auth.service.ts
#3	register.component.ts
#4	profile.component.ts
#5	follow.component.ts

Alberto

Textual description:

Five most important commits:

Commit number	Description
#1	Pie Chart admin-panel
#2	Add and delete topic
#3	Users banning admin-panel
#4	Improve of inputs usability admin-panel
#5	Search Bar

Five most participated files:

File number	File
#1	manage-topics.component.html
#2	search.component.ts
#3	search.service.ts
#4	manage-users.component.ts
#5	manage-topics.component.ts

Gledrian

Textual description: Image renders, backend models refactor, navbar icon glow

Five most important commits:

Commit number	Description
#1	Render Image
#2	Navbar icon glow based on route
#3	App icon component
#4	User image render
#5	Refactored classes for better efficiency

Five most participated files:

File number	File
#1	nav.component.ts
#2	icon.component.ts
#3	post.component.html
#4	Post.java
#5	posts.service.ts