Como Acessar Power BI Rest API Parte 3

No post anterior, desenvolvemos nosso servidor backend que irá disponibilizar os tokens embedded que usaremos para renderizar no frontend os dashboards.

Leia também a parte 1

Leia também a parte 2

Nesse artigo iremos programar nossa página de exibição dos dashboards utilizando NextJS. É possível utilizar Angular caso deseje também.

Programando o Frontend

Para criar uma aplicação NextJS do zero utilizamos o comando:

npx create-next-app@latest

E podemos realizar as seguintes configurações abaixo, ou se desejar, pode alterar conforme sua necessidade.

Com a aplicação criada vamos instalar as dependências do powerbi client, com seguinte comando:

npm install powerbi-client powerbi-client-react

Agora vamos editar o arquivo page.tsx que estar em src/app para o código abaixo:

'use client'; // Diretiva do Next.js para indicar que este componente é client-side (não server-side)

// Importa o componente PowerBIEmbed da biblioteca oficial para React
import { PowerBIEmbed } from 'powerbi-client-react';
// Importa os modelos e enums necessários, como TokenType
import { models } from 'powerbi-client';
// Importa os hooks do React para controlar estado e efeitos colaterais
import { useEffect, useState } from 'react';

// Componente principal que renderiza o relatório do Power BI
export default function ReportViewer() {
  // Estado para armazenar a configuração necessária para embutir o relatório
  const [config, setConfig] = useState<models.IReportEmbedConfiguration | null>(null);

  // Hook useEffect: roda uma vez ao carregar o componente
  useEffect(() => {
    // Faz uma chamada para o backend (FastAPI) para obter o token e as informações do relatório
    fetch('http://localhost:8000/api/powerbi/embedded-token/id-do-seu-workspace-aqui/id-do-seu-relatorio-aqui')
      .then(res => res.json()) // Converte a resposta para JSON
      .then(data => {
        // Define a configuração do relatório com os dados retornados
        setConfig({
          type: 'report', // Tipo de objeto Power BI (pode ser 'report', 'dashboard', etc.)
          tokenType: models.TokenType.Embed, // Tipo de token (usamos o token de incorporação)
          accessToken: data.accessToken,     // Token de acesso gerado pelo backend
          embedUrl: data.embedUrl,           // URL do relatório incorporável
          id: data.reportId,                 // ID do relatório
          settings: {
            panes: {                         // Configurações de interface do relatório
              filters: { visible: false },   // Oculta o painel de filtros
              pageNavigation: { visible: false } // Oculta a navegação de páginas
            }
          }
        });
      });
  }, []); // O array vazio garante que o efeito execute apenas uma vez

  // Renderização condicional: se a configuração já foi carregada, renderiza o relatório
  return config ? (
    <div className='min-h-screen container mx-auto'>
      {/* Título e descrição da página */}
      <h1 className="text-2xl font-bold mb-4">Relatório Power BI</h1>
      <p className="mb-4 text-white">Este é um exemplo de como integrar um relatório do Power BI em uma aplicação React.</p>
      <p className="mb-4">O relatório é carregado usando o PowerBIEmbed e configurado com um token de acesso obtido do backend.</p>

      {/* Área que contém o relatório em si */}
      <div className="mt-8 grid w-full grid-cols-1 gap-4">
        <div className="flex bg-white container mx-auto p-4 rounded-lg shadow-md flex-col">
          {/* Componente responsável por renderizar o relatório Power BI */}
          <PowerBIEmbed
            embedConfig={config}               // Configuração de incorporação
            cssClassName="report-style-class"  // Classe CSS personalizada
          />
        </div>
      </div>
    </div>
  ) : (
    // Caso o config ainda não tenha sido carregado, exibe uma mensagem de carregamento
    <div>Carregando relatório...</div>
  );
}

Para obter manualmente o workspace ID e o report ID podemos acessar o workspace onde estar nosso relatório depois abrirmos nosso relatório que desejamos renderizar e cópia os IDs que estar na URL, para fins didáticos. O que estar a frente de groups é o ID do workspace e a frente de reports o id do relatório.

Fonte Imagem: Própria.

Futuramente você pode criar uma rotina em seu backend para obter os ids de forma automática, fazendo pesquisa por nome.

No nosso global.css iremos adicionar apenas o seguinte:

.report-style-class {
  height: 80vh !important;
  width: 80% !important;
  margin: auto !important;
}

Com isso feito executamos nossa aplicação frontend:

npm run dev

E acessamos no link localhost:3000 para vermos nossa página.

Com isso finalizamos nosso tutorial e temos o mínimo para criar uma plataforma de visualização de dashboard do power bi para entrega para clientes externos ao domínio de sua empresa. Mas informações sobre Rest API do power BI é possível ver através do link oficial.

Referência:

https://learn.microsoft.com/pt-br/rest/api/power-bi/

https://www.sqlshack.com/how-to-access-power-bi-rest-apis-programmatically/

Obrigado e até a próxima.