Después de recoger los datos y analizarlos, construiremos el tablero de mandos. Primero, incluiremos el SDK de JavaScript Keen.IO en la aplicación Ruby on Rails. Hay muchas maneras de hacerlo, pero para simplificar, puedes incluir el archivo javascript de un CDN (content delivery network) en el diseño de la aplicación:
<pre>12345678<!– app/views/layouts/application.html.erb –><html><! — Pega esta línea en la sección de la cabeza del diseño –> <%= javascript_include_tag "//cdn. jsdelivr.net/keen.js/3.4.1/keen.min.js" ,'data-turbolinks-track': 'reload'%> </head><! — contenido –></html></pre>
html
A continuación, vamos a crear una acción y una vista para el tablero:
<pre>1234567#app/controladores/productos_controlador.rbclassProductosControlador<ApplicationController#…defdashboardend#…end</pre>
ruby
Añade la siguiente línea a routes.rb para que el tablero sea la acción raíz de la aplicación:
<pre>12345#app/routes.rbRails.application.routes.draw do root to:'products#dashboard'#establecer el dashboard como sus recursos de root :productsend</pre>
ruby
Por último, crea una vista para tu acción en el tablero:
<pre>12345678910111213141516171819202122232425262728293031323334<– app/views/products/dashboard.html. erb –><nav><div><div>< a> Keen Dashboard </a></div><ul>& amp;lt;li><%= link_to 'Todos los productos', products_path%></li></ul></div></nav>& lt;div><div></div><div>< div></div><div></div>< /div><div><div><div></div& amp;gt;</div></div></div></pre>
html
La vista contiene un simple encabezado de bootstrap y unas cuantas columnas con id. Las etiquetas div con id-wrapper, pie-wrapper, y total-wrapper van a ser usadas como referencias para poner los elementos de análisis en el documento.
Implementación de la reactividad
El análisis reactivo significa que nuestra estrategia de visualización de datos cambiará automáticamente (sin refrescar la página) a medida que cambien los datos en Keen.IO. Ruby on Rails 5 lo hace fácil a través de ActionCable. ActionCable es un módulo de Rails 5 que introduce una API para trabajar con WebSockets en Ruby on Rails.
El primer paso es generar un canal. En tu terminal, ejecuta:
<pre>1 rieles g canal analítico</pre>
bash
El comando creará una representación del lado del servidor del canal en el directorio app/channels y un archivo de guión de café en app/assets/channels para manejar el lado del cliente del canal.
En primer lugar, hay que definir explícitamente el nombre del canal a través del cual la información analítica va a ser transmitida.
<pre>1234567#app/channels/analytics_channel.rbclassAnalyticsChannel<ApplicationCable::Channeldefsubscribed stream_from "analytics_channel"end#…end</pre>
ruby
Un canal suele tener múltiples instancias. Por ello, se utiliza steam_from para especificar con más detalle el canal. Por ejemplo, un canal puede tener instancias que transmitan a múltiples usuarios. En tales casos, los parámetros introducidos en stream_from incluirían un identificador único. Pero, en esta guía, lo estamos haciendo de la manera más simple, codificando duramente una cadena.
Segundo, necesitas crear un trabajo que se transmitirá al canal analytics_channel cada vez que un evento sea publicado en Keen.IO. Estamos poniendo nuestra emisión en un trabajo porque los trabajos pueden correr en paralelo con otros procesos de aplicación. Esto asegura que su aplicación será capaz de poner en cola múltiples solicitudes simultáneas de emisiones.
Abre tu terminal y genera el trabajo.
<pre>1 rieles g actualización de trabajoAnalítica</pre>
bash
Para mantener la reactividad, el trabajo tiene que estar en cola para emitir cada vez que un evento se publica a Keen.IO. En esta guía, estamos
1234567891011#app/models/product.rbclassProduct<ApplicationRecord after_create_commit do#publish the product creation event to Keen.IOKeen.publish $0027products$0027,self#broadcast the job to update the analyticsUpdateAnalyticsJob.perform_later selfend#...end
rubí
En el trabajo mismo, agregue una llamada a la emisión al canal analytics_channel:
12345678#app/jobs/update_analytics_job.rbclassUpdateAnalyticsJob<ApplicationJob queue_as :defaultdefperform(product)ActionCable.server.broadcast $0027analytics_channel$0027, product: product endend
rubí
¡Eso es! La parte trasera está preparada. Pasemos al front-end y pongamos en uso la librería Keen.IO JavaScript SDK que se añadió previamente en el diseño de la aplicación.
Visualización de consultas
Ir a app/activos/javascripts/canales/analíticos.café
Allí se pueden ver tres funciones: conectado(), desconectado() y recibido().
connected() se llama cuando el cliente se conecta al web-socket del lado del servidor, disconnected() se llama en el caso opuesto, y received() se llama cuando los datos son emitidos desde el servidor.
Fuera de estas funciones, declare una función global que va a ser llamada para recargar todas las consultas y visualizarlas en el tablero:
12345678910111213App.analytics=App.cable.subscriptions.create "AnalyticsChannel", connected:-;loadAnalytics(); disconnected:-------; #Llamado cuando la suscripción ha sido terminada por el servidor recibido:(data)-------;loadAnalytics();@loadAnalytics=()=--; #paste el código de incrustación deKeen.IO aquí
javascript
@loadAnalytics ( @ denota una función global en CoffeeScript) va a ser llamada cuando el cliente se conecte al canal del lado del servidor, cuando haya datos recibidos del canal, y cuando se muestre en la propia vista.
Recuerda que ya hemos establecido las operaciones del lado del servidor y del lado del cliente, así que lo único que falta es la llamada de la vista en sí. Añadámoslo:
123456<!-- app/views/products/dashboard.html.erb --;<!-- pon esto en la parte inferior del documento --;script--;loadAnalytics()</script--;
html
Ahora, ve a tu explorador Keen.IO y empieza a obtener el código de incrustación de tus consultas favoritas. Usa js2.coffee para transponer el javascript a coffeesscript.
Aquí hay un ejemplo con tres consultas que se muestran en los diferentes envoltorios de los buzos:
12345678910111213141516171819202122232425262728293031323334@loadAnalytics=()=> client =newKeen( projectId:$0027YOURKEENPROJECTID$0027 readKey:$0027YOURKEENREADKEY$0027)Keen.ready- > allProducts =newKeen. Query("count",{ eventCollection: "product", timeframe: "this_1_months", timezone: "UTC"}); favoritesDist =newKeen.Query("count_unique",{ eventCollection: "product", groupBy:["name"], targetProperty: "favorites", timeframe: "this_14_days", timezone: "UTC"}); productsCreatedToday =newKeen. Consulta("suma",{ eventCollection: "producto", intervalo: "diario", targetPropiedad: "id", horario: "este_14_día", zona horaria: "UTC"}); client.draw productsCreatedToday ,document. getElementById($0027envoltura de gráficos$0027),{} client.draw favoritosDist,document.getElementById($0027envoltura de tartas$0027),{} client.draw allProducts,document.getElementById($0027envoltura total$0027),{}js
Primero, inicializamos al cliente con las credenciales del proyecto proporcionadas por Keen.IO. Keen.ready es llamado cuando el documento HTML es cargado y las consultas están listas para ser visualizadas. Keen.Query toma dos argumentos. El primer argumento es de tipo analítico, y el segundo argumento es un objeto que contiene detalles sobre la colección, el intervalo y los filtros. Echa un vistazo al SDK de JavaScript de Keen.IO para más información sobre la creación de consultas.
client.draw es la función que hace el dibujo. El primer argumento es la consulta, y el segundo es el elemento seleccionado del documento HTML.
Vaya a http://localhost:3000 y vea los resultados. Ahora tienes un tablero de mandos en funcionamiento que muestra y se sincroniza automáticamente cada vez que se modifica la colección de productos.
Para probar la reactividad, abra las ventanas del navegador con http://localhost:3000/products/new y http://localhost:3000. Luego, intente crear un nuevo producto.