Incorporación de BI de autoservicio en aplicaciones Blazor
A medida que más organizaciones comienzan a ofrecer capacidades analíticas como parte de sus aplicaciones, la integración de análisis en sus aplicaciones Blazor ya no es opcional.
Bilyana Petrova
7 min de lectura
Con datos abundantes, los usuarios han cambiado a un enfoque de datos primero para guiar su proceso de toma de decisiones.
Y es fácil ver por qué.
La integración de BI potente con imágenes e informes completamente interactivos en sus aplicaciones Blazor hace que el análisis de datos sea accesible para todos sus usuarios finales. Con datos accesibles en contexto, sus usuarios pueden extraer rápidamente información relevante cuando sea necesario, sin interrupciones ni caos causados por cambiar de aplicación o mezclar datos.
Como solución de análisis integrada, Reveal puede ayudarlo a lograrlo.
Reveal ayuda a incorporar paneles e informes interactivos de manera fácil y rápida en sus aplicaciones Blazor con funciones de análisis de autoservicio como edición en contexto, combinación de datos, vinculación de paneles, campos calculados y más.
En este artículo, exploraremos cómo puede integrar con éxito el análisis incorporado en sus aplicaciones Blazor con Reveal.
Si es nuevo en Reveal, puede obtener más información sobre nuestro producto haciendo un recorrido por nuestro sitio web o viendo nuestro video de descripción general del producto Reveal.
¿Por qué debería incorporar análisis en sus aplicaciones Blazor?
La integración de análisis en sus aplicaciones Blazor le permite ver datos comerciales clave en su flujo de trabajo natural. Le permite detectar fácilmente tendencias y patrones en datos que, de otro modo, se habrían perdido. Con acceso a información en tiempo real, usted (y todos sus usuarios) pueden tomar decisiones mejor informadas que pueden guiar el éxito de su negocio.
El análisis de datos también ayuda a las empresas a optimizar los flujos de trabajo, gestionar los recursos y optimizar los procesos y el rendimiento para obtener la máxima rentabilidad. Con los datos correctos, también puede identificar nuevas oportunidades de productos/servicios para aumentar sus ingresos.
Incorporación de análisis de autoservicio en sus aplicaciones Blazor con Reveal BI
Los siguientes 7 pasos le mostrarán lo fácil que es comenzar a habilitar paneles y visualizaciones de datos enriquecidos en su aplicación Blazor. Hay configuraciones tanto de cliente como de servidor que deben realizarse. Para comenzar, descargue el SDK
Una vez que haya hecho eso, ¡creemos y habilitemos BI de autoservicio integrado en su aplicación Blazor en 7 sencillos pasos!
Paso 1: Cree una aplicación de servidor Blazor
Dado que se trata de una aplicación de Blazor Server, abra Visual Studio y cree una nueva aplicación de Blazor Server con los valores predeterminados. Una vez completada, se crea la aplicación; haga clic con el botón derecho en su proyecto, seleccione Administrar paquetes Nuget y busque en nuget.org el paquete Nuget Reveal.Sdk.AspNetCore e instálelo en su proyecto.
Paso 2: configurar carpetas/agregar paneles
Para probar el cliente Reveal SDK, enviamos paneles de muestra que puede usar para asegurarse de que su configuración sea correcta. Reveal usa una estructura de carpetas conocida para cargar y guardar tableros automáticamente; si usa una carpeta llamada Dashboards en la raíz de su proyecto, no es necesario que escriba ningún código adicional de Cargar/Guardar.
- Cree una carpeta llamada Dashboards
- Descomprima y copie los paneles de muestra (Marketing, Ventas, Campañas, Fabricación) en la carpeta Panel recién creada desde este archivo comprimido: https://users.infragistics.com/ Reveal /sample-dashboards.zip
Paso 3: Actualice Program.cs
In Program.cs:
- Agregue a la parte superior de la ventana de código:
usando Revelar.SDK;
- Dígale a su aplicación que use el SDK Reveal con este código y colóquelo antes de la instrucción builder.build.
constructor.Servicios.AddControllers().AddReveal();
Paso 4: Agregar dependencias del SDK del cliente
Para habilitar las dependencias de JavaScript del cliente Reveal, se debe actualizar el archivo Pages\_layout.cshtml. Agregue el siguiente código antes del final de la etiqueta de cierre </Body>.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> <script src="https://dl.revealbi.io/reveal/libs/1.5.0/infragistics.reveal.js"></script> <script type="module"> import "./js/revealview.js"; </script>
Paso 5: Agregue el JavaScript de configuración del cliente Reveal
Los usos Reveal SDK Client se configuran a través de RevealView. Para cargar RevealView, debe agregar una función de JavaScript en el cliente. Aquí también es donde configuraría cualquier propiedad que deba estar habilitada cuando se represente un tablero.
- Agregue la carpeta js en la carpeta \wwwroot\
- En la carpeta js, agregue un archivo JavaScript llamado revelarview.js con el siguiente código:
window.loadRevealView = function (viewId, dashboardName) {
$.ig.RevealSdkSettings.setBaseUrl('https://samples.revealbi.io/upmedia-backend/reveal-api/');
$.ig.RVDashboard.loadDashboard(dashboardName, (dashboard) => {
var revealView = new $.ig.RevealView("#" + viewId);
revealView.dashboard = dashboard;
});
}
Paso 6: cargar paneles
En esta aplicación Blazor, va a cargar los tableros en un <div> llamadoRevealView. Siga estos pasos para cargar los paneles de muestra desde la carpeta Paneles de su aplicación.
- En Pages\Index.Razor, agregue esta instrucción using:
@inject IJSRuntime JSRuntime
- Agregue el código para el menú desplegable que usará para seleccionar el tablero para cargar:
<select @onchange="selectedDashboardChanged">
<option>Campaigns</option>
<option>Healthcare</option>
<option>Manufacturing</option>
<option>Marketing</option>
<option>Sales</option>
</select>
- Agregue el div deRevealView:
<div id="revealView" style="width:100%; height:750px"></div>
- Agregar código que cargue el panel de Campañas en la primera carga
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", "Campaigns");
}
}
}
- Esté atento a los cambios en Seleccione para cargar el tablero correcto:
async void selectedDashboardChanged(ChangeEventArgs e)
{
await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", e.Value!.ToString());
}
}
Paso 7: Ejecute su aplicación
En este punto, se completan todos los pasos para habilitar las potentes funciones de BI en su aplicación Blazor. ¡Ejecute su aplicación para ver los resultados!
Para ver el tutorial completo, mire este video que lo guía a través de los pasos para incorporar análisis en sus aplicaciones Blazor con Reveal.
Asegúrese de ver nuestros otros videos, en nuestro canal de YouTube, para obtener información más detallada sobre análisis integrados e inteligencia empresarial y la importancia de los datos para las empresas. Cubrimos temas como incorporar análisis en Angular, aplicaciones React con Node.js y aplicaciones JavaScript HTML, creación de paneles de BI integrados y más. Recuerda suscribirte para que puedas ver todos los videos futuros de nuestros expertos.
Y si está tratando de incorporar análisis en sus aplicaciones Blazor con Reveal pero enfrenta algún problema en el camino, comuníquese con nuestro equipo de productos a través de nuestro canal de Discord.
También puede obtener más información sobre Reveal y cómo funciona programando un recorrido gratuito por el producto. Alternativamente, también puede descargar nuestro SDK para probarlo usted mismo.
