Configuración del entorno para el desarrollo de un objeto visual de Power BISet up your environment for developing a Power BI visual

En este artículo, aprenderá a configurar el entorno para desarrollar un objeto visual de Power BI.In this article, you'll learn how to set up your environment for developing a Power BI visual.

Antes de empezar a desarrollar, deberá instalar node.js y el paquete pbiviz.Before you start development, you'll need to install node.js and the pbiviz package. También necesitará crear e instalar un certificado.You'll also need to create and install a certificate. Una vez configurado el entorno local, deberá configurar el servicio Power BI para desarrollar un objeto visual de Power BI.When your local environment is set up, you'll need to configure Power BI service for developing a Power BI visual.

En este artículo, aprenderá a:In this article, you'll learn how to:

  • Instalar nodes.js.Install nodes.js.
  • Instalar pbiviz.Install pbiviz.
  • Crear e instalar un certificado.Create and install a certificate.
  • Configurar el servicio Power BI para desarrollar un objeto visual.Set up Power BI service for developing a visual.
  • Instalar bibliotecas adicionales (necesario para desarrollar un objeto visual).Install additional libraries (required for developing a visual).

Instalación de node.jsInstall node.js

Node.js es un entorno de ejecución de JavaScript basado en la versión 8 del motor de JavaScript de Chrome.Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Permite a los desarrolladores ejecutar cualquier aplicación creada en JavaScript.It allows developers to run any apps created on JavaScript.

  1. Para instalar node.js en un explorador web, vaya a node.js.To install node.js, in a web browser, navigate to node.js.

  2. Descargue el instalador MSI más reciente.Download the latest MSI installer.

  3. Ejecute al instalador y, después, siga los pasos de instalación.Run the installer, and then follow the installation steps. Acepte los términos del contrato de licencia y todos los valores predeterminados.Accept the terms of the license agreement and all defaults.

  4. Reinicie el equipo.Restart your computer.

Instalación de pbivizInstall pbiviz

La herramienta pbiviz, que se escribe con JavaScript, compila el código de origen del objeto visual del paquete pbiviz.The pbiviz tool, which is written using JavaScript, compiles the visual source code of the pbiviz package.

El paquete pbiviz es un proyecto de objeto visual de Power BI comprimido, con todos los scripts y recursos necesarios.The pbiviz package is a zipped Power BI visual project, with all the needed scripts and assets.

  1. Abra Windows  PowerShell y escriba el comando siguiente.Open Windows PowerShell and enter the following command.

    npm i -g powerbi-visuals-tools
    

Creación e instalación de un certificadoCreate and install a certificate

Para que un cliente (su equipo) y un servidor (el servicio Power BI) interactúen de forma segura, se requiere un certificado de Capa de sockets seguros (SSL).For a client (your computer) and a server (Power BI service) to interact securely, a Secure Sockets Layer (SSL) Certificate is required. Sin un certificado para garantizar la seguridad de las interacciones, el explorador las bloqueará.Without a certificate to ensure secure interactions, they will be blocked by the browser.

Este proceso describe la ejecución de un comando de PowerShell que inicia el Asistente para la importación de certificados.This process describes running a PowerShell command that launches the Certificate Import Wizard. Siga los pasos que se indican a continuación para configurar el certificado en el asistente.Follow the steps below to configure the certificate in the wizard.

Importante

No cierre la ventana de PowerShell durante este procedimiento.Do not close the PowerShell window during this procedure.

  1. Abra Windows  PowerShell y escriba el comando siguiente.Open Windows PowerShell and enter the following command.

    pbiviz --install-cert
    

    Este comando hace dos cosas:This command does two things:

    • Devuelve una frase de contraseña.It returns a passphrase. En este caso, la frase de contraseña es 9765328806094.In this case, the passphrase is 9765328806094.
    • También inicia el Asistente para importar certificados.It also starts the Certificate Import Wizard.

    Captura de pantalla del comando de pbivz ejecutado en Windows PowerShellScreenshot of the p b i v i z command executed in Windows PowerShell

  2. En el Asistente para importar certificados, compruebe que la ubicación del almacén se establece en el usuario actual y seleccione Siguiente.In the Certificate Import Wizard, verify that the store location is set to Current User, and select Next.

    Captura de pantalla de la primera ventana del Asistente para importación de certificados, con la opción Ubicación del almacén establecida en el usuario actual.Screenshot of the certificate import wizard's first window, with the store location option set to current user.

  3. En la ventana Archivo para importar, seleccione Siguiente.In the File to Import window, select Next.

  4. En la ventana Protección de clave privada, en el cuadro de texto Contraseña, pegue la frase de contraseña que recibió al ejecutar el comando de PowerShell (paso 1) y seleccione Siguiente.In the Private Key Protection window, in the Password text box, paste the passphrase you received when executing the PowerShell command (step 1) and select Next. En este ejemplo, la frase de contraseña es 9765328806094.In this example, the passphrase is 9765328806094.

    Captura de pantalla de la ventana Protección de clave privada del Asistente para importación de certificados, con el cuadro Contraseña resaltado.Screenshot of the certificate import wizard's private key protection window, with the password box highlighted.

  5. En la ventana Almacén de certificados, seleccione la opción Colocar todos los certificados en el siguiente almacén y seleccione Examinar.In the Certificate Store window, select the Place all certificates in the following store option, and select Browse.

    Captura de pantalla de la ventana Almacén de certificados del Asistente para importación de certificados, con la opción Colocar todos los certificados en el siguiente almacén activa.Screenshot of the certificate import wizard's certificate store window, with the place all certificates in the following store selected.

  6. En la ventana Seleccionar almacén de certificados, seleccione Entidades de certificación raíz de confianza y luego seleccione Aceptar.In the Select Certificate Store window, select Trusted Root Certification Authorities and then select OK.

    Captura de pantalla de la ventana Seleccionar almacén de certificados, con la carpeta Entidades de certificación raíz de confianza activa.Screenshot of the select certificate store window, with the Trusted Root Certification Authorities folder selected.

  7. Seleccione Siguiente en la ventana Almacén de certificados.Select Next in the Certificate Store window.

    Captura de pantalla de la ventana Almacén de certificados del Asistente para importación de certificados, con la carpeta Entidades de certificación raíz de confianza activa y el botón Siguiente resaltado.Screenshot of the certificate import wizard's certificate store window, with the Trusted Root Certification Authorities folder selected, and the next button highlighted.

  8. En la ventana Finalización del Asistente para importación de certificados, compruebe la configuración y seleccione Finalizar.In the Completing the Certificate Import Wizard window, verify your settings and select Finish.

    Nota

    Si recibe una advertencia de seguridad, seleccione .If you receive a security warning, select Yes.

(Opcional) Comprobación de que el entorno está configurado(Optional) Verify that your environment is set up

Confirme que el paquete de herramientas de objetos visuales de Power BI está instalado.Confirm that the Power BI visuals tools package is installed. En PowerShell, ejecute el comando pbiviz y revise la salida, incluida la lista de comandos admitidos.In PowerShell, run the command pbiviz and review the output, including the list of supported commands.

Captura de pantalla de la salida de la ejecución del comando pbiviz en PowerShell.Screenshot of the output of executing the command p b i v i z in PowerShell.

Configuración del servicio Power BI para desarrollar un objeto visualSet up Power BI service for developing a visual

Para desarrollar un objeto visual de Power BI, deberá habilitar la depuración de objetos visuales personalizados en el servicio Power BI.To develop a Power BI visual, you'll need to enable custom visual debugging in Power BI service. Siga las instrucciones de esta sección para habilitar esta opción.Follow the instructions in this section to enable this option.

  1. Inicie sesión en PowerBI.com.Sign in to PowerBI.com.

  2. Vaya a Configuración > Configuración > Configuración.Navigate to Settings > Settings > Settings.

    Captura de pantalla de la opción Configuración, Configuración, Configuración y Menú en el servicio Power BI.Screenshot of the settings, settings, settings, menu option in Power B I service.

  3. En la pestaña General, seleccione Desarrollador.From the General tab, select Developer. En Configuración del desarrollador, active la casilla Habilitar la depuración de objetos visuales personalizados con el objeto visual de desarrollador y seleccione Aplicar.In the Developer Settings select the Enable custom visual debugging using the developer visual check box, and select Apply.

    Captura de pantalla de la opción Habilitar la depuración de objetos visuales personalizados con el objeto visual de desarrollador, en la pestaña Configuración de Power BI, pestaña General.Screenshot of the enable custom visual debugging using the developer visual option, in the Power B I settings, general tab.

Instalación de bibliotecas de desarrolloInstall development libraries

Para desarrollar su propio objeto visual de Power BI, deberá instalar bibliotecas adicionales.To develop your own Power BI visual, you'll need to install additional libraries. En esta sección se describe cómo instalar estas bibliotecas y comprobar que la instalación se ha realizado correctamente.This section describes how to install these libraries and verify that the installation is successful.

Para instalar las bibliotecas enumeradas en este artículo, abra PowerShell y escriba el comando de instalación de cada componente.To install the libraries listed in this article, open PowerShell and enter the installation command for each component.

Nota

Una vez que estas bibliotecas estén instaladas en el equipo, podrá usarlas para cualquier proyecto de objetos visuales de Power BI.Once these libraries are installed on your computer, you'll be able to use them for any Power BI visuals project. Se trata de un procedimiento de instalación que se lleva a cabo una sola vez por máquina.This is a one time installation procedure, per machine.

Biblioteca de JavaScript D3D3 JavaScript library

D3 es una biblioteca de JavaScript para producir visualizaciones de datos dinámicos e interactivos en exploradores web.D3 is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. Se basa los estándares ampliamente implementados Scalable Vector Graphics (SVG), HTML5 y CSS.It relies on widely implemented Scalable Vector Graphics (SVG), HTML5, and CSS standards.

npm i d3@^5.0.0 --save

Definiciones de TypeScriptTypeScript definitions

Instale las definiciones de TypeScript para poder desarrollar el objeto visual de Power BI en TypeScript, un superconjunto de JavaScript.Install TypeScript definitions so that you can develop your Power BI visual in TypeScript, a superset of JavaScript.

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

core-jscore-js

core-js es una biblioteca estándar modular para JavaScript que incluye polyfill para ECMAScript.core-js is a modular standard library for JavaScript that includes polyfills for ECMAScript.

npm i core-js@3.2.1 --save

powerbi-visual-apipowerbi-visual-api

Instale las definiciones de la API de objetos visuales de Power BI.Install the Power BI Visuals API definitions.

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

(Opcional) Comprobación de que la biblioteca D3 está instalada(Optional) Verify that the D3 library is installed

Visual Studio Code (VS Code) es un entorno de desarrollo integrado (IDE) ideal para desarrollar aplicaciones TypeScript.Visual Studio Code (VS Code) is an ideal Integrated Development Environment (IDE) for developing TypeScript applications. En esta sección, usaremos VS Code para comprobar que la biblioteca D3 que necesita para desarrollar el objeto visual de Power BI está correctamente instalada.In this section, we'll use VS Code to verify that the D3 library you need to develop your Power BI visual, is correctly installed.

Nota

En el proceso de comprobación descrito en esta sección se supone que ya tiene un proyecto de objetos visuales de Power BI.The verification process described in this section assumes you have an existing Power BI visuals project. Si no tiene un proyecto de objetos visuales de Power BI, puede crear uno siguiendo las instrucciones de creación de proyectos de Circle Card.If you don't have a Power BI visuals project, you can create one by following the circle card project creation instructions.

  1. Abra VS Code.Open VS Code.

    Sugerencia

    Para abrir VS Code desde PowerShell, ejecute el comando siguiente:You can open VS Code from PowerShell by executing the following command:

    code .
    
  2. En VS Code, abra el menú Archivo y seleccione Abrir carpeta.In VS Code, open the File menu and select Open Folder.

    Captura de pantalla de la opción Abrir carpeta de VS Studio, en el menú Archivo.Screenshot of the VS studio open folder option, in the file menu.

  3. En la ventana Abrir carpeta, seleccione la carpeta que contiene el proyecto de objetos visuales de Power BI y, a continuación, seleccione Seleccionar carpeta.In the Open Folder window, select the folder that contains your Power BI visual project, and select Select Folder.

    Captura de pantalla de la selección de la carpeta del proyecto de objetos visuales de Power BI en la ventana Abrir carpeta de VS Studio.Screenshot of selecting the Power BI visuals project folder in the VS studio open folder window.

  4. En el panel Explorador, expanda la carpeta node_modules para comprobar que la biblioteca D3 se ha instalado.In the Explorer pane, expand the node_modules folder and verify that the d3 library is installed.

    Captura de pantalla de la carpeta 3D en un proyecto de objetos visuales de Power BI, tal y como aparece en VS Code.Screenshot of the 3d folder in a Power BI visuals project, as it appears in VS Code.

  5. En el panel Explorador, expanda node_modules > @types > d3 y compruebe que el archivo index.t.ds se ha instalado.In the Explorer pane, expand node_modules > @types > d3 and verify that the file index.t.ds is installed.

    Captura de pantalla del archivo index.t.ds en un BI proyecto de objetos visuales de Power BI, tal y como aparece en VS Code.Screenshot of the index.t.ds file in a Power BI visuals project, as it appears in VS Code.

Pasos siguientesNext steps