Configurare l'ambiente per lo sviluppo di un oggetto visivo di Power BI

In questo articolo si apprenderà come configurare l'ambiente per lo sviluppo di un oggetto visivo di Power BI.

Prima di iniziare lo sviluppo, è necessario installare node.js e il pacchetto pbiviz. È anche necessario creare e installare un certificato. Quando l'ambiente locale è configurato, è necessario configurare il servizio Power BI per lo sviluppo di un oggetto visivo di Power BI.

In questo articolo si apprenderà come:

Installare node.js

Node.js è un runtime JavaScript basato sul motore V8 JavaScript di Chrome. Consente agli sviluppatori di eseguire qualsiasi app creata in JavaScript.

Per installare node.js:

  1. In un Web browser passare a node.js.

  2. Scaricare il programma di installazione MSI consigliato più recente.

  3. Eseguire il programma di installazione e quindi seguire le istruzioni per l'installazione. Accettare le condizioni del contratto di licenza e tutte le impostazioni predefinite.

  4. Riavviare il computer.

Installare pbiviz

Lo strumento pbiviz, scritto usando JavaScript, compila il codice sorgente dell'oggetto visivo del pacchetto pbiviz.

Il pacchetto pbiviz è un progetto di oggetti visivi di Power BI compresso con tutti gli script e gli asset necessari.

Per installare pbiviz, aprire Windows PowerShell e immettere il comando seguente.

npm i -g powerbi-visuals-tools

Nota

Quando si esegue questo comando, è possibile che vengano visualizzati alcuni avvisi. Non devono impedire l'installazione di pbiviz .

Creare e installare un certificato

Affinché un client (computer) e un server (servizio Power BI) interagiscano in modo sicuro, è necessario un certificato SSL (Secure Sockets Layer). Senza un certificato che ne garantisca la sicurezza, le interazioni verranno bloccate dal browser.

Questo processo descrive l'esecuzione di un comando di PowerShell che avvia l'Importazione guidata certificati. Seguire la procedura riportata di seguito per configurare il certificato nella procedura guidata.

Importante

Non chiudere la finestra di PowerShell durante questa procedura.

  1. Aprire Windows PowerShell e immettere il comando seguente.

    pbiviz --install-cert
    

    Il comando esegue due operazioni:

    • Restituisce una passphrase. In questo caso, la passphrase è 9765328806094.
    • Viene anche avviata la procedura guidata di importazione del certificato.

    Screenshot of the p b i v i z command executed in Windows PowerShell

    Nota

    • Se non si dispone dell'autorizzazione per eseguire pbiviz, avviare PowerShell come amministratore ed eseguire il comando Set-ExecutionPolicy RemoteSigned, quindi riprovare.
    • Se l'Importazione guidata certificati non viene aperta automaticamente, passare al percorso del certificato in Esplora file, fare clic con il pulsante destro del mouse su di esso e scegliere Installa.
  2. Nell'Importazione guidata certificati verificare che il percorso dell'archivio sia impostato su Utente corrente e selezionare Avanti.

    Screenshot of the certificate import wizard's first window, with the store location option set to current user.

  3. Nella finestra File da importare selezionare Avanti.

  4. Nella finestra Protezione della chiave privata nella casella di testo Password incollare la passphrase ricevuta durante l'esecuzione del comando di PowerShell (passaggio 1) e selezionare Avanti. In questo esempio la passphrase è 9765328806094.

    Screenshot of the certificate import wizard's private key protection window, with the password box highlighted.

  5. Nella finestra Archivio certificati selezionare l'opzione Colloca tutti i certificati nel seguente archivio e selezionare Sfoglia.

    Screenshot of the certificate import wizard's certificate store window, with the place all certificates in the following store selected.

  6. Nella finestra Selezione archivio certificati selezionare Autorità di certificazione radice attendibili e quindi selezionare OK.

    Screenshot of the select certificate store window, with the Trusted Root Certification Authorities folder selected.

  7. Selezionare Avanti nella finestra Archivio certificati.

    Screenshot of the certificate import wizard's certificate store window, with the Trusted Root Certification Authorities folder selected, and the next button highlighted.

  8. Nella finestra Completamento dell'Importazione guidata certificati verificare le impostazioni e selezionare Fine.

    Nota

    Se viene visualizzato un avviso di sicurezza, selezionare .

(Facoltativo) Verificare che l'ambiente sia configurato

Verificare che sia installato il pacchetto degli strumenti per oggetti visivi di Power BI. In PowerShell eseguire il comando pbiviz ed esaminare l'output, incluso l'elenco dei comandi supportati.

Screenshot of the output of executing the command p b i v i z in PowerShell.

Configurare il servizio Power BI per lo sviluppo di un oggetto visivo

Per sviluppare un oggetto visivo di Power BI, è necessario abilitare il debug di oggetti visivi personalizzati nel servizio Power BI. Per abilitare questa opzione, seguire le istruzioni riportate in questa sezione.

  1. Accedere a PowerBI.com.

  2. Passare a Impostazioni>Impostazioni>Impostazioni.

    Screenshot of the settings, settings, settings, menu option in Power B I service.

  3. Nella scheda Generale selezionare Sviluppatore. Nell'impostazione Sviluppatore selezionare la casella di controllo Abilita modalità sviluppatore e quindi selezionare Applica.

    Screenshot of the enable developer mode, in the Power BI settings, general tab.

Installare le librerie di sviluppo

Per sviluppare un oggetto visivo di Power BI, è necessario installare librerie aggiuntive. Questa sezione descrive come installare le librerie e verificare che l'installazione sia stata eseguita correttamente.

Per installare le librerie elencate in questo articolo, aprire PowerShell e immettere il comando di installazione per ogni componente.

Nota

Dopo aver installato le librerie nel computer, sarà possibile usarle per qualsiasi progetto di oggetti visivi di Power BI. Questa procedura di installazione viene eseguita una sola volta per computer.

Libreria JavaScript D3

D3 è una libreria JavaScript per la creazione di visualizzazioni dei dati dinamiche e interattive nei Web browser. Si basa su standard SVG (Scalable Vector Graphics), HTML5 e CSS ampiamente implementati.

npm i d3@^5.0.0 --save

Definizioni TypeScript

Installare le definizioni TypeScript in modo da poter sviluppare l'oggetto visivo di Power BI in TypeScript, un superset di JavaScript.

npm i @types/d3@^5.0.0 --save

core-js

core-js è una libreria standard modulare per JavaScript che include i polyfill per ECMAScript.

npm i core-js@3.2.1 --save

powerbi-visual-api

Installare le definizioni delle API degli oggetti visivi di Power BI.

npm i powerbi-visuals-api --save-dev

(Facoltativo) Verificare che la libreria D3 sia installata

Visual Studio Code (VS Code) è un ambiente di sviluppo integrato (IDE) ottimale per lo sviluppo di applicazioni TypeScript. In questa sezione si userà Visual Studio Code per verificare che la libreria D3 necessaria per sviluppare l'oggetto visivo di Power BI sia installata correttamente.

Nota

Il processo di verifica descritto in questa sezione presuppone che sia presente un progetto di oggetti visivi di Power BI. Se non è presente un progetto di oggetti visivi di Power BI, è possibile crearne uno seguendo le istruzioni per la creazione del progetto di circle card.

  1. Aprire Visual Studio Code.

    Suggerimento

    È possibile aprire VS Code da PowerShell eseguendo il comando seguente dalla cartella del progetto:

    code .
    
  2. In VS Code aprire il menu File e selezionare Apri cartella.

    Screenshot of the VS studio open folder option, in the file menu.

  3. Nella finestra Apri cartella selezionare la cartella che contiene il progetto di oggetti visivi di Power BI e selezionare Seleziona cartella.

    Screenshot of selecting the Power B I visuals project folder in the VS studio open folder window.

  4. Nel riquadro Esplora espandere la cartella node_modules e verificare che la libreria d3 sia installata.

    Screenshot of the 3d folder in a Power B I visuals project, as it appears in VS Code.

  5. Nel riquadro Esplora espandere node_modules >@types> d3 e verificare che il file index.t.ds sia installato.

    Screenshot of the index.t.ds file in a Power B I visuals project, as it appears in VS Code.

Passaggi successivi