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

Introdução às análises incorporadas em Angular e .NET Core

As análises incorporadas não são mais um recurso opcional, mas sim uma necessidade para aplicativos modernos. Em 2025, os usuários exigem acesso contínuo a informações em tempo real diretamente nas ferramentas que usam diariamente. Ao integrar análises incorporadas em aplicativos Angular com um backend .NET Core, as empresas podem aprimorar seus produtos com recursos de tomada de decisão baseados em dados que impulsionam o engajamento e o ROI.

Este guia fornece um guia completo sobre como incorporar análises em seus produtos de software usando Reveal Embedded Analytics. Seja você um desenvolvedor que integra análises ou um gerente de produto que planeja aprimoramentos de recursos, este guia passo a passo fornece as informações de que você precisa.

Entendendo as análises incorporadas

As análises incorporadas se referem à integração de visualização de dados e ferramentas de business intelligence (BI) diretamente em aplicativos de software. Ao contrário das soluções de BI autônomas, as análises incorporadas permitem que os usuários acessem informações relevantes no contexto, sem alternar entre plataformas.

Por que as análises incorporadas são essenciais?

• **Fluxos de trabalho simplificados:** Os usuários podem analisar dados e tomar medidas dentro de um único aplicativo.

• Experiência do usuário aprimorada: Informações relevantes no contexto reduzem o atrito e aprimoram a tomada de decisão.

• Valor do produto aumentado: Aplicativos equipados com recursos de análise se diferenciam em mercados competitivos.

Benefícios da integração

A combinação das capacidades dinâmicas do frontend do Angular com a robusta infraestrutura do backend do .NET Core cria uma estrutura cliente/servidor poderosa.

Adicionar análises incorporadas a essa combinação oferece:

1. **Funcionalidade aprimorada:** Forneça informações relevantes e acionáveis em tempo real.

2. Retenção de usuários: Mantenha os usuários engajados, atendendo às suas necessidades de análise.

3. **Escalabilidade:** Angular e .NET Core oferecem suporte a aplicativos projetados para crescer com sua empresa.

Configurando o ambiente de desenvolvimento

A integração de análises incorporadas em seus aplicativos Angular com um backend .NET Core pode aprimorar significativamente a experiência do usuário, fornecendo informações contextuais e em tempo real.

As instruções abaixo descrevem os passos para configurar seu ambiente de desenvolvimento e implementar o Reveal de forma contínua.

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

Pré-requisitos:

1. **Angular CLI:** Para criar e gerenciar aplicativos Angular.

2. .NET Core SDK: Para criar serviços de backend.

3. **Node.js:** Necessário para o desenvolvimento do Angular.

4. **Reveal SDK:** Para incorporar análises em seu aplicativo.

Guia passo a passo: configurando as análises incorporadas do Reveal em Angular

***Passo 1:***Crie o aplicativo Angular

1. Abra seu terminal: Inicie seu aplicativo de terminal favorito para começar

1. **Navegue até o diretório do aplicativo:** Altere o diretório para o aplicativo recém-criado e abra-o em seu editor de código preferido (por exemplo, Visual Studio Code)

ng new getting-started

1. **Node.js:** Necessário para o desenvolvimento do Angular.

cd getting-started 

code

***Passo 2:***Adicione a API JavaScript do Reveal

1. Modifique o arquivo index.html Abra o arquivo index.html e adicione o seguinte script para a API JavaScript do Reveal logo antes da tag de fechamento :

<script src="https://dl.revealbi.io/reveal/libs/1.7.1/infragistics.reveal.js"></script>

1. Instale 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>

Atualize o arquivo index.html final Seu arquivo index.html agora deve ter a seguinte aparência:

<!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 >

***Passo 3:***Inicialize a visualização do Reveal

Atualize o componente HTML Abra o arquivo src/app/app.component.html, exclua seu conteúdo e adicione o seguinte

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

declare let $: any;

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

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

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); 
  } 
}

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