Cómo integrar analítica integrada en aplicaciones Angular con .NET Core

Introducción a la analítica integrada en Angular y .NET Core

La analítica integrada ya no es una característica opcional, sino una necesidad para las aplicaciones modernas. En 2025, los usuarios exigen un acceso fluido a la información en tiempo real directamente dentro de las herramientas que utilizan a diario. Al integrar la analítica integrada en las aplicaciones Angular con un backend de .NET Core, las empresas pueden mejorar sus productos con capacidades de toma de decisiones basadas en datos que impulsan la participación y el ROI.

Esta guía proporciona una guía completa sobre cómo integrar la analítica en sus productos de software utilizando Reveal Embedded Analytics. Ya sea que sea un desarrollador que integra analítica o un gerente de producto que planifica mejoras de funciones, esta guía paso a paso le proporciona la información que necesita.

Comprensión de la analítica integrada

La analítica integrada se refiere a la integración de herramientas de visualización de datos e inteligencia empresarial (BI) directamente en las aplicaciones de software. A diferencia de las soluciones de BI independientes, la analítica integrada permite a los usuarios acceder a la información en contexto sin cambiar entre plataformas.

¿Por qué es esencial la analítica integrada?

• **Flujos de trabajo optimizados:** Los usuarios pueden analizar datos y tomar medidas dentro de una sola aplicación.

• Experiencia de usuario mejorada: La información consciente del contexto reduce la fricción y mejora la toma de decisiones.

• Mayor valor del producto: Las aplicaciones equipadas con capacidades analíticas se diferencian en los mercados competitivos.

Beneficios de la integración

La combinación de las capacidades dinámicas del frontend de Angular con la sólida infraestructura del backend de .NET Core crea un potente marco cliente/servidor.

La adición de analítica integrada a esto proporciona:

1. **Funcionalidad mejorada:** Ofrezca información útil en tiempo real.

2. Retención de usuarios: Mantenga a los usuarios comprometidos abordando sus necesidades analíticas.

3. **Escalabilidad:** Angular y .NET Core admiten aplicaciones diseñadas para crecer con su negocio.

Configuración del entorno de desarrollo

La integración de analítica integrada en sus aplicaciones Angular con un backend de .NET Core puede mejorar significativamente la experiencia del usuario al proporcionar información contextual y en tiempo real.

Las instrucciones a continuación describen los pasos para configurar su entorno de desarrollo e implementar Reveal sin problemas.

Antes de integrar la analítica integrada, asegúrese de que su entorno de desarrollo esté configurado correctamente.

Requisitos previos:

1. **Angular CLI:** Para crear y administrar aplicaciones Angular.

2. .NET Core SDK: Para crear servicios de backend.

3. **Node.js:** Requerido para el desarrollo de Angular.

4. **Reveal SDK:** Para integrar analítica en su aplicación.

Guía paso a paso: configuración de la analítica integrada de Reveal en Angular

***Paso 1:***Crear la aplicación Angular

1. Abra su terminal: Inicie su aplicación de terminal favorita para comenzar

1. **Navegue hasta el directorio de la aplicación:** Cambie los directorios a la aplicación recién creada y ábrala en su editor de código preferido (por ejemplo, Visual Studio Code)

ng new getting-started

1. **Node.js:** Requerido para el desarrollo de Angular.

cd getting-started 

code

***Paso 2:***Agregar la API de JavaScript de Reveal

1. Modificar el archivo index.html Abra el archivo index.html y agregue el siguiente script para la API de JavaScript de Reveal justo antes de la etiqueta de cierre :

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

1. Instalar dependencias adicionales Incluya las siguientes bibliotecas requeridas en el mismo archivo:

jQuery 2.2 o superior:

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

Day,js 1.8.15 o superior:

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

Actualizar el archivo index.html final Su archivo index.html ahora debe verse así:

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

***Paso 3:***Inicializar la vista de Reveal

Actualizar el componente HTML Abra el archivo src/app/app.component.html, elimine su contenido y agregue lo siguiente

<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