====== 2. Estructura del proyecto ======
El proyecto consiste en crear una tienda online con su Backend, frontend  y además que se conecte a un banco para hacer los pagos. De forma que cada tienda se conectará al banco del siguiente grupo.


El proyecto ha desarrollar va a ser el siguiente
  * Tienda
    * Backend
    * NGING Frontend Usuario
    * NGING Frontend Administrador
    * MySQL Base de datos
  * Banco
    * Backend
    * MySQL Base de datos
    * NGING Frontend

<uml>
node  Servidor <<device>> {
    node "Backend Tienda" <<Tomcat>>   
    node "Base de datos Tienda" <<MariaDB>>   
    
    "Backend Tienda" --> "Base de datos Tienda"
    
    node "Tienda Usuario" <<Nginx>>
    node "NGINX Tienda Administrador" <<Nginx>>
    node "NGINX Banco" <<Nginx>>
        
    node "Backend Banco" <<Tomcat>>    
    node "Base de datos Banco" <<MariaDB>>    
    
    "Backend Banco" --> "Base de datos Banco"    
    
}
</uml>

  * Relaciones entre clientes y servidores


<uml>
component "Tienda Backend" as tb  <<Java App>>
component "Banco Backend" as bb <<Java App>>
component "Tienda DB" as tdb <<database>>
component "Banco DB" as bdb <<database>>
component "Tienda Front" as tf  <<Angular App>>
component "Administracion Front" as af <<Angular App>>
component "Banco Front" as bf <<Angular App>>

tdb <- tb 
tb -> bb
bb -> bdb
tb <-- tf
tb <-- af
bb <-- bf

</uml>

===== Estructura de carpetas =====
Para poder automatizar el despliegue , lo primero es tener una estructura definida de nuestro proyecto y de nuestro servidor. Durante el curso vamos a usar este esquema tanto en este módulo como en los otros módulos. El esquema he intentado que sea lo mas fiel posible a la realidad de las empresas aunque he intentado simplificarlo.

  * Estructura de carpetas.

<sxh text;gutter:false>
mi-proyecto
├─src
├─docs
├─disenyo_grafico
├─database
├─builder
│  └─build.sh
└─target o dist
</sxh>


  * ''src'':Donde está todo el código fuente de la aplicación
  * ''docs'':Documentación de la aplicación. Es la documentación con los diagramas UML, el JavaDoc, etc.
  * ''disenyo_grafico'':Donde están las imágenes en formato Photshop o  similares que estamos visualmente diseñando 
  * ''database'':Ficheros ".sql" de creación de la base de datos, etc. Es todo lo necesario para tener la base de datos preparada desde cero. Incluye insertar datos que siempre deben estar , como por ejemplo códigos de provincias. Pero NO las inserciones de los datos del usuario.
  * ''builder'':Scripts para  compilar la aplicación. Tendremos el fichero ''build.sh'' que creara la versión compilada en ''target'' o ''dist''
  * ''target'' o ''dist'':El código "compilado" de la aplicación. Estará el JAR o el HTML de nuestra aplicación.



===== Carpeta ''target'' o ''dist'' =====
La carpeta ''target'' o ''dist'' es la mas importante para el módulo de despliegue ya que en ella estará el proyecto tal y como se va a desplegar. 

==== Java ====
En un proyecto Java la carpeta ''src'' contiene las clases ''*.java'' mientras que en ''target'' o ''dist'' tenemos en ''jar'' con las clases compiladas y empaquetas en un único fichero.

==== Angular ====
En un proyecto Angular podemos pensar que debe ser únicamente una copia de la carpeta "src" ya que es código JavaScript pero si que se pueden hacer muchos cambios en esta carpeta. 
  * Transpilar el código de TypScript a JavaScript
  * Transpilar el código de SCSS a CSS
  * Compilar las plantillas HTML 
  * Minimizar el código JavaScript para que ocupe menos. Se hace para que las páginas web se carguen antes. Y suele consistir en quitar los comentarios, los retornos de carro, etc.
  * Ofuscar el código JavaScript: Para evitar que alguien pueda copiar nuestro código se suele, por ejemplo , cambiar el nombre de las variables por nombres sin sentido. Normalmente se minimiza y se ofusca a la vez.
  * Etc.




===== Repositorios Git =====
Veamos ahora los repositorios  de Git que vamos a tener:
  * ''tienda-back'' : El API de la tienda en Java
  * ''tienda-front'': El interfaz de usuario en Angular de los clientes de la tienda
  * ''tienda-adm-front'': El interfaz de usuario en Angular del administrador de la tienda
  * ''banco-back'': El API del banco en Java
  * ''banco-front'': El interfaz de usuario en Angular de los clientes del banco
  * ''desplegar-proyecto'': El repositorio con los Scripts para desplegar. Es donde se usa Docker o la tecnología que se vaya a usar.


===== Modelo de Banco =====

<uml>
hide circle

class Cliente {
  login
  password
  nombre
  apellido1
  apellido2
  dni
  api_token
}

class CuentaBancaria {
  saldo
  iban
}

class TarjetaCredito {
  numeroTarjeta
  fechaCaducidad
  cvc
  nombreCompleto
}
class MovimientoBancario {
  TipoMovimientoBancario tipoMovimientoBancario
  OrigenMovimientoBancario origenMovimientoBancario
  TarjetaCredito tarjetaCreditoOrigen
  Date fecha
  BigDecimal importe
  String concepto
}


Cliente "1"--"*" CuentaBancaria
CuentaBancaria "1"--"*" TarjetaCredito
CuentaBancaria "1"-"*" MovimientoBancario

enum TipoMovimientoBancario {
  Debe //Quitar dinero
  Haber //Añadir dinero
}

enum OrigenMovimientoBancario {
  Transferencia
  Domiciliacion
  TarjetaBancaria
}
</uml>


==== Endpoints ====


  * ''/tranferencia''

<sxh json>
{
  autorizacion: {
    login:"juan"
    api_token:"5f5ca67f-4c02-47cf-8753-a7790f7f5be1"
  },
  origen: {
    iban:"ES61 1234 3456 4204 5632 3532"
  },
  destino: {
    iban:"ES61 1234 3456 4204 5632 5555",  
  },
  pago: {
    importe: 567.67,
    concepto:"Comprar PC"
  }
}
</sxh>

Reglas:
  * La cuenta origen debe ser del usuario **login**
  * Los iban deben tener formato de iban y empezar por ES
  * El importe debe ser positivo
  * El concepto debe tener al menos 3 letras
  * Debe haber suficiente dinero en la cuenta.


  * ''/pago_tarjeta''

<sxh json>
{
  autorizacion: {
    login:"juan"
    api_token:"5f5ca67f-4c02-47cf-8753-a7790f7f5be1"
  },
  origen: {
    numeroTarjeta:"4111 1111 1111 1111",
    fechaCaducidad:"2027-12"
    cvc:"123"
    nombreCompleto:"JUAN GARCIA GARCIA"
  },
  destino: {
    iban:"ES61 1234 3456 4204 5632 5555",  
  },
  pago: {
    importe: 567.67,
    concepto:"Comprar PC"
  }
}

</sxh>


Reglas:
  * La cuenta destino debe ser del usuario **login**
  * Los iban deben tener formato de iban y empezar por ES
  * El importe debe ser positivo
  * El concepto debe tener al menos 3 letras
  * Debe haber suficiente dinero en la cuenta de la tarjeta asociada.
  * Todos los datos de la tarjeta deben coincidir con la tarjeta.
===== desplegar-proyecto =====
El repositorio ''desplegar-proyecto'' tendrá una estructura distinta ya que no es un proyecto de desarrollo de código sino únicamente para desplegar.

En el raíz del proyecto tendremos el fichero ''deploy.sh'' que desplegará todos los repositorios:
  * ''tienda-back'' : El API de la tienda en Java
  * ''tienda-front'': El interfaz de usuario en Angular de los clientes
  * ''tienda-adm-front'': El interfaz de usuario en Angular para los administradores de la tienda
  * ''banco-back'': El API del banco en Java
  * ''banco-front'': El interfaz de usuario en Angular de los clientes el banco


===== Ejemplo simple despliegue =====

<sxh bash;title:up.sh>
#!/bin/bash

docker compose down
docker compose build --no-cache
docker compose up -d
</sxh>

<sxh yaml;title: docker-compose.yml;highlight:[8,9,10,20,21,23-26]>
services:
  web:
    build:
      context: .
      dockerfile: web.Dockerfile    
    container_name: web-lorenzo    
    environment:
      VIRTUAL_HOST: lorenzo.preproducciondaw.cip.fpmislata.com
    networks:
      - proxy_red

  mariadb:
    image: mariadb:latest
    container_name: mariadb-lorenzo
    environment:
      MYSQL_ROOT_PASSWORD: lorenzo
      MYSQL_DATABASE: lorenzo
      MYSQL_USER: lorenzo
      MYSQL_PASSWORD: lorenzo
    networks:
      - proxy_red

networks:
  proxy_red:
    external:
      name: nginx-proxy-network

</sxh>


<sxh bash;title:web.Dockerfile>
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
</sxh>

<sxh html;title:index.html>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>hola lorenzo</title>
</head>
<body>
hola lorenzo
</body>
</html>

</sxh>


<nodisp 2>

===== Servidores y dominios =====

El proyecto va a estar en 2 servidores:
  * produccion:  
    * Host name: producciondaw.cip.fpmislata.com
    * IP: 192.168.59.104
    * Usuario: alumno
    * Contraseña: EFmn5671%%
  * preproduccion: 
    * Host name: preproducciondaw.cip.fpmislata.com
    * IP: 172.16.0.205
    * Usuario: alumno
    * Contraseña 278W/Q/fgt


Cada uno de esos servidores contendrá los contenedores que necesite cada proyecto.


Desde el centro es posible acceder a cada uno de los 2 servidores. 



</nodisp>




<nodisp 2>

===== Proxmox =====

Para acceder al proxmox se usan las URL:
  * OVH Francia: [[https://pve3.fpmislata.com:8006]]
  * Interno centro [[https://proxmox1:8006]]


</nodisp>