lomap_en2b

Introduction to Lomap

This is an application done by a team of UniOvi students, simulating a project done by a belgian software company, for the Council of Brussels. It is an application where the users can login with their Solid accounts and share their favourite landmarks and places all around the globe with their friends. In the application you will be able to see your friends' landmarks, and you can create landmarks on your favourite places in order to let people see what you enjoy the most about the city of Brussels and also from the whole world.

This is a website done while we learnt some technologies like React, Typescript or an endpoint using NodeJS with express.

Team members

Andres Cadenas Blanco [email protected]
Pedro Limeres Granado [email protected]
Diego Villanueva Berros [email protected]
Jorge Joaquín Gancedo Fernández [email protected]

Sections

• Quickstart guide
• Webapp

You might also be interested in

• Deployment
• Other information

Quickstart guide

Requirements

• Git
• Node.js. If you are interested in using several versions at the same time, you should consider a version manager, such as NVM.
• Docker (optionally)

Download the project with :

git clone https://github.com/arquisoft/lomap_en2b

The fastest way to launch everything is with docker:

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 the following links:

• Webapp - http://localhost:3000
• RestApi example call - http://localhost:5000/api/users/list
• RestApi raw metrics - http://localhost:5000/metrics
• Prometheus server - http://localhost:9090
• Grafana server http://localhost:9091

If you want to run it without docker. Compile and run the restapi:

cd restapi
npm install
npm start

Now the webapp:

cd webapp
npm install
npm start

You should be able to access the application in http://localhost:3000.

Webapp

Running the webapp

In this case we are using React with Typescript for the webapp. Lets create the app in the directory webapp with the following command (make sure you have npm installed in your system):

cd webapp
npm i
npm start

And open a new command console and execute

cd restapi
npm i
npm run dev

This runs the application in local, take into account you must have nodejs installed in the system. To access the webpage access in a browser write: localhost:3000

Testing the Webapp and the Restapi

Unit tests

Basically these tests make sure that each component work isolated. It is important to check that they render properly. These tests are done using jest and you can execute them with npm run test. A code coverage analysis is generated every time we run the tests. If properly configured, this can be exploited by tools like SonarCloud to create reports of code coverage. These tests have been done both on the webapp and on the restapi.

e2e tests

These type of tests make sure that the navigation on the web page is as expected. They are done using cucumber, and they are run via an automatic web browser that executes the orders we want, and compares the results it gets with the ones we want to get.

cd restapi
npm i
npm run test:e2e

Load Testing

These type of tests, we external to the code, and they measured how the web application worked facing some high trafic of users, we tried to simulate different scenarios and also we tried with different number o users. We used the tool Gatling for making these tests.

Docker image for the web app

The Dockerfile for the webapp is pretty simple. Just copy the app, install the dependencies, build the production version an then run a basic webserver to launch it.

In order to run the app, we need a server. npm start is not good for production so we are going to use Express. Check server.js in the webapp to understand the configuration. As we will run it in port 3000 (in localhost), we have to bind this port with the port in our local machine.