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 sin interrupciones a información en tiempo real directamente dentro de las herramientas que utilizan a diario. Al integrar la analítica integrada en aplicaciones Angular con un backend de .NET Core, las empresas pueden elevar sus productos con capacidades de toma de decisiones basadas en datos que impulsan el compromiso y el ROI.

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

Comprendiendo la Analítica Integrada

La analítica integrada se refiere a la integración de herramientas de visualización de datos y de inteligencia de negocios (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 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 única aplicación.

• Mejora de la Experiencia del Usuario: Los conocimientos conscientes del contexto reducen la fricción y mejoran la toma de decisiones.

• Aumento del Valor del Producto: Las aplicaciones equipadas con capacidades analíticas se diferencian en mercados competitivos.

Beneficios de la Integración

Combinar las capacidades de frontend dinámico de Angular con la robusta infraestructura de backend de .NET Core crea un potente marco cliente/servidor.

Añadir analítica integrada a esta mezcla proporciona:

1. Funcionalidad mejorada: Entregue información procesable 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

Integrar la 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.

Prerrequisitos:

1. Angular CLI: Para crear y gestionar aplicaciones Angular.

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

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

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

Guía Paso a Paso: Configuración de Reveal Embedded Analytics en Angular

Paso 1: Crear la Aplicación Angular

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

1. Navegar al Directorio de la Aplicación: Cambie de directorio al nuevo directorio de la aplicación y ábralo en su editor de código preferido (ej. Visual Studio Code)

ng new getting-started

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

cd getting-started 

code

Paso 2: Añadir la API JavaScript de Reveal

1. Modificar el Archivo index.html Abra el archivo index.html y añada el siguiente script para la API 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 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 añada el 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