Inserindo BI de autoatendimento em aplicativos Blazor

Com dados abundantes, os usuários mudaram para uma abordagem de dados em primeiro lugar para orientar seu processo de tomada de decisão.

E é fácil entender por quê.

A integração de BI poderoso com visuais e relatórios totalmente interativos em seus aplicativos Blazor torna a análise de dados acessível a todos os usuários finais. Com dados acessíveis e contextualizados, seus usuários podem extrair rapidamente insights relevantes quando necessário, sem interrupções e caos causados pela troca de aplicativos ou embaralhamento de dados.

Como uma solução de análise incorporada, Reveal pode ajudá-lo a conseguir isso.

Reveal ajuda você a incorporar painéis e relatórios interativos de maneira fácil e rápida em seus aplicativos Blazor com recursos de análise de autoatendimento, como edição no contexto, combinação de dados, vinculação de painéis, campos calculados e muito mais.

Neste artigo, exploraremos como você pode integrar com êxito a análise incorporada em seus aplicativos Blazor com Reveal.

Se você é novo no Reveal, pode saber mais sobre nosso produto fazendo um tour pelo nosso site ou assistindo ao nosso vídeo de visão geral do produto Reveal.

Por que você deve inserir análises em seus aplicativos Blazor? 

A incorporação de análises em seus aplicativos Blazor permite que você exiba os principais dados de negócios em seu fluxo de trabalho natural. Ele permite que você identifique facilmente tendências e padrões em dados que, de outra forma, teriam sido perdidos. Com acesso a insights em tempo real, você (e todos os seus usuários) podem tomar decisões mais bem informadas que podem orientar o sucesso do seu negócio.

A análise de dados também ajuda as empresas a otimizar fluxos de trabalho, gerenciar recursos e otimizar processos e desempenho para obter o máximo de lucratividade. Com os dados certos, você também pode identificar novas oportunidades de produtos/serviços para aumentar sua receita.

Inserindo a análise de autoatendimento em seus aplicativos Blazor com Reveal BI 

As 7 etapas a seguir mostrarão como é fácil começar a habilitar visualizações de dados e painéis avançados em seu aplicativo Blazor. Há configurações de cliente e servidor que precisam acontecer. Para começar, baixe o SDK

Depois de fazer isso, vamos criar e habilitar o BI de autoatendimento incorporado em seu aplicativo Blazor em 7 etapas fáceis!

Etapa 1: Criar um aplicativo Blazor Server 

Como esse é um aplicativo Blazor Server, abra o Visual Studio e crie um novo aplicativo Blazor Server com os padrões. Depois de concluído, o aplicativo é criado; clique com o botão direito do mouse em seu projeto, selecione Gerenciar Pacotes Nuget e pesquise nuget.org o pacote nuget Reveal.Sdk.AspNetCore e instale-o em seu projeto.

Etapa 2: configurar pastas / adicionar painéis 

Para testar o cliente do SDK do Reveal, enviamos painéis de amostra que você pode usar para garantir que sua configuração esteja correta. Reveal usa uma estrutura de pastas conhecida para carregar e salvar painéis automaticamente – se você usar uma pasta chamada Painéis na raiz do seu projeto, não será necessário escrever nenhum código adicional Carregar/Salvar.

1. Crie uma pasta chamada Dashboards 

2. Descompacte e copie os painéis de amostra (Marketing, Vendas, Campanhas, Manufatura) para a pasta Painel recém-criada a partir deste arquivo zip: https://users.infragistics.com/ Reveal /sample-dashboards.zip 

Etapa 3: atualizar Program.cs 

In Program.cs: 

1. Adicione à parte superior da janela de código:

usando Reveal.Sdk; 
 

2. Diga ao seu aplicativo para usar o SDK do Reveal com esse código e coloque-o antes da instrução builder.build.

construtor. Services.AddControllers(). AddReveal();

Etapa 4: Adicionar dependências do SDK do cliente 

Para habilitar Reveal dependências JavaScript do cliente, o arquivo Pages\_layout.cshtml precisa ser atualizado. Adicione o código a seguir antes do final da tag close</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>

Etapa 5: Adicionar Reveal JavaScript de configuração do cliente 

O Reveal SDK que o cliente usa é configurado por meio do RevealView. Para carregar o RevealView, você precisa adicionar uma função JavaScript no cliente. Também é aqui que você configuraria todas as propriedades que devem ser habilitadas quando um painel é renderizado.

1. Adicione a pasta js na pasta \wwwroot\​  

2. Na pasta js, adicione um arquivo JavaScript chamado revealview.js com o seguinte 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; 

    }); 

}

Etapa 6: Carregar painéis 

Neste aplicativo Blazor, você carregará os painéis em um <div> named revealView. Siga estas etapas para carregar os painéis de exemplo da pasta Painéis em seu aplicativo.

1. Em Pages\Index.Razor, adicione esta instrução using:

@inject IJSRuntime JSRuntime

2. Adicione o código da lista suspensa que você usará para selecionar o painel a ser carregado:

<select @onchange="selectedDashboardChanged"> 
    <option>Campaigns</option> 
    <option>Healthcare</option> 
    <option>Manufacturing</option> 
    <option>Marketing</option> 
    <option>Sales</option> 
</select> 

3. Adicione o div revealView:

<div id="revealView" style="width:100%; height:750px"></div> 

4. Adicionar código que carrega o painel do Campaigns no primeiro carregamento

@code { 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (firstRender) 
        { 
            await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", "Campaigns"); 
        } 
    }
} 

5. Fique atento às alterações no Selecione para carregar o painel correto:

async void selectedDashboardChanged(ChangeEventArgs e) 
    { 
        await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", e.Value!.ToString()); 
    } 
} 

Etapa 7: Executar seu aplicativo

Neste ponto, todas as etapas são concluídas para habilitar recursos avançados de BI em seu aplicativo Blazor. Execute seu aplicativo para ver os resultados!

Para obter o tutorial completo, assista a este vídeo que orienta você pelas etapas de inserção de análises em seus aplicativos Blazor com Reveal.

Certifique-se de assistir aos nossos outros vídeos, em nosso canal do YouTube, para obter informações mais detalhadas sobre análises incorporadas e inteligência de negócios e a importância dos dados para as empresas. Abordamos tópicos como incorporação de análises em Angular, aplicativos React com Node.js e aplicativos JavaScript HTMP, criação de painéis de BI incorporados e muito mais. Lembre-se de se inscrever para ver todos os vídeos futuros de nossos especialistas.

E se você estiver tentando incorporar análises em seus aplicativos Blazor com Reveal mas estiver enfrentando problemas no caminho, entre em contato com nossa equipe de produtos por meio de nosso canal Discord.

Você também pode saber mais sobre Reveal e como ele funciona agendando um tour gratuito do produto. Como alternativa, você também pode baixar nosso SDK para experimentá-lo por conta própria.