Merge pull request #136 from Arquisoft/develop

primera versión aplicación

.gitignore

@@ -14,7 +14,9 @@ webapp/build
 
 # misc
 .DS_Store
+.env
 .env.local
+.env.development
 .env.development.local
 .env.test.local
 .env.production.local

docs/04_solution_strategy.adoc

@@ -48,10 +48,10 @@
 |===
 
 
-=== Decisions on how to avhieve quality goals
+=== Decisions on how to achieve quality goals
 - Usabilidad: el equipo se preocupará de diseñar una interfaz clara y accesible para cualquier usuario. Para ello nos basaremos en los estándares de usabilidad en la web.
-- Seguridad y Privacidad: la información privada del usuario se almacenará en pods de SOLID, manteniéndola, de este modo, descentralizada. Sólo se almacenará en una base de datos centralizada lo estrictamente necesario.
-- Mantenibilidad: un objetivo a perseguir por todos los miembros del equipo será el desarrollar un código limpio y fácil de leer. Además, un código fácilmente mantenible. Para ello, emplearemos alguno de los patrones estudiados en la asignatura Diseño del Software, siempre que sea necesario y todas las convenciones de programación aprendidas hasta ahora. 
+- Privacidad: la información privada del usuario se almacenará en pods de SOLID, manteniéndola, de este modo, descentralizada. Sólo se almacenará en una base de datos centralizada lo estrictamente necesario.
+- Seguridad: nos preocuparemos de implementar todas las medidas que consideremos oportunas para securizar nuestra aplicación. Además, el mantener la información personal de los usuarios descentralizada constituye un gran paso en el proceso.
 
 === Relevant organizational decisions
 En cuanto a la organización dentro del equipo, hemos tomado las siguientes decisiones:

docs/05_building_block_view.adoc

@@ -3,7 +3,7 @@
 
 == Building Block View
 
-=== Level 1: Whitebox of the Overall System 
+=== Level 0: Whitebox of the Overall System 
 
 [plantuml, "whitebox-overall-system", png]
 ----
@@ -30,16 +30,16 @@ Contained Building Blocks::
 | Inrupt/Proveedor POD | Sistema encargado de almacenar la información de cada usuario en un POD de forma descentralizada.
 |===
 
-=== Level 2
+=== Level 1
 
 [plantuml, "level-2", png]
 ----
 actor Usuario
 Component LoMap {
   Component web as "WebApp"
   Component api as "RestAPI"
-  Database db as "MongoDB"
 }
+Database db as "MongoDB"
 Component pod as "Inrupt"
 
 Usuario -right-> web: interactua

docs/06_runtime_view.adoc

@@ -1,68 +1,265 @@
 [[section-runtime-view]]
 == Runtime View
 
-=== Inicio de sesión
+=== Runtime Level 1
 
+==== Inicio de sesión
+
+El inicio de sesión de la aplicación se gestiona a través del proveedor de SOLID Inrupt, que se encarga de almacenar las credenciales e información privada del usuario.
+El usuario se comunica con el sistema Lomap y accede a su POD personal. Al introducir el webId en el formulario, se redirecciona al proveedor Inrupt para su autenticación y, si los datos son verídicos, se redirecciona a lomap, mostrando en una vista de la aplicación el mapa con los puntos de interés añadidos (y que el usuario en sesión tenga permiso para ver).
+
+[plantuml, "runtime-6-1-1", svg]
+
+----
+actor Usuario
+participant lomap as "Sistema Lomap"
+database Pod as "Pod personal"
+Usuario -> lomap: Introducir credenciales
+lomap -> Pod: Recuperar datos
+Pod --> lomap: Redirección a vista 
+lomap --> Usuario: Interacción visual
+----
+
+==== Registro de un usuario
+El registro se realiza también a través del proveedor Inrupt, siguiendo unos pasos muy similares a los mencionados en el apartado anterior. En primer lugar, el usuario introduce sus datos (Especificados en el nivel 2 de esta sección), al pulsar el botón de registarse se le redirecciona al proveedor de PODS y por último, se redirecciona a la vista correspondiente (Vista Home por defecto).
+
+[plantuml, "runtime-6-1-2", svg]
+----
+actor Usuario
+participant lomap as "Sistema Lomap"
+database Pod as "Pod personal"
+Usuario -> lomap: Introducir credenciales
+lomap -> Pod: Recuperar datos
+Pod --> lomap: Redirección a vista 
+lomap --> Usuario: Interacción visual
+----
+
+==== Añadir un punto de interés al mapa
+Para añadir un punto de interés al mapa, el usuario tendrá varias opciones. A continuación, se explicará la opción más "compleja". El usuario interactúa dentro de su vista privada y accede a una opción que le redirecciona a una vista específica para añadir un nuevo punto al mapa. La vista de añadir nuevo punto contiene un formulario, a través del cual se envían los datos al sistema lomap, que se encarga de comunicar con la base de datos y actualizar la interfaz de usuario.
+
+[plantuml, "runtime-6-1-3", svg]
+----
+actor Usuario
+participant lomap as "Sistema Lomap"
+database Bd as "Base de datos"
+
+Usuario -> lomap: redirectToPointViewPage()
+activate lomap
+lomap -> lomap: validarDatos()
+lomap -> Bd: storeNewPoint()
+lomap -> lomap: Actualizar componente mapa
+lomap --> Usuario: Mostrar vista actualizada
+
+deactivate lomap
+----
+
+
+=== Runtime Level 2
+
+==== Inicio de sesión
 Para iniciar sesión, el usuario introducirá su webId en el formulario. El proveedor de PODS recibe el webId y procesa la petición. Redirecciona a la página privada del usuario y, a su vez, los datos del POD de éste. Si se produce un error al realizar la petición, se mostrará un error en el formulario de la página de inicio de sesión. En caso de producirse un error en el proveedor (Por otros motivos inherentes a él), se gestionará el error redireccionando de nuevo al formulario y mostrando un mensaje informativo.
 
-[plantuml, "diagrama-inicio-sesion", png]
+[plantuml,"runtime-6-2-1",svg]
 ----
 actor Usuario
 participant form as "Formulario login"
 participant personal as "Vista privada Usuario"
-participant Api
+participant Api as "API cliente"
 database Pod as "Pod personal"
-Usuario --> form:
-form  --> Api: iniciar sesión
-Api --> Api: Validar webId
-Api --> Pod: iniciar sesión
-Pod --> Pod: Comprobar webId
+Usuario -> form: Rellenar formulario
+form -> Api: iniciar sesión
+Api -> Api: Validar webId
+Api -> Pod: iniciar sesión
+Pod -> Pod: Comprobar webId
 Pod --> Api: Enviar datos Pod
 Api --> form: Enviar datos pod
 Api --> personal: mostrar página privada
 ----
 
-=== Registro de un usuario
+==== Registro de un usuario
 Un usuario de la aplicación, para registrarse ha de introducir los siguientes datos: Nombre, nombre de usuario, correo electrónico y contraseña. Los datos del usuario se almacenan en su POD personal del proveedor dispuesto en la aplicación. La transacción se realiza desde el lado del cliente a través de su api, enviando los datos del formulario al proveedor, donde este comprobará si existe un usuario registrado con el email indicado. En caso de existir un usuario en el proveedor, se redireccionará a la página del formulario con un mensaje de error.
 
-[plantuml,"diagrama-registro-usuario", png]
+[plantuml,"runtime-6-2-2", svg]
 ----
 actor Usuario
 participant form as "Formulario registro"
 participant personal as "Vista privada Usuario"
 participant Api
 participant Inrupt as "Proveedor POD"
 database Pod as "Pod personal"
-Usuario --> form:
-form  --> Api: crear cuenta
-Api --> Api: Validar datos formulario
+Usuario -> form:
+form  -> Api: crear cuenta
+Api -> Api: Validar datos formulario
 Api --> form: Mostrar error validación
-Api --> Inrupt: crear cuenta
-Inrupt --> Inrupt: Comprobar si existe usuario
-Inrupt --> Pod: Crear POD personal
+Api -> Inrupt: crear cuenta
+Inrupt -> Inrupt: Comprobar si existe usuario
+Inrupt -> Pod: Crear POD personal
 Inrupt --> Api: Recibir datos del usuario
 Api --> personal: Redireccionar a página privada 
 ----
 
-=== Añadir un punto de interés al mapa
+==== Añadir un punto de interés en el mapa
 Para añadir un punto de interés en el mapa se contemplan varias opciones. El siguiente diagrama representa el escenario de añadir un punto de interés desde la vista privada del usuario (Dashboard).
 
-[plantuml,"diagrama-punto-interes-mapa",png]
+[plantuml,"runtime-6-2-3", svg]
 ----
 actor Usuario
 participant personal as "Vista privada"
 participant home as "Vista inicio"
 participant Api as "Api"
 participant backend as "<color:#red>API Rest" 
 database Db as "Base de datos"
-Usuario --> personal: 
-personal --> Api: crear punto interés 
-Api --> Api: Validar datos
-Api --> backend: Petición POST "/api/maps/add"
-backend --> backend: Validar datos recibidos
-backend --> Db: Almacenar datos del mapa
+Usuario -> personal: 
+personal -> Api: crear punto interés 
+Api -> Api: Validar datos
+Api -> backend: Petición POST "/api/maps/add"
+backend -> backend: Validar datos recibidos
+backend -> Db: Almacenar datos del mapa
 backend --> Api: Respuesta HTTP
 Api --> home: mostrar mensaje
-home --> home: actualizar datos del mapa
+home -> home: actualizar datos del mapa
 home --> Usuario: Mostrar mensaje
 ----
+
+=== Runtime Level 3
+
+==== Inicio de sesión
+[plantuml,"runtime-6-3-1", svg]
+----
+actor Usuario
+participant form as "Formulario login"
+participant personal as "Vista privada Usuario"
+participant Api as "API Cliente"
+
+box "Servicio de Inrupt" #wheat
+database Pod as "Pod personal"
+end box
+
+Usuario -> form: Introducir webId
+form -> Api: iniciar sesión
+activate Api
+Api -> Api: Validar webId
+Api -> Pod: iniciar sesión
+deactivate Api
+Pod -> Pod: Comprobar webId
+Pod --> Api: Enviar datos Pod
+Api --> form: Enviar datos pod
+Api --> personal: mostrar página privada
+----
+
+==== Registro de un usuario
+[plantuml,"runtime-6-3-2", svg]
+----
+actor Usuario
+participant form as "Formulario registro"
+participant personal as "Vista privada Usuario"
+participant Api as "API Cliente"
+
+box "Servicio de Inrupt" #wheat
+participant Inrupt as "Proveedor POD"
+database Pod as "Pod personal"
+end box
+
+Usuario -> form:
+form  -> Api: crear cuenta
+Api -> Api: Validar datos formulario
+Api --> form: Mostrar error validación
+Api -> Inrupt: crear cuenta
+Inrupt -> Inrupt: Comprobar si existe usuario
+Inrupt -> Pod: Crear POD personal
+Inrupt --> Api: Recibir datos del usuario
+Api --> personal: Redireccionar a página privada 
+----
+
+==== Añadir un punto de interés en el mapa
+[plantuml,"runtime-6-3-3", svg]
+----
+actor Usuario
+participant Personal as ":Vista Privada"
+participant PointView as ":Vista añadir punto de interés"
+participant Home as ":Vista Inicio"
+participant Api as ":Api Cliente"
+participant Axios as ":Axios"
+
+box "API Rest" #LightBlue
+participant Router as ":MapRouter"
+participant AuthMiddleware as ":AuthMiddleware"
+participant Controller as ":MapController"
+participant Service as ":MapService"
+end box
+
+database Firebase as ":Firebase Cloud"
+database Db as ":Base de datos"
+
+Usuario -> Personal: 
+Personal -> PointView: redirectToPointView()
+note left
+Redireccionar a una vista exclusiva
+para añadir el nuevo punto de interés
+end note
+activate PointView
+PointView -> Api: handleOnClick() 
+activate Personal
+Api -> Api: Validar datos
+activate Api
+Api --> Personal
+deactivate Personal
+
+activate Axios
+Api -> Axios: encapulateData()
+note left
+Enviar la información a través del 
+cliente HTTP Axios
+end note
+
+Axios -> Router: Petición POST "/api/maps/add"
+Router --> Axios: Código error 500
+
+activate Router
+
+Router -> AuthMiddleware: Comprobar usuario autenticado
+activate AuthMiddleware #DarkSalmon
+AuthMiddleware --> Router: error autenticación
+Router --> Api: Enviar error de autenticación
+Api --> Personal: Mostrar error
+AuthMiddleware -> Controller: Procesar request
+deactivate AuthMiddleware
+
+activate Controller
+Controller -> Service: addNewPoint()
+activate Service
+Service -> Service: checkParams()
+Service --> Api: sendParamErrors()
+note left: Comprobación en el lado servidor
+activate Firebase
+Service -> Firebase: <<async>> storePointImage()
+Firebase --> Service: sendError()
+Service --> Api: respuesta del error
+deactivate Firebase
+
+Firebase --> Service: successMsg()
+Service -> Service: getStoredImageUrl()
+Service -> Service: addNewPoint()
+Service -> Db: storeNewPoint()
+note right
+El punto puede o no contener una imagen.
+En en supuesto de que dicho punto no tenga imagen,
+no se almacenará la URL.
+end note
+Service --> Controller: Mensaje éxito
+Controller --> Router: Mensaje éxito
+Router --> Axios: 201: Mensaje de éxito
+
+deactivate Service
+deactivate Controller
+deactivate Router
+
+Axios --> Api: Mensaje de éxito
+deactivate Axios
+deactivate PointView
+
+Api --> Home: refreshMapComponent()
+deactivate Api
+
+return successMessage()
+----