Saltar al contenido

Cómo construir una aplicación analítica escalable en Java 8

¡Es hora de analizar y visualizar los datos que estamos recogiendo! Una forma de ver rápidamente algo interesante en la pantalla es definiendo una consulta directamente en https://keen.io. No deberías tener ningún problema para explorar el sitio web y crear algunas consultas e incluso hacer un tablero de mandos por ti mismo! Adelante, inténtalo si quieres.

Sin embargo, este tutorial se centrará en la creación de un tablero de mandos utilizando el lenguaje de programación Java.

Cómo construir una aplicación analítica escalable en Java 8
Cómo construir una aplicación analítica escalable en Java 8

En primer lugar, necesitamos añadir las siguientes dos dependencias en el archivo pom.xml:

1234567891011<dependencia<groupId;io.keen</groupId;;artefacto 0</versión&;
xml

Con estas dos dependencias en su lugar, ahora podemos definir consultas Keen IO y pasarlas a los objetos KeenCharts. Pero primero, necesitamos añadir un enlace en la interfaz de la aplicación web para mostrar el tablero. Modificar la clase WebUI para incluir lo siguiente:

1234567891011121314151617181920...publicclassWebUIextends UI {@AutowiredprivateDashboard dashboard;...protectedvoidinit(VaadinRequest request){... // añadir un botón para visualizar el dashboardButton viewDashboard =newButton("Ver dashboard"); viewDashboard.addStyleName(ValoTheme.BUTTON_LINK);// hacer que el botón parezca un diseño de enlace. addComponent(viewDashboard);// añadir el botón a la disposición viewDashboard.addClickListener(event - >showDashboard());// llamar showDashboard() cuando se hace clic en el botón}...private evita showDashboard(){setContent(dashboard);// establece el contenido de esta interfaz de usuario como el tablero en lugar de la disposición}}

java

Por supuesto, esto no se compilará porque no hemos implementado la clase de Dashboard. Así que implementemos esta clase de la siguiente manera:

123456789101112131415161718192021222324252627282930313233packagecom.example;importcom.vaadin.spring.annotation.SpringComponent;importcom.vaadin.ui.GridLayout;importcom.vaadin.ui. HorizontalLayout;importcom.vaadin.ui.Label;importcom.vaadin.ui.VerticalLayout;importcom.vaadin.ui temas.ValoTheme;importcom.vaadin.ui.anotación.de.primavera.contextual.Scope;importjavax.anotación. PostConstruct;@SpringComponent@Scope("prototipo")publicclassDashboardextendsVerticalLayout{@PostConstructpublicvoidinit(){setSizeFull();setMargin(true);setSpacing(true);Label title =newLabel("Dashboard"); title. addStyleName(ValoTheme.LABEL_H1);addComponent(title);GridLayout chartsLayout =newGridLayout(2,2); chartsLayout.setSizeFull(); chartsLayout.setSpacing(true);addComponent(chartsLayout);setExpandRatio(chartsLayout,1);}}

java

Este es un tablero de mandos vacío en este momento. Sólo estamos extendiendo un componente de la interfaz de usuario, VerticalLayout y marcando la clase con la anotación @SpringComponent para permitir a Spring manejar esta clase. El @Scope("prototipo") le dice a Spring que cree una nueva instancia de esta clase cada vez que inyectemos un grano de este tipo.

También note cómo definimos el método de inicio marcándolo con la anotación @PostConstrucción. Spring llamará a este método después de crear la instancia. Pero no nos preocupemos demasiado por las definiciones y la instanciación; puedes encontrar docenas de buenos tutoriales y documentación sobre Spring en la web. En su lugar, ¡añadamos algunos gráficos de Keen al tablero!

Es necesario definir una consulta por cada gráfico. ¿Cómo se hace esto? Súper fácil:

12345Consulta de consulta =newQuery.Builder(QueryType.SUM).withEventCollection("gifts").withTargetProperty("value").withTimeframe(newAbsoluteTimeframe("2016-08-01T00:00", "2016-08-31T23:59").build();

java

Como puedes ver, hay una clase Builder que te permite crear fácilmente una nueva consulta. En esta consulta, estamos sumando (nueva Query.Builder(QueryType.SUM)) todos los valores de la propiedad "values" (conTargetProperty("value")) de la colección "gifts" (conEventCollection("gifts")) que fueron creados entre los tiempos especificados (conTimeframe(nueva AbsoluteTimeframe("2016-08-01T00:00", "2016-08-31T23:59")).

Usando tu propio ID y llave de lectura, pasa esta consulta a un objeto KeenChart de la siguiente manera:

1KeenChart chart =newKeenChart("YOUR_PROJECT_ID", "YOUR_READ_KEY", query);

java

Esta instancia de gráfico es un componente de interfaz de usuario que se puede añadir a cualquier diseño. Vamos a poner algunos gráficos en el tablero. Modifica la clase de Dashboard de la siguiente manera:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849packagecom.example;...importio.keen.client.java.AbsoluteTimeframe;importio.keen.client.java. Query;importio.keen.client.java.QueryType;importorg.springframework.beans.factory annotation.Value;importorg vaadin keen charts.KeenChart;...publicclassDashboardextendsVerticalLayout{@Value("${keen. projectId}")privateString projectId;@Value("${keen.readKey}")privateString readKey;@PostConstructpublicvoidinit(){...KeenChart total =newKeenChart(projectId, readKey,newQuery.Builder(QueryType.SUM). conEventCollection("regalos").conTargetProperty("valor").conTimeframe(newAbsoluteTimeframe("2016-08-01T00:00", "2016-08-31T23:59")).build());KeenChart distribution =newKeenChart(projectId, readKey,newQuery. Builder(QueryType.SUM).conEventCollection("gifts").conTargetProperty("value").conTimeframe(newAbsoluteTimeframe("2016-08-01T00:00", "2016-08-31T23:59")). conGroupBy("nombre").build());KeenChart value =newKeenChart(projectId, readKey,newQuery.Builder(QueryType.SUM).withEventCollection("gifts").withTargetProperty("valor"). conTimeframe(newAbsoluteTimeframe("2016-08-01T00:00", "2016-08-31T23:59")).conGroupBy("name").build());KeenChart count =newKeenChart(projectId, readKey,newQuery.Builder(QueryType.COUNT). conEventCollection("gifts").withTimeframe(newAbsoluteTimeframe("2016-08-01T00:00", "2016-08-31T23:59")).withInterval("daily").build());... chartsLayout.addComponents(total, distribución, valor, recuento);}}

java

Construye, ejecuta la aplicación y haz clic en el enlace Ver panel . Ahora deberías ver unos gráficos muy bonitos!