Payara Micro + Oracle JET = Solución Fullstack. Parte 1: Listado paginado simple

Por Diego Silva
Publicado en Noviembre 2018

Revisado por Juan Pablo Guizado




IntroducciÓn


Payara Micro es una implementación de MicroProfile que consiste en centrarse únicamente en el desarrollo de servicios REST. Es realmente pequeño: el ejecutable no pesa más de 70MB, y nos permite tener todas las funcionalidades de Jakarta|Java EE orientado a Micro servicios. Además puede ser ejecutado en un contenedor como Docker o servicios como Heroku. Payara Micro no necesita de una consola web ni una línea de comandos para configurar el entorno, ya que todo se hace con parámetros de ejecución. Aún así, podemos crear aplicaciones web JSF, o usar JPA, JAX-RS, DataSource, JAAS, etc.

Pero si pensamos en únicamente como un servidor backend de servicios REST para aplicaciones Web que no sea de Java, o aplicaciones Móviles, incluso aplicaciones SPA (Single Page Application), con Payara Micro se puede contar sin ningún problema.

Ahora, por el lado del frontend, tenemos la posibilidad de usar algunos frameworks o javascript toolkit como Dojo toolkit, ReactJS, backbone, Angular, Cordova, Ionic, y un largo etcétera. Oracle JET es un Toolkit Open Source de Oracle que ofrece a los desarrolladores de frontend un conjunto modular de herramientas OpenSource basado en los principios actuales de diseño y desarrollo de JavaScript, CSS3 y HTML5.

Las principales bondades que, personalmente, considero importantes son las siguientes:

  • No se necesita aprender un nuevo lenguaje basado en JavaScript. Si sabes JavaScript, es más que suficiente para comenzar a programar.
  • La interfaz es manipulada con un modelo proporcionado por KnockoutJS, el cual es bastante simple y ligero de utilizar.
  • Si sabes usar JQuery, no tendrás ningún problema. No tienes que aprender más clases u objetos para llamar a los servicios REST.
  • Es modular. Las clases, modelos y demás componentes pueden ser cargados con RequireJS.
  • Y, como la cereza del helado: genera aplicaciones móviles híbridas. Puedes crear una aplicación web HTML totalmente responsive, y si deseas lo conviertes a una aplicación Android o iOS a través de Cordova.

En este artículo mostraré cómo desarrollar una solución desde la construcción de un servicio con Payara Micro, hasta el desarrollo de una aplicación frontend con Payara Micro.




Creando nuestro servicio con Payara Micro


Si tenemos Maven (tanto en línea de comandos como en un IDE como NetBeans o Eclipse) pues es más que suficiente para comenzar a crear un proyecto.


Usando un archetype desde NetBeans



Clic en Next


Buscamos “payara-micro”


Clic en Next



Indicamos el nombre del proyecto


Finish



Al final, si tenemos el Plugin de Payara instalado en NetBeans, lucirá así con su ícono:





Usando un archetype desde Eclipse


File > New


Clic en Next




Clic en Next



La primera vez es quizás que no aparezca en el repositorio local. Hacer clic en “Add Archetype”




Clic en OK



Puede aparecer en el filtro con la palabra “payara-micro”

 


Clic en Next



Indicar el nombre del proyecto


Clic en Finish

 


Creando nuestro primer servicio


Para crear nuestro servicio REST solo necesitamos dos clases: la que configura el REST y nuestro Endpoint.


La clase configuraciÓn de REST

Esta clase debe extender a la clase javax.ws.rs.core.Application y tener la anotación @javax.ws.rs.ApplicationPath indicando la ruta raíz donde se alojarán los servicios.




La clase endpoint

Ahora, debemos crear al menos una clase endpoint. Esta debe tener:

  • La anotación @javax.ws.rs.Path con la ruta del endpoint que se publicará.
  • Al menos un método que se invocará. Este método debe tener la manera cómo se invocará: @GET, @POST, @DELETE, @PUT.




Ejecutando el servicio

Compilamos el proyecto (Desde NetBeans: Clean & Build) y ejecutamos. Cuando haya terminado de ejecutar se mostrará los endpoints publicados.



Para probar, bastará con invocar al endpoint



O desde un navegador





Utilizando la base de datos con JPA


La base de datos

Para nuestro ejemplo usaremos la base de datos de prueba employee de MySQL. Esta se puede obtener de esta dirección: https://github.com/datacharmer/test_db. Seguir las instrucciones allí descritas.



Luego, por seguridad y buenas prácticas, vamos a crear un usuario que tenga acceso únicamente a la base de datos employees que se creó. (ver https://dev.mysql.com/doc/refman/8.0/en/create-user.html)


employees@"%" significa: usuario desde cualquier host. Tendrá la contraseña "employees" (Claro, esta no es una buena práctica).

Además, debemos darle permisos para que este usuario acceda a esa base de datos. (ver https://dev.mysql.com/doc/refman/8.0/en/grant.html)



Para probar la conexión, tratamos de entrar con ese usuario:




La conexiÓn por DataSource

Para conectarnos a la base de datos usaremos DataSource. Tenemos tres maneras de hacer esto:



@DataSourceDefinition



Si se desea utilizar variables de entorno para no poner las credenciales de manera explícita el código, podemos hacer los siguientes cambios:

 

Para mayor información ver la documentación
(https://javaee.github.io/javaee-spec/javadocs/javax/annotation/sql/DataSourceDefinition.html)




web.xml

Utilizando la versión 3.0 de web-app se puede definir un DataSource. Lo colocamos en una clase que tenga alcance global para toda la aplicación. Esta es la declaración:



Si no queremos poner los valores de la conexión (usuario, contraseña, url, etc) explícitamente, podemos usar variables de entorno, pero las etiquetas cambian un poco:




Línea de comandos (asadmin)

Se pueden establecer comandos de configuración de la consola de Payara, pero se ejecutarán como un guión (script) que se ejecuta al iniciar esta aplicación. En este guión pueden estar variables de entorno y comandos propios de Payara. Aquí un ejemplo de este archivo.

Archivo: post-boot-commands.txt

create-jdbc-connection-pool --pooling=true --restype=javax.sql.ConnectionPoolDataSource 
--datasourceclassname=com.mysql.cj.jdbc.MysqlConnectionPoolDataSource --property 
password=employees:user=employees:serverName=localhost:databaseName=employees:useSSL=false:
requireSSL=true:serverTimezone=America/Lima microprofilePool

create-jdbc-resource --connectionpoolid microprofilePool jdbc/employees


Modificación del archivo pom.xml

 



En cualquiera de los casos, hay que tener en cuenta el nombre del Recurso DataSource que se creó. Personalmente uso el modo de línea de comandos, y ese nombre jdbc/employees es el que usaremos en este proyecto.




persistence.xml

Ahora, debemos configurar nuestra unidad de persistencia mediante el archivo persistence.xml. Utilizaremos el nombre del DataSource creado en el apartado anterior.




Clase entidad Employee.java

Esta clase deberá estar asociada campo por campo con la tabla employees.


Esos son los campos mapeados. Esta clase es un JavaBean (POJO) por lo que tendrán los métodos set y get por cada campo.




Clase JPAProducer.java

Esta clase es la que instanciará una vez el EntityManager. Será un productor de este recurso. Posteriormente, cada vez que se necesite utilizar el EntityManager, bastará con hacer @Inject.

 




Clase repositorio EmployeeRepository.java

Esta clase es la que manipulará la entidad Employee.
El objeto de la clase EntityManager vendrá por inyección desde el JPAProducer.

Para esta clase se han creado dos métodos: un listado completo de todos los registros findAll(), y otro limitado por un rango indicado findRange().





Endpoint REST para nuestro proyecto


Clase EmployeeEndpoint para obtener los empleados

Esta clase es similar a la anterior. Tendrá el método atenderá peticiones http GET con dos parámetros: el inicio de los registros (start), y cuántos registros a devolver (limit) Si en la petición no se le envía algún parámetro, será cero (0). Si no se le envía el límite, devolverá todos los registros.




Probando el servicio

Para ejecutar el servicio podemos hacerlo desde el IDE ejecutándolo. Y si estamos en la línea de comandos se hará con este comando (previa limpieza, construcción)

mvn clean package payara-micro:start



Y, para invocarlo desde la línea de comandos



O, desde un navegador




Prueba masiva - JMeter

También podemos probar si el rendimiento es efectivo usando una herramienta de pruebas como JMeter.




CORS

Por seguridad, cuando un navegador tiene una llamada a un recurso que no está en el mismo dominio, bloquea el acceso.

Más información https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS (Control de Acceso HTTP - CORS)

Para evitar eso, se deberá crear una clase que implemente a la interfaz  javax.ws.rs.container.ContainerResponseFilter en la cual le ponemos que permita peticiones desde cualquier host.






Creando nuestra primera interfaz con Oracle JET


Oracle JET, como se mencionó en su momento, es un conjunto de bibliotecas JavaScript para crear aplicaciones Web. A pesar que está pensado para consumir servicios y productos Oracle, en este ejemplo veremos cómo interactuar con Payara Micro.


Instalación de Oracle JET


Para utilizar Oracle JET es necesario instalarlo, y la mejor manera de hacerlo es usando NodeJS.
Previa instalación de NodeJS, ejecutamos este comando desde la consola del sistema operativo

npm install -g @oracle/ojet-cli


Para verificar que se instaló correctamente, debemos ejecutar ojet help.





Creando nuestra primera aplicación Oracle JET


Oracle JET nos ofrece cuatro plantillas para crear una aplicación:

  • Blank (solo la estructura del proyecto)
  • Basic (unos estilos básicos)
  • Navbar (una barra de navegación responsive)
  • Navdrawer (barra superior y lateral responsive)

Para esta primera parte solo veremos crear una proyecto con plantilla blank y allí mismo vamos a configurar los componentes.

Ejecutamos desde la línea de comandos:

ojet create clientweb --template blank



Como nos indica al final de la creación de la aplicación, podemos entrar a la carpeta creada y ejecutar

ojet serve

… para que se muestre en un navegador la aplicación creada.

Como no tiene nada, se mostrará en blanco…



Salvo por el código fuente generado:


Aún en plena ejecución podemos editar el código fuente creado.




Estructura de un proyecto Oracle JET con plantilla Blank

Un proyecto Oracle JET está basado en Node, tiene archivos de configuración como package.json y subcarpetas como scripts, src, themes.

La carpeta donde manipularemos toda nuestra aplicación es la src. Allí están los .js, los .css y los .html




Creando un listado de empleados

Ahora lo que veremos es, utilizando unos componentes de Oracle JET, listar los empleados que tenemos en nuestro endpoint.

  1. Obtenemos un listado de employee con JQuery
  2. Crearemos una tabla HTML
  3. Llenamos el contenido con KnockoutJS.

 

Antes, en el html debemos crear un contenedor.



Luego, en main.js debemos preparar un objeto Vista donde allí se manipule toda la lógica del interfaz.




Obtenemos un listado de employee con JQuery

En nuestra clase JavaScript MainView debemos crear toda la lógica necesaria para manipular la lista.
Cuando se instancia debemos leer todos los registros de employee. Pero, para no jalar todos los registros usaremos los parámetros del servicio.




Crearemos una tabla HTML

Ahora, debemos mostrar el listado obtenido en una tabla HTML, utilizando la notación de KnockutJS





Ejecutando el proyecto

Para ejecutar el proyecto OracleJET se debe escribir desde la línea de comandos:

ojet serve


Al abrir el navegador se podrá ver el resultado.





PaginaciÓn de la tabla

Ahora, haremos una interacción a la tabla, con dos botones para que muestre la página anterior y la página siguiente.

Cada botón llamará a un código que modificará el campo “startList” y volver a invocar al listado de los empleados con el nuevo valor del parámetro.

API Doc del botón: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojButton.html

Para usar un botón de Oracle JET debería importar ese componente en el View Model.


Envolvemos la línea que invoca a la carga de empleados, para que sea reutilizable en cualquier momento.


Luego, agregamos los métodos donde incrementa o reduce el registro de inicio.


En el index.html colocamos los botones para hacer la paginación.



Ejecutamos el proyecto, y podemos hacer la paginación.

 



Aquí finaliza la primera parte de este artículo. En la segunda parte veremos como armar un CRUD completo a la base de datos SAKILA.



CÓdigo fuente


El código fuente utilizado para este proyecto se podrá encontrar en esta dirección:

https://github.com/apuntesdejava/microprofile-service-otn/tree/parte01




Diego Silva. En Noviembre de 2013 obtuvo el Oracle Certified Associate Java SE 7 Programmer.
Ha Trabajado para el Estado peruano, desarrollando y llevando a producción sistemas de información en vía web. Actualmente trabaja en una empresa privada desarrollando aplicaciones Java Web con Oracle ADF y con la plataforma Liferay.

Este artículo ha sido revisado por el equipo de productos Oracle y se encuentra en cumplimiento de las normas y prácticas para el uso de los productos Oracle.