Note

This version of the template contains some help and explanations. It is used for familiarization with arc42 and the understanding of the concepts. For documentation of your own system you use better the plain version.

1. Introducción y objetivos

El objetivo final del proyecto es desarrollar una tienda online, en este caso venderemos juguetes.

1.1. Descripción general de los requisitos, características esenciales y objetivos comerciales

El objetivo final de la aplicación es crear un sistema de venta online que respete la privacidad de los clientes siguiendo los principios SOLID, para ello se usarán los PODs de los usuarios siempre que den los permisos necesarios.

Los requisitos más importantes son:

  • Los clientes deben tener la posibilidad de seleccionar y encargar productos para comprarlos.

  • Se calcularán los costes de envío consultando la dirección del usuario en su POD (calculando los costes en función de la distnacia del centro de distribución a la dirección del usuario). Este cálculo se llevará a cabo una vez el cliente haya seleccionado los productos a comprar y para ello ha de estar registrado en la aplicación.

  • Se mostrarán los costes finales de los productos a comprar por un cliente. Una vez el cliente decida comprarlos, se registrará la venta como realizada y "se pasará a su envío".

  • Los clientes podrán en todo momento ver sus pedidos realizados.

  • El desarrollo de la aplicación será mediante React y TypeScript para el Front-end y Node.js y Express para el Back-end además de MongoDb para la gestión de la base de datos.

  • La aplicación deberá ser accesible y estar desplegada usando un sistema de integración continua. La tecnología de despliegue se especificará en el punto 4.

La tienda online desarrollada se encargará de vender juguetes infantiles.

1.2. Objetivos de calidad

Los cinco objetivos de calidad para la arquitectura que hemos decido seguir (basándonos en nuestras capacidades y los requisitos de la aplicación) son los siguientes. Junto con ellos se muestra una breve descripción de lo que pretendemos conseguir con cada uno de ellos y la prioridad que le damos:

Prioridad Objetivo de calidad Descripción del objetivo

1

Usabilidad

El sistema deberá ser fácil de usar y no requerir de conocimientos específicos o complejos para poder realizar compras. Se debería poder añadir a un encargo, comprar y ver pedidos realizados sin mayor complicación.

2

Comprensibilidad

El sistema deberá ser fácil de entender por los usuarios, en todo momento deben saber cómo funciona la aplicación con poco esfuerzo. Los elementos gráficos ayudarán a la Comprensibilidad.

3

Seguridad

El sistema deberá ser seguro en cuanto a los datos personales de cada usuario y también en lo que se refiere a la navegabilidad por la aplicación, gestión de imágenes de los productos, etc.

4

Testabilidad

El sistema deberá ser testable para poder comprobar que el funcionamiento es el correcto. También influye en otros atributos de calidad como la seguridad. Se realizarán pruebas unitarias, de aceptación y de carga para asegurar este campo.

5

Atractivo

El sistema tendrá una interfaz atractiva, es decir, la interfaz ayudará en aspectos como la usabilidad o comprensibilidad y no entorpecerá el uso de la aplicación por parte de los usuarios.

1.3. Partes interesadas

Las partes interesadas en el sistema serán:

Rol/Nombre Contacto Expectativas

Arquitectos del software

Mario Lada Martínez, Alejandro Galán Freire, Aarón García García, Rafael Muñiz Reguera y Jorge López Peláez.

Deben conocer la arquitectura y trabajar en ella, además, deberán tomar decisiones importantes.

Desarrolladores

En este caso coinciden con los arquitectos del software.

Deberán desarrollar el código de la aplicación. Necesitarán la documentación para orientarse en algunos aspectos.

Cliente

La empresa de venta de productos que nos contrata para crear el sistema de venta online. En este caso se corresponde con el conjunto de profesores de la asignatura.

Deberán dar los requisitos funcionales más importantes para el desarrollo de la aplicación y un conjunto de restricciones. Además, esperan una aplicación que cumpla con los objetivos.

Administrador BD

Es el que nos asministra la base de datos.

Espera que el trabajo con la base de datos sea lo más fácil posible.

Compradores

Son los usuarios finales que utilizarán el servicio de compra online.

Esperan como mínimo que la aplicación sea fácil de usar y de comprender.

2. Restricciones de la arquitectura

Contents

Any requirement that constrains software architects in their freedom of design and implementation decisions or decision about the development process. These constraints sometimes go beyond individual systems and are valid for whole organizations and companies.

Motivation

Architects should know exactly where they are free in their design decisions and where they must adhere to constraints. Constraints must always be dealt with; they may be negotiable, though.

Form

Simple tables of constraints with explanations. If needed you can subdivide them into technical constraints, organizational and political constraints and conventions (e.g. programming or versioning guidelines, documentation or naming conventions)

Restricciones técnicas

Restricción Explicación

Implementación

La aplicación estará formada por un front-end utilizando React con TypeScript y un back-end utilizando NodeJS con Express

Seguridad

Para mantener la privacidad de los usuarios se almacenará toda su información privada en PODs.

Despliegue

La aplicación será accesible de manera continua y utilizará un sistema de integracion continuo.

Restricciones organizacionales

Restriccion Explicacion

Equipo

-Alejandro Galán Freire - Aarón García García - Mario Lada Martínez - Jorge López Peláez - Rafael Muñiz Reguera.

Configuracion y control del repositorio

Toda la aplicación se encuentra en un repositorio privado de github donde existe una rama develop general donde se irá uniendo el trabajo de todos y cada persona del equipo trabajará desde una rama propia. Cada miembro puede tener varias ramas ya que se creará una por funcionalidad nueva a implementar.

Fecha límite

La fecha límite del proyecto es el 4 de mayo.

Convenciones

Convención Explicación

Documentación de la arquitectura

Estructura basada en la plantilla arc42.

Convenciones de codificación

El proyecto utiliza las convenciones de código para el lenguaje de TypeScript y utilizará la guía de estilo de Node.

Idioma

Español.

3. Alcance y contexto del sistema

Contents

System scope and context - as the name suggests - delimits your system (i.e. your scope) from all its communication partners (neighboring systems and users, i.e. the context of your system). It thereby specifies the external interfaces.

If necessary, differentiate the business context (domain specific inputs and outputs) from the technical context (channels, protocols, hardware).

Motivation

The domain interfaces and technical interfaces to communication partners are among your system’s most critical aspects. Make sure that you completely understand them.

Form

Various options:

  • Context diagrams

  • Lists of communication partners and their interfaces.

3.1. Contexto empresarial

Dede es una aplicación que tiene como objetivo vender de manera online juguetes infantiles. Los usuarios podrán hacer compras de estos productos con la mayor privacidad posible debido a que nuestra aplicación estará integrada con SOLID, de tal manera los datos más privados de los clientes utilizados por la misma estarán almacenados en los POD de los usuarios permitiendo así un mayor control de los datos personales.

DIAGRAMA DE CONTEXTO EMPRESARIAL Hierarchy of building blocks

TABLA DE CONTEXTO EMPRESARIAL

Entidad Entrada Salida

Cliente

Contenido y operaciones permitidas en la tienda

Visitas a las distintas páginas de la app web a través de la nube.

Heroku

interfaz de usuario (frontend) y datos de la base de datos, apis…​(backend) para su respectiva visualización en la nube

Despliegue tanto del frontend como del backend e información de la app para el usuario

Frontend (interfaz usuario)

Solicita a Heroku su despliegue y gestiona la API de logueo del usuario

Muestra todas las opciones de la aplicación de manera visual para el cliente y esta es mandada a heroku para ser desplegada en la nube

Backend (datos almacenados y peticiones)

Solicita a Heroku su despliegue y recibe/modifica los datos de la base de datos

Gestiona los datos de las base de datos y se los transmite al frontend para poder visualizar y realizar operaciones. También se envían a Heroku para que esta parte sea desplegada en la nube

Auth0

Se corresponde con la opción de inicio/cierre de sesión del frontend

Loguea al usuario en la aplicación desde esta o desde Google

POD

Solicitud de datos del cliente por parte de la app.

Respuesta a solicitud.

Base de datos

Gestión de los datos a través de API rest de la aplicación

respuesta a las peticiones de esa API rest (productos, usuarios, pedidos…​)

Geocode

Petición por parte del backend de las coordenadas de una dirección de un usuario extraída a través de los POD

Devolución de las coordenadas

Cloudinary

Petición al añadir juguete que transforma la URL de la imagen en una URL de cloudinary pública que es la que se almacena en la base de datos.

Almacenamiento en la nube de la imágen.

Contents

Specification of all communication partners (users, IT-systems, …​) with explanations of domain specific inputs and outputs or interfaces. Optionally you can add domain specific formats or communication protocols.

Motivation

All stakeholders should understand which data are exchanged with the environment of the system.

Form

All kinds of diagrams that show the system as a black box and specify the domain interfaces to communication partners.

Alternatively (or additionally) you can use a table. The title of the table is the name of your system, the three columns contain the name of the communication partner, the inputs, and the outputs.

3.2. Contexto tecnico

DIAGRAMA DEL CONTEXTO TECNICO Hierarchy of building blocks

TABLA DEL CONTEXTO TÉCNICO

Elemento Funcionalidad/Canal

Cliente

Usuario que interactuará con la app web a través de internet (https).

Servidor DeDe

Aplicación web con la que interactuarán y comunicarán los usuarios utilizando PODs. Se dividirá en frontend, parte visual con la que interacciona el usuario, y backend, parte que se encarga de gestionar los datos y peticiones de la aplicación internamente

SOLID

Descentralizado/externo a la aplicación. Proveedor de los PODs.

POD

Almacena los datos privados del cliente que la aplicación solo necesitará para realizar las compras, en nuestro caso la dirección principlamente. Buena privacidad para los usuarios.

HTTPS

Protocolo seguro de peticiones y respuestas con el servidor.

MERN

M→ MongoDB (persistencia) / E→ Express (peticiones) / R→ React (Front-End) / N→ Node (Back-End).

Auth0

API que se encarga de gestionar el inicio y cierre de sesión por parte de los usuarios

Geocode

API que se encargará de aportar las coordenadas de una dirección concreta con el objetivo de calcular los gastos de envío posteriormente

Cloudinary

API que almacenará las imágenes de los productos en la nube.

Contents

Technical interfaces (channels and transmission media) linking your system to its environment. In addition a mapping of domain specific input/output to the channels, i.e. an explanation with I/O uses which channel.

Motivation

Many stakeholders make architectural decision based on the technical interfaces between the system and its context. Especially infrastructure or hardware designers decide these technical interfaces.

Form

E.g. UML deployment diagram describing channels to neighboring systems, together with a mapping table showing the relationships between channels and input/output.

4. Estrategia de solución

Como base, vamos a utilizar el lenguaje de programación TypeScript, impuesto en los requisitos de diseño. Es, en esencia, un superconjunto de JavaScript que añade tipado. Para realizar nuestro sistema de ventas hemos decidido utilizar la MERN stack. Esto incluye los siguientes tecnologías:

  • MongoDB: Es una base de datos NoSQL que facilita el trabajo con el Back-End. Es una decisión de diseño propia.

  • Express js: Es un marco que se ha superpuesto a Node JS y se puede utilizar para crear el Back-End de nuestra web. Fue precisamente creado para la creación de sitios web.

  • React JS: Es un framework creado por Facebook ampliamente utlizado para crear componentes de la interfaz de usuario. Es un requisito de diseño por lo que no tenemos nada que decidir.

  • Node JS: Es un entorno de ejecución de JavaScript que permite ejecutar JavaScript del lado del servidor y no en un navegador.

Diseño

Hemos utilizado pricipalmente el Modelo Vista Controlador con el fin de generar un proyecto claramente estructurado y fácilmente ampliable.

Usabilidad

Para alcanzar la mayor usabilidad posible de nuestra web, intentaremos cumplir con todos los criterios de usabilidad que sabemos hasta el momento y la comprobaremos en diferentes validadores de internet. Intentaremos disponer el contenido de la manera más intuitiva posible, haciendo pruebas con usuarios a medida que vamos desarollando la aplicación para intentar sacarle el máximo partido.

Comprensibilidad

No tenemos una gran cantidad de requisitos funcionales por lo que podemos producir una solución sencilla de utilizar y comprensible

Seguridad

Garantizamos la seguridad del usuario mediante el uso de PODs, citados en los requisitos del sistema. También la aplicación será segura al introducir la información confidencial en un fichero .env el cual será privado.

Testabilidad

Testabilidad, la arquitectura permitirá probar fácilmente todos los componentes principales del sistema.

Desarrollo

El sistema va a ser desarrollado completamente por el equipo (utilizando debidamente los recursos mencionados) dividiendo el trabajo en dos partes claras: Front-End y Back-End. En cualquier caso, se irán compartiendo todos los avances y cualquier duda intentando seguir una metodología ágil a través de reuniones frecuentes.

Estructura

El sistema de ventas se compondrá de diversas páginas web implementadas mediante TypeScript y React principalmente. La página principal desplegará diferentes categorías de juguetes y un conjunto de juguetes destacados (o filtrados por categorías). Tendremos acceso a nuestro carrito y a nuestra cuenta, con lo que también podemos ver pedidos realizados anteriormente. Una vez entras en una categoría de juguetes se desplegarán todos aquellos que estén presentes en la base de datos.

Interfaz

La interfaz gráfica se implementará desde el Front-End y se intentará cumplir la máxima usabilidad posible, teniendo en cuenta cualquier tipo de usuario

Contents

A short summary and explanation of the fundamental decisions and solution strategies, that shape the system’s architecture. These include

  • technology decisions

  • decisions about the top-level decomposition of the system, e.g. usage of an architectural pattern or design pattern

  • decisions on how to achieve key quality goals

  • relevant organizational decisions, e.g. selecting a development process or delegating certain tasks to third parties.

Motivation

These decisions form the cornerstones for your architecture. They are the basis for many other detailed decisions or implementation rules.

Form

Keep the explanation of these key decisions short.

Motivate what you have decided and why you decided that way, based upon your problem statement, the quality goals and key constraints. Refer to details in the following sections.

5. Vista de bloques de construcción

Content

The building block view shows the static decomposition of the system into building blocks (modules, components, subsystems, classes, interfaces, packages, libraries, frameworks, layers, partitions, tiers, functions, macros, operations, datas structures, …​) as well as their dependencies (relationships, associations, …​)

This view is mandatory for every architecture documentation. In analogy to a house this is the floor plan.

Motivation

Maintain an overview of your source code by making its structure understandable through abstraction.

This allows you to communicate with your stakeholder on an abstract level without disclosing implementation details.

Form

The building block view is a hierarchical collection of black boxes and white boxes (see figure below) and their descriptions.

Hierarchy of building blocks

Level 1 is the white box description of the overall system together with black box descriptions of all contained building blocks.

Level 2 zooms into some building blocks of level 1. Thus it contains the white box description of selected building blocks of level 1, together with black box descriptions of their internal building blocks.

Level 3 zooms into selected building blocks of level 2, and so on.

5.1. Sistema General de Caja Blanca

En este apartado vamos a estudiar más a fondo la estructura de nuestra aplicación, tanto cada uno de sus componentes como las relaciones entre ellos. Este sería el diagrama que muestra todos estos elementos y como se relacionan. Hierarchy of building blocks

5.1.1. Nivel 1

Hierarchy of building blocks

Motivación

Esquema más general de la aplicación. Vemos los componentes generales de la misma, siendo DeDe la aplicación en sí, con la que interactúa el usuario el cual ha de poseer un POD en caso de que quiera realizar compras en nuestro sitio web. Por otro lado, la aplicación tendra una base de datos asociada para almacenar la información que se considere necesaria.

Caja Función

DeDe

Aplicación completa que ofrece servicios a sus usuarios, con una funcionalidad y división interna que describiremos a continuación.

5.1.2. Nivel 2

Hierarchy of building blocks

Motivación

Aquí vamos a explicar los dos núcleos de la aplicación, Frontend y Backend.

Caja Función

WebApp

Interfaz gráfica de la aplicación. Es la parte con la que interactúa el usuario y que intercambia información con la restapi.

Restapi

Capa de acceso a datos y control de las peticiones procedentes del usuario a través del webApp.

5.1.3. Nivel 3

Hierarchy of building blocks

Motivación

A continuación el último nivel en el que vamos a descomponer los dos componentes internos de la aplicación.

Caja Función

Home

Página principal de la aplicación.

Juguetes

Página que muestra los productos de la aplicación. En ella se encuentra un filtro para especificar los juguetes por categoría.

Registrarse

Botón que nos reenvía a un formulario de registro perteneciente a la API de Auth0, la cual usamos para gestionar los usuarios de nuestro sitio.

Historial Pedidos

Ventana que nos muestra los pedidos que ha realizado el usuario registrado en nuestra aplicación.

Administrar productos

Funcionalidad para los administradores de la aplicación. Muestra todos los productos existentes y las opciones de editar los mismos o incrementar su stock en el almacén

Añadir producto

Otra funcionalidad para administradores. Tiene una ventana específica para realizar esta operación que consiste en rellenar un formulario con los datos del nuevo juguete que se quiere añadir.

Here you describe the decomposition of the overall system using the following white box template. It contains

  • an overview diagram

  • a motivation for the decomposition

  • black box descriptions of the contained building blocks. For these we offer you alternatives:

    • use one table for a short and pragmatic overview of all contained building blocks and their interfaces

    • use a list of black box descriptions of the building blocks according to the black box template (see below). Depending on your choice of tool this list could be sub-chapters (in text files), sub-pages (in a Wiki) or nested elements (in a modeling tool).

  • (optional:) important interfaces, that are not explained in the black box templates of a building block, but are very important for understanding the white box. Since there are so many ways to specify interfaces why do not provide a specific template for them. In the worst case you have to specify and describe syntax, semantics, protocols, error handling, restrictions, versions, qualities, necessary compatibilities and many things more. In the best case you will get away with examples or simple signatures.

Insert your explanations of black boxes from level 1:

If you use tabular form you will only describe your black boxes with name and responsibility according to the following schema:

Name Responsibility

<black box 1>

 <Text>

<black box 2>

 <Text>

If you use a list of black box descriptions then you fill in a separate black box template for every important building block . Its headline is the name of the black box.

Here you describe <black box 1> according the the following black box template:

  • Purpose/Responsibility

  • Interface(s), when they are not extracted as separate paragraphs. This interfaces may include qualities and performance characteristics.

  • (Optional) Quality-/Performance characteristics of the black box, e.g.availability, run time behavior, …​.

  • (Optional) directory/file location

  • (Optional) Fulfilled requirements (if you need traceability to requirements).

  • (Optional) Open issues/problems/risks

Here you can specify the inner structure of (some) building blocks from level 1 as white boxes.

You have to decide which building blocks of your system are important enough to justify such a detailed description. Please prefer relevance over completeness. Specify important, surprising, risky, complex or volatile building blocks. Leave out normal, simple, boring or standardized parts of your system

6. Vista de tiempo de ejecución

Contents

The runtime view describes concrete behavior and interactions of the system’s building blocks in form of scenarios from the following areas:

  • important use cases or features: how do building blocks execute them?

  • interactions at critical external interfaces: how do building blocks cooperate with users and neighboring systems?

  • operation and administration: launch, start-up, stop

  • error and exception scenarios

Remark: The main criterion for the choice of possible scenarios (sequences, workflows) is their architectural relevance. It is not important to describe a large number of scenarios. You should rather document a representative selection.

Motivation

You should understand how (instances of) building blocks of your system perform their job and communicate at runtime. You will mainly capture scenarios in your documentation to communicate your architecture to stakeholders that are less willing or able to read and understand the static models (building block view, deployment view).

Form

There are many notations for describing scenarios, e.g.

  • numbered list of steps (in natural language)

  • activity diagrams or flow charts

  • sequence diagrams

  • BPMN or EPCs (event process chains)

  • state machines

  • …​

It is possible to use a sequence diagram:

Sequence diagram

6.1. Compra de productos

ComprarProducto

6.2. Añadir productos

AñadirProducto

6.3. Filtrar productos

FiltrarProducto

6.4. Iniciar sesión

InicioSesion

6.5. Cierre de sesión

CierreSesión

6.6. Editar productos

EditarProducto

6.7. Histórico de pedidos

HistóricoPedidos

7. Vista de implementación

Content

The deployment view describes:

  1. the technical infrastructure used to execute your system, with infrastructure elements like geographical locations, environments, computers, processors, channels and net topologies as well as other infrastructure elements and

  2. the mapping of (software) building blocks to that infrastructure elements.

Often systems are executed in different environments, e.g. development environment, test environment, production environment. In such cases you should document all relevant environments.

Especially document the deployment view when your software is executed as distributed system with more then one computer, processor, server or container or when you design and construct your own hardware processors and chips.

From a software perspective it is sufficient to capture those elements of the infrastructure that are needed to show the deployment of your building blocks. Hardware architects can go beyond that and describe the infrastructure to any level of detail they need to capture.

Motivation

Software does not run without hardware. This underlying infrastructure can and will influence your system and/or some cross-cutting concepts. Therefore, you need to know the infrastructure.

Form

Maybe the highest level deployment diagram is already contained in section 3.2. as technical context with your own infrastructure as ONE black box. In this section you will zoom into this black box using additional deployment diagrams:

  • UML offers deployment diagrams to express that view. Use it, probably with nested diagrams, when your infrastructure is more complex.

  • When your (hardware) stakeholders prefer other kinds of diagrams rather than the deployment diagram, let them use any kind that is able to show nodes and channels of the infrastructure.

7.1. Infraestrutura Nivel 1

Hierarchy of building blocks Este sería un diagrama que muestra la relación entre los distintos componentes de la aplicación. .Justificación El usuario accederá a la parte de interfaz de usuario que compone nuestra aplicación (webapp). Esta a su vez se comunicará con el backend (restapi) que será la encargada de comunicarse con la base de datos (mongoDb) y de trabajar con la API de gastos de envío. La manera de acceder por parte del usuario a todo esto es a través de la nube, es decir, con un navegador de su dispositivo. Para ello, se tiene que realizar el despliegue de la aplicación. Generamos entonces los contenedores Docker con las respectivas imágenes de webapp y restapi y procedemos a realizar el despliegue en Heroku. De ahí todas estas relaciones mostradas en el diagrama.

Describe (usually in a combination of diagrams, tables, and text):

  • the distribution of your system to multiple locations, environments, computers, processors, .. as well as the physical connections between them

  • important justification or motivation for this deployment structure

  • Quality and/or performance features of the infrastructure

  • the mapping of software artifacts to elements of the infrastructure

For multiple environments or alternative deployments please copy that section of arc42 for all relevant environments.

7.2. Infraestrutura Nivel 2

Here you can include the internal structure of (some) infrastructure elements from level 1.

Please copy the structure from level 1 for each selected element.

7.2.1. Heroku

Heroku desplegará la aplicación de manera automatizada a través del workflows configurado en nuestro proyecto.

7.2.2. Contenedor Docker

Dicho elemento es el encargado de generar las imágenes para la webapp y restapi que posteriormente serán utilizadas para el despliegue

7.2.3. Webapp

Interfaz de usuario que se comunicará con el usuario, internamente usa diversas APIs como Auth0 o trabaja con PODs de SOLID para la seguridad. Realizado con React

7.2.4. Restapi

Se encarga de comunicarse con la base de datos y la API de gastos de envío. Realizada con Node.js

7.2.5. Ordenador

Ordenador o dispositivo del usuario que interaccionará con nuestra aplicación

7.2.6. Navegador

Lugar a través del cual el usuario se comunica con nuestro sitio web

7.2.7. PODS

Elementos de almacenamiento de información privada del usuario que aumentará la seguridad del mismo en nuestra aplicación. Internamente el usuario ha de crearse una cuenta con uno de los proveedores existentes y almacenar la información que el mismo desee de manera pública o privada.

7.2.8. Auth0

API que permite al usuario iniciar sesión en nuestro sitio. Nos permitirá trabajar con sus datos desde la aplicación. Esta API además gestionará las contraseñas de los usuarios sin necesidad de tener que introducirlas en nuestra base de datos, algo que incrementará la seguridad de la aplicación.

7.2.9. GeoCode

API a la que le pasas una dirección y te devuelve ciertos datos. Para nuestro proyecto son de utilidad la latitud y longitud de la misma. Se utilizará la fórmula de Haversine para calcular la distancia en km (previamente diferencia de latitudes y longitudes) entre dos ubicaciones.

7.2.10. MongoDb

Entorno que gestionará la base de datos. Se trata de una base de datos NO-SQL que nos aporta gran libertad y comodidad. Además de adapta muy bien a node.js

8. Conceptos transversales

Content

This section describes overall, principal regulations and solution ideas that are relevant in multiple parts (= cross-cutting) of your system. Such concepts are often related to multiple building blocks. They can include many different topics, such as

  • domain models

  • architecture patterns or design patterns

  • rules for using specific technology

  • principal, often technical decisions of overall decisions

  • implementation rules

Motivation

Concepts form the basis for conceptual integrity (consistency, homogeneity) of the architecture. Thus, they are an important contribution to achieve inner qualities of your system.

Some of these concepts cannot be assigned to individual building blocks (e.g. security or safety). This is the place in the template that we provided for a cohesive specification of such concepts.

Form

The form can be varied:

  • concept papers with any kind of structure

  • cross-cutting model excerpts or scenarios using notations of the architecture views

  • sample implementations, especially for technical concepts

  • reference to typical usage of standard frameworks (e.g. using Hibernate for object/relational mapping)

Structure

A potential (but not mandatory) structure for this section could be:

  • Domain concepts

  • User Experience concepts (UX)

  • Safety and security concepts

  • Architecture and design patterns

  • "Under-the-hood"

  • development concepts

  • operational concepts

Note: it might be difficult to assign individual concepts to one specific topic on this list.

8.1. Persistencia

Utilizaremos una base de datos de MongoDB puesto que utilizaremos la pila MERN (MongoDB, Express, React, Node). El almacenamiento de las imágenes se realizará a través de la API Cloudinary, almacenando estas en una nube que está constantemente corriendo y, por tanto, nos aportará usabilidad y escalabilidad.

8.2. Interfaz de Usuario

La interfaz de Usuario de DeDe estará codificada utilizando TypeScript y el framework React. No ha sido una decisión propia de diseño, si no que se imponía en los requisitos de alto nivel de la aplicación.

8.3. Manejo de Sesión

Los usuarios podrán iniciar sesión para realiar su compra a través de su respectivo POD siguiendo los principios SOLID, con el que garantizamos su privacidad. De esta manera obtenemos la dirección del usuario necesaria para calcular los gastos de envío de los pedidos. Por otro lado, el inicio de sesión con la aplicación en sí será a través de la API Auth0, que se encargará de gestionar a todos los usuarios que hayan iniciado sesión en nuestro sitio. Además, almacenaremos en la base de datos los email de aquellos usuarios que se hayan registrado para poder así gestionar sus pedidos.

8.4. Seguridad y privacidad

Como ya hemos mencionado anteriormente, se garantiza la privacidad y seguridad del usuario, obteniendo cualquier tipo de información a través del pod del mismo y siguiendo los principios SOLID, ya que solo se podrán acceder a los datos que el usuario de permisos. Además, las contraseñas de inicio de sesión de los usuarios no se encontrarán almacenadas en la base de datos ni visibles (en caso de que sí se podrían llevar a cabo métodos como la encriptación de las mismas).

8.5. Internacionalización

La web se lanzará inicialmente en castellano, no descartamos la posibilidad de traducirla al inglés.

8.6. Gestión de desarrollo

La web se despliega una vez se pone en marcha el servidor.

8.7. Modelo de Dominio

Hierarchy of building blocks

Nuestro sistema está compuesto por tres entidades, juguete, pedido y usuario. Cada uno con sus atributos y se relacionan entre sí de tal manera que un juguete puede pertenecer a varios pedidos así como que un pedido pueda tener varios juguetes. Por otro lado, un pedido es de un solo usuario mientras que este puede tener asignados varios pedidos. Cabe destacar que el atributo cantidad en pedido va relacionado con cada juguete en concreto, refiriéndose al número de unidades de cada uno de ellos.

8.8. Testeable

El sistema dispondrá de diferentes tipos de pruebas para asegurarnos de su correcto funcionamiento. Estas serán pruebas unitarias para probar su funcionalidad, pruebas de aceptación para hacerlo pero de manera automática por el navegador y por último pruebas de carga para ver cuantos usuarios y peticiones es capaz de soportar nuestra aplicación.

9. Decisiones de diseño

En este apartado no solo se van a comentar las decisiones tomadas por el equipo sino también alguna de las restricciones establecidas por los profesores de la asignatura.

Decisión/Restricción Tipo Utilidad

Node

Restricción

Lenguaje a utilizar para el desarrollo del backend de la aplicación

React

Restricción

Lenguaje a utilizar para el desarrollo del frontend de la aplicación

Typescript

Restricción

Lenguaje en el que se realizará el desarrollo de la aplicación

SOLID

Restricción

Plataforma de gestión de los POD

Express

Decisión

Framework que nos facilita el trabajo con Node para el backend

MongoDb

Decisión

Para gestionar la base de datos

GeoCode

Decisión

API para calcular los gastos de envío de los pedidos

Heroku

Decisión

Para realizar el despliegue en la nube de la aplicación

Auth0

Decisión

Para hacer el registro e inicio de sesión en la aplicación. Permite hacerlo a través de Google

BootStrap

Decisión

Para añadir estilos a los elementos

Dotenv

Decisión

Para proteger la información privada de la aplicación (url base de datos, ubicación de la empresa…​)

Cloudinary

Decisión

Para almacenar las imágenes que utilicemos en nuestra aplicación (juguetes, logo…​) en la nube y aumentar la usabilidad y escalabilidad

Contents

Important, expensive, large scale or risky architecture decisions including rationals. With "decisions" we mean selecting one alternative based on given criteria.

Please use your judgement to decide whether an architectural decision should be documented here in this central section or whether you better document it locally (e.g. within the white box template of one building block).

Avoid redundancy. Refer to section 4, where you already captured the most important decisions of your architecture.

Motivation

Stakeholders of your system should be able to comprehend and retrace your decisions.

Form

Various options:

  • List or table, ordered by importance and consequences or:

  • more detailed in form of separate sections per decision

  • ADR (architecture decision record) for every important decision

Content

This section contains all quality requirements as quality tree with scenarios. The most important ones have already been described in section 1.2. (quality goals)

Here you can also capture quality requirements with lesser priority, which will not create high risks when they are not fully achieved.

Motivation

Since quality requirements will have a lot of influence on architectural decisions you should know for every stakeholder what is really important to them, concrete and measurable.

10. Requisitos de calidad

Content

The quality tree (as defined in ATAM – Architecture Tradeoff Analysis Method) with quality/evaluation scenarios as leafs.

Motivation

The tree structure with priorities provides an overview for a sometimes large number of quality requirements.

Form

The quality tree is a high-level overview of the quality goals and requirements:

  • tree-like refinement of the term "quality". Use "quality" or "usefulness" as a root

  • a mind map with quality categories as main branches

In any case the tree should include links to the scenarios of the following section.

10.1. Arbol de calidad

Arbol de calidad

Contents

Concretization of (sometimes vague or implicit) quality requirements using (quality) scenarios.

These scenarios describe what should happen when a stimulus arrives at the system.

For architects, two kinds of scenarios are important:

  • Usage scenarios (also called application scenarios or use case scenarios) describe the system’s runtime reaction to a certain stimulus. This also includes scenarios that describe the system’s efficiency or performance. Example: The system reacts to a user’s request within one second.

  • Change scenarios describe a modification of the system or of its immediate environment. Example: Additional functionality is implemented or requirements for a quality attribute change.

Motivation

Scenarios make quality requirements concrete and allow to more easily measure or decide whether they are fulfilled.

Especially when you want to assess your architecture using methods like ATAM you need to describe your quality goals (from section 1.2) more precisely down to a level of scenarios that can be discussed and evaluated.

Form

Tabular or free form text.

10.2. Escenarios de calidad

Los siguientes atributos estan descritos en el epigrafe 1.2.

La prioridad de los escenarios viene dada por la importancia para el cliente y por la dificultad de desarrollo por los arquitectos (respectivamente), tiene 3 valores (Bajo, Medio, Alto)

Id Atributo de calidad Escenario de calidad Prioridad (Cliente/Arquitecto)

US1

Usabilidad

Los usuarios deben poder usar la aplicacion sin ningun tipo de problema, haciendo que comprar un producto sea una tarea sencilla

Alto/Bajo

US2

Usabilidad

La opción de añadir al carrito un producto debe estar muy clara y fácilmente accesible, así como realizar la compra

Alto/Bajo

COM1

Comprensibilidad

La aplicacion debe ser lo mas intuitiva posible para el usuario, para que sea capaz de realizar cualquier funcion dentro de ella

Alto/Medio

COM2

Comprensibilidad

En caso de tener funciones distintas a las habituales de una tienda online, es decir, no usar convenciones, se deberán explicar y mostrar de manera clara

Alto/Medio

SEG1

Seguridad

Si en cualquier momento la aplicación no es segura (por ejemplo debido a malware) se deberá mostrar un mensaje de que no es seguro el uso del sistema o incluso incapacitar el sistema hasta que se resuelva

Alto/Alto

SEG2

Seguridad

Todos los datos de los usuarios no pueden ser expuestos a terceros

Alto/Alto

TEST1

Testabilidad

Si se da el caso de que se necesite añadir nuevas funcionalidades a la tienda online, se deberá poder probar antes de su despliegue

Medio/Medio

TEST2

Testabilidad

La aplicacion sera sometida a pruebas unitarias, de aceptación y de carga, para probar que funcione correctamente

Medio/Medio

ATRA1

Atractivo

Si la tienda incorpora opciones inusuales en tiendas online, se deberá usar la interfaz para que sean fácilmente usables y accesibles

Medio/Bajo

ATRA2

Atractivo

La aplicacion debe llamar la atencion al usuario, implementando opciones poco habituales o por una interfaz llamativa y fácil de usar

Bajo/Bajo

11. Riesgos y deudas técnicas

Falta de conocimiento de React

Es la primera vez que trabajamos con este framework. Aunque hemos aprendido bastante durante la implementación del sitio web sí que es verdad que en muchas ocasiones nos hemos visto con problemas para realizar alguna funcionalidad debido a falta de conocimiento en aspectos como puede ser la sintaxis del lenguaje. Sí que es cierto que la documentación es muy buena y tiene una gran cantidad de ejemplos, ayudándonos con el desarrollo.

Falta de conocimiento de Node.js

Nos pasa lo mismo que con React. Hemos tenido que ir aprendiendo el lenguaje a medida que ibamos desarrollando la aplicación. También tiene un documentación exhaustiva al ser un framework muy utilizado en el mundo del desarrollo web.

Tiempo

Estamos limitados a una fecha para entregar el proyecto, por lo que debemos optimizar el trabajo lo máximo posible, algo que hará que aparezca más deuda técnica que si tuvieramos el tiempo que quisiéramos para perfeccionar todo lo necesario.

Equipos

No tenemos mucha experiencia trabajando en equipo, y en ocasiones no es fácil coordinarse. Haremos reuniones cada poco tiempo con el fin de poner nuestro trabajo al día y avanzar uniformemente.

Despliegue

Nos han surgido muchos problemas con el despliegue, no hemos sido capaces de realizarlo en la plataforma AWS y de momento estamos en progreso para hacerlo en Heroku. Es una operación de la que no teníamos conocimiento inicialmente y esto nos ha llevado a tener que investigar y solventar una gran cantidad de inconvenientes.

Desconococimiento de PODs de SOLID

Tecnología desconocida con muy poca documentación y ejemplos.

Riesgo Explicación Solución

Falta de conocimiento de React

Es la primera vez que trabajamos con este framework, así no tenemos experiencia con él.

La documentación de React es muy buena y cuenta con una gran cantidad de ejemplos y facilidades, por lo que aprenderemos a desenvolvernos rápido.

_Falta de conocimiento de Node.js

Es la primera vez que trabajamos con este framework, así no tenemos experiencia con él.

La documentación es muy buena y cuenta con una gran cantidad de ejemplos y facilidades, por lo que aprenderemos a desenvolvernos rápido.

Tiempo

Estamos condicionados por una fecha de entrega

Debemos optimizar tanto el trabajo individual como colectivo lo máximo posible

Desconococimiento de PODs de SOLID

Es una tecnología muy nueva, su documentación es muy escasa y se han reportado varios bugs

Intentaremos informarnos de cualquier manera posible sobre esta tecnología, ya que tampoco tiene muchos ejemplos

Despliegue

Problemas en todas las plataformas en las que intentamos realizarlo

Nos informamos a través de diversas fuentes así como con la ayuda de los profesores para realizar la misma.

Deuda técnica Explicación

Internacionalización

Aspecto que ha quedado sin realizar debido a falta de tiempo. Nos habría gustado realizarlo

Errores de conexión

Puede ocurrir que la conexión a la red sea muy débil y que en consecuencia la aplicación trabaje más lento

Usabilidad

Operaciones como pasar validadores o probar la aplicación con usuarios reales antes de la presentación no han sido realizadas también debido al tiempo

Despliegue

Todavía no hemos logrado desplegar exitosamente la aplicación

Usabilidad

Queda por probar la aplicación con usuarios reales así como pasar validadores.

Script test e2e

Nos da error al ejecutar el comando debido a que no detecta 'jest'

Testing

Problemas con el testing de carga por Auth0, con los e2e en funcion del hardware y con los unitarios debido a uso de componentes como navigate.

Contents

A list of identified technical risks or technical debts, ordered by priority

Motivation

“Risk management is project management for grown-ups” (Tim Lister, Atlantic Systems Guild.)

This should be your motto for systematic detection and evaluation of risks and technical debts in the architecture, which will be needed by management stakeholders (e.g. project managers, product owners) as part of the overall risk analysis and measurement planning.

Form

List of risks and/or technical debts, probably including suggested measures to minimize, mitigate or avoid risks or reduce technical debts.

12. Glosario

Contents

The most important domain and technical terms that your stakeholders use when discussing the system.

You can also see the glossary as source for translations if you work in multi-language teams.

Motivation

You should clearly define your terms, so that all stakeholders

  • have an identical understanding of these terms

  • do not use synonyms and homonyms

Form

A table with columns <Term> and <Definition>.

Potentially more columns in case you need translations.

Término Definición

SOLID

SOLID es una especificación que permite a las personas almacenar sus datos de forma segura en almacenes de datos descentralizados llamados PODs.

POD

Los PODs son como servidores web personales seguros para datos. Cuando los datos se almacenan en el POD de alguien, controlan qué personas y aplicaciones pueden acceder a ellos.

REACT

React es una biblioteca de JavaScript para construir interfaces de usuario interactivas. Además, se encarga de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.

TypeScript

Sirve para el desarrollo de aplicaciones con Javascript a gran escala.

NODE.js

Node.js es un entorno de tiempo de ejecución de JavaScript. Incluye todo lo que se necesita para ejecutar un programa escrito en JavaScript. También aporta muchos beneficios y soluciona gran cantidad de problemas.

Express

Es el framework web más popular de Node.

Heroku

Es la plataforma para la creación de aplicaciones que hemos usado.

Auth0

API que permite la autenticación en aplicaciones de manera sencilla y eficaz.

Dotenv

Usada para manejar variables de entorno y nos sirve para proteger la información privada.

MongoDB

Es un sistema de base de datos NoSQL orientado a documentos de código abierto.

BootStrap

Es un framework front-end utilizado para desarrollar aplicaciones web.

Cloudinary

Api que se encarga de almacenar las imágenes de los juguetes en la nube, en una cuenta creada por nosotros a través de una api key

GeoCode

Api para calcular los gastos de envío, obteniendo de ella datos de una dirección específica.

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.