====== 3. Automatización del proyecto ======
En el tema anterior hemos visto como se estructura de carpetas del proyecto. En este tema vamos a  automatizar todos los procesos de la estructura de carpetas . Automatizar tareas es fundamental ya que se minimizan los errores que se cometen. Por otro lado el despliegue puede llegar a hacerse decenas de veces al día, por lo que obviamente debe estar automatizado.

Podemos pensar que instalar (desplegar) decenas de veces al día una aplicación es un poco exagerado pero en sitios web como Amazon ésto si que tiene sentido. 
Si en la aplicación de amazón hay un error que suele afectar al 0,1% de sus ventas. ¿Cuanto dinero pierden diariamente por tener ese error? Y en este tipo de aplicaciones se suelen estar constantemente realizando cambios y corrección de error , así que ¿porque no desplegarla en cuanto está corregido un error o añadida la nueva funcionalidad? Esto en la literatura informática se llama **Continuous delivery**


===== Proyecto de Spring Boot =====
Para crear un proyecto de Spring Boot usar [[https://start.spring.io/]]

{{:clase:daw:proyecto:1eval:springboot.png?1100|}}


  * Para compilar el proyecto se usa:

<sxh bash>
mvn clean install
</sxh>

  * Para ejecutar el proyecto se usa

<sxh bash>
java -jar miapp.jar
</sxh>



===== Automatizar Maven =====
Vamos ahora a ver como podemos automatizar cosas en un proyecto Java con maven.

Para realizar tareas definidas en maven debemos usar ''pluings'' que hacen esas tareas. 

Vamos a ver 2 plugins:
  * [[https://github.com/mojohaus/exec-maven-plugin|exec-maven-plugin]]: Permite ejecutar un script
  * [[https://github.com/davidmoten/plantuml-maven-plugin|plantuml-maven-plugin]]: Permite crear diagramas UML de ficheros de texto de PlantUML

Para usar cada plugin hay que añadirlos al ''pom.xml'' dentro del tag:

<sxh xml>
<plugins>
</plugins>
</sxh>


==== exec-maven-plugin ====


<sxh xml>
<plugin>
   <groupId>org.codehaus.mojo</groupId>
   <artifactId>exec-maven-plugin</artifactId>
   <version>3.0.0</version>
   <executions>
      <execution>
         <id>build-cliente</id>
         <phase>compile</phase>
         <goals>
            <goal>exec</goal>
         </goals>
         <configuration>
            <executable>NOMBRE_DEL_EJECUTABLE_A_EJECUTAR</executable>
            <workingDirectory>${project.basedir}</workingDirectory>
            <arguments>
               <argument>ARGUMENTO_1</argument>
               <argument>ARGUMENTO_n</argument>
            </arguments>
         </configuration>
      </execution>
   </executions>
</plugin>
</sxh>

==== plantuml-maven-plugin ====


<sxh xml>

            <plugin>
                <groupId>com.github.davidmoten</groupId>
                <artifactId>plantuml-maven-plugin</artifactId>
                <version>0.2.14</version>
                <executions>
                    <execution>
                        <id>generate-diagrams</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>generate</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <sources>
                        <directory>${basedir}/src</directory>
                        <includes>
                            <include>**/*.puml</include>
                        </includes>
                    </sources>
                    <outputDirectory>${basedir}/src</outputDirectory>
                    <formats>
                        <format>png</format>
                    </formats>
                    <preserveDirectoryStructure>true</preserveDirectoryStructure>
                    <generateMarkdownIndex>false</generateMarkdownIndex>
                </configuration>
            </plugin>
</sxh>


Más información:
  * [[https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html|Introduction to the Build Lifecycle]]





===== Angular =====
Para generar un proyecto en Angular se usa [[https://angular.dev/cli/build|ng build]]:

<sxh bash>
ng build
</sxh>

Que genera una carpeta ''dist'' con el código compilado del proyecto.

Una vez compilado el proyecto necesitamos un servidor web, ese servidor HTTP puede ser:
  * Apache Http Server
  * Nginx
  * Servidor HTTP express en Node
  * Servidor HTTP en Python
  * Servidor HTTP en JAva
  * Etc.

Nosotros vamos a usar un script de NodeJS

Para ello vamos a crear un proyecto Node:


<sxh bash>
npm init
npm install express
</sxh>

Crear el fichero ''index.js'':

<sxh js;title:index.js>
#!/usr/bin/env node


const express = require('express')
const path = require('path')
const app = express()
const port = 8080
const indexFolder = 'browser'

const distPath = path.join(__dirname, indexFolder)

app.use('/', express.static(distPath))

app.use((req, res, next) => {
  const indexPath = path.join(distPath, 'index.html');
  res.sendFile(indexPath);
});

app.listen(port, (err) => {
  console.log(`server is listening on ${port}`)
  console.log(`serving from ${distPath}`)
})
</sxh>

Ahora copiaremos la carpeta ''browser'' que creó Angular dentro de ''dist'' y la copiaremos en la raiz de nuestro proyecto Node.

Por último ejecutaremos la aplicación con

<sxh bash>
node ./index.js
</sxh>



=====  Automatizar NodeJS =====
Al igual que existe en java ''mvn'' en aplicaciones de NodeJS podemos usar ''npm run'' que ejecutará nuestros scripts.


En los siguientes artículos se explican los scripts npm:
  * [[https://docs.npmjs.com/cli/v9/using-npm/scripts|npm scripts]]
  * [[https://css-tricks.com/why-npm-scripts/|Why npm scripts]]
  * [[http://lucasmreis.github.io/blog/npm-is-an-amazing-build-tool/|NPM is an amazing build tool]]



Veamos ahora un ejemplo de Script de transformar SASS a CSS.

  * Crear un Script para node dentro del **package.json**
<sxh js>
"scripts": {
  "compile-scss": "sass  ./scss/main.scss ./css/main.css"
}
</sxh>

  * Ejecutar un Script de node.

  npm run compile-scss


¿Que hemos ganado con ésto? Que ahora todas las "tareas" que tenemos que hacer en el proyecto se pueden ver en el ''package.json'' y siempre se ejecutarán como "**npm run nombre-tarea**"

Si vemos el ''package.json'' en un proyecto de Angular:

<sxh json>
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }
</sxh>

  * Es decir que en vez de usar ''ng serve'' se podría ejecutar 

<sxh bash>
npm run start
</sxh>

  * Es decir que en vez de usar ''ng build'' se podría ejecutar 

<sxh bash>
npm run build
</sxh>


¿Que ganaríamos con eso? Que si siempre usamos por ejemplo ''npm run build'' podríamos modificar el ''package.json'' y en el proceso de build añadir más cosas:


<sxh json;highlight:[4]>
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build && miscript.sh",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }
</sxh>

En ese caso en la linea 4 hacemos que además de crear en build se ejecute nuestro script ''miscript.sh''.


O cosas como:

<sxh json;highlight:[5]>
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:production": "ng build --configuration production--define SOME_NUMBER=5 --define "ANOTHER='these will overwrite existing'"",    
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }
</sxh>

En este caso al ejecutar:

<sxh bash>
npm run build:production
</sxh>

no tenemos que preocuparnos se saber que opciones hay que pasar a ''ng build'' 


<note important>
Así que realmente para encapsular Ancular CLI y que todo sea más standard de cara a cambios es mejor usar ''npm run''
</note>