Nova X OBCapital - Architecture Handbook
========================================
## Autores
* Peter González
* Juan Alcantara

## <div id="indice">Índice</div>
- [Funcionalidad](#Funcionalidad)
* [Requisito objetivo](#Requisito-objetivo)
* [Stack de tecnologías](#Stack-de-tecnologías)
* [Vue](#Vue)
+ [Estructura de archivos](#Estructura-de-archivos)
- [Política de despliegue](#Política-de-despliegue)
* [3.1 Subpolítica de despliegue a staging](#3.1-Subpolítica-de-despliegue-a-staging)
* [3.2 Subpolítica de despliegue a producción](#3.2-Subpolítica-de-despliegue-a-producción)
- [Diagrama de arquitectura](#Diagrama-de-arquitectura)
- [Runtime Architecture](#Runtime-Architecture)
* [Staging Architecture](#Staging-architecture)
<!--
- [Estándar de codificación](#Estándar-de-codificación)
* [TypeScript](#Typescript)
* [SCSS](#SCSS)
-->
- [Plan de Prueba de Arquitectura](#Plan-de-Prueba-Arq)

## <div id="funcionalidad">Funcionalidad</div>

### <div id="funcionalidad-req_objetivo">Requisito objetivo</div>
Herramienta __web__ de __búsqueda por recomendación y filtrado de inmuebles en venta__, a través el cuál se pueda tener un __mejor entendimiento del mercado__.

<!--
### <div id="nombredelepic">_Epics_</div>

#### <div id="nombredelepic-objetivo">Objetivo</div>
TBD
#### <div id="nombredelepic-funcionalidades">Funcionalidades</div>
TBD
-->

## <div id="stack">Stack de tecnologías</div>

|Área |Tecnología |Versión |
|-------------|--------------|--------------|
|Engine |[node.js] |12.18.4 |
|Package Manager|[yarn] |1.22.5 |
|Languages |[Python] |3.8 |
| |[TypeScript] |4.0 |
|Linter |[pylint] |v2.6.0 |
| |[pylint-django]|v2.3.0 |
| |[ESLint] |v7.6.0 |
|Frontend |[Vue] |3.0 |
| |[vue-cli] |v4.5.6 |
| |[Vue Router] |v4.0.0 |
| |[Vuex] |v4.0.0 |
| |[Sass (Dart)] |v1.26.11 |
|Backend |[Django] |3.1.1 |
| |[DRF] |v3.12.1 |
|Database |[PostgreSQL] |12.4 |
|Unit Tests |N/A |Django's suite|
|Quality Tests|[SonarQube] |8.4.2 |
|Web Server |[Nginx] |1.18.0 |
| |[Gunicorn] |v20.0.4 |
|Containers |[Docker] |19.03.12 |
|Server OS |[Ubuntu] |20.04 LTS |

[Python]: https://docs.python.org/3.8/
[Vue]: https://v3.vuejs.org/guide/introduction.html#what-is-vue-js
[node.js]: https://nodejs.org/en/download/
[yarn]: https://classic.yarnpkg.com/en/docs/install/
[vue-cli]: https://cli.vuejs.org/
[Vue Router]: https://next.router.vuejs.org/
[Vuex]: https://vuex.vuejs.org/guide/
[TypeScript]: https://www.typescriptlang.org/docs
[Sass (Dart)]: https://sass-lang.com/documentation
[Django]: https://docs.djangoproject.com/en/3.1/
[DRF]: https://www.django-rest-framework.org/tutorial/quickstart/
[PostgreSQL]: https://www.postgresql.org/docs/12/index.html
[SonarQube]: https://docs.sonarqube.org/latest/
[Nginx]: https://nginx.org/en/docs/
[Gunicorn]: https://gunicorn.org/#quickstart
[Ubuntu]: https://releases.ubuntu.com/20.04/
[Docker]: https://docs.docker.com/
[pylint]: http://pylint.pycqa.org/en/latest/
[pylint-django]: https://pypi.org/project/pylint-django/
[ESLint]:https://eslint.org/docs/user-guide/getting-started

### <div id="vue">Vue</div>
#### Estándares de Documentación
* TypeDoc
* [Official Site](http://typedoc.org/)
* Vuese
* [Official Repo](https://github.com/vuese/vuese)
* [Article](https://dev.to/berniwittmann/quick--easy-documentation-generation-for-vuejs-components-7k6)
#### Estructura de archivos

graph LR
A(src/)--> BA(assets/)
A --> CO(components/)
A --> GE(gears/)
A --> GL(globals/)
A --> RO(router/)
A --> ST(store/)
A --> VI(views/)

BA --> BA_DIR(example/)
BA_DIR --> example.png

CO --> CO_EX(Example/)
CO_EX --> CO_EX_INDEX[index.ts]
CO_EX --> CO_EX_SCSS[Example.scss]
CO_EX --> CO_EX_TS[Example.ts]
CO_EX --> CO_EX_VUE[Example.vue]

RO --> RO_INDEX[index.ts]
ST --> ST_INDEX[index.ts]

GE --> API(api/) --> API_INDEX[index.ts]
API --> interfaces.ts
GE --> example(example/) --> GE_EX_INDEX[index.ts]

GL --> SC(scss/)
SC --> __module_example.scss
SC --> example.scss

VI --> VI_EX(Example/)
VI_EX --> Example.scss
VI_EX --> Example.ts
VI_EX --> Example.vue
VI_EX --> VI_EX_INDEX[index.ts]

| Folder | Descripción |
| -------- | ---------------------- |
| assets | Son los archivos de imágenes |
| components | Aquí se encuentran todos los componentes de vue |
| gears | Son los componentes que se comparten de manera **general** entre todas las vistas |
| router | Aquí se encuentra la lógica de interconexión entre las diferentes vistas |
| store | Es un medio de almacenamiento _volátil_ en la que se guarda el _estado_ de la aplicación |
| views | Son las diferentes _vistas_ de la aplicación. Cada vista contiene 4 elementos: **vue** (el html), **scss** (la hoja de estilos), **typescript** (la lógica de la vista, y **index** (para facilitar la importación)|

### <div id="drf">Django Rest Framework</div>
#### Estructura de archivos

graph LR
A(hidba/)--> SE(hidba/)
A --> APP(app/)
A --> ME(media/)
A --> manage[manage.py]

SE --> asgi.py
SE --> settings.py
SE --> ur[urls.py]
SE --> wsgi.py

APP --> admin.py
APP --> apps.py
APP --> FIX(fixtures/)
FIX --> APF(app/)
APF --> test_modelo.json
APP --> MIG(migrations/)
APP --> models.py
APP --> resources.py
APP --> serializers.py
APP --> tests.py
APP --> urls.py
APP --> views.py

| Folder/archivo | Descripción |
| ---------------- | ---------------------- |
| hidba/hidba/ | La carpeta con la configuración general del proyecto |
| hidba/settings.py | Archivo con toda la configuración del proyecto |
| hidba/urls.py | Archivo que contiene todas las urls del proyecto |
| \<app\>/admin.py | Archivo de configuración de los modelos visibles en la extensión administrativa de la aplicación. |
| \<app\>/apps.py | Configuración de la aplicación para el proyecto|
| \<app\>/fixtures/\<app\>/ | Carpeta que contiene los _fixtures_ para las pruebas|
| \<app\>/migrations/ | Carpeta con los archivos de migraciones de la base de datos **NO MODIFICAR** |
| \<app\>/models.py | Archivo con la definición de los modelos de la aplicación. |
| \<app\>/resources.py | Son los recursos relacionados a los modelos para la implementación de la librería _django-import-export_|
| \<app\>/test.py | Archivo con las pruebas automatizadas de la aplicación |
| \<app\>/urls.py | Archivo con la definición de las urls de la aplicación|
| \<app\>/views.py | Archivo con las vistas/_endpoints_ de la aplicación|
| media/ | Carpeta con todas las imágenes y archivos subidos por el usuario|

#### Estándares de Documentación
* NumPy docstrings
* [Official Guide](https://numpydoc.readthedocs.io/en/latest/format.html)

## Política de despliegue
Definimos despliegue como la liberación de software a cualquier ambiente de ejecución fuera del _hardware_ de desarrollo. Para __TODOS__ los despliegues consideramos las siguientes reglas:

1. El código debe pasar el **100%** de pruebas unitarias.
0. El código debe pasar **100%** de pruebas de lint.

Dependiendo del ambiente de ejecución se tiene un grado de rigurosidad diferente, por lo que definimos estas subpolíticas:
### 3.1 Subpolítica de despliegue a _staging_
1. El código debe pasar el **85%** de pruebas de calidad de [SonarQube].
0. Tener un [coverage] de **85%** para _backend_.

### 3.2 Subpolítica de despliegue a producción
1. El código debe pasar el **90%** de pruebas de calidad de [SonarQube].
0. El **100%** de los features fueron aprobados por clientes
0. Tener un [coverage] de **90%** para _backend_.

[coverage]: https://www.atlassian.com/continuous-delivery/software-testing/code-coverage
[SonarQube]: https://docs.sonarqube.org/latest/
### Diagrama de arquitectura
#### Runtime Architecture

graph TD
    subgraph DB_SERVER [Database Server]
        subgraph DB_DOCKER [Docker Container]
            DB[(PostgreSQL)]
       end
    end
    DB --- API
    subgraph API_N_WEBAPP_SERVER [API & Web App Server]
        subgraph API_N_WEBAPP_DOCKER [Docker Container]
            NGINX[nginx] --- API
            NGINX --- HTML
            NGINX --- JS
            NGINX --- CSS
            subgraph API_SERVER [API]
                API[DRF]
            end
            subgraph WEBAPP_SERVER [Web App]
                HTML
                JS
                CSS
            end
       end
    end
    subgraph CLIENT [Clients]
        CHROME[Google Chrome] --- NGINX
        SAFARI[Safari] --- NGINX
        FIREFOX[Mozilla Firefox] --- NGINX
    end

#### Staging Architecture

graph TD
    subgraph STAGING_SERVER [Staging Server]
        subgraph STAGING_DB_DOCKER [Docker Container]
            STAGING_DB[(PostgreSQL)] 
        end
        subgraph API_N_WEBAPP_DOCKER [Docker Container]
            NGINX[nginx] --- STAGING_API[DRF] --- STAGING_DB
            subgraph STAGING_WEBAPP [Staging Webapp]
                STAGING_HTML[HTML]
                STAGING_JS[JS]
                STAGING_CSS[CSS]
            end
        end
        NGINX --- STAGING_JS
        NGINX --- STAGING_HTML
        NGINX --- STAGING_CSS
    end

***
versión 1.0
<!--
## Estándar de codificación
### TypeScript
### SCSS
-->
# <div id="Plan-de-Prueba-Arq">Plan de Prueba de la Arquitectura</div>
[Google Sheets](https://docs.google.com/spreadsheets/d/1n1bSsnMBvcmrwVCx5_lMYrUAjiZRA5Rvymc4fCS6rbk/edit#gid=0)