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

• Relaciones entre clientes y servidores

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.

mi-proyecto
├─src
├─docs
├─disenyo_grafico
├─database
├─builder
│  └─build.sh
└─target o dist

• 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.

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.

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.

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.

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.

• /tranferencia

{
  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"
  }
}

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

{
  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"
  }
}

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.

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

#!/bin/bash

docker compose down
docker compose build --no-cache
docker compose up -d

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

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html

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