# 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)`
7. Al finalizar el proces de generar el apk, nos notificara que ha finalizado y nos indicara el directorio donde podemos encontrarlo.
8. Y podremos compartir el apk e instalarlo en cualquier dispositivo compatible con el sdk.
---
### 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
#### 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://)
Sign in with Wallet
Connect another wallet