diff --git a/.github/workflows/lomap_es4a.yml b/.github/workflows/lomap_es4a.yml index 0e56884..1605c91 100644 --- a/.github/workflows/lomap_es4a.yml +++ b/.github/workflows/lomap_es4a.yml @@ -13,6 +13,9 @@ on: - master - develop +env: + REACT_APP_GOOGLE_KEY: ${{ secrets.REACT_APP_GOOGLE_KEY }} + jobs: unit-tests: runs-on: ubuntu-latest @@ -34,8 +37,8 @@ jobs: needs: [unit-tests] runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: node-version: 18 - run: npm --prefix webapp install diff --git a/README.md b/README.md index f2f6113..2d56aa6 100644 --- a/README.md +++ b/README.md @@ -5,256 +5,120 @@ [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_lomap_es4a&metric=coverage)](https://sonarcloud.io/summary/new_code?id=Arquisoft_lomap_es4a)

- - - +

+# Welcome to LoMap! -This project is a basic example of website using **React** with **Typescript** and an endpoint using **NodeJS** with **express**. +- LoMap is a software solution that allows you to create a map, fill it with places and share it with your friends. -## Quick start guide -In case you already have node.js and npm, make sure you update them before attempting to build the images +- LoMap provides an easy-to-use web application interface that allows you to choose between different maps, add and edit places, save images and reviews, filter points and much more. -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_es4a`. 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) - -If you want to run it without docker. Compile and run the restapi: -```shell -cd restapi -npm install -npm start -``` +- LoMap cares about your privacy, so we don’t store ANY of your data. By using the SOLID principles, the data you create will be stored in your own SOLID POD. -Now the webapp: +# User Guide -```shell -cd webapp -npm install -npm start -``` +LoMap uses a SOLID POD, which is a space that contains your data. From your POD you can decide who has access to your data and revoke access whenever you want to. +To use a SOLID POD, you first need to create an account with a SOLID POD. To create an account, please follow these steps [get-a-pod](https://solidproject.org/users/get-a-pod). The supported providers are [inrupt.net](https://inrupt.net/), [solidcommunity.net](https://solidcommunity.net/) and [solidweb.org](https://solidweb.org/). Please, keep in mind that supporting more providers is still a work in progress! -You should be able to access the application in [http://localhost:3000](http://localhost:3000). +After creating an account with a POD provider, you can already use LoMap! To use LoMap, access [LoMap](https://gonzalo-rr.github.io/lomap_es4a/) and log in using your SOLID POD provider account. When you log in for the first time we will create a default map, you can change it or create new maps. Then, you can start to add new places. -## More information -You can get more information about the repository in the other README files: -- Documentation: https://github.com/arquisoft/lomap_es4a/tree/master/docs -- Webapp: https://github.com/arquisoft/lomap_es4a/tree/master/webapp -- Restapi: https://github.com/arquisoft/lomap_es4a/tree/master/restapi +## How to add, delete and switch between maps +To add or switch between maps, first press the menu on the upper right-hand corner of your screen. +![image](https://user-images.githubusercontent.com/98962656/236052651-5e306d77-89a6-4b98-ae19-34440f4498a7.png) -## 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. +Then press “MapList”. -### 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. +![image](https://user-images.githubusercontent.com/98962656/236052937-84c9d947-5423-4d00-85ea-068237b43202.png) -

- Azure options -

+Finally, you will be presented with tree options. -- After clicking in Virtual Machines we will be able to create a new virtual machine. The basic machine (2Gb of RAM), would be enough for this example. Make sure that a pair of keys are generated to be able to access the machine. +You create a new map by writing a new map’s name in the create a new map option and press “create new map” to create the new map. (1) -

- Creating the VM -

+You load a different map by selecting one of your maps or one of your friend’s maps and pressing “load map” to switch to that map. (2) -- Download the private key. We will need it to be able to remotely deploy the application over SSH. +You can delete one of your maps by selecting one of your maps and pressing “delete map” to delete it. (3) -

- Download private key -

+![image](https://user-images.githubusercontent.com/98962656/236053404-3d5b6700-506c-49fc-99e6-a75983811c0b.png) -- After creating the machine, we can access its network information. Here we will have useful information as the public IP, that we will use to access the machine. Also, this is where we are going to configure the ports that will be accessible (in our case, ports 3000 and 5000). +## How to add a new place +To add a new place, click in the map, where you want the point to be located. -

- Network configuration -

+You will see a menu to set the place’s name, description, and category. Keep in mind that name and category are required. -- To add more open ports, press in "Add inbound security route". Then, fill in the information to open ports 3000 and 5000. +Finally, press “add point” to save the point to the current map. -

- Download private key -

+![image](https://user-images.githubusercontent.com/98962656/236054244-51755ad3-87e4-47b0-90b7-b3e97fc0a7c7.png) -- Now is time for accessing the machine using SSH and install docker in it. For this, use the public IP of your machine, with the user `azureuser` and the private key that you downloaded previously. If you are not sure how to connect, check the help in the connect tab in Azure. For instance, in my case I use this command for connecting: +## How to add images and reviews to a place +To add images and reviews, you need to clic the point you want. -```ssh -ssh -i ~/Descargas/DeploymentASW2223_key_0223.pem azureuser@52.147.199.48 -``` -### Create the virtual machine [Option 2 - Amazon AWS] +You will see a menu to upload images and another one to add reviews. -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. +![image](https://user-images.githubusercontent.com/98962656/236055331-be4fd377-1f72-40cc-b7fe-b964bfe0052f.png) -- Log In at LMS AWS Academy with your student user/passwd -- At the DashBoard, click on the Lab Course AWS Academy Learner Lab - Foundation Services [15286] -- Now you are inside the AWS Course. The Module Menu Item shows you available course materials: guides, presentations...Click on Learner Lab - Foundational Services to go to your lab. Lab image: +![image](https://user-images.githubusercontent.com/98962656/236055740-ad921f50-7015-45f6-a8c1-edc191937c61.png) -

- Fundational services -

+If you clic on the image you can see it bigger! (clic away to close) -- Start the lab by selecting Start Lab -- When the dot next to AWS turns green, your lab environment is ready to use. Click AWS to launch the AWS Console in a new tab. A new tab will open the AWS Management Console when you click on AWS. The system logged you into a temporary AWS account and the lab session will automatically end when the session timer expires. The system will save your work when you end the session or the session timer expires. -- Go to AWS Console Tab and select services EC2 +![image](https://user-images.githubusercontent.com/98962656/236055864-53c0e28f-4016-4343-8b5d-649dbc43e3bf.png) -

- EC2 access -

+## How to edit a place +To edit a place, first press the menu on the upper right-hand corner of your screen. -- 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 +![image](https://user-images.githubusercontent.com/98962656/236052651-5e306d77-89a6-4b98-ae19-34440f4498a7.png) -

- Launch instance -

+Then press “Points”. -- Follow the wizard steps: - Step 1: Choose an Ubuntu 20.04 LTS image. +![image](https://user-images.githubusercontent.com/98962656/236056077-f3051942-9e0f-4787-a814-8a9d85f9ff64.png) -

- Launch instance -

+The menu you will see has two parts, the first one is to filter the places, by categories (for now). The second one is to change their visibility. -- Step 2:Choose Instance Type. We choose the medium option. +![image](https://user-images.githubusercontent.com/98962656/236056353-ed798542-3863-44ef-af16-594b94574c0e.png) -

- Launch instance -

+In the second menu you will see an icon in the shape of a pencil to edit each point. Press it. -- Step 3:Configure Instance Details- We don't change default values. +![image](https://user-images.githubusercontent.com/98962656/236056629-576962ac-35c3-46cc-80e6-7816667df856.png) -

- Default options -

+You will see a menu to edit the point’s information. Keep in mind that name and category are still required. -- Step 4: Storage Capacity. We increase storage capacity to 64 Gb +Finally, press “save place” to save the edited place to the current map. -

- Default options -

+![image](https://user-images.githubusercontent.com/98962656/236056845-665d81b0-7dfb-41a7-ae98-fac0fd9229e2.png) -- 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. +## How to hide, show and filter places +To hide, show and filter places, first press the menu on the upper right-hand corner of your screen. -

- Default options -

+![image](https://user-images.githubusercontent.com/98962656/236052651-5e306d77-89a6-4b98-ae19-34440f4498a7.png) -- 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* +Then press “Points”. -

- PEM key -

+![image](https://user-images.githubusercontent.com/98962656/236056077-f3051942-9e0f-4787-a814-8a9d85f9ff64.png) -- If you will use an SSH client on a macOS or Linux computer to connect to your Linux instance, use the following command to set the permissions of your private key file so that only you can read it. +The menu you will see has two parts, the first one is to filter the places, by categories. The second one is to change their visibility. -``` - 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. +To filter the places, select or deselect the boxes of the categories you want to see or hide and press “Filter”. Additionally, you can press “mark all” or “unmark all” to select all categories or unmark all categories. -

- Detail instance -

+![image](https://user-images.githubusercontent.com/98962656/236057917-4593a67f-be6c-4c68-ab8a-860b13a60368.png) + +To hide and show the places, press the switches of each point to change their visibility. Additionally, you can show or hide all places by pressing “Show / Hide all”. + +![image](https://user-images.githubusercontent.com/98962656/236058438-9a1c7e13-8b79-46c4-b17c-4ead97380e2f.png) + +## How to add and delete a friend +To add and delete friends, first press the menu on the upper right-hand corner of your screen. + +![image](https://user-images.githubusercontent.com/98962656/236052651-5e306d77-89a6-4b98-ae19-34440f4498a7.png) + +Then press “MyFriends”. + +![image](https://user-images.githubusercontent.com/98962656/236058635-9ef53495-1f9c-44cd-883f-3bb64a04d571.png) -- 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 -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 -``` -### 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. - -![image](https://user-images.githubusercontent.com/10683040/155285731-4ecd6d29-b2f6-46ee-959b-689ea9f69fc7.png) - -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' -services: - restapi: - image: ghcr.io/arquisoft/lomap_es4a/restapi:latest - ports: - - "5000:5000" - webapp: - image: ghcr.io/arquisoft/lomap_es4a/webapp:latest - ports: - - "3000:3000" - 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 - 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/lomap_es4a/master/docker-compose-deploy.yml -O docker-compose.yml - docker-compose stop - docker-compose rm -f - docker-compose pull - docker-compose up -d -``` - -Not that this job is executed after pushing the images to the registry. We are just logging in to the machine over SSH and stoping any running containers, pulling the new images and launching everything up. - -### Extra modifications needed - -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' -``` -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: -![image](https://user-images.githubusercontent.com/10683040/155293978-8e77e821-ed21-4f28-abd9-282ae9e5661b.png) - -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) +Then you will see your current friends and a button to add friends. +![image](https://user-images.githubusercontent.com/98962656/236058747-d7f948e3-ff71-4538-9e8c-e56e09b724ae.png) +For each friend you can delete it or see their pod. +![image](https://user-images.githubusercontent.com/98962656/236058832-d8a0da27-e22d-47f3-bef8-edddc1b3a697.png) diff --git a/docs/01_introduction_and_goals.adoc b/docs/01_introduction_and_goals.adoc index f3dc543..62b7ca3 100644 --- a/docs/01_introduction_and_goals.adoc +++ b/docs/01_introduction_and_goals.adoc @@ -3,7 +3,7 @@ === Requirements Overview -The LoMap system is a software solution that allows the citizens of a city to share places of interest as well as allow businesses to share their locations to potential clients. These places are part of a map, and the users can give feedback about them to other users. +The LoMap system is a software solution that allows the citizens of a city to share places of interest with other users. These places are part of a map, and the users can give feedback about them to other users. The LoMap system must accomplish the following requirements: @@ -24,7 +24,7 @@ The LoMap system must accomplish the following requirements: |Quality Goal|Description | Usability | Non technical users must be able to use the app easily. Aesthetics must be familiar and understandable to them. | Privacy | Users can control the data that is shared with the app thanks to SOLID principles and the use of pods. -| Efficiency | There must be a medium point between privacy and efficiency (all the information may not be stored inside the pods due to decreases in performance. +| Efficiency | There must be a medium point between privacy and efficiency (all the information may not be stored inside the pods due to decreases in performance). | Testability | The application should be able to go through different test and complete them successfully. |=== diff --git a/docs/02_architecture_constraints.adoc b/docs/02_architecture_constraints.adoc index e9e7c42..09b4cc0 100644 --- a/docs/02_architecture_constraints.adoc +++ b/docs/02_architecture_constraints.adoc @@ -5,8 +5,8 @@ [options="header",cols="1,2"] |=== |Constrains | Description -| Arc42 | It will be the base template followed by the documentation. -| Git & GitHub | A version control management has to be used so that the software can be versioned and all developers have access to the project. GitHub is a tool that has to be used so the professors can evaluate the project. +| Arc42 | It will be the base template followed for the documentation. +| Git & GitHub | A version control management system has to be used so that the software can be versioned and all developers have access to the project. GitHub is a tool that has to be used so the professors can evaluate the project. |=== === Technology conventions [options="header",cols="1,2"] diff --git a/docs/03_system_scope_and_context.adoc b/docs/03_system_scope_and_context.adoc index 829d0dc..e775187 100644 --- a/docs/03_system_scope_and_context.adoc +++ b/docs/03_system_scope_and_context.adoc @@ -6,7 +6,7 @@ :imagesdir: images/ image::03_system_scope_context_business.png[business system scope and context diagram] -The main components that the LoMap system interacts with are: Database, Maps API, POD. +The main components that the LoMap system interacts with are: Maps API, POD. The final user has a POD and uses the LoMap system to save and share maps. The LoMap system can also access the user's POD to store information. @@ -15,4 +15,4 @@ The final user has a POD and uses the LoMap system to save and share maps. The L :imagesdir: images/ image::03_system_scope_context_technical.png[technical system scope and context diagram] -The components of the application use certain technologies and communicate with eachother using different channels. The LoMap application will be programmed mostly using TypeScript and the React and Node JS Express frameworks. The Pod will be a SOLID POD. The connections that happen between LoMap and the user's device follow the http protocol and the connection between the user's device and the SOLID PODs follow the https protocol, so the information is secure. LoMap will use a Google Maps API, and the connections will use http. +The components of the application use certain technologies and communicate with eachother using different channels. The LoMap application will be programmed mostly using TypeScript and the React framework. The Pod will be a SOLID POD. The connections that happen between LoMap and the user's device follow the https protocol and the connection between the user's device and the SOLID PODs follow the https protocol, so the information is secure. LoMap will use a Google Maps API, and the connections will use http. diff --git a/docs/04_solution_strategy.adoc b/docs/04_solution_strategy.adoc index 36180b6..fc29ff8 100644 --- a/docs/04_solution_strategy.adoc +++ b/docs/04_solution_strategy.adoc @@ -16,15 +16,15 @@ Some members of the team will use Github IDEs such as Github Destopk, Github Kra === How are the quality goals going to be reached? .Usability: -Our interfaces will be intuitive and easy to use for anyone. +Our interfaces will be intuitive and easy to use for anyone thanks to using the React framework. .Privacy: The essential information will be stored in SOLID PODs providing a strong privacy. .Eficiency: -The performance will be smooth, by using the SOLID PODs correctly. +The performance will be smooth, by using the SOLID PODs correctly and not using a REST API. .Testability: -The team will test the app manually and automatically +The team will test the app manually and automatically with automated jest tests. *** diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc index ae712ec..5981257 100644 --- a/docs/05_building_block_view.adoc +++ b/docs/05_building_block_view.adoc @@ -39,14 +39,14 @@ folder api as "Maps' API" folder pod as "User's pod" package LoMap { component frontend - component backend + component solidapi - frontend <-> backend + frontend <-> solidapi } -backend -up-> api: API request +frontend -up-> api: API request User -up-> frontend: interacts with -backend<-right-> pod: obtains data +solidapi<-right-> pod: obtains data ---- Motivation:: @@ -58,24 +58,6 @@ Contained Building Blocks:: |=== | **Black boxes** | **Description** | Frontend | Application user's interface. -| Backend | It is in charge of administrate the application logic. +| Solidapi | It contains all the functionality related with pod's management. |=== - - -=== Level 3 - -==== White Box <_building block x.1_> - -__ - - -==== White Box <_building block x.2_> - -__ - - - -==== White Box <_building block y.1_> - -__ diff --git a/docs/07_deployment_view.adoc b/docs/07_deployment_view.adoc index 963873b..0f587d3 100644 --- a/docs/07_deployment_view.adoc +++ b/docs/07_deployment_view.adoc @@ -4,15 +4,15 @@ === Development Diagram -While in development, the LoMap system will be run in the developer's computer. The system will be deployed in the developer's computer using Docker images which contain the necesary programs to run the application as a standalone application. Prometheus and Grafana will monitor and give information about the restapi. As it is shown in the diagram, the SOLID PODs, as well as the Maps API, are not part of the LoMap system. -While the application is being developed, the MongoDB database will be allocated in the developer's computer. This will not be the case when the application is deployed. +While in development, the LoMap system will be run in the developer's computer. The system will be deployed in the developer's computer using a Docker image which contains the necesary programs to run the application as a standalone application. As it is shown in the diagram, the SOLID PODs, as well as the Maps API, are not part of the LoMap system. +While the application is being developed, there is a Docker image that runs the webapp. This will not be the case when the application is deployed. :imagesdir: images/ image::07_deployment_view_development.png[deployment view diagram in development] === Deployment Diagram -While in deployment run in a Server. The users will connect to this server to access the application for the most part in the user's device, whether it is a smartphone or a personal computer. The system will be deployed using Docker images. The webapp is the part of the system that the users will interact with. The restapi will be in charge of integrating all the other parts of the system and using external components such as SOLID PODs and a Maps API. +While in deployment the application will run in GitHub pages on another repository. The users will connect to GitHub pages to access the application, for the most part through the user's device. The webapp is the part of the system that the users will interact with. :imagesdir: images/ image::07_deployment_view_deployment.png[deployment view diagram in deployment] diff --git a/docs/08_concepts.adoc b/docs/08_concepts.adoc index 49e126a..6beea50 100644 --- a/docs/08_concepts.adoc +++ b/docs/08_concepts.adoc @@ -1,51 +1,6 @@ [[section-concepts]] == Cross-cutting Concepts - -[role="arc42help"] -**** -.Content -This section describes overall, principal regulations and solution ideas that are -relevant in multiple parts (= cross-cutting) of your system. -Such concepts are often related to multiple building blocks. -They can include many topics, such as - -* domain models -* architecture patterns or design patterns -* rules for using specific technology -* principal, often technical decisions of overall decisions -* implementation rules - -.Motivation -Concepts form the basis for _conceptual integrity_ (consistency, homogeneity) -of the architecture. Thus, they are an important contribution to achieve inner qualities of your system. - -Some of these concepts cannot be assigned to individual building blocks -(e.g. security or safety). This is the place in the template that we provided for a -cohesive specification of such concepts. - -.Form -The form can be varied: - -* concept papers with any kind of structure -* cross-cutting model excerpts or scenarios using notations of the architecture views -* sample implementations, especially for technical concepts -* reference to typical usage of standard frameworks (e.g. using Hibernate for object/relational mapping) - -.Structure -A potential (but not mandatory) structure for this section could be: - -* Domain concepts -* User Experience concepts (UX) -* Safety and security concepts -* Architecture and design patterns -* "Under-the-hood" -* development concepts -* operational concepts - -Note: it might be difficult to assign individual concepts to one specific topic -on this list. -**** === Domain Concept :imagesdir: images/ @@ -53,9 +8,9 @@ image::08_concepts.png[Domain concept] User: This represents a client of the application. They can add other users as Friends, and they have a map to mark their favourite places too. We get their information through the POD. -Map: This represents the users map of the app. Contains the markers made by the user. +Map: This represents the users' map. It contains the markers made by the user. -Mark: This class represents the Marker made by the user with his name, user score, a Location and a list of all times comments. +Mark: This class represents the Marker that represents the location of a place. Comment: This represents a comment made in a marked location by a certain user with all his information including the posting time and rate of the user. diff --git a/docs/09_design_decisions.adoc b/docs/09_design_decisions.adoc index 4411718..3e43437 100644 --- a/docs/09_design_decisions.adoc +++ b/docs/09_design_decisions.adoc @@ -1,35 +1,11 @@ [[section-design-decisions]] == Design Decisions - -[role="arc42help"] -**** -.Contents -Important, expensive, large scale or risky architecture decisions including rationals. -With "decisions" we mean selecting one alternative based on given criteria. - -Please use your judgement to decide whether an architectural decision should be documented -here in this central section or whether you better document it locally -(e.g. within the white box template of one building block). - -Avoid redundancy. Refer to section 4, where you already captured the most important decisions of your architecture. - -.Motivation -Stakeholders of your system should be able to comprehend and retrace your decisions. - -.Form -Various options: - -* List or table, ordered by importance and consequences or: -* more detailed in form of separate sections per decision -* ADR (architecture decision record) for every important decision -**** - .Desing Decisions ordered by priority (from most to least important) [options="header",cols="1,2,2"] |=== |Desing Decision|Advantages|Disadvantages | TypeScript | Versatile language to program web applications. | Neither of us has experience with its use. | React | Very used javascript library. Easy to learn and use. Reusable components. | We have never worked with a library like this. -| Node.js | Allows javascript use in the backend. High-performance for Real-time Applications. Easy Scalability. Easy to learn. | We only know PHP as server-side language. +| Not using REST API | Less latency. Easier to develop. Lighter application. | Higher coupling in the application. Lack of backend |=== diff --git a/docs/10_quality_scenarios.adoc b/docs/10_quality_scenarios.adoc index d442a95..4a9f3cd 100644 --- a/docs/10_quality_scenarios.adoc +++ b/docs/10_quality_scenarios.adoc @@ -1,72 +1,35 @@ [[section-quality-scenarios]] == Quality Requirements - -[role="arc42help"] -**** - -.Content -This section contains all quality requirements as quality tree with scenarios. The most important ones have already been described in section 1.2. (quality goals) - -Here you can also capture quality requirements with lesser priority, -which will not create high risks when they are not fully achieved. - -.Motivation -Since quality requirements will have a lot of influence on architectural -decisions you should know for every stakeholder what is really important to them, -concrete and measurable. -**** - === Quality Tree +:imagesdir: images/ +image::QualityTree.png[] +=== Quality Scenarios -[role="arc42help"] -**** -.Content -The quality tree (as defined in ATAM – Architecture Tradeoff Analysis Method) with quality/evaluation scenarios as leafs. - -.Motivation -The tree structure with priorities provides an overview for a sometimes large number of quality requirements. +[options="header",cols="1,3,3"] +|=== +|Quality requirement | Quality scenario | Priority +| Usability | Our app has to be easy to use for every kind of user, even for a non-experienced one. The views must be clear and intuitive, and the user has to be able to browse fluently through the entire application. In addition, the required mechanisms to ease the users use of the app must be implemented. | High +| Privacy | Giving the users the control of the information saved and shared, we guarantee that there won't be personal leaks. This is a result of the use of pods and a very cared system of terms and privacy options. | Medium-high +| Efficiency | The conection and browsing speed must be fast enough to keep the users' attention and to not bore them, giving a fluent experience through the app. | Medium-high +| Testability | The application should be able to go through different test and complete them successfully. Besides, the app has to be prepared for all kind of logical uses by the user | Medium-low +|=== -.Form -The quality tree is a high-level overview of the quality goals and requirements: +Some of these quality attributes have been checked with the following load tests: -* tree-like refinement of the term "quality". Use "quality" or "usefulness" as a root -* a mind map with quality categories as main branches +* 4 load peaks of 100 users, each 40 seconds: -In any case the tree should include links to the scenarios of the following section. -**** :imagesdir: images/ -image::QualityTree.png[] -=== Quality Scenarios - -[role="arc42help"] -**** -.Contents -Concretization of (sometimes vague or implicit) quality requirements using (quality) scenarios. +image::loadTest_4_peaks.png[] -These scenarios describe what should happen when a stimulus arrives at the system. +* 1 user per second, through 3 minutes: -For architects, two kinds of scenarios are important: +image::loadTest_1_user_per_second.png[] -* Usage scenarios (also called application scenarios or use case scenarios) describe the system’s runtime reaction to a certain stimulus. This also includes scenarios that describe the system’s efficiency or performance. Example: The system reacts to a user’s request within one second. -* Change scenarios describe a modification of the system or of its immediate environment. Example: Additional functionality is implemented or requirements for a quality attribute change. +* 3 series of 1, 5 and 10 users per second during 60 seconds, each other: -.Motivation -Scenarios make quality requirements concrete and allow to -more easily measure or decide whether they are fulfilled. +image::loadTest_3_series.png[] -Especially when you want to assess your architecture using methods like -ATAM you need to describe your quality goals (from section 1.2) -more precisely down to a level of scenarios that can be discussed and evaluated. +* normal app use (20 users for 30 seconds): -.Form -Tabular or free form text. -**** -[options="header",cols="1,3,3"] -|=== -|Quality requirement | Quality scenario | Priority -| Usability | Our app have to be easy to use for every kind of user, even for a non-experienced one. The views must be clear and intuitive, and the user has to be able to browse fluently through the entire application. In addition, must be implemented the recquired mechanisms to ease the users use of the app. | High -| Privacy | Giving the users the control of the information saved and shared, we guarantee that there wouldn't be personal leaks. This is a result of the use of pods and a very cared system of terms and privacy options. | Medium-high -| Efficiency | The conection and browsing speed must be faster enaugh to keep users attention and don't bore them, giving a fluent experience through the app. We are looking a balance with the privacy in terms of storeage of the personal user's information | Medium-high -| Testability | The application should be able to go through different test and complete them successfully. Besides, the app has to be prepared for all kind of logical uses by the user | Medium-low -|=== +image::loadTest_normal_app_use.png[] diff --git a/docs/11_technical_risks.adoc b/docs/11_technical_risks.adoc index f8b3c7c..00eb41a 100644 --- a/docs/11_technical_risks.adoc +++ b/docs/11_technical_risks.adoc @@ -1,20 +1,6 @@ [[section-technical-risks]] == Risks and Technical Debts -[role="arc42help"] -**** -.Contents -A list of identified technical risks or technical debts, ordered by priority - -.Motivation -“Risk management is project management for grown-ups” (Tim Lister, Atlantic Systems Guild.) - -This should be your motto for systematic detection and evaluation of risks and technical debts in the architecture, which will be needed by management stakeholders (e.g. project managers, product owners) as part of the overall risk analysis and measurement planning. - -.Form -List of risks and/or technical debts, probably including suggested measures to minimize, mitigate or avoid risks or reduce technical debts. -**** - === Risks ==== Organizational Risks @@ -26,4 +12,9 @@ List of risks and/or technical debts, probably including suggested measures to m ==== Technological Risks * If the team does not properly understand the technologies used, the system may not satisfy the quality goals. -* If the data stored centrally contains too much information, the user privacy will not be respected. On the other hand, if all the data is stored in user PODs, the system will be too slow, so a certain balance must be found. + +==== Technical Debt + +* There is no REST API, which means there is no backend. This is something that may hinder future development. Not having a REST API also means that the application will not be able to be used through requests to the REST API. +* There is no database, this means that there is no possibility to store useful information centrally. This might be useful for future growth of the application. +* The code could be better organized, currently a change may require to update various files. In the future the application may need to be refactored to lower its coupling. diff --git a/docs/12_glossary.adoc b/docs/12_glossary.adoc deleted file mode 100644 index 01e71be..0000000 --- a/docs/12_glossary.adoc +++ /dev/null @@ -1,31 +0,0 @@ -[[section-glossary]] -== Glossary - - - -[role="arc42help"] -**** -.Contents -The most important domain and technical terms that your stakeholders use when discussing the system. - -You can also see the glossary as source for translations if you work in multi-language teams. - -.Motivation -You should clearly define your terms, so that all stakeholders - -* have an identical understanding of these terms -* do not use synonyms and homonyms - -.Form -A table with columns and . - -Potentially more columns in case you need translations. - -**** - -[options="header"] -|=== -| Term | Definition -| | -| | -|=== diff --git a/docs/images/03_system_scope_context_technical.png b/docs/images/03_system_scope_context_technical.png index 8350ce3..78f752a 100644 Binary files a/docs/images/03_system_scope_context_technical.png and b/docs/images/03_system_scope_context_technical.png differ diff --git a/docs/images/07_deployment_view_deployment.png b/docs/images/07_deployment_view_deployment.png index 0f55031..d406e4e 100644 Binary files a/docs/images/07_deployment_view_deployment.png and b/docs/images/07_deployment_view_deployment.png differ diff --git a/docs/images/07_deployment_view_development.png b/docs/images/07_deployment_view_development.png index 5d30c3a..28cbe10 100644 Binary files a/docs/images/07_deployment_view_development.png and b/docs/images/07_deployment_view_development.png differ diff --git a/docs/images/LogoASW.png b/docs/images/LogoASW.png deleted file mode 100644 index d834334..0000000 Binary files a/docs/images/LogoASW.png and /dev/null differ diff --git a/docs/images/loadTest_1_user_per_second.png b/docs/images/loadTest_1_user_per_second.png new file mode 100644 index 0000000..5c04725 Binary files /dev/null and b/docs/images/loadTest_1_user_per_second.png differ diff --git a/docs/images/loadTest_3_series.png b/docs/images/loadTest_3_series.png new file mode 100644 index 0000000..155e430 Binary files /dev/null and b/docs/images/loadTest_3_series.png differ diff --git a/docs/images/loadTest_4_peaks.png b/docs/images/loadTest_4_peaks.png new file mode 100644 index 0000000..bf67448 Binary files /dev/null and b/docs/images/loadTest_4_peaks.png differ diff --git a/docs/images/loadTest_normal_app_use.png b/docs/images/loadTest_normal_app_use.png new file mode 100644 index 0000000..1197b12 Binary files /dev/null and b/docs/images/loadTest_normal_app_use.png differ diff --git a/docs/images/lomapLogo.png b/docs/images/lomapLogo.png new file mode 100644 index 0000000..0acebe9 Binary files /dev/null and b/docs/images/lomapLogo.png differ diff --git a/docs/index.adoc b/docs/index.adoc index 34c4753..0b21dec 100644 --- a/docs/index.adoc +++ b/docs/index.adoc @@ -3,7 +3,7 @@ // // ==================================== -= image:LogoASW.png[arc42] LOMAP ES4A += image:lomapLogo.png[arc42] // toc-title definition MUST follow document title without blank line! :toc: left :toc-title: Table of Contents @@ -87,10 +87,6 @@ include::10_quality_scenarios.adoc[] // 11. Technical Risks include::11_technical_risks.adoc[] -<<<< -// 12. Glossary -include::12_glossary.adoc[] - <<<< // About include::about-arc42.adoc[] diff --git a/docs/package-lock.json b/docs/package-lock.json new file mode 100644 index 0000000..8157afd --- /dev/null +++ b/docs/package-lock.json @@ -0,0 +1,541 @@ +{ + "name": "docs", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "docs", + "version": "1.0.0", + "dependencies": { + "gh-pages": "^3.2.3", + "shx": "^0.3.3" + } + }, + "node_modules/array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", + "dependencies": { + "array-uniq": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/async": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", + "dependencies": { + "lodash": "^4.17.14" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, + "node_modules/commondir": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", + "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==" + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, + "node_modules/email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==" + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==", + "engines": { + "node": ">=4" + } + }, + "node_modules/filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dependencies": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/find-cache-dir": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", + "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", + "dependencies": { + "commondir": "^1.0.1", + "make-dir": "^3.0.2", + "pkg-dir": "^4.1.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/avajs/find-cache-dir?sponsor=1" + } + }, + "node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "node_modules/gh-pages": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz", + "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==", + "dependencies": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "bin": { + "gh-pages": "bin/gh-pages.js", + "gh-pages-clean": "bin/gh-pages-clean.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==", + "dependencies": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "node_modules/interpret": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/is-core-module": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz", + "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==", + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dependencies": { + "semver": "^6.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "engines": { + "node": ">=6" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "engines": { + "node": ">=8" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + }, + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==", + "dependencies": { + "pinkie": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pkg-dir": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", + "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", + "dependencies": { + "find-up": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/rechoir": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", + "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==", + "dependencies": { + "resolve": "^1.1.6" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/resolve": { + "version": "1.22.2", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", + "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", + "dependencies": { + "is-core-module": "^2.11.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/shelljs": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz", + "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==", + "dependencies": { + "glob": "^7.0.0", + "interpret": "^1.0.0", + "rechoir": "^0.6.2" + }, + "bin": { + "shjs": "bin/shjs" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/shx": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/shx/-/shx-0.3.4.tgz", + "integrity": "sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==", + "dependencies": { + "minimist": "^1.2.3", + "shelljs": "^0.8.5" + }, + "bin": { + "shx": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==", + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + } + } +} diff --git a/webapp/.env b/webapp/.env index ba5096b..e0d1268 100644 --- a/webapp/.env +++ b/webapp/.env @@ -1 +1 @@ -REACT_APP_GOOGLE_KEY= +REACT_APP_GOOGLE_KEY=${process.env.REACT_APP_GOOGLE_KEY} diff --git a/webapp/src/components/Navbar/Navbar.tsx b/webapp/src/components/Navbar/Navbar.tsx index bdab97c..3714b5e 100644 --- a/webapp/src/components/Navbar/Navbar.tsx +++ b/webapp/src/components/Navbar/Navbar.tsx @@ -66,6 +66,8 @@ function Navbar({open, toggleNavbar, openPointsList, openMapList, openMyFriendsL const [openDialog, setOpenDialog] = React.useState(false); const { session } = useSession(); + + const goToProfile = (profile: string) => { window.open(profile) }; const handleClickOpen = () => { setOpenDialog(true); }; @@ -94,7 +96,7 @@ function Navbar({open, toggleNavbar, openPointsList, openMapList, openMyFriendsL > - + goToProfile(session.info.webId!)}> { return (
- +
); diff --git a/webapp/src/components/Searchbar/Searchbar.tsx b/webapp/src/components/Searchbar/Searchbar.tsx index 83035f0..10e7ad2 100644 --- a/webapp/src/components/Searchbar/Searchbar.tsx +++ b/webapp/src/components/Searchbar/Searchbar.tsx @@ -20,6 +20,8 @@ interface SearchBarProps { const SearchBar: React.FC = ({ toggleNavbar ,markers,nombreMapa }) => { + const goToRepository = (repository: string) => { window.open(repository) }; + return ( @@ -29,7 +31,7 @@ const SearchBar: React.FC = ({ toggleNavbar ,markers,nombreMapa - LoMap_es4a + goToRepository("https://github.com/Arquisoft/lomap_es4a")} sx={{color:'white'}}> LoMap_es4a