09 diciembre 2020

Construir una aplicación web con Spring Boot y Vaadin Fusion

Introducción 

En este artículo crearemos una aplicación con el Framework Vaadin Fusion, con el Backend Spring Boot y Base de Datos Mysqlutilizando el Starter Vaadincomo pueden observar en la figura 1, que nos ayudara a la configuración del proyecto a desarrollar de una manera mas facíl.

Figura 1

Antes de comenzar, explicare un poco sobre Vaadin Flow y Vaadin Fusion, para que puedan observar las diferencias, en que proyecto puedan utilizarlo o si necesitas de los dos mundos puedas usar ambas opciones.

Vaadin FlowEs un framework para construir aplicaciones web 100% en Java. Permitiendo a los desarrolladores construir aplicaciones de una sola página completamente en Java. Se puede utilizar HTML, JavaScript y CSS para la personalización, pero no es necesario para construir una aplicación. Cuando se utiliza la API de Java, las aplicaciones Vaadin se ejecutan del lado del servidor dándole acceso a los datos y el servicio proporciona la seguridad y estabilidad, sin necesidad de crear API de REST. 

Vaadin Flow esta: 

  • Basado en componentes
  • Programático
  • Event-Driven.

En un post anterior desarrolle un ejemplo con Vaadin Flow

Vaadin FusionEs un framework para construir aplicaciones web reactivas del lado del cliente. Las vistas se basan en componentes web, construidos con LitElement que es una librería que ayuda a construir componentes web y el modelo de programación que utiliza es el estándar de TypeScript que es muy similar a React. Por otro lado el servidor Vaadin exporta funciones tipado, asíncronas para el acceso al servidor, dándole el mismo tipo de información tanto en el servidor como en el cliente. La información de tipo se genera automáticamente en base a las clases del servidor, lo que significa que notarás cambios en la API en tiempo de compilación, pero no en tiempo de ejecución. Por ultimo Las aplicaciones de Fusion están construidas sobre estándares web, haciéndolas más estables que las alternativas que se encuentran en el mercado.

Para desarrollar una aplicación simple que utilice la API de Fusion TypeScript consiste en tres archivos.

  • Un archivo que contiene la vista.
  • Un archivo de configuración de ruta.
  • Una página de índice.
Vaadin Fusion esta:
  • Basado en componentes
  • Declaración
  • Reactivo.
Flow y Fusion son frameworks complementarios. Se Pueden usar cualquiera de ellos o combinarlos en la misma aplicación. Por ejemplo, hacer vistas internas de administrador con el Flow y una vistas de usuario final que necesitan trabajar offline con Fusion.

Nota: Fusion sólo está disponible desde la versión de Vaadin 15 en adelante.

A continuación las herramientas que vamos a utilizar.

Requisitos:

Descripción
Software
Link de Descarga


Lenguaje de programación


Java SE 11

Entorno Integrado de Desarrollo (IDE)


Intellij o vscode

Framework
Vaadin
  • Versión 18
Base de Datos
MySQL
Entorno Integrado GUI
MySQL Workbench


Creación de la aplicación con Vaadin Fusion


Ingresamos al sitio web de vaadin. Lo primero que hacemos es crear la vista, para este ejemplo adicionamos una vista en blanco como se muestra en la figura 2

Figura 2

Configuramos la vista de la siguiente manera, como se puede ver en la figura 3.
  • Nombre: Estudiante 
  • URL: estudiante
  • Plantilla: Seleccionamos en Blanco 
  • Tipo: Seleccionamos TypeScript + Html 

Figura 3

En este paso se realiza la configuración de la aplicación, como se puede observar en la figura 4.
  • Nombre: VaadinFusion
  • Grupo ID: Por defecto
  • Vaadin: Seleccionamos Vaadin 18
  • UI: Seleccionamos TypeScript + Html 
  • Backend: Seleccionamos la base de datos.
Figura 4
  • Haz clic en Descargar, y obtendrás un archivo .zip que contiene un proyecto Maven.
  • Para este ejemplo vamos a utilizar el IDE vscode, abrimos el proyecto y se visualiza como en la figura 5.
Figura 5

El proyecto contiene dos carpetas muy importantes que son las siguientes:
  • /frontend - Esta carpeta contiene todo el código del Frontend.
  • /src/main/java - Esta carpeta incluye todo el código del Backend, que es una aplicación de Spring Boot.
En el siguiente paso ejecutamos la aplicación con este comando:

mvn

Deberá abrirse la aplicación en el navegador predeterminado, como se puede observar en la figura 6.

Figura 6

Añadir la dependencia de Mysql y Lombok

Añadimos las dependencias de Mysql y Lombok a la sección <dependencias> en el archivo pom.xml.

<dependency>
   <groupId>mysql</groupId>
   <artifactId>mysql-connector- 
    java</artifactId>
   <scope>runtime</scope>
</dependency>

<dependency>
   <groupId>org.projectlombok</groupId>
   <artifactId>lombok</artifactId> 
   <optional>true</optional>
</dependency>

Debemos validar que el IDE hizo la importación de las dependencias, o volver a ejecutar el comando.

mvn

Crear Backend en Spring Boot para acceder a los datos


Primero, creamos una clase con el nombre Estudiante.java para usarla como modelo de datos en el paquete com.example.application.data.entity.

@Data
@NoArgsConstructor
@AllArgsConstructor
@Entity
public class Estudiante extends AbstractEntity {

    @NotNull
    @NotEmpty
    private String nombre;
    
    private String apellido;

}

Segundo, creamos una interfaz con el nombre IEstudianteRepositorio.java para dar soporte a las operaciones CRUD, dándole funcionalidades a la clase entidad en el paquete com.example.application.data.repository.

@Repository
public interface IEstudianteRepositorio extends JpaRepository<Estudiante, Integer> {    }

Tercero, creamos una clase con el nombre EstudianteEndpoint.java, adicionando la anotación @Endpoint para hacer que los métodos y tipos de datos estén disponibles en TypeScript para el Frontend.

@Endpoint
public class EstudianteEndpoint {
private IEstudianteRepositorio repo;
public EstudianteEndpoint(IEstudianteRepositorio repo) {
this.repo = repo;
}
public List<Estudiante> getEstudiantes() {
return repo.findAll();
}
public Estudiante saveEstudiante(Estudiante estudiante) {
return repo.save(estudiante);
}
public void deleteEstudiante(Integer idEstudiante) {
repo.deleteById(idEstudiante);
}
}

Vaadin hace que los métodos getEstudiante()deleteEstudiante() y saveEstudiante() estén disponibles como métodos asincrónicos en TypeScript. También generará una interfaz de TypeScript para Estudiante, para que pueda acceder al mismo tipo-información de ambos lado tanto en el servidor y en el cliente.

Cuarto, modificamos el archivo Application.properties, que nos permite configurar la aplicación Spring Boot para este caso configuramos la conexión a la base de datos MySQL con nombre de usuario sa y contraseña sa, por defecto se ejecuta la aplicación en el puerto 8080.

server.port=${PORT:8080}
logging.level.org.atmosphere = warn
spring.mustache.check-template-location = false
#Conexion BD Mysql
spring.datasource.url = jdbc:mysql://localhost:3306/esajug
spring.datasource.username = root
spring.datasource.password = Maria23*
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update

Finalizamos la parte del Backend, ahora el paso siguiente es integrarlo con el Frontend. 
 

Integrar el Endpoint con Vaadin Fusion


Abrir en la carpeta el frontend/views/estudiante/estudiante-view.ts y reemplacemos el siguiente código:

import { Binder, field } from "@vaadin/form";
import {
  css,
  customElement,
  html,
  internalProperty,
  LitElement,
} from "lit-element";
import Estudiante from "../../generated/com/example/application/data/entity/Estudiante";
import EstudianteModel from "../../generated/com/example/application/data/entity/EstudianteModel";
import "@vaadin/vaadin-text-field";
import "@vaadin/vaadin-button";
import {
  deleteEstudiante,
  getEstudiantes,
  saveEstudiante,
} from "../../generated/EstudianteEndpoint";

@customElement("estudiante-view")
export class EstudianteView extends LitElement {
  @internalProperty()
  private estudiantes: Estudiante[] = [];

  @internalProperty()
  private message = "";

  private binder = new Binder(this, EstudianteModel);

  static get styles() {
    return css`
      :host {
        display: block;
        padding: var(--lumo-space-l);
      }
    `;
  }

  render() {
    const { model } = this.binder;
    return html`<h1>Estudiante</h1>
      <div class="message">${this.message}</div>
      <ul>
        ${this.estudiantes.map(
      (person) => html`<li>${person.nombre} ${person.apellido}
       <vaadin-button @click=${() => this.clear(person.id)}>
           <iron-icon icon="lumo:minus" slot="prefix"></iron-icon>
                Delete
       </vaadin-button
       </li>`
    )}
      </ul>
      <h2>Nuevo EStudiante</h2>
      <div class="form">
        <vaadin-text-field
          label="Nombre"
          ...=${field(model.nombre)}
        ></vaadin-text-field>
        <vaadin-text-field
          label="Apellidos"
          ...=${field(model.apellido)}
        ></vaadin-text-field>
        <vaadin-button @click=${this.add}>
          <iron-icon icon="lumo:plus" slot="prefix"></iron-icon>Add
        </vaadin-button>
      </div>`;
  }
  async add() {
    const saved = await this.binder.submitTo(saveEstudiante);
    if (saved) {
      this.estudiantes = [...this.estudiantes, saved];
      this.binder.clear();
    }
  }

  async firstUpdated() {
    this.estudiantes = await getEstudiantes();
  }

  async clear(id: any) {
    await deleteEstudiante(id);
    this.estudiantes = this.estudiantes.filter((t) => t.id !== id);
  }
}

Aquí una breve descripción del código y funcionamiento:
  • EstudianteView está mapeado a un elemento HTML personalizado <estudiante-view> con @customElement.
  • @internalProperty()
    private estudiantes: Estudiante[] = [];
    
    @internalProperty()
    private mensaje = '';
    
  • Define dos propiedades internas: estudiante y mensaje para mantener el estado del componente. Cada vez que una propiedad cambie, la plantilla se vuelve a renderizar.

  • private binder = new Binder(this, EstudianteModel);
    
    Crea un binder para el formulario y carga la información del modelo generado. 
    Lleva un registro del valor del modelo, maneja validaciones y envía el valor al endpoint.
  • render() define una plantilla reactiva que se actualiza cada vez que cambia una propiedad.
  • <ul>
        ${this.estudiantes.map(
        (person) => html`<li>${person.nombre} ${person.apellido}
        <vaadin-button @click=${() => this.clear(person.id)}>
          <iron-icon icon="lumo:minus" slot="prefix"></iron-icon>
             Delete
        </vaadin-button
        </li>`
      )}
    </ul>
    

    La plantilla utiliza utiliza <ul> para listar todos los estudiantes, el operador map sobre el array de estudiantes y crea una etiqueta <li> para cada estudiante. Adiciona un botón eliminar a cada elemento que llama al método clear() con el id del estudiante. Por ultimo se comunica con el backend para obtener la lista de todo los estudiantes cuando el componente se actualiza por primera vez.
  • <vaadin-text-field
        label="Nombre"
        ...=${field(model.nombre)}>
    </vaadin-text-field>
    <vaadin-text-field
        label="Apellidos"
        ...=${field(model.apellido)}>
    </vaadin-text-field>
    
    <vaadin-button @click=${this.add}>
       <iron-icon icon="lumo:plus" slot="prefix"></iron-icon>
       Guardar
    </vaadin-button>

  • Muestra un formulario para adiciona un nuevo estudiante. El formulario utiliza dos componentes de Vaadin: vaadin-text-field y vaadin-button. Los campos se enlaza al Binder con la ayuda del operador de extensión (...=${field(...)}) . El botón Guardar invoca el método Add() cuando hace clic sobre él validando el formulario y guarda el nuevo estudiante en el backend.

  • Index.html

         En este archivo de define una salida para las rutas.
  • Index.ts

         En este archivo se mapea la ruta de la raíz del componente
main-view
         Por otro lado también se da la salida a todas las rutas en #outlet.
  • Para concluir, se desarrollo una aplicación con spring boot y vaadin fusion conectada a una base de datos MySQL. La aplicación web se visualizara como en la figura 7.