embedding analytics to angular apps with net

.NET Core를 사용하여 Angular 앱의 임베디드 분석 통합하는 방법

Angular 및 .NET Core의 임베디드 분석 소개 임베디드 분석은 더 이상 선택적 기능이 아니라 최신 애플리케이션의 필수 기능입니다. 2025년, 사용자는 매일 사용하는 도구 내에서 직접 실시간 인사이트에 원활하게 액세스할 수 있어야 합니다. .NET Core 백엔드를 사용하여 Angular 애플리케이션에 임베디드 분석을 통합함으로써 기업은 제품을 향상시킬 수 있습니다.

6분 분량의 글

Angular 및 .NET Core의 임베디드 분석 소개

내장된 분석은 더 이상 선택 사항이 아닌 최신 애플리케이션의 필수 기능입니다. 2025년, 사용자는 매일 사용하는 도구 내에서 직접 실시간 인사이트에 원활하게 액세스할 수 있어야 합니다. .NET Core 백 엔드를 사용하여 Angular 애플리케이션에 내장된 분석을 통합함으로써 기업은 참여와 ROI를 촉진하는 데이터 기반 의사 결정 기능으로 제품을 향상시킬 수 있습니다.

이 안내서에서는 Reveal 임베디드 분석를 사용하여 소프트웨어 제품에 분석을 포함하는 방법에 대한 포괄적인 연습을 제공합니다.  분석을 통합하는 개발자이든, 기능 개선을 계획하는 제품 관리자이든, 이 단계별 가이드는 필요한 인사이트를 제공합니다.

임베디드 분석 이해

임베디드 분석은 데이터 시각화 및 비즈니스 인텔리전스(BI) 도구를 소프트웨어 애플리케이션에 직접 통합하는 것을 의미합니다. 독립형 BI 솔루션과 달리 내장된 분석을 통해 사용자는 플랫폼 간에 전환하지 않고도 상황에 맞는 인사이트에 액세스할 수 있습니다.

왜 임베디드 분석 필수인가요? 

  • 간소화된 워크플로우: 사용자는 단일 애플리케이션 내에서 데이터를 분석하고 조치를 취할 수 있습니다.
  • 향상된 사용자 경험: 상황 인식 통찰력은 마찰을 줄이고 의사 결정을 향상시킵니다.
  • 제품 가치 증가: 분석 기능을 갖춘 애플리케이션은 경쟁이 치열한 시장에서 차별화됩니다.

통합의 이점 

Angular의 동적 프론트엔드 기능과 .NET Core의 강력한 백엔드 인프라를 결합하면 강력한 클라이언트/서버 프레임워크가 생성됩니다.
 
이 조합에 내장된 분석을 추가하면 다음과 같은 이점이 있습니다. 

  1. 향상된 기능: 실행 가능한 인사이트를 실시간으로 제공합니다.
  1. 사용자 보존: 사용자의 분석 요구 사항을 해결하여 사용자의 참여를 유지합니다.
  1. 확장성: Angular 및 .NET Core는 비즈니스와 함께 성장하도록 설계된 애플리케이션을 지원합니다.

개발 환경 설정

.NET Core 백 엔드를 사용하여 Angular 애플리케이션에 포함된 분석을 통합하면 실시간 컨텍스트 인사이트를 제공하여 사용자 환경을 크게 향상시킬 수 있습니다.

아래 지침에서는 개발 환경을 설정하고 Reveal 원활하게 구현하는 단계를 간략하게 설명합니다.

내장된 분석을 통합하기 전에 개발 환경이 올바르게 구성되었는지 확인합니다.

Prerequisites: 

  1. Angular CLI: Angular 응용 프로그램을 만들고 관리하는 데 사용됩니다.
  1. .NET Core SDK: 백엔드 서비스를 구축합니다.
  1. Node.js: Angular 개발에 필요합니다.
  1. Reveal SDK: 응용 프로그램에 분석을 포함합니다.

단계별 가이드: Angular에서 Reveal 임베디드 분석 설정 

1단계:Angular 앱 만들기 

  1. 터미널을 엽니다. 즐겨 사용하는 터미널 응용 프로그램을 실행하여 시작하십시오.
Windows 터미널
  1. 응용 프로그램 디렉토리로 이동합니다. 디렉터리를 새로 만든 앱으로 변경하고 원하는 코드 편집기(예: Visual Studio Code)에서 엽니다.
ng new getting-started
  1. Node.js: Angular 개발에 필요합니다.
cd getting-started 

code

2단계:Reveal JavaScript API 추가 

  1. index.html 파일 수정
    index.html 파일을 열고 닫는 </body> 태그 바로 앞에 Reveal JavaScript API에 대한 다음 스크립트를 추가합니다.
<script src="https://dl.revealbi.io/reveal/libs/1.7.1/infragistics.reveal.js"></script>
  1. 추가 종속성 설치
    동일한 파일에 다음과 같은 필수 라이브러리를 포함합니다.

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

Day,js 1.8.15 이상:

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

최종 index.html 업데이트
이제 index.html 파일이 다음과 같아야 합니다.

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

3단계:Reveal 뷰 초기화 

HTML 구성 요소 업데이트 
src/app/app.component.html 파일을 열고 내용을 삭제한 후 다음 <div>를 추가하여 Reveal 보기의 자리 표시자를 만듭니다.
 

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

HTML 구성 요소 업데이트
src/app/app.component.html 파일을 열어 다음과 같이 업데이트합니다.

jQuery 선언: 파일 맨 위에서 변수를 선언하여 TypeScript가 JavaScript를 컴파일할 수 있도록 합니다.

declare let $: any;

ViewChild 속성을 추가합니다. HTML 파일에 정의된 revealView를 참조합니다.

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



AfterViewInit 인터페이스를 구현합니다. ngAfterViewInit 수명 주기 메서드에서 Reveal 보기를 초기화합니다.

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


최종 app.component.ts: 전체 TypeScript 구성 요소는 다음과 같아야 합니다. 

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

Reveal SDK 기본 URL을 설정합니다.  
클라이언트 앱이 서버와 다른 URL에서 호스팅되는 경우 기본 URL을 설정해야 합니다.

4 단계 :응용 프로그램 실행 

응용 프로그램 시작
터미널에서 다음 명령을 실행합니다.

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

응용 프로그램 테스트 
응용 프로그램이 시작되면 브라우저에서 엽니다. Reveal 보기가 성공적으로 초기화되어야 합니다.

축하합니다! 

첫 번째 Reveal SDK Angular 애플리케이션을 성공적으로 만들었습니다. 이 설정을 사용하면 내장된 분석 기능을 활용하여 사용자 경험을 개선하고 실행 가능한 인사이트를 도출할 수 있습니다.

최상의 방법 및 고려 사항

보안 대책 

  • 인증: OAuth 또는 JWT와 같은 강력한 인증 메커니즘을 구현하여 민감한 데이터를 보호합니다.
  • 데이터 액세스 제어: 역할 기반 권한을 사용하여 사용자가 볼 수 있는 권한만 액세스할 수 있도록 합니다.
  • HTTPS: 데이터 전송에는 항상 보안 연결을 사용하십시오.

성능 최적화 

  • 데이터 캐싱: 자주 액세스하는 데이터를 캐싱하여 서버 부하를 줄입니다.
  • 게으른 로딩: 앱 속도를 향상시키기 위해 필요한 경우에만 대시보드와 구성 요소를 로드합니다.
  • 백엔드 최적화: 데이터베이스 쿼리를 최적화하여 대규모 데이터 세트를 효율적으로 처리합니다.

결론

.NET Core 백 엔드를 사용하여 임베디드 분석을 Angular 애플리케이션에 통합하는 것은 최신 소프트웨어 제품의 판도를 바꾸는 것입니다. 이 가이드를 따르면 강력한 분석 기능으로 애플리케이션을 개선하여 사용자를 위한 가치를 창출할 수 있습니다. Reveal 임베디드 분석는 이 프로세스를 원활하게 만들어 데이터 시각화를 포함하고, 보안을 보장하고, 성능을 최적화하기 위한 강력한 도구를 제공합니다.

응용 프로그램을 다음 단계로 끌어올릴 준비가 되셨습니까? Reveal 웹 사이트에서 전화를 예약하여 임베디드 분석 요구 사항을 어떻게 해결할 수 있는지 알아보십시오.

증권 시세 표시기 비즈니스 인텔리전스 임베디드 분석 어떻게
데모 요청