arrow 블로그로 돌아가기 How to Integrate Embedded Analytics in Angular Apps with .NET Core

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

.NET Core 백엔드로 Angular 애플리케이션에 임베디드 분석을 통합하여 참여도와 ROI를 높이는 더 나은 의사 결정 기능을 제공하는 방법을 알아보십시오.

요약: ChatGPT ChatGPT Perplexity Perplexity

요약:

Reveal을 사용하면 .NET Core를 사용하여 Angular 앱에 분석을 임베드하여 앱의 워크플로 내에서 실시간 인사이트를 직접 제공하므로 외부 도구나 상황 전환이 필요하지 않습니다. 이 가이드에서는 복잡성을 줄여 자연스럽고 빠르며 원활한 분석을 제공하는 방법을 보여주어 쉽게 분석을 수행할 수 있도록 안내합니다.

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

임베디드 분석은 더 이상 선택적인 기능이 아니라 최신 애플리케이션에 필수적인 요소입니다. 2025년에는 사용자가 매일 사용하는 도구 내에서 실시간 인사이트에 원활하게 액세스하기를 원합니다. .NET Core 백엔드로 Angular 애플리케이션에 임베디드 분석을 통합함으로써 기업은 데이터 기반 의사 결정 기능을 통해 제품을 향상시켜 참여도와 ROI를 높일 수 있습니다.

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

임베디드 분석 이해

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

임베디드 분석이 필수적인 이유는 무엇입니까?

  • **합리화된 워크플로:** 사용자는 단일 애플리케이션 내에서 데이터를 분석하고 작업을 수행할 수 있습니다.

  • 향상된 사용자 경험: 상황에 맞는 인사이트는 마찰을 줄이고 의사 결정을 향상시킵니다.

  • 제품 가치 증가: 분석 기능을 갖춘 애플리케이션은 경쟁 시장에서 차별화됩니다.

통합의 이점

Angular의 동적 프런트엔드 기능과 .NET Core의 강력한 백엔드 인프라를 결합하면 강력한 클라이언트/서버 프레임워크가 생성됩니다.

여기에 임베디드 분석을 추가하면 다음과 같은 이점이 있습니다.

  1. **향상된 기능:** 실시간으로 실행 가능한 인사이트를 제공합니다.

  2. 사용자 유지: 사용자의 분석 요구 사항을 해결하여 참여도를 유지합니다.

  3. **확장성:** Angular 및 .NET Core는 비즈니스와 함께 성장하도록 설계된 애플리케이션을 지원합니다.

개발 환경 설정

.NET Core 백엔드로 Angular 애플리케이션에 임베디드 분석을 통합하면 실시간 상황별 인사이트를 제공하여 사용자 경험을 크게 향상시킬 수 있습니다.

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

임베디드 분석을 통합하기 전에 개발 환경이 올바르게 구성되었는지 확인하십시오.

필수 조건:

  1. **Angular CLI:** Angular 애플리케이션을 생성하고 관리하기 위한 도구입니다.

  2. .NET Core SDK: 백엔드 서비스를 구축하기 위한 도구입니다.

  3. **Node.js:** Angular 개발에 필요합니다.

  4. **Reveal SDK:** 애플리케이션에 분석을 임베드하기 위한 도구입니다.

Angular에 Reveal 임베디드 분석을 설정하는 단계별 가이드

***1단계:***Angular 앱 생성

  1. 터미널 열기: 시작하려면 선호하는 터미널 애플리케이션을 실행하십시오.

windows terminal

  1. **애플리케이션 디렉터리로 이동:** 새로 생성된 앱으로 디렉터리를 변경하고 선호하는 코드 편집기(예: Visual Studio Code)에서 엽니다.예: Visual Studio Code)
ng new getting-started
  1. **Node.js:** Angular 개발에 필요합니다.
cd getting-started 

code

***2단계:***Reveal JavaScript API 추가

  1. index.html 파일 수정 index.html 파일을 열고 다음 스크립트를 닫는 태그 바로 앞에 추가하여 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 파일을 열고 내용을 삭제한 다음 다음을 추가하여 Reveal 뷰에 대한 자리 표시자를 만듭니다.

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

<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 Embedded Analytics는 데이터 시각화를 임베딩하고, 보안을 보장하고, 성능을 최적화하기 위한 강력한 도구를 제공하여 이 프로세스를 원활하게 만듭니다.

애플리케이션을 다음 단계로 발전시킬 준비가 되셨습니까? 웹사이트에서 전화 예약을 하시면 임베디드 분석 요구 사항을 해결하는 방법을 알려드리겠습니다. Reveal 애플리케이션 현대화를 위한 5단계

기술적 통찰력