Power BI 작업 영역 컬렉션 시작 샘플

Microsoft Power BI 작업 영역 컬렉션을 사용하면 Power BI 보고서를 웹 또는 모바일 애플리케이션에 통합할 수 있습니다. 이 문서에서는 Power BI 작업 영역 컬렉션 시작 샘플을 소개합니다.

중요

Power BI 작업 영역 컬렉션은 2018년 6월 또는 계약에서 명시한 때까지만 사용할 수 있으며 이후에는 사용되지 않습니다. 애플리케이션에서 중단을 방지하기 위해 Power BI Embedded에 대한 마이그레이션을 계획하는 것이 좋습니다. Power BI Embedded에 데이터를 마이그레이션하는 방법에 대한 자세한 내용은 Power BI Embedded에 Power BI 작업 영역 컬렉션 콘텐츠를 마이그레이션하는 방법을 참조하세요.

다른 위치로 이동하기 전에 다음 리소스를 저장할 수 있습니다. 이러한 리소스는 Power BI 보고서를 샘플 앱 및 자체 앱에 통합할 때 도움이 됩니다.

참고

Power BI 작업 영역 컬렉션 시작 샘플을 구성하고 실행하려면 먼저 Azure 구독에 적어도 하나의 작업 영역 컬렉션을 만들어야 합니다. Azure Portal에 작업 영역 컬렉션 을 만드는 방법을 알아보려면 Power BI 작업 영역 컬렉션 시작을 참조하세요.

샘플 앱 구성

샘플 앱을 실행하는 데 필요한 구성 요소에 액세스할 Visual Studio 개발 환경을 설정하는 방법을 단계적으로 안내합니다.

  1. Power BI 작업 영역 컬렉션 - 보고서를 웹앱으로 통합 샘플을 GitHub에서 다운로드하여 압축을 해제합니다.

  2. Visual Studio에서 PowerBI-embedded.sln 을 엽니다. 이 솔루션에 사용되는 패키지를 업데이트하려면 NuGet 패키지 관리자 콘솔에서 Update-Package 명령을 실행해야 할 수 있습니다.

  3. 솔루션을 빌드합니다.

  4. ProvisionSample 콘솔 앱을 실행합니다. 샘플 콘솔 앱에서 작업 영역을 프로비전하고 PBIX 파일을 가져옵니다.

  5. 작업 영역을 프로비전하려면 옵션 1 컬렉션 관리를 선택한 다음 옵션 6 새 작업 영역 프로비전을 선택합니다.

  6. 보고서를 가져오려면 옵션 2 관리 보고를 선택한 다음, 옵션 3 PBIX 데스크톱 파일을 작업 영역에 가져오기를 선택합니다.

  7. 작업 영역 컬렉션 이름 및 선택키를 입력합니다. Azure Portal 이러한 항목을 가져올 수 있습니다. 선택키를 가져오는 방법에 대해 알아보려면 Microsoft Power BI Embedded 시작의 Power BI API 선택키 보기 를 참조하세요.

    Azure Portal 내의 액세스 키

  8. 이 문서의 뒷부분에서 사용할 수 있도록 새로 만든 작업 영역 ID 를 복사하여 저장합니다. 작업 영역 ID를 만든 후 Azure Portal 찾을 수 있습니다.

    Azure Portal 내의 작업 영역 ID

  9. PBIX 파일을 작업 영역으로 가져오려면 옵션 6을 선택합니다. PBIX Desktop 파일을 기존 작업 영역으로 가져옵니다. 사용할 수 있는 PBIX 파일이 없는 경우 소매점 분석 샘플 PBIX를 다운로드할 수 있습니다.

  10. 메시지가 표시되면 데이터 세트의 식별 이름을 입력합니다.

다음과 같은 응답이 표시됩니다.

Checking import state... Publishing
Checking import state... Succeeded

참고

PBIX 파일에 직접 쿼리 연결이 포함되어 있는 경우 연결 문자열을 업데이트하도록 옵션 7을 실행합니다.

이제 Power BI PBIX 보고서를 작업 영역에 가져왔습니다. 다음으로는 Power BI 작업 영역 컬렉션 시작 샘플 웹앱을 실행하는 방법을 살펴보겠습니다.

샘플 웹앱 실행

웹앱 샘플은 작업 영역으로 가져온 보고서를 렌더링하는 샘플 애플리케이션입니다. 웹앱 샘플을 구성하는 방법은 다음과 같습니다.

  1. PowerBI-embedded Visual Studio 솔루션에서 EmbedSample 웹 애플리케이션을 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 선택합니다.

  2. web.configEmbedSample 웹 애플리케이션에서 appSettings, 즉 AccessKey, WorkspaceCollection 이름 및 WorkspaceId를 편집합니다.

    <appSettings>
        <add key="powerbi:AccessKey" value="" />
        <add key="powerbi:ApiUrl" value="https://api.powerbi.com" />
        <add key="powerbi:WorkspaceCollection" value="" />
        <add key="powerbi:WorkspaceId" value="" />
    </appSettings>
    
  3. EmbedSample 웹 애플리케이션을 실행합니다.

EmbedSample 웹 애플리케이션을 실행하면 왼쪽 탐색 패널에 보고서 메뉴가 포함되어야 합니다. 가져온 보고서를 보려면 보고서를 확장하고 보고서를 클릭합니다. 소매 분석 샘플 PBIX를 가져온 경우 샘플 웹앱이 다음과 같이 보입니다.

샘플 애플리케이션 내의 샘플 왼쪽 탐색 창

보고서를 클릭하면 EmbedSample 웹 애플리케이션이 다음과 같이 표시되어야 합니다.

애플리케이션 내에 표시되는 샘플 보고서

샘플 코드 탐색

Microsoft Power BI 작업 영역 컬렉션 샘플은 Power BI 보고서를 앱에 통합하는 방법을 보여주는 웹앱의 예입니다. MVC(Model-View-Controller) 디자인 패턴을 사용하여 모범 사례를 보여 줍니다. 이 섹션에서는 PowerBI-embedded 웹앱 솔루션 내에서 탐색할 수 있는 샘플 코드 부분을 중점적으로 살펴봅니다. MVC(Model-View-Controller) 패턴은 도메인의 모델링, 프레젠테이션 및 작업을 사용자 입력에 따라 모델, 보기 및 제어의 세 가지 별도 클래스로 구분합니다. MVC에 대한 알아보려면 ASP.NET에 대해 알아보기를 참조하세요.

Microsoft Power BI 작업 영역 컬렉션 샘플 코드는 다음과 같이 구분됩니다. 각 섹션에는 샘플 코드를 쉽게 찾을 수 있도록 PowerBI-embedded.sln 솔루션에 파일 이름이 포함되어 있습니다.

참고

이 섹션에서는 코드가 작성된 방법을 보여 주는 샘플 코드에 대해 요약합니다. 전체 샘플을 보려면 Visual Studio에서 PowerBI-embedded.sln을 로드하세요.

모델

이 샘플에는 ReportsViewModelReportViewModel이 있습니다.

ReportsViewModel.cs: 여러 Power BI 보고서를 나타냅니다.

public class ReportsViewModel
{
    public List<Report> Reports { get; set; }
}

ReportViewModel.cs: 하나의 Power BI 보고서를 나타냅니다.

public class ReportViewModel
{
    public IReport Report { get; set; }

    public string AccessToken { get; set; }
}

연결 문자열

연결 문자열은 다음 형식이어야 합니다.

Data Source=tcp:MyServer.database.windows.net,1433;Initial Catalog=MyDatabase

일반적인 서버 및 데이터베이스 특성을 사용할 수 없습니다. 예: Server=tcp:MyServer.database.windows.net,1433;Database=MyDatabase,

보기

보기를 통해 여러 Power BI 보고서 및 하나의 Power BI 보고서 표시를 관리합니다.

Reports.cshtml: Model.Reports를 반복하여 ActionLink를 만듭니다. ActionLink는 다음과 같이 구성됩니다.

부분 Description
제목 보고서의 이름입니다.
QueryString 보고서 ID에 대한 링크입니다.
<div id="reports-nav" class="panel-collapse collapse">
    <div class="panel-body">
        <ul class="nav navbar-nav">
            @foreach (var report in Model.Reports)
            {
                var reportClass = Request.QueryString["reportId"] == report.Id ? "active" : "";
                <li class="@reportClass">
                    @Html.ActionLink(report.Name, "Report", new { reportId = report.Id })
                </li>
            }
        </ul>
    </div>
</div>

Report.cshtml: Model.AccessTokenPowerBIReportFor에 대한 람다 식을 설정합니다.

@model ReportViewModel

...

<div class="side-body padding-top">
    @Html.PowerBIAccessToken(Model.AccessToken)
    @Html.PowerBIReportFor(m => m.Report, new { style = "height:85vh" })
</div>

컨트롤러

DashboardController.cs: 앱 토큰을 전달하는 PowerBIClient를 만듭니다. 자격 증명을 가져오기 위해 서명 키에서 JWT(JSON Web Token)가 생성됩니다. 자격 증명PowerBIClient 인스턴스를 만드는 데 사용됩니다. PowerBIClient 인스턴스가 작성되면 GetReports() 및 GetReportsAsync()를 호출할 수 있습니다.

CreatePowerBIClient()

private IPowerBIClient CreatePowerBIClient()
{
    var credentials = new TokenCredentials(accessKey, "AppKey");
    var client = new PowerBIClient(credentials)
    {
        BaseUri = new Uri(apiUrl)
    };

    return client;
}

ActionResult Reports()

public ActionResult Reports()
{
    using (var client = this.CreatePowerBIClient())
    {
        var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId);

        var viewModel = new ReportsViewModel
        {
            Reports = reportsResponse.Value.ToList()
        };

        return PartialView(viewModel);
    }
}

Task<ActionResult> Report(string reportId)

public async Task<ActionResult> Report(string reportId)
{
    using (var client = this.CreatePowerBIClient())
    {
        var reportsResponse = await client.Reports.GetReportsAsync(this.workspaceCollection, this.workspaceId);
        var report = reportsResponse.Value.FirstOrDefault(r => r.Id == reportId);
        var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId, report.Id);

        var viewModel = new ReportViewModel
        {
            Report = report,
            AccessToken = embedToken.Generate(this.accessKey)
        };

        return View(viewModel);
    }
}

앱에 보고서 통합

보고서를 만든 후에는 IFrame을 사용하여 Power BI 보고서를 포함합니다. 다음은 Microsoft Power BI 작업 영역 컬렉션 샘플의 powerbi.js 코드 조각입니다.

init: function() {
    var embedUrl = this.getEmbedUrl();
    var iframeHtml = '<iframe style="width:100%;height:100%;" src="' + embedUrl + 
        '" scrolling="no" allowfullscreen="true"></iframe>';
    this.element.innerHTML = iframeHtml;
    this.iframe = this.element.childNodes[0];
    this.iframe.addEventListener('load', this.load.bind(this), false);
}

애플리케이션에 포함된 보고서 필터링

URL 구문을 사용하여 포함된 보고서를 필터링할 수 있습니다. 이렇게 하려면 지정된 필터를 사용하여 eq 연산자가 포함된 $filter 쿼리 문자열 매개 변수를 iFrame src url에 추가합니다. 필터 쿼리 구문은 다음과 같습니다.

https://app.powerbi.com/reportEmbed
?reportId=d2a0ea38-...-9673-ee9655d54a4a&
$filter={tableName/fieldName}%20eq%20'{fieldValue}'

참고

{tableName/fieldName}은(는) 공백이나 특수 문자를 포함할 수 없습니다. {fieldValue}은(는) 단일 범주 값을 허용합니다.

참고 항목

일반적인 Microsoft Power BI 작업 영역 컬렉션 시나리오
Power BI 작업 영역 컬렉션에서 인증 및 권한 부여
보고서 포함
데이터 세트에서 새 보고서 만들기
Power BI Desktop
JavaScript 포함 샘플

궁금한 점이 더 있나요? Power BI 커뮤니티를 이용하세요.