# Handbook de Arquitectura

## Objetivo

</br>
<div style="text-align:justify">
Este documento tiene la finalidad de presentar la arquitectura de software del proyecto <strong>Cannis Majoris</strong> desarrollado por el departamento <strong>NOVA</strong> para la empresa <strong>PugSeal</strong> en el periodo Agosto - Diciembre de 2020.
</div>
<div style="text-align:center">
<img src="https://i.imgur.com/vCkx9Ti.png" width="50%">
</div>
</br>

## Estructura del proyecto

### Stack de tecnologías

</br>

><div style="text-align: justify">El stack de tecnologías, también llamado stack de soluciones,cinfraestructura tecnológica o ecosistema de datos, es una lista de todos los servicios tecnológicos usados para construir y ejecutar un producto de software.</div>

</br>

<div style="text-align: justify">A continuación se mencionan las tecnologías a utilizar para el desarrollo del proyecto <strong>Cannis Majoris</strong>. Desde los lenguajes a utilizar, los frameworks y otras dependencias.</div>

</br></br></br>

### _Frontend_

</br>

<div style="text-align: center"><a href="https://angular.io/" target="_blank"><img src="https://www.edureka.co/blog/wp-content/uploads/2019/11/typescript-logo-528x194.png" width="50%"></a></div>

</br>

><div style="text-align: justify">Frontend es la parte de un sitio web que interactúa con los usuarios, por eso decimos que está del lado del cliente.
></br></br>Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente. Son todas las tecnologías de diseño y desarrollo web que se ejecutan en el navegador y que se encargan de la interactividad con los usuarios [2].
></br></br>En pocas palabras, frontend es toda la parte visual/gráfica de un producto de software.
></div>
</br>
<div style="text-align: justify">En cuanto al frontend, estaremos utilizando el lenguaje <strong><a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a></strong> con el siguiente framework: </div>

</br>

[**Angular 10**](https://angular.io/)

</br>

><div style="text-align: justify">Angular es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. [1]</div>

<div style="text-align: center"><a href="https://angular.io/" target="_blank"><img src="https://i.imgur.com/VqyFzod.png"></a></div>

</br>

Para visualizar la estructura de archivos, véase el sitio web: [**Workspace and project file structure**](https://angular.io/guide/file-structure).

</br>

Plugins de **Visual Studio Code**:

</br>

- [**TSLint**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)
- [**Augury**](https://augury.rangle.io/)
- [**Auto Import**](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)
- [**dotEnv**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
- [**Git Blame**](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame)
- [**Bracket pair colorizer**](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

</br>

</br></br>

### _Backend_

</br>

<div style="text-align: center"><a href="https://angular.io/" target="_blank"><img src="https://www.python.org/static/img/python-logo.png"></a></div>

</br>

><div style="text-align: justify">Backend es la capa de acceso a datos de un software o cualquier dispositivo, que no es directamente accesible por los usuarios, además contiene la lógica de la aplicación que maneja dichos datos. El Backend también accede al servidor, que es una aplicación especializada que entiende la forma como el navegador solicita cosas [2].
></br></br>En resumen, el backend se entiende como la lógica que está detrás de un producto de software.
></div>

</br>

<div style="text-align: justify">En cuanto al backend, estaremos utilizando el lenguaje <strong><a href="https://www.python.org/" target="_blank">Python</a></strong> con el siguiente framework: </div>

</br>

[**Django**](https://www.djangoproject.com/)

</br>

><div style="text-align: justify">Django es un framework web de alto nivel basado en Python, el cual fomenta un desarrollo rápido y un diseño limpio y pragmático. Creado por desarrolladores experimentados, se encarga en gran parte de las molestias del desarrollo web. A través del uso de este framework se busca concentrarse directamente en el código de una aplicación, sin necesidad de reinventar la rueda. Es un framework gratuito y de código abierto. [3]</div>

</br>

<div style="text-align: center"><a href="https://www.djangoproject.com/" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Django_logo.svg/1920px-Django_logo.svg.png"></a></div>

</br></br>

Para visualizar la estructura de archivos, véase la guía: [**Project structure**](https://django-project-skeleton.readthedocs.io/en/latest/structure.html).

</br>

<div style="text-align: justify">Para ejecutar un proyecto de Django, es necesario instalar lo siguiente:
</div>
</br>

- [**Python**](https://www.python.org/downloads/)
- [**pip**](https://pip.pypa.io/en/latest/)
- **[Django](https://docs.djangoproject.com/en/3.1/topics/install/)**
- [**Visual Studio Code**](https://code.visualstudio.com/)

</br>

Plugins de **Visual Studio Code**:

</br>

- [**Liveshare**](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
- [**Python for Visual Studio**](https://marketplace.visualstudio.com/items?itemName=ms-python.python)

</br>

Para instalar de forma automatizada las librerías a usar en el proyecto, ejecute el siguiente comando:

</br>**Windows** CLI:

python -m pip install -r requirements.txt

</br>**UNIX** CLI:

pip install -r requirements.txt

</br>

Para instalar **mysqlclient**:

</br>

1. Revise su versión de python con el siguiente comando:

> python --version

$ python3 --version

2. Descargue [**mysqlclient**](https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient)

3. Instale **mysqlclient** con el comando:

pip install mysqlclient‑1.4.6‑[python_version]‑[python_version]‑win_[processor_type].whl

</br>

Para ejecutar el proyecto de **Django**:

1. Active el entorno virtual:

> [environment_name]\Scripts\activate

$ [source] env/bin/activate

2. Ejecute el servidor local

project_folder> python manage.py runserver

project_folder$ python3 manage.py runserver

</br></br></br>

### _Base de datos_

</br>

><div style="text-align: justify">Una base de datos es un almacén que nos permite guardar grandes cantidades de información de forma organizada para que luego podamos encontrar y utilizar fácilmente.
></br></br>Cada base de datos se compone de una o más tablas que guarda un conjunto de datos. Cada tabla tiene una o más columnas y filas. Las columnas guardan una parte de la información sobre cada elemento que queramos guardar en la tabla, cada fila de la tabla conforma un registro. [6]
></br></br>En general, una base de datos es el lugar donde se almacena toda la información de las operaciones internas de un producto de software.
></div>

</br>

Para la gestión de la base de datos del proyecto, estaremos utilizando el gestor de bases de datos [**Datagrip**](https://www.jetbrains.com/datagrip/?&msclkid=5a9695263c421edadc77caa07b6591b0&utm_source=bing&utm_medium=cpc&utm_campaign=EM%2BCIS_en_MX_DataGrip_Branded&utm_term=%2B%22datagrip%22&utm_content=%2B%22datagrip%22&gclid=COL1itvqsuwCFUiKxQId5jYPMw&gclsrc=ds).

</br>

<div style="text-align: center">
<img src="https://cdn.freebiesupply.com/logos/thumbs/2x/datagrip-logo.png" width="80%">
</div>

</br>

<div style="text-align: justify">
El servicio de base de datos a utilizar en el proyecto es <strong><a href="https://www.mysql.com/" target="_blank">MySQL</a></strong>.
</div>

</br>

<div style="text-align: center">
<img src="https://download.logo.wine/logo/MySQL/MySQL-Logo.wine.png" width="70%">
</div>

</br>

<div style="text-align: justify">
MySQL es un sistema de gestión de bases de datos relacionales de código abierto (RDBMS) con un modelo cliente-servidor. RDBMS es un software o servicio utilizado para crear y administrar bases de datos basadas en un modelo relacional.
</div>

</br>

**Para configurar el ambiente de la base de datos, seguiremos las instrucciones descritas a continuación:**

</br>Entorno **Windows**:

</br>

1. Descargue el [SDK de Google Cloud](https://cloud.google.com/sdk/docs/quickstart).

2. Abra una terminal nueva de Google Cloud SDK.

3. Inicie sesión con una cuenta de Google (esta cuenta debe ser previamente registrada por algún miembro que cuente con permisos de propietario).


4. Seleccione el proyecto de Cannis Majoris, en este caso el nombre clave usado por Google Cloud Platform es "**nomadic-lodge-293014**":


Con estos sencillos pasos ya tendremos configurado el ambiente de Google Cloud Platform.

</br>

5. Proceda a instalar el [proxy de Google Cloud SQL](https://cloud.google.com/sql/docs/mysql/connect-admin-proxy?hl=es#windows-de-64-bits). Este archivo debe renombrarse a "**cloud_sql_proxy.exe**"

</br>Entorno **macOS/Linux/UNIX**:

1. Descargue el [SDK de Google Cloud](https://cloud.google.com/sdk/docs/quickstart) correspondiente al sistema operativo que esté utilizando (en este caso macOS).
</br>
2. Descomprima el archivo zip descargado desde la página de Google Cloud Platform. Posteriormente, aparecerá una carpeta como la siguiente:

</br>
3. Abra una terminal en la carpeta actual y proceda a ejecutar el siguiente comando:

$ ./install.sh

Este comando se encargará de instalar todas las dependencias de Google Cloud Platform directamente en el sistema operativo. Únicamente tendrá que aceptar todo lo que aparezca en pantalla (tecleando "**y**"), y al final presione ENTER.
</br>
4. Inicie sesión con una cuenta de Google (esta cuenta debe ser previamente registrada por algún miembro que cuente con permisos de propietario).

</br>
5. Seleccione el proyecto de Cannis Majoris, en este caso el nombre clave usado por Google Cloud Platform es "**nomadic-lodge-293014**":


Con estos sencillos pasos ya tendrá configurado el ambiente de Google Cloud Platform.

</br>6. Proceda a instalar el [proxy de Google Cloud SQL](https://cloud.google.com/sql/docs/mysql/connect-admin-proxy?hl=es#macos-de-64-bits).

</br></br>**Conexión a la base de datos PugDB**</br></br>Para conectarse a la base de datos se ha preparado un script tanto para entornos **Windows** como para entornos **macOS/Linux/UNIX**.
</br>Para entornos **Windows**:

</br>Únicamente debe ejecutar el archivo "**dbconnection.bat**". Cabe mencionar que el programa debe ejecutarse en la carpeta que contenga el archivo ejecutable del proxy.

</br>

En algunos casos, el archivo estará bloqueado por el antivirus de Windows debido a que es un archivo ejecutable. El sistema operativo nos desplegará la siguiente pantalla:


Haga click en "Más información" y aparecerá un botón de "ejecutar" en la parte inferior. Posteriormente haga click en el botón de ejecutar para iniciar el programa.

</br>Para entornos **macOS/Linux/UNIX**:

</br>Compile el archivo "**db_connection.cpp**" con el siguiente comando:

$ g++ db_connection.cpp -o db_connection

</br>Posteriormente ejecute el programa con el siguiente comando:

$ ./db_connection 1

</br>

Ambos archivos se encuentran disponibles en el [repositorio de Google Drive](https://drive.google.com/drive/folders/12M2MAIPZsFWzsTeF-XXkR3l-waLixLGa?usp=sharing) (se requieren permisos de editor para descargar los archivos).

</br>

**Configuración de DataGrip**

</br>

Para configurar la base de datos con nuestro gestor, tendremos que contar con una conexión activa a la misma (véase el apartado anterior "***Conexión a la base de datos PugDB***").

</br>

1. Abra **DataGrip**

3. Seleccione el apartado "**File**".

4. Haga click en "**New**".

5. Seleccione el apartado "**Data Source**".

6. Haga click en la opción **MySQL**.


</br>

7. A continuación llene los datos tal como se muestra en la ventana:

- **Nombre**: pugdb
- **Host**: localhost
- **Puerto**: 3306
- **Usuario**: root
- **Password**: 1234
- **Database**: pugsealapp


</br>

8. Para finalizar haga click en "Apply" y posteriormente click en "Ok". ¡Listo!, ahora tiene configurada la base de datos en el gestor DataGrip.

</br></br></br>

### Estructura de datos

#### Modelo Entidad Relación (MER)
</br>

><div style="text-align: justify">Un modelo entidad-relación (MER o ERD), es un tipo de diagrama de flujo que ilustra como las "entidades", como personas, objetos o conceptos, se relacionan entre sí dentro de un sistema. Se usan a menudo para diseñar o depurar bases de datos relacionales en los campos de ingeniería de software, sistemas de información empresarial, educación e investigación.</div>

><div style="text-align: justify">Este tipo de diagramas emplean un conjunto definido de símbolos, tales como rectángulos, diamantes, óvalos y líneas de conexión para representar la interconexión de entidades, relaciones y sus atributos. Son un reflejo de la estructura gramatical y emplean entidades como sustantivos y relaciones como verbos. [4]</div>

</br>
</br>

<div style="text-align:center"><img src="https://i.imgur.com/5C14XNs.png" width="70%"></div>

</br>
</br>

<div style="text-align: justify">Referencia al <strong><a href="https://app.lucidchart.com/invitations/accept/3c0999b4-8aa6-4fd8-b634-e67c59288ce3">Modelo Entidad-Relación del proyecto</a></strong></div>

#### Diccionario de datos

</br>

><div style="text-align: justify">Un diccionario de datos es un conjunto de definiciones que contiene las características lógicas y puntuales de los datos que se van a utilizar en el sistema que se programa, incluyendo nombre, descripción, alias, contenido y organización. [5]</div>

</br>
</br>

<div style="text-align:center"><img src="https://www.monografias.com/trabajos59/administracion-diseno-db/Image23848.gif" width="70%"></div>

</br>
</br>

## Estándar de codificación
[Documento de Estándar de codificación del proyecto.](https://hackmd.io/@c7jyUbaqRp-B_59a77zwbA/rkdy5RWtP)

## Referencias

<div style="text-align:left">

[1] https://angular.io/

</br>

[2] https://platzi.com/blog/que-es-frontend-y-backend/

</br>

[3] https://www.djangoproject.com/

</br>

[4] https://www.lucidchart.com/pages/es/que-es-un-diagrama-entidad-relacion

</br>

[5] https://ingenieriadesoftwaretdea.weebly.com/diccionario-de-datos.html#:~:text=Un%20diccionario%20de%20datos%20es,%2C%20alias%2C%20contenido%20y%20organizaci%C3%B3n.

[6] http://www.maestrosdelweb.com/que-son-las-bases-de-datos/

</div>

***
versión 1.0