Blazor 애플리케이션에 셀프 서비스 BI 포함

Blazor 애플리케이션에 셀프 서비스 BI 포함

더 많은 조직에서 앱의 일부로 분석 기능을 제공하기 시작하면서 분석 기능을 Blazor 애플리케이션에 포함하는 것은 더 이상 선택 사항이 아닙니다.

7분 읽기

풍부한 데이터로 인해 사용자는 의사 결정 프로세스를 안내하기 위해 데이터 우선 접근 방식으로 전환했습니다.

그 이유를 쉽게 알 수 있습니다.

강력한 BI와 완전한 대화형 시각적 개체 및 보고서를 Blazor 애플리케이션에 통합하면 모든 최종 사용자가 데이터 분석에 액세스할 수 있습니다. 상황에 맞는 액세스 가능한 데이터를 통해 사용자는 필요할 때 관련 통찰력을 신속하게 추출할 수 있습니다. 애플리케이션 전환이나 데이터 혼합으로 인한 혼란과 혼란이 없습니다.

​임베디드 분석 솔루션인 Reveal 이를 달성하는 데 도움이 될 수 있습니다.

Reveal 사용하면 컨텍스트 내 편집, 데이터 혼합, 대시보드 연결, 계산된 필드 등과 같은 셀프 서비스 분석 기능을 사용하여 Blazor 애플리케이션에 대화형 대시보드 및 보고서를 쉽고 빠르게 포함할 수 있습니다.

이 기사에서는 Reveal 사용하여 Blazor 앱에 포함된 분석을 성공적으로 통합하는 방법을 살펴봅니다.

Reveal 처음 사용하는 경우 웹 사이트를 둘러보거나 Reveal 제품 개요 비디오를 시청하여 제품에 대해 자세히 알아볼 수 있습니다.

Blazor 앱에 분석을 포함해야 하는 이유는 무엇입니까? 

Blazor 앱에 분석을 포함하면 자연스러운 워크플로에서 주요 비즈니스 데이터를 볼 수 있습니다. 이를 통해 다른 방법으로는 놓쳤을 데이터의 추세와 패턴을 쉽게 파악할 수 있습니다. 실시간 통찰력에 대한 액세스를 통해 귀하(및 귀하의 모든 사용자)는 비즈니스 성공을 안내할 수 있는 더 나은 정보에 입각한 결정을 내릴 수 있습니다.

데이터 분석은 또한 기업이 워크플로를 간소화하고 리소스를 관리하며 프로세스와 성능을 최적화하여 수익성을 극대화하는 데 도움이 됩니다. 올바른 데이터를 사용하면 새로운 제품/서비스 기회를 식별하여 수익을 높일 수도 있습니다.

Reveal BI를 사용하여 Blazor 앱에 셀프 서비스 분석 포함 

다음 7단계는 Blazor 애플리케이션에서 풍부한 데이터 시각화 및 대시보드 활성화를 시작하는 것이 얼마나 쉬운지 보여줍니다. 발생해야 하는 클라이언트 및 서버 구성이 모두 있습니다. 시작하려면 SDK를 다운로드하세요.

그런 다음 Blazor 앱에 포함된 셀프 서비스 BI를 간단한 7단계로 만들고 사용하도록 설정해 보겠습니다.

1단계: Blazor 서버 앱 만들기 

이것은 Blazor Server 앱이므로 Visual Studio를 열고 기본값으로 새 Blazor Server 앱을 만듭니다. 완료되면 애플리케이션이 생성됩니다. 프로젝트를 마우스 오른쪽 단추로 클릭하고 Nuget 패키지 관리를 선택한 다음 nuget.org에서 Reveal.Sdk.AspNetCore nuget 패키지를 검색하고 프로젝트에 설치합니다.

2단계: 폴더 설정/대시보드 추가 

Reveal SDK 클라이언트를 테스트하기 위해 구성이 올바른지 확인하는 데 사용할 수 있는 샘플 대시보드를 제공합니다. Reveal 알려진 폴더 구조를 사용하여 대시보드를 자동으로 로드하고 저장합니다. 프로젝트 루트에서 Dashboards라는 폴더를 사용하는 경우 추가 로드/저장 코드를 작성할 필요가 없습니다.

  1. ​Dashboards 라는 폴더를 만듭니다. 
  1. ​https://users.infragistics.com/ Reveal /sample-dashboards.zip zip 파일에서 샘플 대시보드(Marketing, Sales, Campaigns, Manufacturing)의 압축을 풀고 새로 생성된 Dashboard 폴더에 복사합니다. 

3단계: Program.cs 업데이트 

In Program.cs: 

  1. 코드 창 상단에 추가:

Reveal.Sdk 사용; 
 

  1. 이 코드와 함께 Reveal SDK를 사용하고 builder.build 문 앞에 배치하도록 앱에 지시하십시오.

builder.Services.AddControllers().AddReveal();

4단계: 클라이언트 SDK 종속성 추가 

Reveal 클라이언트 JavaScript 종속성을 활성화하려면 Pages\_layout.cshtml 파일을 업데이트해야 합니다. 닫는 </Body> 태그의 끝 부분 앞에 다음 코드를 추가합니다.

<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.5.0/infragistics.reveal.js"></script> 
 
<script type="module"> 
    import "./js/revealview.js"; 
</script>

5단계: Reveal 클라이언트 구성 JavaScript 추가 

SDK 클라이언트에서 사용하는 Reveal는 RevealView를 통해 구성됩니다. RevealView를 로드하려면 클라이언트에 JavaScript 함수를 추가해야 합니다. 또한 대시보드가 렌더링될 때 사용하도록 설정해야 하는 모든 속성을 구성할 수도 있습니다.

  1. ​\wwwroot\ 폴더에 js 폴더 추가  
  1. ​js 폴더에서 다음 코드를 사용하여 공개 보기.js 라는 JavaScript 파일을 추가합니다.

window.loadRevealView = function (viewId, dashboardName) { 

 $.ig.RevealSdkSettings.setBaseUrl('https://samples.revealbi.io/upmedia-backend/reveal-api/');     

 $.ig.RVDashboard.loadDashboard(dashboardName, (dashboard) => { 

        var revealView = new $.ig.RevealView("#" + viewId); 

        revealView.dashboard = dashboard; 

    }); 

}

6단계: 대시보드 로드 

이 Blazor 애플리케이션에서 대시보드를 공개 보기 라는 <div>에 로드할 것입니다. 애플리케이션의 Dashboards 폴더에서 샘플 대시보드를 로드하려면 다음 단계를 따르십시오.

  1. ​Pages\Index.Razor에서 다음 using 문을 추가합니다.
@inject IJSRuntime JSRuntime
  1. 로드할 대시보드를 선택하는 데 사용할 드롭다운 코드를 추가합니다.

<select @onchange="selectedDashboardChanged"> 
    <option>Campaigns</option> 
    <option>Healthcare</option> 
    <option>Manufacturing</option> 
    <option>Marketing</option> 
    <option>Sales</option> 
</select>
  1. 공개 보기 div를 추가하십시오.
<div id="revealView" style="width:100%; height:750px"></div>
  1. 첫 번째 로드 시 캠페인 대시보드를 로드하는 코드 추가
@code { 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (firstRender) 
        { 
            await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", "Campaigns"); 
        } 
    }
}
  1. 올바른 대시보드를 로드하려면 선택에서 변경 사항을 확인합니다.
async void selectedDashboardChanged(ChangeEventArgs e) 
    { 
        await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", e.Value!.ToString()); 
    } 
} 

7단계: 애플리케이션 실행

이 시점에서 Blazor 애플리케이션에서 강력한 BI 기능을 활성화하기 위한 모든 단계가 완료됩니다. 응용 프로그램을 실행하여 결과를 확인하십시오!

Blazor 애플리케이션에 셀프 서비스 BI 포함

전체 자습서를 보려면 Reveal 사용하여 Blazor 앱에 분석을 포함하는 단계를 안내하는 이 비디오를 시청하세요.

내장된 분석 및 비즈니스 인텔리전스와 비즈니스에 대한 데이터의 중요성에 대한 자세한 정보를 보려면 YouTube 채널에서 다른 동영상을 시청하세요. Angular에 분석 포함, Node.js가 포함된 React 앱, JavaScript HTTP 앱, 포함된 BI 대시보드 생성 등과 같은 주제를 다룹니다. 앞으로 전문가가 제공하는 모든 동영상을 보려면 구독하는 것을 잊지 마세요.

또한 Reveal 사용하여 Blazor 앱에 분석 기능을 포함하려고 하지만 도중에 문제가 발생하는 경우 Discord 채널을 통해 제품 팀에 문의하십시오.

또한 무료 제품 둘러보기를 예약하여 Reveal 및 작동 방식에 대해 자세히 알아볼 수 있습니다. 또는 SDK를 다운로드하여 직접 사용해 볼 수도 있습니다.

임베디드 분석 비즈니스 인텔리전스

더 많은 주제

분석 사용 사례 비즈니스 인텔리전스 데이터 기반 의사 결정 데이터 시각화 임베디드 분석
데모 요청