- Autor
Rafael Liendo
rafael.liendo@eigocorp.com
En el área de tecnología y sistemas desde el principio y hasta nuestros días uno de los puntos más importantes para los usuarios es ver la información que manejan las aplicaciones y para eso herramientas como Power BI pueden ofrecer las soluciones que necesite el negocio.
En el presente artículo les mostraré los pasos para poder visualizar reportes de Power BI dentro de una aplicación web bajo MVC, lo cual permite que desde el mismo entorno de la aplicación podemos mostrar por ejemplo en una sección un reporte Power BI con varias pestañas internas para mostrar distinto tipo de información, sin darle la sensación al cliente que esta abandonando el sitio web para ver los reportes en otro lugar.
La funcionalidad de integrar reportes de Power BI o Power BI Embedded es un servicio de Microsoft Azure que permite a desarrolladores de software desplegar reportes, tableros de mando (dashboards), etc en sus productos, permitiendo a los desarrolladores de software enfocarse en su aplicación y dejar la visualización de datos y el manejo analítico de los mismos a un producto especializado en esa área como lo es Power BI.
Para obtener información detallada de los distintos métodos de integración de reportes, capacidad de espacios de trabajo, etc en Power BI pueden dirigirse aquí.
1. El primer paso es la creación de un nuevo proyecto web utilizando Visual Studio.
2. Seleccionamos MVC
3. Una vez culminado este proceso debe generarse el entorno de la nueva aplicación web como sigue.
4. Luego de esto abrimos Power BI Desktop. Esta es la aplicación de Power BI para la creación de archivos de reportes, la pueden descargar de forma gratuita aquí.
5. Luego de instalar y abrir Power BI Desktop aparecerá una pantalla similar a esta. En la parte superior derecha se encuentra la opción para abrir la sesión con su cuenta de Power BI.
6. Para efectos de este artículo utilizaré como fuente de datos una base de datos SQL Server alojada en Azure, sin embargo, ustedes pueden utilizar como origines de datos cualquiera de los mostrados a continuación. Para mas información de este punto pueden consultar el siguiente enlace aquí.
7. Como les indique anteriormente utilizaré una base de datos de una aplicación de ejemplo, la cual tiene sus tablas y vistas desarrolladas bajo el modelo relacional, con esos objetos he construido un reporte con varias pestañas y utilizando varios elementos propios de Power BI, los cuales no explicaré en este artículo ya que se encuentran fuera de su alcance.
8. Para el siguiente paso debemos publicar el reporte elaborado en un área de trabajo de Power BI, a continuación se muestra el sitio web de Power BI luego de iniciar sesión con una cuenta un entorno de trabajo de Power BI. En esta imagen pueden ver que para esta cuenta existen varias áreas de trabajo y se pueden crear mas como lo indica el botón amarillo en la parte inferior de la imagen.
9. Regresando a la aplicación Power BI Desktop, en la esquina superior derecha existe un botón con la opción de "Publicar".
10. Al seleccionar ese botón, se muestra una pantalla con las distintas áreas de trabajo disponibles para la cuenta donde se inició sesión en Power BI. Se selecciona una de las opciones.
11. Luego de seleccionar al área de trabajo y culmine el proceso de publicación debe aparecer una pantalla similar a esta.
12. Una vez publicado el reporte vamos al sitio web de Power BI, específicamente en el área de trabajo donde se publicó el reporte y el mismo ya se encuentra disponible.
13. Ahora debemos ir al sitio https://portal.azure.com para registrar la "aplicación" que en nuestro caso es el reporte Power Bi creado.
14. Creamos el registro de la aplicación
15. Una vez registrada la aplicación debe mostrarse algo como lo siguiente, en donde están una serie de datos que necesitaremos mas adelante en la configuración de la aplicación web.
17. Un punto importante es cambiar unos parámetros de la sección "Manifiest" tal como se muestra a continuación.
18. A partir de ahora me apoyaré en el código ejemplo disponible en GitHub para la comunidad de Microsoft Power BI, el ejemplo que realice esta basado en la estructura de unos de los ejemplos existentes; en ese lugar hay ejemplos desarrollados tanto para Windows Forms como para MVC. Para más información pueden revisar aquí.
19. Basado en el ejemplo "PowerBIEmbedded_AppOwnsData" mencionado en el paso anterior el cual esta basado en MVC, procedemos a agregar esta sección en el archivo Web.config de la aplicación Visual Studio creada en los pasos anteriores. Lo que se está agregando son los parámetros necesarios para poder conectarse al entorno de Power BI donde se encuentra el reporte. Los valores applicationId y tenant se obtienen del registro de la aplicación en Azure.
20. Los valores workspaceId y reportId lo pueden obtener de en la URL del reporte creado en Power BI como se indica a continuación.
21. Seguimos reutilizando el ejemplo del código "PowerBIEmbedded_AppOwnsData", y agregamos los siguientes elementos a nuestro proyecto.
22. En el archivo "Controller" de nuestro proyecto agregamos el siguiente ActionResult
23. Adicionalmente debemos asegurarnos tener estas referencias a nivel de nuestro proyecto de Studio
24. Una vez agregados todos los componentes del código y referencias, lo que queda es ejecutar el proyecto lo cual se muestra a continuación, en donde se visualiza el reporte creado anteriormente en Power BI Desktop, publicado en Power BI web, ya integrado en nuestra aplicación.
Este ejemplo se construyó basado como les había indicado en un código ejemplo base que ofrece Microsoft para poder construir soluciones rápidamente, sin embargo en este paso a paso incluí información que va desde la generación del reporte hasta la ejecución de la aplicación.
Igualmente existe un sito llamado "Microsoft Power BI Embeedded Playground" donde se puede generar una aplicación web preconfigurada, ingresando previamente los datos los entornos de Power BI y Azure con el fin de generar esta aplicación de ejemplo con los valores como applicationID, TenantID, etc. Es una alternativa si desean visualizar un reporte de Power BI de manera rápida en una aplicación web construida en Visual Studio.
Espero que este artículo les sea de utilidad, si quieren aprender más sobre desarrollo de aplicaciones, desarrollo en SharePoint o de SharePoint en general por favor visita nuestro site de Eigo Academy para conocer nuestra oferta de cursos.