embedding analytics to angular apps with net

Cómo integrar Análisis integrado en aplicaciones Angular con .NET Core

Introducción a Análisis integrado en Angular y .NET Core El análisis integrado ya no es una característica opcional, es 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 análisis integrados en aplicaciones Angular con un backend de .NET Core, las empresas pueden elevar sus productos [...]

6 min de lectura

Introducción a Análisis integrado en Angular y .NET Core

La analítica integrada ya no es una característica opcional, es 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 análisis integrados en aplicaciones Angular con un back-end 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 retorno de la inversión.

Esta guía proporciona un tutorial completo sobre la incorporación de análisis en sus productos de software mediante Reveal Análisis integrado.  Tanto si es un desarrollador que integra análisis como si es un gestor de productos que planifica mejoras en las funciones, esta guía paso a paso proporciona la información que necesita.

Comprensión Análisis integrado

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 información en contexto sin tener que cambiar de plataforma.

¿Por qué Análisis integrado es esencial? 

  • 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 contextual reduce la fricción y mejora 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 

La combinación de las capacidades dinámicas de frontend de Angular con la sólida infraestructura de backend de .NET Core crea un potente marco cliente/servidor.
 
La adición de análisis integrados a esta combinación proporciona: 

  1. Funcionalidad mejorada: Proporcione información procesable en tiempo real.
  1. Retención de usuarios: Mantenga a los usuarios comprometidos abordando sus necesidades analíticas.
  1. Escalabilidad: Angular y .NET Core admiten aplicaciones diseñadas para crecer con su negocio.

Configuración del entorno de desarrollo

La integración de análisis integrados en las aplicaciones Angular con un back-end de .NET Core puede mejorar significativamente la experiencia del usuario al proporcionar información contextual en tiempo real.

En las instrucciones siguientes se describen los pasos para configurar el entorno de desarrollo e implementar sin problemas Reveal.

Antes de integrar el análisis integrado, asegúrese de que su entorno de desarrollo esté configurado correctamente.

Prerequisites: 

  1. Angular CLI: Para crear y administrar aplicaciones Angular.
  1. SDK de .NET Core: Para crear servicios de backend.
  1. Node.js: Necesario para Angular desarrollo.
  1. Reveal SDK: Para incrustar análisis en la aplicación.

Guía paso a paso: Configuración de Reveal Análisis integrado en Angular 

Paso 1:Cree la aplicación Angular 

  1. Abre tu terminal: Inicie su aplicación de terminal favorita para comenzar
Terminal de Windows
  1. Navegue hasta el directorio de aplicaciones: 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: Necesario para Angular desarrollo.
cd getting-started 

code

Paso 2:Agregue la API de JavaScript 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 </body 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 necesarias 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>

día, js 1.8.15 o superior:

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

Actualizar el index.html final
Tu archivo index.html ahora debería 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 Reveal 

Actualizar el componente HTML 
Abra el archivo src/app/app.component.html, elimine su contenido y agregue el siguiente <div> para crear un marcador de posición para la vista Reveal:
 

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

Actualizar el componente HTML
Abra el archivo src/app/app.component.html para realizar las siguientes actualizaciones:

Declarar jQuery: En la parte superior del archivo, declare una variable para asegurarse de que TypeScript pueda compilar su JavaScript:

declare let $: any;

Agregue una propiedad ViewChild: Haga referencia a revealView definido en el archivo HTML:

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



Implemente la interfaz AfterViewInit: Inicialice la vista Reveal en el método de ciclo de vida ngAfterViewInit:

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


app.component.ts final: El componente completo de TypeScript debería tener el siguiente aspecto: 

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

Establezca la URL base del SDK Reveal:  
Si la aplicación cliente está hospedada en una dirección URL diferente a la del servidor, asegúrese de establecer la dirección URL base:

Paso 4:Ejecute la aplicación 

Iniciar la aplicación
En el terminal, ejecute el siguiente comando:

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

Pruebe su aplicación 
Una vez que se inicie la aplicación, ábrala en su navegador. La vista Reveal debe inicializarse correctamente.

¡Felicidades! 

Ha creado correctamente su primer SDK Reveal aplicación Angular. Con esta configuración, está listo para aprovechar el poder de la analítica integrada para mejorar la experiencia de sus usuarios e impulsar información procesable.

Prácticas recomendadas y consideraciones

Medidas de seguridad 

  • Autenticación: Implemente mecanismos de autenticación sólidos como OAuth o JWT para proteger los datos confidenciales.
  • Control de acceso a los datos: Use permisos basados en roles para asegurarse de que los usuarios accedan solo a lo que están autorizados a ver.
  • HTTPS: Utilice siempre conexiones seguras para la transmisión de datos.

Optimización del rendimiento 

  • Almacenamiento en caché de datos: Reduzca la carga del servidor mediante el almacenamiento en caché de los datos a los que se accede con frecuencia.
  • Carga diferida: Cargue paneles y componentes solo cuando sea necesario para mejorar la velocidad de la aplicación.
  • Optimización del backend: Optimice las consultas a la base de datos para manejar grandes conjuntos de datos de manera eficiente.

Conclusión

La integración de análisis integrados en aplicaciones Angular con un back-end de .NET Core cambia las reglas del juego para los productos de software modernos. Siguiendo esta guía, puede mejorar su aplicación con sólidas capacidades de análisis, lo que genera valor para los usuarios. Reveal Análisis integrado hace que este proceso sea fluido, ofreciendo potentes herramientas para incrustar visualizaciones de datos, garantizar la seguridad y optimizar el rendimiento.

¿Listo para llevar tu aplicación al siguiente nivel? Reserve una llamada en el sitio web de Reveal para ver cómo podemos resolver sus necesidades de análisis integrados.

BI Inteligencia de Negocios Análisis integrado Cómo
Solicitar una demostración