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.
Para instalar node.js en un explorador web, vaya a node.js.To install node.js, in a web browser, navigate to node.js.
Descargue el instalador MSI más reciente.Download the latest MSI installer.
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.
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.
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.
Abra Windows PowerShell y escriba el comando siguiente.Open Windows PowerShell and enter the following command.
pbiviz --install-certEste 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.
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.
En la ventana Archivo para importar, seleccione Siguiente.In the File to Import window, select Next.
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.
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.
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.
Seleccione Siguiente en la ventana Almacén de certificados.Select Next in the Certificate Store window.
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 Sí.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.
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.
Inicie sesión en PowerBI.com.Sign in to PowerBI.com.
Vaya a Configuración > Configuración > Configuración.Navigate to Settings > Settings > Settings.
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.
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.
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 .En VS Code, abra el menú Archivo y seleccione Abrir carpeta.In VS Code, open the File menu and select Open Folder.
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.
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.
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.
