Merge pull request #245 from Arquisoft/Main-Develop

Prototipo final

.github/workflows/asw2122.yml

@@ -39,12 +39,23 @@ jobs:
     - uses: actions/setup-node@v2
       with:
         node-version: 16
+    - name: Create env
+      run: |
+        cd restapi
+        touch .env
+        echo DATABASE_USER=${{ secrets.DATABASE_USER }} >> .env
+        echo DATABASE_PASSWORD=${{ secrets.DATABASE_PASSWORD }} >> .env
+        echo DATABASE_NAME=${{ secrets.DATABASE_NAME }} >> .env
+        echo JWT_TOKEN=${{ secrets.JWT_TOKEN }} >> .env
+        cat .env
     - run: npm --prefix webapp install
     - run: npm --prefix restapi install
     - run: npm --prefix webapp run build
     - run: npm --prefix webapp run test:e2e
   docker-push-webapp:
     name: Push webapp Docker Image to GitHub Packages
+    env:
+      REACT_APP_API_URI: http://${{ secrets.DEPLOY_HOST }}:5000
     runs-on: ubuntu-latest
     needs: [e2e-tests]
     steps:
@@ -57,8 +68,14 @@ jobs:
           password: ${{ secrets.DOCKER_PUSH_TOKEN }}
           registry: ghcr.io
           workdir: webapp
+          buildargs: REACT_APP_API_URI
   docker-push-restapi:
     name: Push restapi Docker Image to GitHub Packages
+    env:
+      DATABASE_USER: ${{ secrets.DB_USER }}
+      DATABASE_PASSWORD: ${{ secrets.DB_PASSWORD }}
+      DATABASE_NAME: ${{ secrets.DB_NAME }}
+      JWT_TOKEN: ${{ secrets.TOKEN }}
     runs-on: ubuntu-latest
     needs: [e2e-tests]
     steps:
@@ -71,3 +88,21 @@ jobs:
           password: ${{ secrets.DOCKER_PUSH_TOKEN }}
           registry: ghcr.io
           workdir: restapi
+          buildargs: DATABASE_USER,DATABASE_PASSWORD,DATABASE_NAME,JWT_TOKEN
+  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/dede_es2c/Dario-Nueva/docker-compose-deploy.yaml -O docker-compose.yml
+          docker-compose stop
+          docker-compose rm -f
+          docker-compose pull   
+          docker-compose up -d

README.md

@@ -1,8 +1,8 @@
 # dede_es2c
 
-[![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/Arquisoft/dede_es2c/actions/workflows/asw2122.yml/badge.svg)](https://github.com/Arquisoft/dede_es2c/actions/workflows/asw2122.yml)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_dede_es2c&metric=alert_status)](https://sonarcloud.io/summary/overall?id=Arquisoft_dede_es2c)
+[![codecov](https://codecov.io/gh/arquisoft/dede_es2c/branch/master/graph/badge.svg?token=VN4XG9NTRO)](https://app.codecov.io/gh/Arquisoft/dede_es2c)
 
 <p float="left">
 <img src="https://blog.wildix.com/wp-content/uploads/2020/06/react-logo.jpg" height="100">
@@ -50,6 +50,11 @@ You can get more information about the respository in the other README files:
 - Webapp: https://github.com/Arquisoft/dede_es2c/tree/master/webapp
 - Restapi: https://github.com/Arquisoft/dede_es2c/tree/master/restapi
 
+
+Two videos have been made explaining how the application works, the links to these are:
+ - [Administrator's vision](https://youtu.be/ZRobGjPoAA8)
+ - [Client's vision](https://www.youtube.com/watch?v=-E7908j38X0) 
+
 ## Team members
    - Ruben Rubio Del Castillo - UO276255
    - Darío Martínez Bajo - UO278290

README_es.md

@@ -1,8 +1,8 @@
 # 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)
+[![Actions Status](https://github.com/Arquisoft/dede_es2c/actions/workflows/asw2122.yml/badge.svg)](https://github.com/Arquisoft/dede_es2c/actions/workflows/asw2122.yml)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_dede_es2c&metric=alert_status)](https://sonarcloud.io/summary/overall?id=Arquisoft_dede_es2c)
+[![codecov](https://codecov.io/gh/arquisoft/dede_es2c/branch/master/graph/badge.svg?token=VN4XG9NTRO)](https://app.codecov.io/gh/Arquisoft/dede_es2c)
 
 <p float="left">
 <img src="https://blog.wildix.com/wp-content/uploads/2020/06/react-logo.jpg" height="100">
@@ -51,6 +51,10 @@ Encontrarás más información sobre el repositorio en los otros archivos README
 - Webapp: https://github.com/Arquisoft/dede_es2c/tree/master/webapp
 - Restapi: https://github.com/Arquisoft/dede_es2c/tree/master/restapi
 
+Se han realizado dos videos explicando el funcionamiento de la aplicación, los links a estos son:
+ - [Visión Administrador](https://youtu.be/ZRobGjPoAA8)
+ - [Visión Cliente](https://www.youtube.com/watch?v=-E7908j38X0) 
+
 ## Integrantes del grupo:
    - Ruben Rubio Del Castillo - UO276255
    - Darío Martínez Bajo - UO278290

docker-compose-deploy.yaml

@@ -0,0 +1,12 @@
+version: '3.5'
+services:
+  restapi:
+    image: ghcr.io/arquisoft/dede_es2c/restapi:latest
+    ports:
+      - "5000:5000"
+  webapp:
+    image: ghcr.io/arquisoft/dede_es2c/webapp:latest
+    ports:
+      - "3000:3000"
+    depends_on: 
+      - restapi

docs/01_introduction_and_goals.adoc

@@ -6,12 +6,28 @@ Estará centrada en la venta de productos informáticos de diferentes ámbitos (
 Este sistema busca priorizar la privacidad de los clientes a través de los principios SOLID.
 El sistema obtendrá la información de los clientes de los pods de los usuarios siempre que éstos den los permisos necesarios al sistema de venta.
 Se distinguirá entre usuarios normales y adminstradores. Éstos pueden, además de acceder a la tienda, crear, modificar y eliminar los productos de la base de datos.
+Los usuarios eligirán los productos que formarán parte de su carro de compra. Cada usuario tiene su propio carro individual.
 
+== Integrantes
+
+* Ana Fernández Ostio
+* Darío Martínez Bajo
+* Efrén García Valencia
+* Adrián Santamarina Romero
+* Rubén Rubio el Castillo
+
+== Profesores a cargo de la asignatura
+
+* Hugo Lebredo Buján
+* Jose Emilio Labra Gayo
+* Pablo González
+* Irene Cid Roco
 
 === Información general de los requisitos
 
+A continuación se muestran los requisitos que se puedes encontrar en nuestra aplicación. Se dividen en obligatorios y opcionales
 
-.Requisitos obligatorios
+.Requisitos obligatorios implementados
 
 * El sistema recreará un sistema de compra online donde los usuarios podrán elegir y solicitar productos a comprar.
 * Una vez que el usuario escoja los productos a llevar, el sistema calculará los costes de envío mirando la dirección deseada del usuario en su pod y estableciendo los costes de acuerdo a la distancia del centro de distribución a dicha dirección.
@@ -20,20 +36,11 @@ Se distinguirá entre usuarios normales y adminstradores. Éstos pueden, además
 * Se construirá la aplicación usando el framework React y Typescript.
 * El producto acabado tiene que ser accesible y estar desplegado utilizando un sistema de integración continua y un servicio de hosting.
 
-.Requisitos opcionales
+.Requisitos opcionales considerados
 
-* Los usuarios pueden tener más de una dirección de envío en sus pods (por ejemplo, en sus casas, universidad, …)
-* Poner una estimación del tiempo en que la persona estará en un sitio y limitar algunas direcciones de ser usadas en la entrega fuera de esos horarios.
-* Crear estaciones de recogida que algunos portadores emplearán. La estación de recogida se puede calcular de forma dinámica basándose en la dirección de la persona o en una posición que pille de camino al receptor.
-* Se pueden usar APIs externas de diferentes portadores, para que los usuarios puedan establecer con cuál de los portadores desean realizar el pedido.
-* Hacer que algunos usuarios con privilegios de administrador puedan ver estadísticas de productos solicitados y monitorizar el estado de los pedidos.
-* Realizar el producto tanto en una aplicación web como una aplicación de móvil.
-* Crear un emulador del sistema de envío que pueda notificar a los usuarios cuando los productos hayan llegado a su destino y poder seguir el proceso de envío.
-* Tener diferentes roles como clientes o gestores que puedan realizar diferentes acciones como gestión de inventario, cambios de precios, quitar ítems del catálogo, etc.
-* Incluir la posibilidad de que haya varios centros de distribución o almacenes en los que se encuentren almacenados los productos.
-* Que los usuarios puedan añadir o actualizar la información de sus direcciones en sus pods a través de la aplicación.
-* Permitir a los usuarios dar realimentación sobre su experiencia como puntuaciones y revisiones a los productos o los centros de distribución.
-* Se deja abierta la opción de emplear más de una tecnología de despliegue.
+* Rol de gestores que puedan realizar diferentes acciones como gestión de inventario, cambios de precios, quitar ítems del catálogo, etc.
+* Se añade tambien una vista en el que el administrador pueda ver todos los pedidos que se han realizado. 
+* Un usuario puedde actuzalziar el nombre de este dentro de la aplicación
 
 
 === Objetivos de calidad
@@ -46,6 +53,7 @@ Se distinguirá entre usuarios normales y adminstradores. Éstos pueden, además
 | Seguridad | El usuario debe tener la certeza de que su información personal esté segura para ganar su confianza | Alta
 | Robustez | Se ha de manejar correctamente las excepciones para evitar que el usuario tenga una experiencia desagradable usando la aplicación | Alta
 | Privacidad | Solamente el usuario debería tener acceso a su información privada, sin que haya terceras partes implicadas | Alta
+| Transparencia | Todo lo que se haga en el proyecto permanecerá en un repositorio público para que otra gente lo pueda tener como referencia | Media
 | Comodidad | La aplicación ha de ser fácil de manejar para gente no experimentada | Alta
 |===
 
@@ -57,8 +65,9 @@ Se distinguirá entre usuarios normales y adminstradores. Éstos pueden, además
 |Rol/Nombre|Expectations
 | Equipo de desarrollo | Aprender a trabajar en equipo con gente que no conocen y familiarizarse con las tecnologías solicitadas en el curso
 | Empresa de venta de productos (cliente) | Una aplicación funcional que satisfaga los requisitos solicitados, especialmente aquellos relacionados con la seguridad
-| Cliente | Poder entrar a la aplicación para realizar las compras que desean de forma segura y cómoda
+| Cliente | Poder entrar a la aplicación para realizar las compras que desean de forma segura y cómoda. Introducirán sus productos en un carro de la compra.
 | Administrador | Tener el control de una aplicación robusta y eficiente que incluya la posiblidad de crear, modificar, eliminar productos, ver los usuarios y pedidos
+| Inrupt/Empathy | Entidades colaboradoras del concurso SOLID en el que se puede presentar el proyecto desarrollado durante el curso
 |===
 
 

docs/02_architecture_constraints.adoc

@@ -7,7 +7,6 @@
 | Restricción | Descripción
 | Typescript | Nuevo lenguaje de programación para todos los integrantes del grupo. 
 | React | Libreria JavaScript requerido para construir interfaces de usuario para la web. Aplicación nueva que nunca usamos. 
-| Mongo | Se trata de una base de datos no relacional, la primera vez que trabajamos con una. 
 | SOLID | Principios y tecnologia que nos ayudará a organizar apps, al igual que react, tenemos que investigar sobre ello ya que es la primera vez que la usamos. 
 |===
 

docs/03_system_scope_and_context.adoc

@@ -13,26 +13,26 @@ image:03_Negocio.png["Diagrama Contexto Negocio"]
 [options="header",cols="1,2,2"]
 |===
 |Comunicaciones |Entradas | Salidas
-| _Usuario_ | _Interacciones con la aplicación_ |_Respuestas a esas interacciones_
+| _Usuario_ | _Interacciones con la aplicación_ | _Respuestas a esas interacciones_
 | _POD del Usuario_ | _La inforamción relativa a cada usuario para respetar su privacidad_ | _Información que necesite la aplicación siempre cuando el usuario lo permita_
-| _DeDe_ | _Venta de productos_ | _Precio según dirección del cliente_
+| _DeDe_ | _Venta de productos_ | _Información que recibe de las APIs y de la base de datos_
 | _Base de datos_ | _Peticiones por parte de la aplicación DeDe_ | _Respuesta de la información almacenada en esta base de datos_
-| _API_ | _Dirección de envío_ | _Precio de envío desde el almacén_
+| _EasyPost_ | _Dirección de envío_ | _Precio de envío desde el almacén_
+| _PostImages_ | _Imágenes para mostrar_ | _Imágenes necesarias para mostrar en la Aplicación_
 |===
 
 === Contexto técnico
 
-
-image:03_Tecnico.png["Diagrama Contexto Técnico"]
+Se utiliza una arquitectura SOLID para respetar la privacidad del usuario, en este caso la direccion de envio de este. 
 
 [options="header",cols="1,2"]
 |===
-|Objeto |Descripción
-| _Usuario_ | _Persona que utilice la aplicación_
+| Tecnología |Descripción
 | _POD_ | _Lugar donde se almacena la información de cada cliente_ 
 | _DeDe_ | _Aplicación descentralizada_ 
-| _Explorador Web_ | _Aplicación donde el usuario va a acceder a DeDe_ 
-| _HTTPS_ | _Protocolo que se utilizará para enviar y recibir información entre el navegador y la aplicación_ 
-| _Servidor Web_ | _Servidor que tendrá la aplicación DeDe almacenada (sin decidir)_
+| _EasyPost_ | _API usada para calcular los precios de envio_ 
+| _PostImages_ | _API que guarda las imagenes y las descarga para su uso en la aplicación_ 
+| _TypeScript_ | _Lenguaje utilizado para el desarrollo de la aplicación_
+| _React_ | _Libreria utilizada para generar de las interfaces de la aplicación_
 |===
 

docs/04_solution_strategy.adoc

@@ -10,25 +10,22 @@
 - Node.js: entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor basado en el lenguaje de programación JavaScript, asíncrono, con E/S de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google.
 - MongoDB: sistema de base de datos NoSQL orientado a documentos. Además MongoDB es de código abierto por lo que se permite una mayor libertad de creación de documentos
 - MUI: Libreria de libre acceso para construir los diferentes componentes que utiliza la aplicación. La mayoria de componentes que se utilizan en nuestra aplicación son de esta librería y son personalizados según se necesita el formato de este.
-
-=== Como alcanzar los objetivos de calidad
-[options="header",cols="1,2"]
-|===
-|Objetivos de calidad| Solución
-| Eficiencia | El acceso al pod del usuario se hará las minimas veces posibles. Realización de pruebas para comprobar como de rápido responde la aplicación
-| Privacidad | Utilización de un POD por cada usuario, donde el usuario deberá dar permiso a la web para utilizar sus datos. 
-| Usabilidad | La página tendrá un aspecto parecido al resto de aplicaciones que existen sobre tiendas online.
-|=== 
-
-=== Descomposición de alto nivel del sistema
-Todavía no se ha decidido como va a estar.
+- Docker: Automatizacion del despligue medainte contenedores, se han creado dos contenedores, uno para la parte de 'front-end' y otro para 'back-end'
+- AWS: Depligue de la página.
+- EasyPost: API que calcula el precio de envío en funcion de una dirección
+- PostImages: API utilizada para poder utilizar las imagenes en nuestra aplicación.
+- SuperTest y Jest: Utilizado para poder realziar las diferentes pruebas.
 
 === Decisiones de organización
  * Revisiones y reuniones acordadas con antelación se realizarán a través de la aplicación Microsoft Teams.
  * Mensajería instantanea para acordar aquellas reuniones que se realicen de forma online, también para avisar de cambios pequeños.
  * GitHub para reflejar el trabajo que se esta realizando de varias formas: 
- ** Rama individual para cada uno, donde deberá realizar su trabajo.
+ ** Rama individual para cada uno, donde deberá realizar su trabajo. Rama Developer donde se iran incluyendo los cambios de todos los miembros para despues poder realizar de una manera más sencilla los cambios a master.
  ** Uso de wikis para recoger todo lo acordado en las reuniones y  del registro arquitéctonico.
  ** Uso de issues para indicar las cosas que tiene que realizar cada miembro del equipo. 
  ** Uso de Actions para commprobar el correcto funcionamiento de la aplicación
-
+ ** Uso de Tableros para controlar como esta siendo el desarrollo del trabajo, se dividieron en 4 tableros:
+ *** FrontEnd
+ *** BackEnd
+ *** Documentación
+ *** Despliegue

docs/06_runtime_view.adoc

@@ -9,12 +9,24 @@ El administrador rellenará un formulario con los detalles del producto que se m
 
 image:06_add.PNG["Añadir productos"]
 
+=== Administrar productos
+
+El administrador podra administrar todos los productos de la web. Se le mostrará una tabla con todos los productos, su información, stock y con dos opciones, editar el producto o eliminarlo.
+
+image:06_editProducts.PNG["Administrar productos"]
+
 === Eliminar productos
 
-El administrador rellenará un formulario con los detalles del producto a borrar.La aplicación pasará la información necesaria a la base de datos para identificar y borrar el producto correctamente.
+El administrador podra eliminar el producto que desee desde la misma ventana donde se administran los productos.La aplicación borrará el producto seleccionado.
 
 image:06_remove.PNG["Eliminar productos"]
 
+=== Administrar pedidos
+
+El administrador podra administrar todos los pedidos de la web. Se le mostrará una tabla con todos los pedidos y su información.
+
+image:06_adminOrder.PNG["Administrar pedidos"]
+
 === Filtro de productos
 El usuario tras realizar el login en la aplicación y ver los diferentes productos que hay, podrá utilizar los filtros situados en la parte izquierda de la página para realizar una búsqueda más precisa. Tras selccionar los filtros que el usuario vea convenientes. La aplicación pedirá a la base de datos donde se encuentren todos los productos, aquellos que el filtro muestre. Tras ello, la base de datos, retornara los productos que cumplan esos filtros a la aplicación. La aplicación mostrará los productos al usuario.
 
@@ -29,6 +41,18 @@ image:06_Compra_Productos.png["Compra productos"]
 El usuario debe introducir sus credenciales en la aplicación y estas serán validadas con la vase de datos, si son correctas accederá a la aplicacion con su cuentas y sino se le mostrará un mensaje  de error
 image:06_Login.png["Login"]
 
-=== Mostrar historial de ventas
+=== Cerrar sesión
+Una vez que haya acabado, el usuario podra cerrar sesión para no mantener su cuenta activa
+image:06_cierreSesion.png["Login"]
+
+=== Mostrar historial de ventas administador
 El administrador pedirá el historial de ventas a la base de datos.
-image:06_sales_history.png["Mostrar historial de ventas"]
+image:06_sales_history.png["Mostrar historial de ventas administrador"]
+
+=== Mostrar historial de pedidos del usuario
+El usuario pedirá el historial de sus compras a la base de datos.
+image:06_pedidosUsuario.PNG["Mostrar historial de pedidos del usuario"]
+
+=== Modificar perfil
+El usuario podrá modificar su perfil ya sea cambiando su nombre o apellidos directamente o solicitando un cambio de contraseña. El correo no podrá ser modificado.
+image:06_modifPerfil.PNG["Modificar perfil"]