Merge pull request #7 from Arquisoft/develop

Updated documentation from develop

README.md

@@ -1,5 +1,12 @@
 # LoMap Es5c
 
+## Participant list
+
+- Jonathan Arias Busto -> UO283586
+- Eduardo Blanco Bielsa -> UO285176
+- Laura Cordero Castrillo -> UO275955
+- Fernando José González Sierra -> UO277938
+
 [![CI for LOMAP ES5C](https://github.com/Arquisoft/lomap_es5c/actions/workflows/lomap_es5c.yml/badge.svg)](https://github.com/Arquisoft/lomap_es5c/actions/workflows/lomap_es5c.yml)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_lomap_es5c&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Arquisoft_lomap_es5c)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_lomap_es5c&metric=coverage)](https://sonarcloud.io/summary/new_code?id=Arquisoft_lomap_es5c)
@@ -10,24 +17,28 @@
 <img src="https://miro.medium.com/max/365/1*Jr3NFSKTfQWRUyjblBSKeg.png" height="100">
 </p>
 
-
 This project is a basic example of website using **React** with **Typescript** and an endpoint using **NodeJS** with **express**.
 
 ## Quick start guide
+
 <mark>In case you already have node.js and npm, make sure you update them before attempting to build the images</mark>
 
 If you want to execute the project you will need [git](https://git-scm.com/downloads), [Node.js and npm](https://www.npmjs.com/get-npm) and [Docker](https://docs.docker.com/get-docker/). Make sure the three of them are installed in your system. Download the project with `git clone https://github.com/arquisoft/lomap_es5c`. The fastest way to launch everything is with docker:
+
 ```bash
 docker-compose up --build
 ```
+
 This will create two docker images as they don't exist in your system (the webapp and the restapi) and launch a mongo container database. It will also launch Prometheus and Grafana containers to monitor the webservice. You should be able to access everything from here:
- - [Webapp - http://localhost:3000](http://localhost:3000)
- - [RestApi example call - http://localhost:5000/api/users/list](http://localhost:5000/api/users/list)
- - [RestApi raw metrics - http://localhost:5000/metrics](http://localhost:5000/metrics)
- - [Prometheus server - http://localhost:9090](http://localhost:9090)
- - [Grafana server http://localhost:9091](http://localhost:9091)
-
+
+- [Webapp - http://localhost:3000](http://localhost:3000)
+- [RestApi example call - http://localhost:5000/api/users/list](http://localhost:5000/api/users/list)
+- [RestApi raw metrics - http://localhost:5000/metrics](http://localhost:5000/metrics)
+- [Prometheus server - http://localhost:9090](http://localhost:9090)
+- [Grafana server http://localhost:9091](http://localhost:9091)
+
 If you want to run it without docker. Compile and run the restapi:
+
 ```shell
 cd restapi
 npm install
@@ -45,16 +56,19 @@ npm start
 You should be able to access the application in [http://localhost:3000](http://localhost:3000).
 
 ## More information
+
 You can get more information about the repository in the other README files:
+
 - Documentation: https://github.com/arquisoft/lomap_es5c/tree/master/docs
 - Webapp: https://github.com/arquisoft/lomap_es5c/tree/master/webapp
 - Restapi: https://github.com/arquisoft/lomap_es5c/tree/master/restapi
 
-
 ## Deployment
+
 For the deployment, we have several options. 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). Other options include using the container services that all the cloud services provide. This means, deploying our Docker containers directly. Here I am going to use the first approach. I am going to create a virtual machine in a cloud service and after installing docker and docker-compose, deploy our containers there using GitHub Actions and SSH.
 
 ### Create the virtual machine [Option 1 - Microsoft Azure]For this example, I am going to create a virtual machine in Azure. Other services like Amazon AWS or Google Cloud, work in the same way.
+
 After logging in to Microsoft Azure with a student account, we can access the services provided. The first one in the creation of Virtual Machines.
 
 <p align="center">   
@@ -90,6 +104,7 @@ After logging in to Microsoft Azure with a student account, we can access the se
 ```ssh
 ssh -i ~/Descargas/DeploymentASW2223_key_0223.pem azureuser@52.147.199.48
 ```
+
 ### Create the virtual machine [Option 2 - Amazon AWS]
 
 Amazon Academy is a platform created by Amazon to prepare students to work with Amazon AWS. In order to create a new virtual machine in AWS we need to access the service EC2.
@@ -110,43 +125,43 @@ Amazon Academy is a platform created by Amazon to prepare students to work with
    <img width="500" alt="EC2 access" src="https://user-images.githubusercontent.com/10683040/158765167-0aa50330-8cad-4450-8060-8b972cdb46e4.png">
 </p>
 
-- In the EC2 Service, at the Instances Menu option, we can monitor our created instances. Click the **Launch Instance** button to create a new instance 
+- In the EC2 Service, at the Instances Menu option, we can monitor our created instances. Click the **Launch Instance** button to create a new instance
 
 <p align="center">   
    <img width="500" alt="Launch instance" src="https://user-images.githubusercontent.com/10683040/158769122-3b082ea9-d796-41ad-a8cb-1c46e309f4af.png">
 </p>
 
-- Follow the wizard steps: - Step 1: Choose an Ubuntu 20.04 LTS image. 
+- Follow the wizard steps: - Step 1: Choose an Ubuntu 20.04 LTS image.
 
 <p align="center">   
    <img width="500" alt="Launch instance" src="https://user-images.githubusercontent.com/10683040/158769294-092c02e3-6a24-449d-8697-affd287a28ea.png">
 </p>
 
-- Step 2:Choose Instance Type. We choose the medium option. 
+- Step 2:Choose Instance Type. We choose the medium option.
 
 <p align="center">   
    <img width="500" alt="Launch instance" src="https://user-images.githubusercontent.com/10683040/158769556-bfaa7733-04d4-45dc-8bfe-ddaf13154958.png">
 </p>
 
-- Step 3:Configure Instance Details- We don't change default values. 
+- Step 3:Configure Instance Details- We don't change default values.
 
 <p align="center">   
    <img width="500" alt="Default options" src="https://user-images.githubusercontent.com/10683040/158769782-41e43d9b-c8d9-456a-b345-e753ac832abb.png">
 </p>
 
-- Step 4: Storage Capacity. We increase storage capacity to 64 Gb 
+- Step 4: Storage Capacity. We increase storage capacity to 64 Gb
 
 <p align="center">   
    <img width="500" alt="Default options" src="https://user-images.githubusercontent.com/10683040/158769977-6ef85390-6fe5-48ab-aa31-d9a653916741.png">
 </p>
 
-- Step 5: We dont add any tag. - Step 6: Configure Security Group. We open ssh , 3000 and 5000 ports for all inbound traffic and every IP. 
+- Step 5: We dont add any tag. - Step 6: Configure Security Group. We open ssh , 3000 and 5000 ports for all inbound traffic and every IP.
 
 <p align="center">   
    <img width="500" alt="Default options" src="https://user-images.githubusercontent.com/10683040/158770582-2e33b804-a53b-4de8-bc60-7b8f6254abaf.png">
 </p>
 
-- Step 7: Summary. At the summary step, before launching our instance, a dialog asks us to create a new Key pair or use an existing one. We'll create a new one with the default value. That will download the **home.pem** file. We always can create new key pairs at the *AWS Console Menu - In the Security and Network - KeyPair* 
+- Step 7: Summary. At the summary step, before launching our instance, a dialog asks us to create a new Key pair or use an existing one. We'll create a new one with the default value. That will download the **home.pem** file. We always can create new key pairs at the _AWS Console Menu - In the Security and Network - KeyPair_
 
 <p align="center">   
    <img width="300" alt="PEM key" src="https://user-images.githubusercontent.com/10683040/158771034-6ea46352-42d7-4506-a700-f2900d684d51.png">
@@ -157,19 +172,21 @@ Amazon Academy is a platform created by Amazon to prepare students to work with
 ```
  chmod 400 awsdeployment.pem
 ```
+
 - Once the instance has been created, we need to know its public ip and/or public dns name. All this information is in the instance detail panel.
 
 <p align="center">   
    <img width="500" alt="Detail instance" src="https://user-images.githubusercontent.com/10683040/158771619-7d893b8a-b09c-4d26-bb0e-96b3c86ede87.png">
 </p>
 
-- We'll connect at our EC2 instance with ssh using our key file: 
+- We'll connect at our EC2 instance with ssh using our key file:
 
 ```bash
 ssh -i awsdeployment.pem ubuntu@ec2-44-202-121-52.compute-1.amazonaws.com
 ```
 
 ### Installing Docker and Docker compose in the virtual machine
+
 Now that we are in the terminal (it does not matter if using AWS or Azure or any other service), let's execute some commands to install Docker and docker-compose:
 
 ```ssh
@@ -183,7 +200,9 @@ 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
 ```
+
 ### GitHub Actions
+
 Now we have a machine capable of executing Docker containers. Let's configure our project to be able to use it to deploy our application. The first thing will be creating some GitHub secrets to have the information we need. We are going to create three, DEPLOY_HOST, with the IP of the virtual machine; DEPLOY_USER with the user with permissions to access the machine (azureuser), and DEPLOY_KEY with the contents of the file with the private key, so we are able to log in to the machine.
 As an extra, we need permission to let GitHub Actions upload the docker images to the registry. For this we need to create a new access token with write:packages permission and set it in the DOCKER_PUSH_TOKEN secret.
 
@@ -192,7 +211,7 @@ As an extra, we need permission to let GitHub Actions upload the docker images t
 Now we are going to create a new docker-compose file called docker-compose-deploy.yaml that will contain the specific docker-compose instructions to deploy the application:
 
 ```yaml
-version: '3.5'
+version: "3.5"
 services:
   restapi:
     image: ghcr.io/arquisoft/lomap_es5c/restapi:latest
@@ -202,19 +221,20 @@ services:
     image: ghcr.io/arquisoft/lomap_es5c/webapp:latest
     ports:
       - "3000:3000"
-    depends_on: 
+    depends_on:
       - restapi
 ```
+
 Note that in this file we are using the images that we uploaded to the github registry instead of building them from scratch.
 
 Now we can configure our actions file to include a new job `deploy` that will be in charge of deploying this docker-compose file to the virtual machine. It will be executed after pushing the docker images to the registry.
 
 ```yaml
 deploy:
-    name: Deploy over SSH
-    runs-on: ubuntu-latest
-    needs: [docker-push-restapi,docker-push-webapp]
-    steps:
+  name: Deploy over SSH
+  runs-on: ubuntu-latest
+  needs: [docker-push-restapi, docker-push-webapp]
+  steps:
     - name: Deploy over SSH
       uses: fifsky/ssh-action@master
       with:
@@ -236,17 +256,23 @@ Not that this job is executed after pushing the images to the registry. We are j
 In order for everything to work, we need to make some extra modifications in the project. There are related with the restapi URL and how React works. In the webapp code we have in the `src/api/api.ts` file the following line:
 
 ```typescript
-const apiEndPoint= process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
+const apiEndPoint =
+  process.env.REACT_APP_API_URI || "http://localhost:5000/api";
 ```
+
 This means that React will look for an environment variable and if it exists, it will take the `apiEndPoint` from there, choosing localhost in any other case. Environment variables in React are picked up in building time and not in execution time. That means we need to pass this variable when we are building the docker image before deploying. For that we need to change the Dockerfile for the webapp and add the following lines before `npm run build`:
+
 ```yaml
 ARG API_URI="http://localhost:5000/api"
 ENV REACT_APP_API_URI=$API_URI
 ```
+
 Now this Dockerfile has an argument (with a default value) that will create the `REACT_APP_API_URI` environment variable before building the production release of the webapp. We need to pass this argument in the GitHub Actions file, when building the webapp image, which is in the job `docker-push-webapp`. Lastly, we need to configure CORS to accept petitions from all the sources in the restapi. This means changing the cors initialization in `restapi/server.ts` to:
+
 ```typescript
 app.use(cors());
 ```
+
 ### Creating a new release
 
 Everything is ready now to make the deploy. For that we need to create a new release. That will fire up the deployment process that we have just configured:
@@ -255,6 +281,3 @@ Everything is ready now to make the deploy. For that we need to create a new rel
 After the actions process is finished, we can access the application using the IP of our virtual machine in port 3000. Note that is very simple to modify the application to work in port 80 instead. We only need to open that port and configure react to use this port instead.
 
 ![image](https://user-images.githubusercontent.com/10683040/155297402-41c09d54-8160-4832-be04-21951d18bc28.png)
-
-
-

docs/01_introduction_and_goals.adoc

@@ -10,6 +10,10 @@ Describes the relevant requirements and the driving forces that software archite
 * relevant stakeholders and their expectations
 ****
 
+* LoMap is a decentralized web application where citizens will be able to check personalized maps filled with their city's places and shops.
+* Our goal is to provide Brussels' citizens the most useful and secure application to keep and share their favourites places such as restaurants, shops, monuments and more.
+* We have also the objective of creating a general software solution for every city around the world that could need our app.
+
 === Requirements Overview
 
 [role="arc42help"]
@@ -30,6 +34,28 @@ If requirements documents exist this overview should refer to these documents.
 Keep these excerpts as short as possible. Balance readability of this document with potential redundancy w.r.t to requirements documents.
 ****
 
+.High level requirements
+[options="header,footer"]
+|=======================
+|Name|Description
+|Adding places on different tabs   |Users can add different kinds of places (shops, restaurants, monuments, landscapes...)    
+|Map visualization    |Users can see places on a map     
+|Reviews    |Users can add punctuations, comments, photos and more to added places   
+|Privacy    |A user can customize the way of sharing information with other users
+|Decentralized information| Each user has a unique pod for its personal information
+|Optional centralized information| If necessary, for specific perfomance purposes, some information can be centralized
+|Social interaction| A user can see other user's places and reviews
+|App options available| There are filters for categories, friends and more
+|=======================
+
+.Extra requirements
+[options="header,footer"]
+|=======================
+|Name|Description
+|User roles| There will be roles: citizien, clothing shop, restaurant, bar...
+|Establishment pods| Shops, bars, restaurants, etc can create their own pod
+|=======================
+
 === Quality Goals
 
 [role="arc42help"]
@@ -45,6 +71,16 @@ If you as an architect do not know how the quality of your work will be judged 
 A table with quality goals and concrete scenarios, ordered by priorities
 ****
 
+[options="header",cols="1,2"]
+|=======================
+|Name|Description
+|Privacy| User information will be on its personal pod (information will be decentralized)
+|Integrity| The app will check that the stored data is valid and ensures that the information lasts
+|Usability| All users will use the app without any problem. The app will be intuitive and easy to use
+|Accesibility| The app can be used with any device (mobile, laptop, tablet or pc)
+|Security| Real-time-location is only available if the user enables it. LoMap will store the minimum required info of the user
+|=======================
+
 === Stakeholders
 
 [role="arc42help"]
@@ -70,6 +106,10 @@ Table with role names, person names, and their expectations with respect to the
 [options="header",cols="1,2,2"]
 |===
 |Role/Name|Contact|Expectations
-| _<Role-1>_ | _<Contact-1>_ | _<Expectation-1>_
-| _<Role-2>_ | _<Contact-2>_ | _<Expectation-2>_
-|===
+|Inrupt |info@inrupt.com| Make decentralized SOLID based technologies more visible for the public through this app
+|Eduardo Blanco Bielsa |uo285176@uniovi.es| Build a secure and decentralized app, hone teamwork and try to get the scolarship offered by SOLID team
+|Jonathan Arias Busto|uo283586@uniovi.es| Learn new skills and learn how to work as a team on big projects
+|Laura Cordero Castrillo|uo275955@uniovi.es| Build a useful app and learn new technologies
+|Fernando José González Sierra|uo277938@uniovi.es|Learn new frontend skills and build a nice app
+|Cristian Augusto|augustocristian@uniovi.es|A full functional and decentralized app
+|===

docs/02_architecture_constraints.adoc

@@ -17,3 +17,31 @@ If needed you can subdivide them into
 technical constraints, organizational and political constraints and
 conventions (e.g. programming or versioning guidelines, documentation or naming conventions)
 ****
+=== Technical constraints
+[options="header",cols="1,2"]
+|=======================
+|Name|Description
+|React| We will use React framework to develop the frontend of the application.
+|JavaScript| It will be used on the frontend but also on the backend to work with SOLID pods and NodeJS.
+|NodeJS| Node.js is designed to build network applications and it will be used as the backend of our application. It is based on JavaScript and it is event-driven.
+|SOLID| We will use SOLID to store users information using PODs, giving this data more privacy. This is a requirement.
+|GitHub| We will use GitHub to update the changes of the source code.
+|Docker + Amazon AWS| We will deploy our application using Amazon AWS to create a virtual machine and use docker to create the images and then deploy the application with GitHub Actions.
+|=======================
+
+=== Convention
+[options="header",cols="1,2"]
+|=======================
+|Name|Description
+|Language| We will work with English as our main language. All commits, pull request, issues, code documentation, etc will be written in English.
+|Code documentation| All the code should have its documentation.
+|Project documentation| We will use Arc42 template to write the documentation. 
+|=======================
+
+=== Organizational constraints
+[options="header",cols="1,2"]
+|=======================
+|Name|Description
+|Meetings| We will assemble every week on the laboraty class to decide the following steps to develop the application. If necessary, extra meetings will be made.
+|Time| This large project can lead to time issues as we need to learn a lot of new technologies. Also we have more subjects to attend to.
+|=======================