NET을 사용하여 Angular 앱에 분석 포함

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

Reveal 사용하면 .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 웹 사이트에서 전화를 예약하여 임베디드 분석 요구 사항을 어떻게 해결할 수 있는지 알아보십시오.

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

더 많은 주제

각도 각도 대시보드
데모 요청