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

  • 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:

  • Instalar nodes.js.
  • Instalar pbiviz.
  • Crear e instalar un certificado.
  • Configurar el servicio Power BI para desarrollar un objeto visual.
  • Instalar bibliotecas adicionales (necesario para desarrollar un objeto visual).

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.

    Captura de pantalla del comando de pbivz ejecutado en 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.

    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.

  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.

    Captura de pantalla de la ventana Protección de clave privada del Asistente para importación de certificados, con el cuadro Contraseña resaltado.

  5. En la ventana Almacén de certificados, seleccione la opción Colocar todos los certificados en el siguiente almacén y seleccione Examinar.

    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.

  6. En la ventana Seleccionar almacén de certificados, seleccione Entidades de certificación raíz de confianza y luego seleccione Aceptar.

    Captura de pantalla de la ventana Seleccionar almacén de certificados, con la carpeta Entidades de certificación raíz de confianza activa.

  7. Seleccione Siguiente en la ventana Almacén de certificados.

    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.

  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.

Captura de pantalla de la salida de la ejecución del comando pbiviz en 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.

    Captura de pantalla de la opción Configuración, Configuración, Configuración y Menú en el servicio Power BI.

  3. En la pestaña General, seleccione Desarrollador. 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.

    Captura de pantalla de la habilitación del modo de desarrollador, en Configuración de Power BI, pestaña General.

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.

    Captura de pantalla de la opción Abrir carpeta de VS Studio, en el menú Archivo.

  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.

    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.

  4. En el panel Explorador, expanda la carpeta node_modules para comprobar que la biblioteca D3 se ha instalado.

    Captura de pantalla de la carpeta 3D en un proyecto de objetos visuales de Power BI, tal y como aparece en VS Code.

  5. En el panel Explorador, expanda node_modules > @types > d3 y compruebe que el archivo index.t.ds se ha instalado.

    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.

Pasos siguientes

Desarrollo de un objeto visual Circle Card de Power BI

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