1. Introduction and Goals
LoMap es un sistema de gestión de mapas y lugares desarrollado por la empresa HappySw. El objetivo principal de este software es permitir a una red de usuarios crear mapas personalizados con los lugares y rutas que él haya decido incorporar. Además este grupo de personas podrán interactuar entre ellos a modo de red social, tendrás la posibilidad de dejar reseñas y comentarios o llegar a ver y utilizar los maas de otro usuarios.
1.1. Requirements Overview
-
La aplicación permitirá la utilizacion de varios roles de usuario que podran identificarse para obtener la vista de sus mapas guardados.
-
Los usuarios podran realizar acciones de "feedback" (ya sea comentar, reaccionar, asociar imagenes) a los lugares añadidos.
-
Cada usuario podra crear y compartir un mapa con las ubicaciones que el escoja con otros usuarios de la aplicacion.
-
La visualización de los mapas permitira el uso de filtros .
-
Creacion de mapas para una comunidad.
-
Los usuarios podran crear rutas y obtener información de nuevos lugares que puedan aparecer.
-
Creación de un "Newsfeed" para estar al dia de las ultimas actualizaciones.
-
Roles distintos en el sistema.
-
La aplicación guardara de manera segura los datos de los usuarios que la utilicen.
-
El tiempo de respuesta debe ser relativamente razonable bajo para evitar que al usuario no tenga la sensacion de que la aplicacion esta "colgada".
-
La aplicación se realizara en React usando TypeScript.
1.2. Quality Goals
Los principales atributos de calidad que queremos que tenga nuestro proyecto son los siguientes:
Objectivo | Detalles |
---|---|
Privacidad |
Guardaremos la privacidad del usuario. Lo lograremos usando SOLID, que principalmente se basa en almacenar en la base de datos información a cerca del usuario cliente quién será el que nos autorice guardar dicha información. |
Rendimiento |
Para la creación de esta aplicación queremos garantizar la máxima rapidez que se pueda a la hora de responder a las peticiones del usuario. |
Usabilidad |
El uso de la aplicaicón debe resultar un proceso intuitivo y sencillo para el usuario cliente. |
Mantenibilidad |
Procuraremos cuidar la arquitectura de la aplicación de manera que se pueda añadir, modificar o quitar funcionalidad con el menor número posible de cambios. |
Testeabilidad |
Nuestra aplicaicón también podrá ser testeable, es decir, estará sometida a una serie de pruebas unitarias que realizaremos para asegurar un correcto funcionamiento del sistema, además de identificar pequeños errores y poder corregirlos en tal caso. |
1.3. Stakeholders
Role/Name | Contact | Expectations |
---|---|---|
Cliente |
Ayuntamiento de Bruselas |
Una aplicación en la que los ciudadanos puedan disponer de mapas personalizados sobre lugares y negocios locales de la ciudad |
Empresa contratada |
HappySw |
Desarrollo de un software genérico que pueda ser utilizada y desplegada en otras ciudades |
Equipo de desarrollo |
Desarrolladores de HappySw |
Información clara y concisa sobre los requisitos de la aplicación |
Usuarios |
Ciudadanos de Bruselas |
Una aplicación usable y sencilla que les permita crear mapas personalizados de los lugares que les interesen |
Jefe de proyecto |
Profesores de la asignatura |
Desarrollo por parte de los estudiantes de una aplicación que cumpla sus criterios |
2. Architecture Constraints
2.1. Rectricciones técnicas
Restricción | Descripción |
---|---|
SOLID |
Permite guardar/alamcenar información de datos de los usuarios de una forma segura en Pods, que consisten en unos alamcenes de infromación que son descentralizados y los usuarios eligen qué aplicaciones y qué usuarios pueden acceder a dicha información. |
GIT (FLOW) |
Se usuará como un sistema de control de versiones. |
GITHUB |
Lugar donde nuestro repositorio de trabajo esté localizado. |
2.2. Restricciones de organización
Restricción | Descripción |
---|---|
Tamaño del equipo |
Actualmente este equipo está formado por 4 personas. |
Planificación |
Este trabajo consta de varias entregas parciales y presentaciones en un plazo de aproximadamente 3 meses. |
Reuniones |
Tenemos una reunión semanalmente (jueves a las 9:00) que es presencialmente. También hacemis reuniones a traves de la aplicación Discord donde debatimos también a cerca del trabajo. |
Distribución del equipo |
Al ser un número par hemos nos hemos organizado de la siguiente manera: 2 personas son las encargadas del backend y 2 personas del fronted. La división del trabajo ha sido de acordado por todos los miembros del equipo |
2.3. Convenciones
Restricción | Descripción |
---|---|
Documentación |
Queremos usar la plantilla Arc42 que nos han facilitado. |
SOLID |
Seguiremos las convenciones SOLID preestablecidad. |
Protección de datos |
Queremos que haya un mínimo de seguridad en nuestro proyecto. |
Accesibilidad |
Procuraremos que la aplicación sea intuitiva y fácil para el uso de todos los usuarios. |
3. System Scope and Context
3.1. Business Context
El siguiente diagrama muestra el entorno en el que se va a desarrollar la aplicación y sus relaciones.
3.2. Technical Context
En cuanto al contexto técnico, en la siguiente tabla se muestra que herramientas se usarán.
Nombre |
Descripción |
SOLID |
Permite almacenar datos de forma segura en almacenes de datos descentralizados llamados Pods |
React |
Biblioteca de JavaScript que facilita el desarrollo de aplicaciones mediante interfaces |
MongoDB |
Sistema de base de datos orientado a documentos y código abierto |
GitHub |
Herramienta para realizar el control de versiones con el equipo |
API |
Se usará una API externa para mostrar el mapa |
4. Solution Strategy
4.1. Technology Decisions
Se han tomado las siguientes decisiones.
- React
-
Se usará esta herramienta ya que es la más adecuada para el proyecto y nos facilitará el trabajo. EL lenguaje principal del poyecto será TypeScript.
- MongoDB
-
Esta herramienta nos ayudará ya que tiene elementos dinámicos y esto contribuirá a la rapidez de la aplicación.
- SOLID
-
Es una potente herramienta de base de datos. Se usará para almacenar la información de la aplicación.
4.2. Decisions about the top-level decomposition
Durante la fase de desarrollo de la aplicación, el proyecta se basará en el modelo Vista-Controlador.
4.3. Decision on Quality Goals
La principal decisión es la relacionada con el objetivo de calidad de mayor prioridad, la privacidad, y también con el objetivo de calidad con prioridad 3, la seguridad. Estos dos objetivos de calidad se conseguirán con el uso de los PODs. Por otro lado, el objetivo de calidad de usabilidad se conseguirá con una construcción de la aplicación accesible e intuitiva.
4.4. Organizational Decisions
La organización del proyecto se hizo en las reuniones de equipo de las semanas pasadas. Se repartieron las tareas iniciales y se decidió que dos integrantes del equipo se dedicarian a frontend y los dos restantes a backend. Tanto los que se dedicarán a frontend como los que se decicarán a backend podrán participar en ambas partes si se necesitara.
5. Building Block View
5.1. Whitebox Overall System
- Motivation
-
La aplicación de LoMap es un sistema para crear mapas personalizados por los usuarios. Además, podrá añadir amigos, filtrar y otras opciones. La información privada de los usuarios se guarda en su propio POD.
- Contained Building Blocks
Nombre |
Descripción |
LoMap |
Sistema con el que interactuarán los usuarios |
Usuario |
Cliente que usa la aplicación |
POD |
Guarda la información de los usuarios. Cada usuario tiene su propio POD |
5.2. Level 2
- Motivation
-
Estructura interna LoMap. Se diferencia la parte de WebApp y RestApi. También se distingue la base de datos donde se guardará la información general.
- Contained Building Blocks
Nombre |
Descripción |
WebApp |
La interfaz del sistemacon la que el usuario interactuará para hacer todas sus peticiones |
RestApi |
Procesa y resuelve las peticiones. Pide información a la base de datos |
Base de datos |
Guarda la información pública y accesible para otros usuarios |
5.3. Level 3
- Motivation
-
Estructura interna de LoMap más detallada. Se distingue los componentes que forman la aplicación y las peticiones que puede realizar el usuario.
- Contained Building Blocks
Nombre |
Descripción |
Home |
Pagina principal de la aplicacion |
Login |
Pagina para registrarse |
Mapas Favs |
Se guardarán los mapas que se marquen como favoritos |
Amigos |
Se podrá añadir a amigos y ver sus mapas favoritos |
Mi Cuenta |
Lugar donde ver y editar tu perfil |
6. Runtime View
6.1. Usuario crea una cuenta o se loguea.
En este caso vemos la interaccion de un usuario nuevo que va a realizar por primera vez el ingreso de sesion o se va autenticar en el sistema.
6.2. Accesos de opciones
Este caso tiene lugar una vez los usuarios estan logeados dentro de la aplicacion y se va a mostrar un panel con diversas opciones para que el usuario elija entre todas ellas, como por ejemplo compartir con otros usuarios.
6.3. Interaccion con el mapa
Veremos el caso en el que el usuario interacciona con el mapa para añadir lugares o realizar interacciones tales como escribir comentarios en ellos.
7. Deployment View
7.1. Infrastructure Level 1
- Motivation
-
La estructura mostrada anteriormente, representa nuestras intenciones a la hora de desplegar la applicación en un primer lugar. Posiblemente, en un futuro, sufra ligeras variaciones durante el desarrollo del proyecto.
- Quality and/or Performance Features
-
Uno de nuestros principales objetivos, es conseguir que el buen desempeño de la aplicación sea siempre constante, y solo pueda depender de factores externos, como por ejemplo el rendimiento del software de terceros (las APIs usadas) o la conexión a internet del cliente. Por último también mencionar que se hará un grán énfasis en la seguridad y privacidad de los usuarios.
- Mapping of Building Blocks to Infrastructure
Nombre |
Descripción |
Client Device |
Dispositivo utilizado por el cliente con el que accede a nuestra aplicación. |
Solid POD |
Tecnología usada para gestionar la información privada del cliente. |
Web Server |
Servidor en el que se alojará nuestra aplicación web (falta por definir). |
Docker |
Contenedor software que automatizará el despliegue de nuestra aplicación web. |
WebApp |
Parte de la aplicación mostrada al cliente y renderizada por el buscador. También conocido como Front-End. |
RestApi |
Parte de la aplicación encargada de gestionar principalmente los datos. También conocido como Back-End. |
MapApi |
Aplicación externa utilizada para realizar funciones relacionadas con los mapas y ubicaciones. |
MongoDB |
Base de datos NoSQL encargada de almacenar toda la información necesaria. |
8. Cross-cutting Concepts
8.1. Domain model
8.2. Security
Como en todo sistema informático la seguridad de nuestra aplicación, y la privacidad e integridad de los datos de nuestros usuarios es una de las partes más importantes del proyecto. En este proyecto se hará principal incapié en la eliminación de cualquier brecha de seguridad web que pueda poner en peligro el producto final. Se tomarán medidas antes distintos tipos de vulnerabilidades como ataques XSS (Cross-Site Scripting).
8.3. Privacy
Como se mencionó anteriormente, la privacidad de los datos de nuestros usuarios es un factor que se tiene en primer lugar. Para ello nos encargamos de usar tecnologías como Solid POD, con la intención de descentralizar la información personal de nuestros usuarios. Además usaremos un sistema de encriptación de claves, para que la base de datos no muestre a simple vista las contraseñas de los distintos usuarios.
8.4. User Experience (UX)
Una de nuestras principales estrategias para hacer de nuestra aplicación web un producto competitivo es con seguir que le usuario tenga una buena experiencia. No solo nos centraremos en mejorar el diseño y estética, sino que también tendremos muy en cuenta dos aspectos de vital importancia: la usabilidad y la accesibilidad. Para ello pasaremos rigurosas pruebas tanto manuales como automatizadas, además de aplicar diferentes estadares web.
8.5. Testability
Como una buena práctica, a lo largo del desarrollo, someteremos a nuestro código a múltiples pruebas unitarias, encargadas de asegurar el robustez y eficacia de nuestro producto antes de ser desplegado en la web.
9. Design Decisions
A continuación mostraremos una tabla con las decisiones que hemos tomado en conjunto:
Decisión tomada | Ventaja | Desventaja |
---|---|---|
React JS |
Es de código abierto e intuitivo además de fácil de aprender. Se encuentra documentación en Internet y hay muchos vídeos tutoriales en Youtube. |
Es la primera vez que la usamos. |
MongoDB |
Para la parte de la BBDD hemos optado por esta opción. Es una base de datos no relacional y con una implementación sencilla. |
Tampoco hemos trabajado ninguna vez con esta base de datos. |
NodeJs |
Buen lenguaje para la parte del backend |
también es la primera vez que la utilizamos. |
MapBox GL |
Es una librareía que nos permite usarla para mostart mapas interactivos en nuestra aplicación creada con REACT |
A veces puede llegar a ser impreciso. |
SOLID |
Nos permitirá guardar información del usuario con cierta seguridad. |
Tampoco nunca hemos trabajado con ello. |
Idioma español e inglés |
La documentación del proyecto estará redactada en español aunque las actas de las reuniones estrán en inglés |
Es mucho menos internacionalizado. |
10. Quality Requirements
En esta sección ampliaremos los requisitos de calidad anteriormente mencionados para poder explicarlos de una mejor forma. También hablaremos de como estos requisitos afectaran a la arquitectura planeada.
10.1. Quality Tree
10.2. Quality Scenarios
Atributo | Escenario | Prioridad |
---|---|---|
Privacidad |
Los datos personales de los usuarios se almacenaran de forma segura mediante SOILID y uso de PODs. |
Alta |
Fiabilidad |
Queremos que nuestro producto no tenga errores mientras el servicio este disponible. |
Alta |
Seguridad |
Queremos que la aplicacion sea segura para los usuarios, por lo tanto no se guardaran datos sensibles, por ello es que se validaran en servidor. Cualquier "transaccion" realizada contara con los principios ACID. |
Alta |
Mantenibilidad |
Debido a la magnitud del proyecto, se realizara un diseño y arquitectura el cual permita la flexibilidad ante eventos inesperados durante desarrollo, esta caracteristica es importante debido a que se quiere reducir gastos en cuanto tiempo. |
Alta |
Rendimiento |
Se probara mediante tests que el sistema pueda ser lo suficientemente robusto para que aguante simultaneamente varios usuarios conectados a la vez sin que esto perjudique la esperiencia del usuario debido a las excesivas cargas. |
Media |
Usabilidad |
Esto se logra a través de una interfaz intuitiva, una buena organización de la información y una respuesta rápida del sistema. La usabilidad es importante porque mejora la eficiencia y eficacia del usuario al interactuar con el software. |
Media |
Compatible |
Se va a procurar que la aplicacion sea accesible desde distintos dispositivos ya que recordemos que los moviles son ya el medio mas utilizado superando asi las busquedas web en mas de un 50%. Aunque no es un objetivo prioritario se realizara en la medida de lo posible esta adaptación. |
Media |
Testeable |
Se realizaran las debidas pruebas tanto automatizadas como a mano para ver que la aplicacion es estable y completamente funcional. |
Baja |
Internacionalizacion |
Se podra cambiar de idioma. |
Baja |
11. Risks and Technical Debts
En todo proyecto además de puntos positivos también hay ciertos puntos débiles o riegos debemos tener en cuenta. Y los nuestros son los siguientes:
Riesgo | Descripción | Nivel |
---|---|---|
Tiempo |
No nos sobra tiempo precisamente, todos los del equipo tenemos más asignaturas que cursar por lo debemos organizarnos lo más que podamos. |
Nivel medio. |
Uso de las nuevas tecnologías |
La mayor parte de ellas ninguno de los del grupo han trabajdo con ellas por lo que estaríamos constantemente informándonos sobre su funcionalidad y aprendiendo de forma autónoma. |
Nivel alto. |
Equipo |
Es la primera vez que trabajamos todos juntos en un mismo proyecto por lo que no conocemos la forma de trabajar del resto así que debemos establecer la máxima comunicación posible |
Nivel bajo. |
Github |
Podría ocurrir que no nos coordinemos en un momento dado y entonces a la hora de hacer los "merges" surjen los famosos conflictos. |
Nivel medio. |
12. Glossary
Term | Definition |
---|---|
REACT |
Biblioteca de JavaScript que se encarga de construir interfaces de usuario |
GITHUB |
Lugar donde nuestro código va a estar almacenado. |
AsciiDoc |
Lenguaje que usaremos cuando creamos la documentación. |
Node.js |
Entorno donde se ejecuta javascript. |
POD |
Contenedor donde se muestran los datos del usuario. |
Typescript |
Es un lenguaje de programación libre y de código abierto desarrollado y mantenido por Microsoft. Es un superconjunto de JavaScript. |
MongoDB |
Es un sistema de base de datos NoSQL, orientado a documentos y de código abierto. |
Arc42 |
Plantilla de documentación para arquitectura de sistemas y de software. Nuestra documentación la creamos en base de ella. |
About arc42
arc42, the Template for documentation of software and system architecture.
By Dr. Gernot Starke, Dr. Peter Hruschka and contributors.
Template Revision: 7.0 EN (based on asciidoc), January 2017
© We acknowledge that this document uses material from the arc 42 architecture template, http://www.arc42.de. Created by Dr. Peter Hruschka & Dr. Gernot Starke.