---
# System prepended metadata

title: MANUAL TECNICO

---

# MANUAL TECNICO 

## ESTRUCTURA BASICA DEL PROYECTO

```
.
`-- AYD1_PROYECTO1_5/
    |-- client/
    |   |-- public
    |   `-- src/
    |       |-- components
    |       `-- screens
    |-- mobile/
    |   `-- src/
    |       |-- app/
    |       |   |-- config
    |       |   |-- guards
    |       |   |-- pages
    |       |   |-- services
    |       |   `-- shared
    |       |-- assets
    |       `-- theme
    `-- server/
        `-- src/
            |-- config
            |-- controllers
            |-- database
            |-- middlewares
            |-- routes
            |-- tests
            |-- app.ts
            `-- index.ts
```

## TECNOCLOGIAS USADAS

### API-REST *Node Js*

#### Dependencias


| Dependencias          | Version  |
| --------------------- |:--------:|
| @google-cloud/storage |  ^5.8.5  |
| cors                  |  ^2.8.5  |
| dotenv                | ^10.0.0  |
| express               | ^4.17.1  |
| formidable            |  ^1.2.2  |
| googleapis            | ^78.0.0  |
| jsonwebtoken          |  ^8.5.1  |
| morgan                | ^1.10.0  |
| mysql2                |  ^2.2.5  |
| nanoid                | ^3.1.23" |
| nodemailer            |  ^6.6.2  |
| nodemon               |  ^2.0.7  |


#### Requerimientos del Sistema

El servidor que implemente esta API-REST debe contar con los siguientes requisitos mínimos:

* Sistema Operativo Windows/Linux
* 4 GB de memoría RAM
* Disco Duro de 250GB
* Procesador de distribuciones de Intel o AMD
* Conexión a internet



#### Ejecución en modo de desarrollo

> **Requisitos Opcionales**
* Tener instalado `git`


> **Requisitos**
* Tener instalado `npm` u otro gestor de paquetes para node. 

1. Clonar el repositorio

    ```shell
    git clone https://github.com/Mr-Solutiones-AyD/AYD1_Proyecto1_5.git
    ```
    También puedes clonar el repositorio directamente de github y no usar una terminal.
    
2. Entrar a la carpeta `server`

    ```shell
    cd AYD1_Proyecto1_5/server/
    ```
    
3. Instalar las dependencias necesarios, usando cualquier gestor de paquetes para node, puede `npm` o `yarn` u otro que sea de su preferencia.

    ```shell
    npm install
    ```

4. Levantar la aplicación

    ```shell
    npm run dev
    ```
    La aplicación debería estar corriendo en [localhost:3000](https://)

#### Construir la aplicación


> **Requisitos**
* Tener instalado `npm` u otro gestor de paquetes para node. 

1. Estar dentro de la carpeta `server`

    ```shell
    cd AYD1_Proyecto1_5/server/
    ```
    
2. Ejecutar el siguiente comando para transpilar/compilar el código de Typescript a JavaScript

    ```shell
    npm run build
    ```
    Al finalizar este comando se creara una carpeta `dist` que tendrá todo el código que el navegador pude interpretar.


#### Documentación de los end points.
La documentación de las endpoints se realizado y generado con ayuda de Postman y publicada en: 

[ https://documenter.getpostman.com/view/14956076/TzeZDReq](https://)



---

### Aplicacion Web *React*

#### Dependencias

| Dependencias                |     Version     |
| --------------------------- |:---------------:|
| @material-ui/core           |     ^4.11.4     |
| @material-ui/icons          |     ^4.11.2     |
| @material-ui/lab            | ^4.0.0-alpha.58 |
| @material-ui/styles         |     ^4.11.4     |
| @material/icon-button       |     ^11.0.0     |
| @material/top-app-bar       |     ^11.0.0     |
| @popperjs/core              |     ^2.9.2      |
| @rmwc/button                |     ^6.1.4      |
| @rmwc/circular-progress     |     ^6.1.4      |
| @rmwc/drawer                |     ^6.1.4      |
| @rmwc/list                  |     ^6.1.4      |
| @rmwc/theme                 |     ^6.1.4      |
| @rmwc/top-app-bar           |     ^6.1.4      |
| @rmwc/typography            |     ^6.1.4      |
| @testing-library/jest-dom   |     ^5.14.1     |
| @testing-library/react      |     ^11.2.7     |
| @testing-library/user-event |     ^12.8.3     |
| axios                       |     ^0.21.1     |
| bootstrap                   |     ^5.0.1      |
| date-fns                    |     ^2.22.1     |
| react                       |     ^17.0.2     |
| react-dom                   |     ^17.0.2     |
| react-router-dom            |     ^5.2.0      |
| react-scripts               |      4.0.3      |
| reactstrap                  |     ^8.9.0      |
| web-vitals                  |     ^1.1.2      |


#### Requerimientos del Sistema

La aplicación web requiere que el dispositivo cuente con los siguientes requisitos mínimos:

* Sistema Operativo Linux/Windows/Mac
* Navegador web que soporte HTML5, CSS3 y JavaScript 6
* Conexión a internet.






#### Ejecución en modo de desarrollo

> **Requisitos Opcionales**
* Tener instalado `git`


> **Requisitos**
* Tener instalado `npm` u otro gestor de paquetes para node. 

1. Clonar el repositorio

    ```shell
    git clone https://github.com/Mr-Solutiones-AyD/AYD1_Proyecto1_5.git
    ```
     También puedes clonar el repositorio directamente de github y no usar una terminal.

2. Entrar a la carpeta `client`

    ```shell
    cd AYD1_Proyecto1_5/client/
    ```
    
3. Instalar las dependencias necesarios, usando cualquier gestor de paquetes para node, puede `npm` o `yarn` u otro que sea de su preferencia.

    ```shell
    npm install
    ```

4. Levantar la aplicación

    ```shell
    npm start
    ```
    La aplicación debería estar corriendo en [localhost:3000](https://)


#### Construir la aplicación


> **Requisitos**
* Tener instalado `npm` u otro gestor de paquetes para node. 

1. Estar dentro de la carpeta `client`

    ```shell
    cd AYD1_Proyecto1_5/client/
    ```
    
2. Ejecutar el siguiente comando para transpilar/compilar el código de Typescript a JavaScript

    ```shell
    npm run build
    ```
    Al finalizar este comando se creara una carpeta `dist` que tendrá todo el código que el navegador pude interpretar.
    > **NOTA:** para poder visualizar la aplicación ya construida para producción debe de levantarse dentro de un servidor,  de lo contrario no se verá nada.



---

### Ablicación Movil *Ionic*

#### Dependencias
| Dependencias                      | Version |
| --------------------------------- |:-------:|
| @angular/common                   | ~12.0.1 |
| @angular/core                     | ~12.0.1 |
| @angular/forms                    | ~12.0.1 |
| @angular/platform-browser         | ~12.0.1 |
| @angular/platform-browser-dynamic | ~12.0.1 |
| @angular/router                   | ~12.0.1 |
| @capacitor/android                | ^3.0.1  |
| @capacitor/app                    |  1.0.1  |
| @capacitor/core                   |  3.0.1  |
| @capacitor/haptics                |  1.0.1  |
| @capacitor/keyboard               |  1.0.1  |
| @capacitor/status-bar             |  1.0.1  |
| @ionic-native/camera              | ^5.33.1 |
| @ionic-native/core                | ^5.33.1 |
| @ionic-native/file-path           | ^5.33.1 |
| @ionic-native/file-transfer       | ^5.33.1 |
| @ionic-native/ionic-webview       | ^5.33.1 |
| @ionic/angular                    | ^5.5.2  |
| cordova-plugin-camera             | ^5.0.2  |
| cordova-plugin-file               | ^6.0.2  |
| cordova-plugin-file-transfer      | ^1.7.1  |
| cordova-plugin-filepath           | ^1.6.0  |
| cordova-plugin-ionic-webview      | ^5.0.0  |
| moment                            | ^2.29.1 |
| rxjs                              | ~6.6.0  |
| tslib                             | ^2.0.0  |
| zone.js                           | ~0.11.4 |



#### Requerimientos del Sistema

La app mobile esta preprarad1 para implementarse con sol siguientes requisitos mínimos:

* Sistema Operativo Android v9.0
* 2 GB de memoría RAM
* Procesador Snapdragon 617 Processor
* Camará 
* Conección a internet





#### Ejecución en modo de desarrollo

> **Requisitos Opcionales**
* Tener instalado `git`


> **Requisitos**
* Tener instalado `npm` u otro gestor de paquetes para node. 
* Tener instalado `ionic-cli`

1. Clonar el repositorio

    ```shell
    git clone https://github.com/Mr-Solutiones-AyD/AYD1_Proyecto1_5.git
    ```
     También puedes clonar el repositorio directamente de github y no usar una terminal.

2. Entrar a la carpeta `mobile`

    ```shell
    cd AYD1_Proyecto1_5/mobile/
    ```
    
3. Instalar las dependencias necesarios, usando cualquier gestor de paquetes para node, puede `npm` o `yarn` u otro que sea de su preferencia.

    ```shell
    npm install
    ```

4. Levantar la aplicación

    ```shell
    ionic serve
    ```
    La aplicación debería estar corriendo en [localhost:8100](https://)

#### Construir la aplicación


> **Requisitos**
* Tener instalado `ionic-cli` u otro gestor de paquetes para node. 

1. Estar dentro de la carpeta `moblie`

    ```shell
    cd AYD1_Proyecto1_5/moblie/
    ```
    
2. Ejecutar el siguiente comando para transpilar/compilar el código de Typescript a JavaScript

    ```shell
    ionic build
    ```
    Al finalizar este comando se creara una carpeta `www` que tendrá todo el código que el navegador pude interpretar.
    
    > **NOTA:** para poder visualizar la aplicación ya construida para producción debe de levantarse dentro de un servidor,  de lo contrario no se verá nada.


#### Generar APK


> **Requisitos**
* Tener instalado `npm` u otro gestor de paquetes para node. 
* Tener instalado `ionic-cli`.
* Tener instalado android studio.
* Tener instalado el sdk de la versión de android a construir. 

1. Estar dentro de la carpeta `mobile`

    ```shell
    cd AYD1_Proyecto1_5/mobile/
    ```
2. Construir la aplicaciónn

    ```shell
    ionic build
    ```
3. Instalar el módulo de `capacitor` que nos ayudara para convertir el código web a un proyecto de android.

    ```shell
    npm install @capacitor/core
    ```
4. Añadir soporte para android el cual convertirá nuestro proyecto que se encuentra en la carpeta `www` a un proyecto de `android`

    ```shell
    npx cap add android
    ```
    Al finalizar este comando se creara una carpeta `android` que tendrá todo el proyecto de android y estara en lenguaje `java`
    
5. Abrir nuestro proyecto de android con el IDE `Android Studio`

    ```shell
    npx cap open android
    ```
    Al abrirlo por primera vez, este instalará varias dependencias necesarias para el proyecto. 
    
    
6. Generar el Apk. 
    
    Para hacerlo es necesario ira al menu de `Build` luego a `Build Bundle(s) / APK(s)` y por último seleccionar`Build APK(s)`
    
    ![](https://i.imgur.com/iOUPlX0.png)



7. Al finalizar el proces de generar el apk, nos notificara que ha finalizado y  nos indicara el directorio donde podemos encontrarlo. 

    ![](https://i.imgur.com/HnCJxfR.png)

8. Y podremos compartir el apk e instalarlo en cualquier dispositivo compatible con el sdk. 

    ![](https://i.imgur.com/B651liE.png)



--- 

### DESPLIEGUE DE SERVIDOR Y CLIENTE
Se implemento un servicio de google cloud para instalar el gestor de bases de datos MySql. Para albergar la API-REST, se utilizo un servicio de heroku. 

#### ARQUITECTURA

![](https://i.imgur.com/BkKfI1R.png)


#### IMPLEMENTACIÓN 

El cliente, que puede ser un empleado o ciudiadano (concectados a travez de una aplicación web o una app mobile respectivamente), interactuan con la API-REST mediante peticiones en formato JSON. Estas peticiones son procesadas por ella y almacenadas en la base de datos según corresponda.



##### HEROKU 

Para implementar una API en heroku es necesario tener previamente instalado este sistema. Para más información sobre la instalación de este software, consulte [heroku set up](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up)

```shell
heroku login

```
OutPut:

> heroku: Press any key to open up the browser to login or q to exit
 ›   Warning: If browser does not open, visit
 ›   https://cli-auth.heroku.com/auth/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

Es necesario contar con un repositorio, para lo cual se creará uno como sigue:

```shell    
git init
git branch master
```

Se crea una aplicación dentro del directorio que alberga el packagejson.json y se ejecuta el siguiente comando.

```shell  
heroku create

```

OutPut:
> Creating sharp-rain-871... done, stack is heroku-18
http://host-heroku.com | https://repositorio-heroku.git
Git remote heroku added

Se añade el repositorio generado por heroku como repositorio remoto.

```shell  
git remote add heroku https://repositorio-heroku.git

```

Es importante colocar una sentencia de inicio, en los script del packagejson.json, para colocarla en producción. En el caso de esta aplicación se aplicará node dist/index.js donde se encuentra el archivo compilado de typscript a javascript. Además también es necesario contar con un build que permita construir la aplicación codificada en typscript. El script debería contar con algo similar a lo siguiente:

```json  
"scripts": {
    "build": "tsc"
    "start": "node dist/index.js"
  },
```

Finalmente para desplegar la aplicación es necesario añadir los cambios, realizar un commit y un push a la rama master de heroku. Los servicios son implementados de forma automática.

```shell
git add .
git commit -m "Upload heroku app"
git push heroku master
```


##### GCLOUD

> **Base de Datos**

La base de datos MySql esta alojada en GCP, para descubrir como funciona esta herramienta visitar:
[GCP documentación](https://cloud.google.com/docs).
La máquina virtual(VM) implementada es de Ubuntu 16.04.7 LTS. VM por defecto de este servico. 

Conectados a una VM de GCP se monto mysql, para aprender mas de como instalar MySql visite [alternativa para instalar mysql](https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04-es) 

> **Bucket para almacenar las imágenes**

Para almacenar las imágenes se utilizó un Bucket, alojado en GCP, uando el servico de **Cloud Storage** el cual nos permite para almacenar cualquier tipo de objetos en Google Cloud, sin importar el formato. 

Para descubrir como funciona esta herramienta visitar:
[https://cloud.google.com/storage/docs/quickstart-console](https://)


> **API para enviar correos electrónicos**

Para enviar correos desde la app web habilitamos el una API de Gmail que nos ofrece GCP. 
Para descubrir como funciona esta herramienta visitar:

[https://developers.google.com/gmail/api?hl=es_419](https://)