Créer une application React qui affiche les données PowerBI à l'aide de REST

Introduction

Souvent, un client souhaite une sorte de vue personnalisée des données dont il dispose dans PowerBI. La vérité est que, aussi puissant soit-il, PowerBI, comme tous les outils de BI, offre une personnalisation limitée. Cependant, PowerBI est livré avec une puissante interface RESTful que nous pouvons utiliser pour afficher les données sous-jacentes comme nous le souhaitons. Cela a l'avantage d'utiliser la mise en cache, le moteur d'agrégation de PowerBI et de nombreuses autres améliorations et informations uniques sur les données dans notre propre interface personnalisée. Cela peut aller d'une application Web à une application mobile en passant par un matériel spécifique. Dans cet article rapide, je vais vous montrer les bases de l'utilisation d'un jeu de données PowerBI dans une application Web personnalisée via REST.

Conditions

• Accès à un abonnement Azure (vous pouvez en obtenir un gratuitement)
• Accéder à PowerBI
• Un compte Github (c'est gratuit)
• Code Visual Studio
• NodeJSName

Installer

Réagir à l'application

Nous allons cloner un référentiel, vous n'avez pas besoin de créer manuellement l'application React à ce stade.

Extensions de code VS

Dans le code VS, installez à la fois leExtension Githubet leApplications Web statiques Azure extension. Une fois les deux installés, nous lierons github à vs code.Ce guidemontre comment lier le compte, mais vous n'avez pas encore besoin de créer un référentiel car cela sera fait ultérieurement.

Création de l'application Web

Maintenant, depuis l'extension Azure, nous allons sélectionner le bouton "créer une nouvelle webapp". Cela devrait vous guider à travers les mouvements de création de l'application dans azur ainsi que la création d'un nouveau référentiel dans Github.

Une fois cela fait, vous pouvez accéder au contrôle de code source et créer un commit vide. Cela publiera votre application Web sur Azure.

Si vous accédez à votre portail Azure sous des applications Web statiques, vous devriez voir l'URL de votre application Web.

Préparer PowerBI

Création d'un jeu de données

À cette fin, nous allons créer un petit ensemble de données dans PowerBI avec des données que nous agrégerons plus tard afin de montrer certains KPI.

L'ensemble de données

J'ai créé une feuille Excel avec quelques exemples de données.

J'ai importé l'ensemble de données dans PowerBI et saisi l'ID de l'URL car nous en aurons besoin plus tard.

Activation de REST

Afin d'utiliser leAPI REST PowerBI , nous devrons d'abord l'activer. Pour ce faire, nous enregistrons l'application auprès d'Azure.Voici un guide sur la façon de faire cela. Nous utiliserons leintégrer pour mon organisation option et une fois que vous avez terminé, vous devriez avoir un identifiant et un secret d'application. Lors de la sélection des API qui seront disponibles, vous pouvez sélectionnerLire tout le rapportsableLire tous les ensembles de données.

Ajout de points de terminaison

Cela aurait créé un enregistrement d'application pour vous dans Azure. Allez dans vos applications (sous Accueil -> Enregistrements d'applications) et vous devriez le voir là-bas. Ajoutez les points de terminaison pour tester votre application. En fin de compte, vous y ajouterez le domaine final de votre application Web.

Construire l'application

Exemple d'application

Pour les besoins de cette démonstration, j'ai utilisé un exemple d'application qui utilise déjà les modules de nœud Azure MSAL. Vous pouvez voir l'application ici :https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-router-sample . Ce que j'ai fait, c'est cloner l'application, puis la publier dans mon référentiel github.

Configuration de l'authentification

leauthConfig.js Le fichier contient des informations sur l'authentification. Modifiez les champs d'application à la ligne 57 pour inclure les éléments suivants :

["User.Read", "Mail.Read", "https://analysis.windows.net/powerbi/api/Dataset.Read.All"]

Ajoutez le point de terminaison PowerBI aux ressources protégées.

pbiDataset : { point de terminaison : "https://api.powerbi.com/v1.0/myorg/datasets", étendues :["https://analysis.windows.net/powerbi/api/Dataset.Read.All"]}

Ajout d'un onglet PowerBI.

L'application ci-dessus a un onglet nommé Locataire. Il utilise l'API REST viaaller chercher . Nous allons le dupliquer et modifier lerécupérer.jsfichier un peu pour gérer les requêtes POST que PowerBI doit effectuer.

Modificationrécupérer.js

Accédez à src/fetch.js de votre exemple d'application et modifiez le fichier comme tel :

 /* * Copyright (c) Microsoft Corporation.  Tous les droits sont réservés.  * Licence sous la licence MIT.  */ /** * Effectue une requête GET à l'aide de l'en-tête d'autorisation.  Pour en savoir plus, visitez : * https://tools.ietf.org/html/rfc6750 * @param {string} accessToken * @param {string} apiEndpoint * @param {string} method * @param {json} body */ export const callApiWithToken = async(accessToken, apiEndpoint, method = "GET", headers = new Headers(), body) => { //const headers = new Headers();  const porteur = `Porteur ${accessToken}` ;  headers.append("Autorisation", porteur);  options const = { méthode : méthode, en-têtes : en-têtes, corps : JSON.stringify(body) } ;  return fetch(apiEndpoint, options) .then(response => response.json()) .catch(error => console.log(error));  }

En faisant cela, nous ajoutons la possibilité de modifier la méthode, les en-têtes et de soumettre un corps.

Création d'un onglet KPI

Allez à laLocataire.jsxfichier, dupliquez-le et renommez-le enKPIs.jsx . Nous allons le modifier comme ci-dessous. Les modifications incluent les appels aux points de terminaison PowerBI nouvellement configurés, la création de zones KPI à partir des données PowerBI et la coloration des zones.

 import { useEffect, useState } de "react" ;  import { MsalAuthenticationTemplate, useMsal, useAccount } de "@azure/msal-react" ;  import { InteractionType, EventType } de "@azure/msal-browser" ;  import { loginRequest, protectedResources } de "../authConfig" ;  import { callApiWithToken } de "../fetch" ;  importer le bouton depuis "react-bootstrap/Button" ;  importer la carte depuis "react-bootstrap/Card" ;  importer la ligne de "react-bootstrap/Row" ;  importer Col depuis "react-bootstrap/Col" ;  corps const = { "requêtes":[
        {
            "query": "EVALUATE ALL(Sheet1)"
        }
    ]} const bgColors =["#219ebc","#023047","#fb8500"] ;  const KPIContent = () => { /** * useMsal est un crochet qui renvoie l'instance PublicClientApplication, * un tableau de tous les comptes actuellement connectés et une valeur inProgress * qui vous indique ce que msal est en train de faire.  Pour en savoir plus, visitez : * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md */ const { instance, accounts, inProgress } = useMsal();  compte const = useAccount(comptes[0] ||  {});  constante[datasetData, setDatasetData] = useState(null);  useEffect(() => { /** * Afin d'obtenir la réponse directe de l'appel de l'API buyerTokenRedirect(), enregistrez un événement * et écoutez ACQUIRE_TOKEN_SUCCESS. Assurez-vous de supprimer l'événement une fois le composant démonté. Pour plus d'informations, * visitez : https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/events.md */ // Ceci sera exécuté sur le composant mount const callbackId = instance .addEventCallback((message) => { // Ceci sera exécuté chaque fois qu'un événement est émis après l'enregistrement de ce rappel if (message.eventType === EventType.ACQUIRE_TOKEN_SUCCESS) { const response = message.payload; const headers = new Headers (); headers.append("Content-Type", "application/json"); // Faites quelque chose avec la réponse callApiWithToken(response.accessToken, protectedResources.pbiDataset.endpoint + '/ac6ea259-x1e4-4329-8ae4-fc0368fa3668 /executeQueries', "POST", en-têtes, corps) .then(response => { console.log("requesting"); setDatasetData(response); console.log(response); }); } });  return () => { // Ceci sera exécuté lors du démontage du composant if (callbackId) { instance.removeEventCallback(callbackId);  } } },[account, inProgress, instance] );  const requestDatasetData = () => { instance.acquireTokenRedirect({ scopes : protectedResources.pbiDataset.scopes, }).catch(error => console.log(error)) } return ( <> {datasetData ?  datasetData.results[0].les tables[0].rows.map((kpi, je) => { retour
                    
                        
                            ${kpi["Sheet1[Sales]"]}
                            Année : {kpi["Sheet1[Year]"]}
                            *Ventes pour {kpi["Sheet1[Customers]"]} les clients.
                        
                    
            }) : "rien pour le moment"}
            

                Demander des données de jeu de données
            
        >
     );  } ;  /** * Le composant `MsalAuthenticationTemplate` affichera ses enfants si un utilisateur est authentifié * ou tente de connecter un utilisateur. Fournissez-lui simplement le type d'interaction que vous souhaitez utiliser * (redirection ou popup) et éventuellement un[request object] (https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md) * à transmettre à l'API de connexion, un composant à afficher lorsque l'authentification est en cours ou un composant à afficher en cas d'erreur.  Pour en savoir plus, visitez : * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md */ export const KPIs = ( ) => { const authRequest = { ...loginRequest } ;  retourner (
            
        
    ) } ;

Tapezconstruction d'exécution npm dans votre terminal VS et un navigateur devrait apparaître avec votre application. Accédez à l'onglet "KPIs" que vous avez créé et cliquez sur "Request Dataset Data". Il devrait passer par le processus d'authentification et vous devriez pouvoir voir vos KPI en direct alimentés par PowerBI !

Conclusion

Voilà! Bien qu'il s'agisse d'un exemple simple, vous pouvez facilement voir comment nous pouvons manipuler entièrement la façon dont nous voulons afficher les données de PowerBI. Cela peut être utilisé dans un certain nombre d'applications, pas seulement sur le Web. Pouvez-vous penser à d'autres applications? Trouvez-vous cela utile ? Contactez-moi sur LinkedIn !

A propos de l'auteur

Roberto est un ingénieur (MS) passionné par l'automatisation, les solutions basées sur les données et la technologie en général. Il parle presque toujours de quelque chose de nouveau dans le monde de la technologie et aime apprendre à ce sujet. Il a également fait des choses assez intéressantes à la fois personnelles et professionnelles. Actuellement, il développe des solutions pour toutes sortes de clients chez Perficient, Inc. Ses compétences les plus pointues sont l'analyse et l'intelligence d'affaires (MicroStrategy, Tableau, PowerBI), mais il a de l'expérience dans la conception d'une plénitude de solutions et d'intégrations allant du front-end au client. back-end, transactionnel et côté serveur. Avant Perficient, il a travaillé chez MicroStrategy, Inc. où il a aidé à améliorer le produit en guidant son équipe à travers les tests de performance et de fiabilité ainsi qu'en traitant les problèmes des clients. Avant cela, il a travaillé comme ingénieur de projet et développeur web.

Plus de cet auteur