diff --git a/README.md b/README.md index 162cee9..a856d54 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# dede_0 +# asw2122_0 -[![Actions Status](https://github.com/arquisoft/dede_0/workflows/CI%20for%20ASW2122/badge.svg)](https://github.com/arquisoft/dede_0/actions) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_dede_0&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Arquisoft_dede_0) -[![codecov](https://codecov.io/gh/arquisoft/dede_0/branch/master/graph/badge.svg?token=VN4XG9NTRO)](https://codecov.io/gh/pglez82/asw2122_0) +[![Actions Status](https://github.com/pglez82/asw2122_0/workflows/CI%20for%20ASW2122/badge.svg)](https://github.com/pglez82/asw2122_0/actions) +[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=pglez82_asw2122_0&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=pglez82_asw2122_0) +[![codecov](https://codecov.io/gh/pglez82/asw2122_0/branch/master/graph/badge.svg?token=VN4XG9NTRO)](https://codecov.io/gh/pglez82/asw2122_0)
@@ -10,42 +10,43 @@
+Este proyecto es un ejemplo basico de un sitio web utilizando **React** con **Typescript** y un endpoint usando **NodeJS** con **express** -This project is a basic example of website using **React** with **Typescript** and an endpoint using **NodeJS** with **express**. +## Guia de inicio rápido -## Quick start guide -In case you already have node.js and npm, make sure you update them before attempting to build the images +Si tienes instalados node.js y npm, asegurate de actualizarlos antes de intentar construir las imagenes + +Si quieres ejecutar el proyecto necesitarás [git](https://git-scm.com/downloads), [Node.js and npm](https://www.npmjs.com/get-npm) y [Docker](https://docs.docker.com/get-docker/). Asegurate de tenerlos instalados en tu equipo. Descarga el proyecto con `git clone https://github.com/pglez82/asw2122_0`. La manera más rápìda de ejecutar todo es con Docker. -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/dede_0`. 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: +Este comando creará dos imagenes de docker si no existen en tu equipo (la webapp y la restapi) y lanzará un contenedor de mongoDB. Además lanzará contenedores de Prometheus y Grafana para monitorizar el servicio web. Deberias ser capaz de acceder a todo desde aqui: + - [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) + - [Ejemplo llamada a RestApi - http://localhost:5000/api/users/list](http://localhost:5000/api/users/list) + - [Metricas RestApi - http://localhost:5000/metrics](http://localhost:5000/metrics) + - [Servidor Prometheus - http://localhost:9090](http://localhost:9090) + - [Servidor Grafana http://localhost:9091](http://localhost:9091) -If you want to run it without docker. Compile and run the restapi: +Si quieres ejecutar el proyecto sin Docker primero complila y ejecuta la restapi: + ```shell cd restapi npm install npm start ``` - -Now the webapp: - +a continuación la webapp: ```shell cd webapp npm install npm start ``` -You should be able to access the application in [http://localhost:3000](http://localhost:3000). +Deberias ser capaz de acceder a la aplicación en [http://localhost:3000](http://localhost:3000). -## More information -You can get more information about the respository in the other README files: -- Documentation: https://github.com/arquisoft/dede_0/tree/master/docs -- Webapp: https://github.com/arquisoft/dede_0/tree/master/webapp -- Restapi: https://github.com/arquisoft/dede_0/tree/master/restapi +## Mas información +Encontrarás más información sobre el repositorio en los otros archivos README: +- Documentación: https://github.com/pglez82/asw2122_0/tree/master/docs +- Webapp: https://github.com/pglez82/asw2122_0/tree/master/webapp +- Restapi: https://github.com/pglez82/asw2122_0/tree/master/restapi diff --git a/README_es.md b/README_es.md deleted file mode 100644 index a856d54..0000000 --- a/README_es.md +++ /dev/null @@ -1,52 +0,0 @@ -# asw2122_0 - -[![Actions Status](https://github.com/pglez82/asw2122_0/workflows/CI%20for%20ASW2122/badge.svg)](https://github.com/pglez82/asw2122_0/actions) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=pglez82_asw2122_0&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=pglez82_asw2122_0) -[![codecov](https://codecov.io/gh/pglez82/asw2122_0/branch/master/graph/badge.svg?token=VN4XG9NTRO)](https://codecov.io/gh/pglez82/asw2122_0) - -- - - -
- -Este proyecto es un ejemplo basico de un sitio web utilizando **React** con **Typescript** y un endpoint usando **NodeJS** con **express** - -## Guia de inicio rápido - -Si tienes instalados node.js y npm, asegurate de actualizarlos antes de intentar construir las imagenes - -Si quieres ejecutar el proyecto necesitarás [git](https://git-scm.com/downloads), [Node.js and npm](https://www.npmjs.com/get-npm) y [Docker](https://docs.docker.com/get-docker/). Asegurate de tenerlos instalados en tu equipo. Descarga el proyecto con `git clone https://github.com/pglez82/asw2122_0`. La manera más rápìda de ejecutar todo es con Docker. - -```bash -docker-compose up --build -``` -Este comando creará dos imagenes de docker si no existen en tu equipo (la webapp y la restapi) y lanzará un contenedor de mongoDB. Además lanzará contenedores de Prometheus y Grafana para monitorizar el servicio web. Deberias ser capaz de acceder a todo desde aqui: - - - [Webapp - http://localhost:3000](http://localhost:3000) - - [Ejemplo llamada a RestApi - http://localhost:5000/api/users/list](http://localhost:5000/api/users/list) - - [Metricas RestApi - http://localhost:5000/metrics](http://localhost:5000/metrics) - - [Servidor Prometheus - http://localhost:9090](http://localhost:9090) - - [Servidor Grafana http://localhost:9091](http://localhost:9091) - -Si quieres ejecutar el proyecto sin Docker primero complila y ejecuta la restapi: - -```shell -cd restapi -npm install -npm start -``` -a continuación la webapp: -```shell -cd webapp -npm install -npm start -``` - -Deberias ser capaz de acceder a la aplicación en [http://localhost:3000](http://localhost:3000). - -## Mas información -Encontrarás más información sobre el repositorio en los otros archivos README: -- Documentación: https://github.com/pglez82/asw2122_0/tree/master/docs -- Webapp: https://github.com/pglez82/asw2122_0/tree/master/webapp -- Restapi: https://github.com/pglez82/asw2122_0/tree/master/restapi diff --git a/docs/README.md b/docs/README.md index 39fb722..e30f5e9 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,35 +1,37 @@ -## The documentation -In this project the documentation is compiled locally and deployed to GitHub pages. -The deployment url is: [https://pglez82.github.io/asw2122_0/](https://pglez82.github.io/asw2122_0/). +## Documentación +La documentación de este proyecto se compila localmente y se despliega en GitHub pages. +la url en la que se despliega es: [https://arquisoft.github.io/dede_0/](https://arquisoft.github.io/dede_0/). -### Documentation build -For the documentation we are going to use [AsciiDoc](https://asciidoc.org/) and [PlantUML](https://plantuml.com) and follows the [Arc42](https://github.com/arc42/arc42-template) template. If you want to be able to generate the doc locally you need to install Ruby, Java and some dependencies to translate the asciidoc code into html. If you are in Linux you can install Ruby and Java simply by executing: +### Build Documentación +For the documentation we are going to use [AsciiDoc](https://asciidoc.org/) and [PlantUML](https://plantuml.com) and follows the [Arc42](https://github.com/arc42/arc42-template) template. If you want to be able to generate the doc locally you need to install Ruby and some dependencies to translate the asciidoc code into html: + +Para la documentación vamos a utilizar [AsciiDoc](https://asciidoc.org/) y [PlantUML](https://plantuml.com). Seguiremos la plantilla [Arc42](https://github.com/arc42/arc42-template). Si quieres general la documentación en tu ordenador, necesitas instalar Ruby, Java y algunas dependencias para traducir el asciidoc en código html. Si estás en una máquina Linux puedes instalar Java y Ruby simplemente ejecutando: ```shell apt-get install ruby openjdk-8-jre ``` -On Windows you can use [these instructions](https://www.ruby-lang.org/en/documentation/installation). Probably you will have Java already installed in your system, if not, you can download it [here](https://www.oracle.com/es/java/technologies/javase/javase8-archive-downloads.html) +En Windows puedes seguir [estas instrucciones](https://www.ruby-lang.org/en/documentation/installation) para instalar Ruby. Probablemente tengas un JRE de Java instalado, sino puedes descargarlo [aquí](https://www.oracle.com/es/java/technologies/javase/javase8-archive-downloads.html): -Once Ruby is working you can install some gems with `asciidoctor` and `asciidoctor-diagram`. +Una vez que Ruby está instalado y funcionando podemos instalar `asciidoctor` y `asciidoctor-diagram`. ```shell gem install asciidoctor asciidoctor-diagram ``` -Now it is turn to install some dependencies in the `package.json` file inside the `docs` directory: +Ahora solo nos queda instalar las dependencias del `package.json` dentro del directorio `docs`: ```shell cd docs npm install ``` -After installing these tools we can generate the documentation. +Después de instalar todas estas herramientas ya deberíamos de ser capaces de generar la documentación: ```shell npm run build ``` -The documentation will be generated under the `docs/build` directory. +La documentación se generará en el directorio `docs/build`. -### Documentation deployment -If we want to deploy it to GitHub pages, so it is accesible via [https://pglez82.github.io/asw2122_0/](https://pglez82.github.io/asw2122_0/) we need to execute `npm run deploy`. +### Despliegue Documentación +Si queremos desplegar la documentación en GitHub pages, estará accesible en [https://arquisoft.github.io/dede_0/](https://arquisoft.github.io/dede_0/) necesitamos ejecutar `npm run deploy`. -If you check the `package.json` in this directory you can see how deploying is as easy as executing `gh-pages -d build`, which can be directly executed using `npm run deploy` in the docs directory. The `gh-pages` package is in charge of pushing the documentation generated directory (basically some htmls) to a special github branch called gh-pages. Everything pushed to this branch is accessible in the repository page. Note that we only want to push there the documentation. Also is important that the documentation build is not pushed to the other branches of the project. \ No newline at end of file +Si revisas el `package.json` de este directorio veras como desplegar es tan facil como ejecutar `gh-pages -d build`, que puede hacerse ejecutando directamente `npm run deploy` en el directorio de la doumentación. el paquete `gh-pages` se encarga de subir la documentación generada (basicamente archivo html) a una rama especial de github llamda gh-pages. Todo lo que se suba a esa rama es acesible en la página del repositorio. Ten en cuenta que solo queremos subir ahí la documentación. También es importante que el build de la documentación no se suba a otras ramas del proyecto. \ No newline at end of file diff --git a/docs/README_es.md b/docs/README_es.md deleted file mode 100644 index e30f5e9..0000000 --- a/docs/README_es.md +++ /dev/null @@ -1,37 +0,0 @@ -## Documentación -La documentación de este proyecto se compila localmente y se despliega en GitHub pages. -la url en la que se despliega es: [https://arquisoft.github.io/dede_0/](https://arquisoft.github.io/dede_0/). - -### Build Documentación -For the documentation we are going to use [AsciiDoc](https://asciidoc.org/) and [PlantUML](https://plantuml.com) and follows the [Arc42](https://github.com/arc42/arc42-template) template. If you want to be able to generate the doc locally you need to install Ruby and some dependencies to translate the asciidoc code into html: - -Para la documentación vamos a utilizar [AsciiDoc](https://asciidoc.org/) y [PlantUML](https://plantuml.com). Seguiremos la plantilla [Arc42](https://github.com/arc42/arc42-template). Si quieres general la documentación en tu ordenador, necesitas instalar Ruby, Java y algunas dependencias para traducir el asciidoc en código html. Si estás en una máquina Linux puedes instalar Java y Ruby simplemente ejecutando: - -```shell -apt-get install ruby openjdk-8-jre -``` - -En Windows puedes seguir [estas instrucciones](https://www.ruby-lang.org/en/documentation/installation) para instalar Ruby. Probablemente tengas un JRE de Java instalado, sino puedes descargarlo [aquí](https://www.oracle.com/es/java/technologies/javase/javase8-archive-downloads.html): - -Una vez que Ruby está instalado y funcionando podemos instalar `asciidoctor` y `asciidoctor-diagram`. - -```shell -gem install asciidoctor asciidoctor-diagram -``` - -Ahora solo nos queda instalar las dependencias del `package.json` dentro del directorio `docs`: - -```shell -cd docs -npm install -``` -Después de instalar todas estas herramientas ya deberíamos de ser capaces de generar la documentación: -```shell -npm run build -``` -La documentación se generará en el directorio `docs/build`. - -### Despliegue Documentación -Si queremos desplegar la documentación en GitHub pages, estará accesible en [https://arquisoft.github.io/dede_0/](https://arquisoft.github.io/dede_0/) necesitamos ejecutar `npm run deploy`. - -Si revisas el `package.json` de este directorio veras como desplegar es tan facil como ejecutar `gh-pages -d build`, que puede hacerse ejecutando directamente `npm run deploy` en el directorio de la doumentación. el paquete `gh-pages` se encarga de subir la documentación generada (basicamente archivo html) a una rama especial de github llamda gh-pages. Todo lo que se suba a esa rama es acesible en la página del repositorio. Ten en cuenta que solo queremos subir ahí la documentación. También es importante que el build de la documentación no se suba a otras ramas del proyecto. \ No newline at end of file diff --git a/restapi/README.md b/restapi/README.md index 515a0f6..3382872 100644 --- a/restapi/README.md +++ b/restapi/README.md @@ -1,49 +1,51 @@ ## Restapi -The objective for this part is to make a rest API using Express and Node.js using TypeScript. We will implement only two functions, one push petition, for registering a new user and a get petition, to list all the users in the system. The webservice will be deployed using docker. - -Lets analyze the main packages used in this part (file package.json): -- express: this is the main dependency for building the API. Express is a NodeJS web framework very useful for building API endpoints though it has other applications as well. -- cors: Cross-Origin Resource Sharing, is useful for allowing petitions only from certain domains, in this case, we will allow only petitions from localhost. -- express-validator: useful for validate the input of the API calls. This improves security avoiding code injection attacks. -- express-prom-bundle and prom-client: middleware to capture the petitions and send statistics to prometheus. This is useful for monitoring the webservice. -- @types packages. Types for coding using typescript. + +El objetivo de esta parte es crear una al rest APi utilizando Express y Node.js con TypeScript. Solo vamos a implementar dos funciones. Una petición post para registrar un nuevo usuario y una petición get que devolverá un listado de todos los usuarios en el sistema. Es servicio web se desplegará utilizando Docker. + +Vamos a analizar los paquetes principales utilizados en esta parte (archivo package.json): +- express: Es la dependencia principal para la construcción de la API. Express es un framework web de NodeJS muy util para la construcción de endpoints de una API aunque permite otras funcionalidades +- cors: Cross-Origin Resource Sharing, Es util para permitir peticiones solo desde determinados dominios, en este ejemplo,unicamente permitimos peticiones desde el localhost. +- express-validator: Util para la validación de las peticiones de la API. Mejora la seguridad evitando ataques de inyección de código. +- express-prom-bundle y prom-client: Middleware para capturar las peticiones y enviar estadísticas a prometheus. Es muy util para monitorizar nuestro servicio web. +- @types packages. Tipos para programar utilizando Typescript. -The code is quite straight forward, the [server.ts](server.ts) file launchs the api. The [api.ts](api.ts) is actually the api, where you will see there two api entry points, one post for creating a new user, and one get to list all the users. +Este código es bastante sencillo, el archivo [server.ts](server.ts) lanza la API y en el archivo [api.ts](api.ts) donde ESTÁN las 2 peticiones. -For launching the API we can use `npm start`. This will launch the file `server.ts` using the package `ts-node-dev`. This package is useful for launching Typescript files with the additional feature of being able to reload the server if we change the code. +Para lanzar la API podemos ejecutar `npm start`. Este comando lanzará el archivo `server.ts`. El paquete `ts-node-dev` recargará el servidor cada vez que guardemos algún cambio en nuestro código de Typescript. Es muy útil. -### Testing the rest api -For testing we need to do simulate petitions against the API. In this case we are using a tool called [Supertest](https://www.npmjs.com/package/supertest). +### Testeando la rest api +Para testear necesitamos simular peticiones contra la API. Para hacer esto utilizaremos una herramienta llamada [Supertest](https://www.npmjs.com/package/supertest). -Note: These dependencies are save only for dev mode, we do not need them for production. +Ojo: Estas dependencias se guardaran para modo desarrollo, no son necesarias en producción. -The idea is to use Jest (as in the webapp) as the main testing framework. For making the get or post petitions we are going to use supertest. The [api.test.ts](tests/api.test.ts), has the implementation of the tests. The `beforeAll` method is charge of starting the API. +La idea es utilizar Jest (como en la webapp) como framework principal de testing. Para realizar las peticiones GET o POST utilizaremos Supertest. El archivo [api.test.ts](tests/api.test.ts), contiene la implementación de los tests. El método `beforeAll` se carga al iniciar la API. -After configuring the tests in the `package.json` we can run them using `npm run test`. +Tras configurar los tests en el `package.json` podemos ejecutarlos utilizando `npm run test`. -### Docker image for the restapi -In the Dockerfile of this folder we have the command for building an image for the restapi. We just install the dependencies and launch the API using `npm start`. +### Imagen Docker para la restapi +En el Dockerfile de este directorio se encuentran los comandos para construir una imagen de la restapi. Solo tenemos que instalar las dependencias y arrancar la API utilizando `npm start`. -### Monitoring (Prometheus and Grafana) -In this step we are going use [Prometheus](https://prometheus.io/) and [Grafana](https://grafana.com/) to monitor the restapi. First step is modifying the restapi launch to capture profiling data. In nodejs this is very easy. After installing the required packages (express-prom-bundle and prom-client), we need to modify the `restapi/server.js` in order to capture the profiling data adding: +### Monitorización (Prometheus y Grafana) +En esta etapa vamos a utilizar [Prometheus](https://prometheus.io/) y [Grafana](https://grafana.com/) para monitorizar nuestra restapi. El primer paso es modificar el lanzamiento de la restapi para capturar los datos de "profiling". En Nodejs es muy sencillo, tras instalar los paquetes necesarios (express-prom-bundle y prom-client), debemos modificar el `restapi/server.js` para capturar los datos de profiling añadiendo: ```javascript const metricsMiddleware = promBundle({includeMethod: true}); app.use(metricsMiddleware); ``` -Now when we launch the api, in [http://localhost:5000/metrics](http://localhost:5000/metrics) we have a metrics endpoint from which get the profiling data. The idea here is to have another piece of software running (called [Prometheus](https://prometheus.io/)) that will get this data, let say, every five seconds. Then, another software called [Grafana](https://grafana.com/) will display this using beautiful charts. +Ahora cuando lancemos la API en [http://localhost:5000/metrics](http://localhost:5000/metrics) tendremos un endpoint de metricas con datos de desempeño. La idea es tener otra pieza de software corriendo (llamada [Prometheus](https://prometheus.io/)) que cogerá estos datos, digamos, cada cinco segundos. a continuación otro software llamado [Grafana](https://grafana.com/) los mostrará con graficos chulos. -For running Prometheus and Grafana we can use several docker images. Check `docker-compose.yml` to see how these images are launched. +Para lanzar Prometheus y Grafana podemos utilizar diferentes imagenes de Docker. Comprueba `docker-compose.yml` para ver como se lanzan estas imagenes. -Note: in the `prometheus.yml` we are telling prometheus where is our restapi metrics end point. In Grafana `datasources/datasource.yml` we are telling where to find prometheus data. +Ojo: en `prometheus.yml` le estamos indicando a prometheus donde esta el endpoint de metricas de nuesta restapi. En Grafana `datasources/datasource.yml` indicamos donde encontrar los datos de prometheus. -In both configuration files we need to stablish the uris of restapi metrics and the prometheus datasource. Right now they are configured to work using docker-compose network. If you want to use these individual docker commands, you need to change these uris to point to localhost +En ambos archivos de configuración necesitamos establecer las uris de las metricas de la resapi y de la fuente de datos de prometheus. En este momento están configurados para utilizar la red de docker-compose. Si quieres utilizar estos comandos de docker individualmente tienes que cambiar las uris para que apunten al localhost -Once launched all the system is launched (see the Quick Start Guide), we can simulate a few petitions to our webservice: +Una vez lanzado esto todo el sistema está corriendo (ver la guia de inicio rápido). Ahora podemos simular unas cuantas peticiones en nuestro servicio web. ``` sudo apt-get install apache2-utils ab -m GET -n 10000 -c 100 http://localhost:5000/api/users/list ``` -In the Grafana dashboard we can see how the number of petitions increases dramatically after the call. -A good reference with good explanations about monitoring in nodejs can be found [here](https://github.com/coder-society/nodejs-application-monitoring-with-prometheus-and-grafana). +En el cuadro de mando de Grafana podemos ver como aumenta rapidamente el número de peticiones tras llamarla. + +Una buena referencia con explicaciones sobre monitorización en Nodejs puede encontrarse [Aqui](https://github.com/coder-society/nodejs-application-monitoring-with-prometheus-and-grafana). diff --git a/restapi/README_es.md b/restapi/README_es.md deleted file mode 100644 index 3382872..0000000 --- a/restapi/README_es.md +++ /dev/null @@ -1,51 +0,0 @@ -## Restapi - -El objetivo de esta parte es crear una al rest APi utilizando Express y Node.js con TypeScript. Solo vamos a implementar dos funciones. Una petición post para registrar un nuevo usuario y una petición get que devolverá un listado de todos los usuarios en el sistema. Es servicio web se desplegará utilizando Docker. - -Vamos a analizar los paquetes principales utilizados en esta parte (archivo package.json): -- express: Es la dependencia principal para la construcción de la API. Express es un framework web de NodeJS muy util para la construcción de endpoints de una API aunque permite otras funcionalidades -- cors: Cross-Origin Resource Sharing, Es util para permitir peticiones solo desde determinados dominios, en este ejemplo,unicamente permitimos peticiones desde el localhost. -- express-validator: Util para la validación de las peticiones de la API. Mejora la seguridad evitando ataques de inyección de código. -- express-prom-bundle y prom-client: Middleware para capturar las peticiones y enviar estadísticas a prometheus. Es muy util para monitorizar nuestro servicio web. -- @types packages. Tipos para programar utilizando Typescript. - -Este código es bastante sencillo, el archivo [server.ts](server.ts) lanza la API y en el archivo [api.ts](api.ts) donde ESTÁN las 2 peticiones. - -Para lanzar la API podemos ejecutar `npm start`. Este comando lanzará el archivo `server.ts`. El paquete `ts-node-dev` recargará el servidor cada vez que guardemos algún cambio en nuestro código de Typescript. Es muy útil. - -### Testeando la rest api -Para testear necesitamos simular peticiones contra la API. Para hacer esto utilizaremos una herramienta llamada [Supertest](https://www.npmjs.com/package/supertest). - -Ojo: Estas dependencias se guardaran para modo desarrollo, no son necesarias en producción. - -La idea es utilizar Jest (como en la webapp) como framework principal de testing. Para realizar las peticiones GET o POST utilizaremos Supertest. El archivo [api.test.ts](tests/api.test.ts), contiene la implementación de los tests. El método `beforeAll` se carga al iniciar la API. - -Tras configurar los tests en el `package.json` podemos ejecutarlos utilizando `npm run test`. - -### Imagen Docker para la restapi -En el Dockerfile de este directorio se encuentran los comandos para construir una imagen de la restapi. Solo tenemos que instalar las dependencias y arrancar la API utilizando `npm start`. - -### Monitorización (Prometheus y Grafana) -En esta etapa vamos a utilizar [Prometheus](https://prometheus.io/) y [Grafana](https://grafana.com/) para monitorizar nuestra restapi. El primer paso es modificar el lanzamiento de la restapi para capturar los datos de "profiling". En Nodejs es muy sencillo, tras instalar los paquetes necesarios (express-prom-bundle y prom-client), debemos modificar el `restapi/server.js` para capturar los datos de profiling añadiendo: -```javascript -const metricsMiddleware = promBundle({includeMethod: true}); -app.use(metricsMiddleware); -``` -Ahora cuando lancemos la API en [http://localhost:5000/metrics](http://localhost:5000/metrics) tendremos un endpoint de metricas con datos de desempeño. La idea es tener otra pieza de software corriendo (llamada [Prometheus](https://prometheus.io/)) que cogerá estos datos, digamos, cada cinco segundos. a continuación otro software llamado [Grafana](https://grafana.com/) los mostrará con graficos chulos. - -Para lanzar Prometheus y Grafana podemos utilizar diferentes imagenes de Docker. Comprueba `docker-compose.yml` para ver como se lanzan estas imagenes. - -Ojo: en `prometheus.yml` le estamos indicando a prometheus donde esta el endpoint de metricas de nuesta restapi. En Grafana `datasources/datasource.yml` indicamos donde encontrar los datos de prometheus. - -En ambos archivos de configuración necesitamos establecer las uris de las metricas de la resapi y de la fuente de datos de prometheus. En este momento están configurados para utilizar la red de docker-compose. Si quieres utilizar estos comandos de docker individualmente tienes que cambiar las uris para que apunten al localhost - -Una vez lanzado esto todo el sistema está corriendo (ver la guia de inicio rápido). Ahora podemos simular unas cuantas peticiones en nuestro servicio web. - -``` -sudo apt-get install apache2-utils -ab -m GET -n 10000 -c 100 http://localhost:5000/api/users/list -``` - -En el cuadro de mando de Grafana podemos ver como aumenta rapidamente el número de peticiones tras llamarla. - -Una buena referencia con explicaciones sobre monitorización en Nodejs puede encontrarse [Aqui](https://github.com/coder-society/nodejs-application-monitoring-with-prometheus-and-grafana). diff --git a/webapp/README.md b/webapp/README.md index 141fc9c..329352c 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -1,94 +1,96 @@ -## 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): +## La webapp +Utilizaremos React con Typescript para la webapp. Vamos a crear la app en el directorio webapp con los siguientes comandos (asegurate que npm está instalado en tu sistema:) ```console npx create-react-app my-app --template typescript ``` -At this point we can already run the app with: +En este punto ya podemos correr la app con: ```console cd webapp npm start ``` -The app will launch and it will be listening in port 3000. At this point this app is a Hello World app in React. +La app se lanzará y escuchará en el puerto 3000. Ahora mismo la app es un "Hola Mundo" en React. +Vamos a hacer algunas modificaciones en la app, crearemos una app que pida el nombre y el email al usuario y lo envíe a una api rest.Además la webapp listará todos los usuarios registrados. -Lets make some modifications to the app, we will create an app that asks the name and email to the user and send it to an api rest. The webapp will list all the register users in the site. +Basicamente la app debería ser capaz de coger el nombre y el email del usuario, enviarlo a la api y refrescar la lista de los usuarios desde la api. Puedes revisar el código relevante en los componentes +[EmailForm.tsx](src/components/EmailForm.tsx) y [UserList.tsx](src/components/UserList.tsx). El componente [App.tsx](src/App.tsx) funciona como coordinador de los otros componentes. -Basically the app should be able to get the name and email of a user, send it to the api, and then refresh the list of the users from the api. You can check the relevant code in the components [EmailForm.tsx](src/components/EmailForm.tsx) and [UserList.tsx](src/components/UserList.tsx). The [App.tsx](src/App.tsx) component acts as the coordinator for the other components. +### Testeando la webapp -### Testing the webapp +#### Tests unitarios +Basicamente estos tests se aseguran que cada componente trabaja de manera aislada. Esto es importante para comprobar que se renderizan correctamente. Estos tests se realizan utilizando jest y pueden ejercutarse con `npm run test`. Cada vez que se ejecutan los tests se realiza un analisis de covertura de código. Si se configura apropiadamente este analisis puede ser explotado por herramientas como [CodeCov](https://about.codecov.io/) para crear informes de covertura de código. -#### 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 [CodeCov](https://about.codecov.io/) to create reports of code coverage. -Some tests needs to mock some parts of the application. For instance, the `EmailForm.tsx` component uses the api for adding a user. In the unitary tests we should mock these calls to make more robusts tests. You can check the file [EmailForm.test.tsx](src/components/EmailForm.test.tsx) to learn how this is done. -For instance: +Algunos tests necesitan simular algunas partes de la aplicación. Por ejemplo el componente `EmailForm.tsx` utiliza la api para añadir un usuario. En los tests unitarios debemos simular estas llamadas para obtener resultados más robustos. Puedes revisar el archivo [EmailForm.test.tsx](src/components/EmailForm.test.tsx) para aprender como se hace esto. +Por ejemplo: ```javascript jest.spyOn(api,'addUser').mockImplementation((user:User):Promise