incorporando análises em aplicativos angulares com rede

Como integrar análises incorporadas em aplicativos Angular com o .NET Core

Com o Reveal, a inserção de análises em seu aplicativo Angular usando o .NET Core fornece insights em tempo real diretamente nos fluxos de trabalho do aplicativo, eliminando a necessidade de ferramentas externas ou alternância de contexto. Este guia simplifica, eliminando a complexidade para mostrar como fornecer análises naturais, rápidas e contínuas.

6 min read

Introdução à análise incorporada em Angular e .NET Core

A análise incorporada não é mais um recurso opcional — é uma necessidade para aplicativos modernos. Em 2025, os usuários exigem acesso contínuo a insights em tempo real diretamente nas ferramentas que usam diariamente. Ao integrar a análise incorporada em aplicativos Angular com um backend .NET Core, as empresas podem elevar seus produtos com recursos de tomada de decisão baseados em dados que impulsionam o engajamento e o ROI.

Este guia fornece um passo a passo abrangente sobre como incorporar análises em seus produtos de software usando Reveal Embedded Analytics. Seja você um desenvolvedor integrando análises ou um gerente de produto planejando melhorias de recursos, este guia passo a passo fornece os insights de que você precisa.

Compreendendo a análise incorporada

A análise incorporada refere-se à integração de ferramentas de visualização de dados e inteligência empresarial (BI) diretamente em aplicativos de software. Diferentemente de soluções de BI autônomas, a análise incorporada permite que os usuários acessem insights em contexto sem alternar entre plataformas.

Por que a análise incorporada é essencial? 

  • Fluxos de trabalho simplificados: os usuários podem analisar dados e tomar medidas em um único aplicativo.
  • Experiência do usuário aprimorada: insights baseados no contexto reduzem o atrito e melhoram a tomada de decisões.
  • Aumento do valor do produto: aplicativos equipados com recursos analíticos se diferenciam em mercados competitivos.

Benefícios da Integração 

A combinação dos recursos dinâmicos de front-end do Angular com a robusta infraestrutura de back-end do .NET Core cria uma poderosa estrutura cliente/servidor.
 
Adicionar análises incorporadas a essa combinação proporciona: 

  1. Funcionalidade aprimorada: forneça insights acionáveis em tempo real.
  1. Retenção de usuários: mantenha os usuários engajados atendendo às suas necessidades analíticas.
  1. Escalabilidade: Angular e .NET Core oferecem suporte a aplicativos projetados para crescer junto com seu negócio.

Configurando o ambiente de desenvolvimento

Integrar análises incorporadas em seus aplicativos Angular com um backend .NET Core pode melhorar significativamente a experiência do usuário, fornecendo insights contextuais em tempo real.

As instruções abaixo descrevem as etapas para configurar seu ambiente de desenvolvimento e implementar Reveal sem problemas.

Antes de integrar análises incorporadas, certifique-se de que seu ambiente de desenvolvimento esteja configurado corretamente.

Prerequisites: 

  1. Angular CLI: para criar e gerenciar aplicativos Angular.
  1. .NET Core SDK: para criar serviços de backend.
  1. Node.js: necessário para desenvolvimento Angular.
  1. Reveal SDK: para incorporar análises em seu aplicativo.

Guia passo a passo: Configurando Reveal Embedded Analytics no Angular 

Etapa 1:Crie o aplicativo Angular 

  1. Abra seu terminal: inicie seu aplicativo de terminal favorito para começar
terminal do windows
  1. Navegue até o diretório do aplicativo: altere os diretórios para o aplicativo recém-criado e abra-o no seu editor de código preferido (por exemplo, Visual Studio Code)
ng new getting-started
  1. Node.js: necessário para desenvolvimento Angular.
cd getting-started 

code

Etapa 2:adicione a API JavaScript Reveal 

  1. Modifique o arquivo index.html
    Abra o arquivo index.html e adicione o seguinte script para a API JavaScript Reveal antes da tag de fechamento </body>:
<script src="https://dl.revealbi.io/reveal/libs/1.7.1/infragistics.reveal.js"></script>
  1. Instalar dependências adicionais
    Inclua as seguintes bibliotecas necessárias no mesmo arquivo:

    jQuery 2.2 ou superior:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

Day,js 1.8.15 ou superior:

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

Atualizar o index.html final
Seu arquivo index.html agora deve ficar assim:

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>GettingStarted</title> 
  <base href="/"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico">   
</head> 
<body> 
  <app-root></app-root> 
 
  <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.7.1/infragistics.reveal.js"></script> 
</body> 
</html>

Etapa 3:Inicializar a visualização Reveal 

Atualizar o componente HTML 
Abra o arquivo src/app/app.component.html, exclua seu conteúdo e adicione o seguinte <div> para criar um espaço reservado para a visualização Reveal:
 

<div #revealView style="height: 100vh; width: 100%; position:relative;"></div>

Atualizar o componente HTML
Abra o arquivo src/app/app.component.html para fazer as seguintes atualizações:

Declarar jQuery: No topo do arquivo, declare uma variável para garantir que o TypeScript possa compilar seu JavaScript:

declare let $: any;

Adicione uma propriedade ViewChild: faça referência ao revealView definido no arquivo HTML:

@ViewChild('revealView') el!: ElementRef;



Implemente a interface AfterViewInit: inicialize a visualização Reveal no método de ciclo de vida ngAfterViewInit:

ngAfterViewInit(): void { 
 
var revealView = new $.ig.RevealView(this.el.nativeElement); }


App.component.ts final: Seu componente TypeScript completo deve ficar assim: 

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; 
declare let $: any; 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent implements AfterViewInit { 
  @ViewChild('revealView') el!: ElementRef; 
  ngAfterViewInit(): void { 
    var revealView = new $.ig.RevealView(this.el.nativeElement); 
  } 
}

Defina a URL base do Reveal SDK:  
Se o seu aplicativo cliente estiver hospedado em uma URL diferente do servidor, certifique-se de definir a URL base:

Etapa 4:execute o aplicativo 

Iniciar o aplicativo
No terminal, execute o seguinte comando:

npm: npm start 
Yarn: yarn start 
Pnpm:pnpm start

Teste sua aplicação 
Assim que o aplicativo iniciar, abra-o no seu navegador. A visualização Reveal deve inicializar com sucesso.

Parabéns! 

Você criou com sucesso seu primeiro aplicativo Angular Reveal SDK. Com essa configuração, você está pronto para aproveitar o poder da análise incorporada para aprimorar a experiência dos seus usuários e gerar insights acionáveis.

Melhores práticas e considerações

Medidas de segurança 

  • Autenticação: implemente mecanismos de autenticação robustos como OAuth ou JWT para proteger dados confidenciais.
  • Controle de acesso a dados: use permissões baseadas em funções para garantir que os usuários acessem apenas o que estão autorizados a visualizar.
  • HTTPS: Use sempre conexões seguras para transmissão de dados.

Otimização de desempenho 

  • Cache de dados: reduza a carga do servidor armazenando em cache os dados acessados com frequência.
  • Carregamento lento: carregue painéis e componentes somente quando necessário para melhorar a velocidade do aplicativo.
  • Otimização de backend: otimize consultas de banco de dados para lidar com grandes conjuntos de dados com eficiência.

Conclusão

Integrar análises incorporadas em aplicativos Angular com um backend .NET Core é uma virada de jogo para produtos de software modernos. Ao seguir este guia, você pode aprimorar seu aplicativo com recursos de análise robustos, gerando valor para os usuários. Reveal Embedded Analytics torna esse processo perfeito, oferecendo ferramentas poderosas para incorporar visualizações de dados, garantindo a segurança e otimizando o desempenho.

Pronto para levar sua aplicação para o próximo nível? Agende uma chamada no site Reveal para ver como podemos resolver suas necessidades de análise incorporada.

BI Inteligência de Negócios Análise incorporada Como

MAIS TÓPICOS

angular angular dashboard
Solicite uma demonstração