Configuración del entorno para el desarrollo de un objeto visual de Power BI

  • Artículo
  • Tiempo de lectura: 5 minutos

En este artículo, aprenderá a configurar el entorno para desarrollar un objeto visual de Power BI.

Antes de empezar a desarrollar, deberá instalar node.js y el paquete pbiviz. También necesitará crear e instalar un certificado. Una vez configurado el entorno local, deberá configurar el servicio Power BI para desarrollar un objeto visual de Power BI.

En este artículo, aprenderá a:

Instalación de node.js

Node.js es un entorno de ejecución de JavaScript basado en la versión 8 del motor de JavaScript de Chrome. Permite a los desarrolladores ejecutar cualquier aplicación creada en JavaScript.

Para instalar Node.js, haga lo siguiente:

  1. En un explorador web, vaya a Node.js.

  2. Descargue el instalador MSI recomendado más reciente.

  3. Ejecute al instalador y, después, siga los pasos de instalación. Acepte los términos del contrato de licencia y todos los valores predeterminados.

  4. Reinicie el equipo.

Instalación de pbiviz

La herramienta pbiviz, que se escribe con JavaScript, compila el código de origen del objeto visual del paquete pbiviz.

El paquete pbiviz es un proyecto de objeto visual de Power BI comprimido, con todos los scripts y recursos necesarios.

Abra Windows PowerShell y escriba el comando siguiente para instalar pbiviz.

npm i -g powerbi-visuals-tools

Nota

Es posible que reciba algunas advertencias al ejecutar este comando. No deben impedir la instalación de pbiviz.

Creación e instalación de un certificado

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). Sin un certificado para garantizar la seguridad de las interacciones, el explorador las bloqueará.

Este proceso describe la ejecución de un comando de PowerShell que inicia el Asistente para la importación de certificados. Siga los pasos que se indican a continuación para configurar el certificado en el asistente.

Importante

No cierre la ventana de PowerShell durante este procedimiento.

  1. Abra Windows  PowerShell y escriba el comando siguiente.

    pbiviz --install-cert

    Este comando hace dos cosas:

    • Devuelve una frase de contraseña. En este caso, la frase de contraseña es 9765328806094.
    • También inicia el Asistente para importar certificados.

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

    Nota:

    • Si no tiene permiso para ejecutar pbiviz, inicie PowerShell como administrador y ejecute el comando Set-ExecutionPolicy RemoteSigned; después, vuelva a intentarlo.
    • Si el Asistente para importar certificados no se abre automáticamente, vaya a la ubicación del certificado en Explorador de archivos, haga clic con el botón derecho en él y seleccione Instalar.

  2. En el Asistente para importar certificados, compruebe que la ubicación del almacén se establece en el usuario actual y seleccione Siguiente.

    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.

  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. En este ejemplo, la frase de contraseña es 9765328806094.

    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.

    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.

    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.

    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.

    Nota

    Si recibe una advertencia de seguridad, seleccione Sí.

(Opcional) Comprobación de que el entorno está configurado

Confirme que el paquete de herramientas de objetos visuales de Power BI está instalado. En PowerShell, ejecute el comando pbiviz y revise la salida, incluida la lista de comandos admitidos.

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 visual

Para desarrollar un objeto visual de Power BI, deberá habilitar la depuración de objetos visuales personalizados en el servicio Power BI. Siga las instrucciones de esta sección para habilitar esta opción.

  1. Inicie sesión en PowerBI.com.

  2. Vaya a Configuración>Configuración>Configuración.

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

  3. En la pestaña General, seleccione Desarrollador. En la configuración Desarrollador, active la casilla Habilitar modo de desarrollador y, después, seleccione Aplicar.

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

Instalación de bibliotecas de desarrollo

Para desarrollar su propio objeto visual de Power BI, deberá instalar bibliotecas adicionales. En esta sección se describe cómo instalar estas bibliotecas y comprobar que la instalación se ha realizado correctamente.

Para instalar las bibliotecas enumeradas en este artículo, abra PowerShell y escriba el comando de instalación de cada componente.

Nota

Una vez que estas bibliotecas estén instaladas en el equipo, podrá usarlas para cualquier proyecto de objetos visuales de Power BI. Se trata de un procedimiento de instalación que se lleva a cabo una sola vez por máquina.

Biblioteca de JavaScript D3

D3 es una biblioteca de JavaScript para producir visualizaciones de datos dinámicos e interactivos en exploradores web. Se basa los estándares ampliamente implementados Scalable Vector Graphics (SVG), HTML5 y CSS.

npm i d3@^5.0.0 --save

Definiciones de TypeScript

Instale las definiciones de TypeScript para poder desarrollar el objeto visual de Power BI en TypeScript, un superconjunto de JavaScript.

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

core-js

core-js es una biblioteca estándar modular para JavaScript que incluye polyfill para ECMAScript.

npm i core-js@3.2.1 --save

powerbi-visual-api

Instale las definiciones de la API de objetos visuales de Power BI.

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

(Opcional) Comprobación de que la biblioteca D3 está instalada

Visual Studio Code (VS Code) es un entorno de desarrollo integrado (IDE) ideal para desarrollar aplicaciones TypeScript. 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.

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. 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.

  1. Abra VS Code.

    Sugerencia

    Puede abrir VS Code desde PowerShell ejecutando el comando siguiente desde dentro de la carpeta del proyecto:

    code .

  2. En VS Code, abra el menú Archivo y seleccione Abrir carpeta.

    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.

    Screenshot of selecting the Power B I 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.

    Screenshot of the 3d folder in a Power B I 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 está instalado.

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

Pasos siguientes

Solución de problemas de objetos visuales de Power BI

Desarrollo de un objeto visual Circle Card de Power BI

Crear un objeto visual de Power BI con tecnología de R