logongas

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 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

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

  * **Proyecto 1**


<uml>
component "Tienda Backend 1" as t1
component "Banco Backend 2" as b2
component "Tienda DB 1" as db1

t1 --> db1
t1 -> b2


component "Banco Backend 1" as b1
component "Banco DB 1" as dbB1

b1--> dbB1

</uml>

  * **Proyecto 2**

<uml>
component "Tienda Backend 2" as t2
component "Banco Backend 3" as b3
component "Tienda DB 2" as db2

t2 --> db2
t2 -> b3

component "Banco Backend 2" as b2
component "Banco DB 2" as dbB2

b2--> dbB2

</uml>


  * **Proyecto 6**

<uml>
component "Tienda Backend 6" as t6
component "Banco Backend 1" as b1
component "Tienda DB 6" as db6

t6 --> db6
t6 -> b1

component "Banco Backend 6" as b6
component "Banco DB 6" as dbB6

b6--> dbB6

</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
  * ''desplegar-proyecto'': El repositorio con los Scripts para desplegar. Es donde se usa Docker o la tecnología que se vaya a usar.



===== 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