Merge branch 'develop'

Arquisoft · May 15, 2024 · 3f79131 · 3f79131
2 parents f3ee759 + 5533eed
commit 3f79131
Show file tree

Hide file tree

Showing 31 changed files with 3,846 additions and 373 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,27 @@
 # wiq_es1d
 
-[![Deploy on release](https://github.com/Arquisoft/wiq_es1d/actions/workflows/release.yml/badge.svg)](https://github.com/Arquisoft/wiq_es1d/actions/workflows/release.yml)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_wiq_es1d&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Arquisoft_wiq_es1d)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_wiq_es1d&metric=coverage)](https://sonarcloud.io/summary/new_code?id=Arquisoft_wiq_es1d)
 
-This is a base repo for the [Software Architecture course](http://arquisoft.github.io/) in [2023/2024 edition](https://arquisoft.github.io/course2324.html). 
+<p float="left">
+    <img src="images/react_and_typescript.png" height="200">
+    <img src="images/node.png" height="200">
+    <img src="images/springBoot_maven.png" height="200">
+</p>
 
-This repo is a basic application composed of several components.
+This is a project based on Node.js and Java, using the technologies of React + TypeScript for the frontend and Spring Boot + Maven for the backend.
 
-- **Gateway service**. Express service that is exposed to the public and serves as a proxy to the two previous ones.
-- **User service**. Express service that handles the insertion of new users in the system.
-- **Auth service**. Express service that handles the authentication of users.
-- **Webapp**. React web application that uses the gateway service to allow basic login and new user features.
+This repo is a basic application composed of several components.
 
-Both the user and auth service share a Mongo database that is accessed with mongoose.
+- **Frontend module**. Module based on React + TypeScript, which utilizes the Keycloak service for authentication, shaping the entire interface through which users will interact.
+- **Backend module**. Module based on Maven along with Spring Boot, containing all the business logic of the app, communicates with the database, and is protected by the Keycloak service.
+- **Keycloak service**. Service based on the Keycloak framework to protect, secure, and authenticate the different necessary parts of the project.
 
+## Requierements
+- Node.js
+- Npm
+- Maven
+
 ## Quick start guide
 
 ### Using docker
@@ -25,90 +32,51 @@ The fastest way for launching this sample project is using docker. Just clone th
 git clone https://github.com/Arquisoft/wiq_es1d.git
 ```
 
-and launch it with docker compose:
+Access the 'docker' folder located at the root:
 
 ```sh
-docker compose --profile dev up --build
+cd docker
 ```
 
-### Starting Component by component
-
-First, start the database. Either install and run Mongo or run it using docker:
-
-```docker run -d -p 27017:27017 --name=my-mongo mongo:latest```
+and launch it with docker compose:
 
-You can also use services like Mongo Altas for running a Mongo database in the cloud.
+```sh
+docker-compose -f ./docker-compose-dev.yml up --build
+```
 
-Now, launch the auth, user and gateway services. Just go to each directory and run `npm install` followed by `npm start`.
+After the deployment is completed, Docker will build six images to subsequently launch the six containers:
 
-Lastly, go to the webapp directory and launch this component with `npm install` followed by `npm start`.
+- Backend
+- Frontend
+- Database
+- Keycloak service
+- Two containers for API monitoring (Prometheus and Grafana)
 
-After all the components are launched, the app should be available in localhost in port 3000.
+Once the containers are up and running, you can access the website through port 3000.
 
-## Deployment
+### Starting Component by component
 
-For the deployment, we have several options. 
+First, start the database. Either install and run Mysql or run it using docker:
 
-The first and more flexible is to deploy to a virtual machine using SSH. This will work with any cloud service (or with our own server). 
+```docker run -d -p 3306:3306 --name=syg-db:latest```
 
-Other options include using the container services that most cloud services provide. This means, deploying our Docker containers directly. 
+Do the same with keycloak
 
-We are going to use the first approach, creating a virtual machine in a cloud service and after installing docker and docker-compose, deploy our containers there using GitHub Actions and SSH.
+```docker run -d -p 8090:8080 --name=keycloak:latest```
 
-### Machine requirements for deployment
+Now, with docker or any IDE you can run the backend with your IDE or with docker like the others components:
 
-The machine for deployment can be created in services like Microsoft Azure or Amazon AWS. These are in general the settings that it must have:
+```docker run -d -p 8080:8080 --name=backend:latest```
 
-- Linux machine with Ubuntu > 20.04.
-- Docker and docker-compose installed.
-- Open ports for the applications installed (in this case, ports 3000 for the webapp and 8000 for the gateway service).
+Finally, to deploy the frontend, you can navigate to the frontend module folder and use:
 
-Once you have the virtual machine created, you can install **docker** and **docker-compose** using the following instructions:
+```npm start```
 
-```ssh
-sudo apt update
-sudo apt install apt-transport-https ca-certificates curl software-properties-common
-curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
-sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"
-sudo apt update
-sudo apt install docker-ce
-sudo usermod -aG docker ${USER}
-sudo curl -L "https://github.com/docker/compose/releases/download/1.28.5/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
-sudo chmod +x /usr/local/bin/docker-compose
-```
+or with docker too:
 
-### Continuous delivery (GitHub Actions)
-
-Once we have our machine ready, we could deploy by hand the application, taking our docker-compose file and executing it in the remote machine. 
-
-In this repository, this process is done automatically using **GitHub Actions**. The idea is to trigger a series of actions when some condition is met in the repository. 
-
-As you can see, unitary tests of each module and e2e tests are executed before pushing the docker images and deploying them. Using this approach we avoid deploying versions that do not pass the tests.
-
-The deploy action is the following:
-
-```yml
-deploy:
-    name: Deploy over SSH
-    runs-on: ubuntu-latest
-    needs: [docker-push-userservice,docker-push-authservice,docker-push-gatewayservice,docker-push-webapp]
-    steps:
-    - name: Deploy over SSH
-      uses: fifsky/ssh-action@master
-      with:
-        host: ${{ secrets.DEPLOY_HOST }}
-        user: ${{ secrets.DEPLOY_USER }}
-        key: ${{ secrets.DEPLOY_KEY }}
-        command: |
-          wget https://raw.githubusercontent.com/arquisoft/wiq_es1d/master/docker-compose.yml -O docker-compose.yml
-          wget https://raw.githubusercontent.com/arquisoft/wiq_es1d/master/.env -O .env
-          docker compose down
-          docker compose --profile prod up -d
-```
+```docker run -d -p 3000:80 --name=frontend:latest```
 
-This action uses three secrets that must be configured in the repository:
-- DEPLOY_HOST: IP of the remote machine.
-- DEPLOY_USER: user with permission to execute the commands in the remote machine.
-- DEPLOY_KEY: key to authenticate the user in the remote machine.
+After all the components are launched, the app should be available in localhost in port 3000.
 
-Note that this action logs in the remote machine and downloads the docker-compose file from the repository and launches it. Obviously, previous actions have been executed which have uploaded the docker images to the GitHub Packages repository.
+## Miembros del equipo:
+- Álvaro González Carracedo - UO251891
diff --git a/docker/docker-compose-dev.yml b/docker/docker-compose-dev.yml
@@ -48,37 +48,36 @@ services:
         aliases:
           - syg-keycloak
 
-  # prometheus:
-  #   container_name: prometheus
-  #   image: prom/prometheus
-  #   ports:
-  #     - 9090:9090              
-  #   volumes:
-  #     - ./syg-backend/SYG-bootstrap/src/prometheus:/etc/prometheus
-  #   command: ["sh", "-c", "envsubst < /etc/prometheus/prometheus.yml.template > /etc/prometheus/prometheus.yml && prometheus --config.file=/etc/prometheus/prometheus.yml"]
-  #   restart: always
-  #   networks:
-  #     syg:
-  #       aliases:
-  #         - syg-prometheus
+  prometheus:
+    container_name: prometheus
+    image: prom/prometheus
+    ports:
+      - 9090:9090              
+    volumes:
+      - ../syg-backend/SYG-bootstrap/src/prometheus:/etc/prometheus
+    restart: always
+    networks:
+      syg:
+        aliases:
+          - syg-prometheus
 
-  # grafana:
-  #   container_name: grafana
-  #   image: grafana/grafana
-  #   volumes:
-  #     - ./syg-backend/SYG-bootstrap/src/grafana/provisioning:/etc/grafana/provisioning
-  #   environment:
-  #     - GF_SERVER_HTTP_PORT=9091
-  #     - GF_AUTH_DISABLE_LOGIN_FORM=true
-  #     - GF_AUTH_ANONYMOUS_ENABLED=true
-  #     - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
-  #   ports:
-  #     - 9091:9091
-  #   restart: always
-  #   networks:
-  #     syg:
-  #       aliases:
-  #         - syg-grafana
+  grafana:
+    container_name: grafana
+    image: grafana/grafana
+    volumes:
+      - ../syg-backend/SYG-bootstrap/src/grafana/provisioning:/etc/grafana/provisioning
+    environment:
+      - GF_SERVER_HTTP_PORT=9091
+      - GF_AUTH_DISABLE_LOGIN_FORM=true
+      - GF_AUTH_ANONYMOUS_ENABLED=true
+      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
+    ports:
+      - 9091:9091
+    restart: always
+    networks:
+      syg:
+        aliases:
+          - syg-grafana
 
   syg-frontend:
     build:

diff --git a/docs/images/07_deployment_view_L1.png b/docs/images/07_deployment_view_L1.png
diff --git a/docs/images/07_deployment_view_L2.png b/docs/images/07_deployment_view_L2.png
diff --git a/docs/images/08_domain_model.png b/docs/images/08_domain_model.png
diff --git a/docs/images/08_hexagonal_arch.png b/docs/images/08_hexagonal_arch.png
diff --git a/docs/images/08_screen_game_1.png b/docs/images/08_screen_game_1.png
diff --git a/docs/images/08_screen_game_2.png b/docs/images/08_screen_game_2.png
diff --git a/docs/images/08_screen_game_3.png b/docs/images/08_screen_game_3.png
diff --git a/docs/images/08_screen_historic.png b/docs/images/08_screen_historic.png
diff --git a/docs/images/08_screen_home.png b/docs/images/08_screen_home.png
diff --git a/docs/images/08_screen_login.png b/docs/images/08_screen_login.png
diff --git a/docs/images/08_screen_ranking.png b/docs/images/08_screen_ranking.png
diff --git a/docs/images/10_quality_tree.png b/docs/images/10_quality_tree.png
diff --git a/docs/index.adoc b/docs/index.adoc
@@ -6,7 +6,7 @@
 // configure EN settings for asciidoc
 include::src/config.adoc[]
 
-= image:arc42-logo.png[arc42] Template
+= image:./images/arc42-logo.png[arc42] SYG-wiq_es1d
 :revnumber: 8.2 EN
 :revdate: January 2023
 :revremark: (based upon AsciiDoc version)

diff --git a/docs/src/07_deployment_view.adoc b/docs/src/07_deployment_view.adoc
@@ -5,90 +5,25 @@ ifndef::imagesdir[:imagesdir: ../images]
 
 == Deployment View
 
-[role="arc42help"]
-****
-.Content
-The deployment view describes:
-
- 1. technical infrastructure used to execute your system, with infrastructure elements like geographical locations, environments, computers, processors, channels and net topologies as well as other infrastructure elements and
-
-2. mapping of (software) building blocks to that infrastructure elements.
-
-Often systems are executed in different environments, e.g. development environment, test environment, production environment. In such cases you should document all relevant environments.
-
-Especially document a deployment view if your software is executed as distributed system with more than one computer, processor, server or container or when you design and construct your own hardware processors and chips.
-
-From a software perspective it is sufficient to capture only those elements of an infrastructure that are needed to show a deployment of your building blocks. Hardware architects can go beyond that and describe an infrastructure to any level of detail they need to capture.
-
-.Motivation
-Software does not run without hardware.
-This underlying infrastructure can and will influence a system and/or some
-cross-cutting concepts. Therefore, there is a need to know the infrastructure.
-
-.Form
-
-Maybe a highest level deployment diagram is already contained in section 3.2. as
-technical context with your own infrastructure as ONE black box. In this section one can
-zoom into this black box using additional deployment diagrams:
-
-* UML offers deployment diagrams to express that view. Use it, probably with nested diagrams,
-when your infrastructure is more complex.
-* When your (hardware) stakeholders prefer other kinds of diagrams rather than a deployment diagram, let them use any kind that is able to show nodes and channels of the infrastructure.
-
-
-.Further Information
-
-See https://docs.arc42.org/section-7/[Deployment View] in the arc42 documentation.
-
-****
-
 === Infrastructure Level 1
 
-[role="arc42help"]
-****
-Describe (usually in a combination of diagrams, tables, and text):
+* Motivation:
+ This diagram helps to point out the different components that we will have to use and their dependencies. It helps us to visualise the deployment path for the system to work. 
 
-* distribution of a system to multiple locations, environments, computers, processors, .., as well as physical connections between them
-* important justifications or motivations for this deployment structure
-* quality and/or performance features of this infrastructure
-* mapping of software artifacts to elements of this infrastructure
-
-For multiple environments or alternative deployments please copy and adapt this section of arc42 for all relevant environments.
-****
-
-_**<Overview Diagram>**_
-
-Motivation::
-
-_<explanation in text form>_
-
-Quality and/or Performance Features::
-
-_<explanation in text form>_
-
-Mapping of Building Blocks to Infrastructure::
-_<description of the mapping>_
+* Quality and/or Performance Features:
+ To improve the quality of the system we have used the best technologies at our disposal, trying to minimise waiting times for user requests.
+
+* Mapping of Building Blocks to Infrastructure:
+ image:07_deployment_view_L1.png["Deployment View Level 1"]
 
 
 === Infrastructure Level 2
 
-[role="arc42help"]
-****
-Here you can include the internal structure of (some) infrastructure elements from level 1.
-
-Please copy the structure from level 1 for each selected element.
-****
-
-==== _<Infrastructure Element 1>_
-
-_<diagram + explanation>_
-
-==== _<Infrastructure Element 2>_
-
-_<diagram + explanation>_
-
-...
-
-==== _<Infrastructure Element n>_
+* Motivation:
+ This second diagram details the launching of the layers. 
 
-_<diagram + explanation>_
+* Quality and/or Performance Features:
+ As we can see in the following image, we are going to use Azure to deploy the application, serving as a remote server. We will also use Docker to launch each part of the system. 
+
+* Mapping of Building Blocks to Infrastructure:
+ image:07_deployment_view_L2.png["Deployment View Level 2"]