> For the complete documentation index, see [llms.txt](https://navixy.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://navixy.com/docs/analytics/es/dashboard-studio/open-source-studio.md). # Studio de código abierto Implemente Dashboard Studio en su infraestructura con personalización completa del frontend de React. Mantenga la paridad de funciones mientras controla la marca y el diseño Dashboard Studio ofrece una opción de código abierto (licencia MPL-2.0) para equipos técnicos que necesitan personalización del frontend más allá de la configuración estándar. Modifique la interfaz de usuario, integre aplicaciones existentes o implemente sistemas de diseño personalizados mientras mantiene todas las capacidades de análisis. ### Casos de uso Escenarios comunes en los que un enfoque de código abierto puede ser útil: * Integración de marca y sistema de diseño personalizados * Flujos de trabajo de interfaz de usuario especializados para sectores específicos * Análisis integrados en aplicaciones propietarias * Implementaciones de marca blanca para socios ### Requisitos previos | Componente | Requisito | | ------------------------- | ---------------------------------------------------------- | | **Acceso a IoT Query** | Instancia activa con credenciales de base de datos válidas | | **Autenticación** | Token JWT de Navixy Authentication Gateway | | **Entorno de desarrollo** | Nodo.js 18+, npm, Git | | **Habilidades técnicas** | React, TypeScript, PostgreSQL, desarrollo web moderno | {% hint style="info" %} Consulte [App Connect](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) en nuestra documentación para desarrolladores para obtener detalles sobre la implementación de la autenticación. {% endhint %} ## Componentes de código abierto La implementación de código abierto de Dashboard Studio consta de tres componentes principales: ### Repositorio de GitHub **Ubicación:** El repositorio contiene la aplicación completa de frontend en React, servicios de backend en Nodo.js, archivos de configuración y documentación exhaustiva. Clone el repositorio para el desarrollo local o para revisar la arquitectura antes de la implementación. ### Paquete npm Distribución optimizada para la integración en proyectos de JavaScript. El paquete refleja la base de código de GitHub con el flujo de instalación estándar de npm. Consulte el repositorio [README](https://github.com/Navixy/navixy-iot-query-dashboard?tab=readme-ov-file#navixy-iot-query-dashboard) para obtener instrucciones de instalación y detalles sobre el control de versiones. ### Puerta de enlace de autenticación Generación de tokens JWT mediante la puerta de enlace de autenticación de Navixy. El backend administra las sesiones de forma transparente. Consulte [App Connect](/docs/navixy-api/user-api/resources/commons/user/applications/app-connect.md) en nuestra documentación para desarrolladores para obtener detalles de implementación. ## Primeros pasos **Pasos de configuración:** 1. Revise el repositorio [README](https://github.com/Navixy/navixy-iot-query-dashboard) 2. Asegúrese de que tiene acceso activo a IoT Query 3. Instale Nodo.js 18+ y npm 4. Siga la [guía de inicio rápido](https://github.com/Navixy/navixy-iot-query-dashboard) del repositorio para la implementación local 5. Revise la [documentación de arquitectura](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) antes de personalizar ### Documentación en el repositorio El repositorio incluye guías exhaustivas para trabajar con la base de código: | Documento | Contenido | | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | [**ARCHITECTURE.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) | Diseño del sistema, estructura de componentes, flujo de datos | | [**DEVELOPMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEVELOPMENT.md) | Configuración local, estándares de codificación, pruebas, flujos de trabajo | | [**API.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/API.md) | Endpoints de backend, formatos de solicitud/respuesta, autenticación | | [**DEPLOYMENT.md**](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/DEPLOYMENT.md) | Alojamiento en producción para diversos entornos | Todos los archivos de documentación se encuentran en la carpeta [`/docs`](https://github.com/Navixy/navixy-iot-query-dashboard/tree/main/docs) del repositorio. La base de código utiliza TypeScript en toda su extensión para garantizar la seguridad de tipos e interfaces claras de componentes. ### Opciones de personalización La implementación de código abierto proporciona acceso completo al frontend para realizar modificaciones: {% columns %} {% column %} **Interfaz de usuario y diseño** * Biblioteca de componentes (colores, tipografía, espaciado, patrones de interfaz de usuario) * Integración de sistema de diseño personalizado * Modificaciones de tema **Editor de paneles** * Algoritmos de diseño personalizados * Métodos alternativos de organización de paneles * Flujos de trabajo simplificados para grupos de usuarios específicos {% endcolumn %} {% column %} **Visualizaciones** * Reemplace los componentes de gráficos existentes por componentes personalizados * Agregue nuevos tipos de visualización * Modifique el comportamiento de renderizado de gráficos **Integración** * Implementación de inicio de sesión único * Navegación compartida con aplicaciones existentes * Vistas de análisis integradas {% endcolumn %} {% endcolumns %} Revise la [`ARCHITECTURE.md`](https://github.com/Navixy/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) archivo del repositorio antes de realizar modificaciones significativas para comprender las relaciones entre los componentes y los cambios necesarios. ### Paridad de funcionalidades con la versión estándar Dashboard Studio de código abierto mantiene una paridad completa de funcionalidades con la versión alojada por Navixy: | Funcionalidad | Código abierto | Estándar | | ------------------------------------------------------------------------ | -------------- | -------- | | Editor de paneles (arrastrar y soltar, paneles, filas) | ✓ | ✓ | | Ejecución de SQL (seguridad, tiempos de espera, almacenamiento en caché) | ✓ | ✓ | | Visualizaciones (barras, circular, tabla, estadística) | ✓ | ✓ | | Organización de menús (secciones, reordenamiento) | ✓ | ✓ | | Actualizaciones y nuevas funcionalidades | ✓ | ✓ | El repositorio recibe actualizaciones periódicas alineadas con las versiones alojadas. Los nuevos tipos de visualización, las capacidades del editor y las mejoras de rendimiento aparecen simultáneamente en ambos modelos de implementación. ### Modelo de soporte y mantenimiento | Responsabilidad | Su equipo | Navixy | | ----------------------------------------------- | --------- | ------ | | Actualizaciones principales de Dashboard Studio | | ✓ | | Parches de seguridad | | ✓ | | Compatibilidad con la API de IoT Query | | ✓ | | Actualizaciones de documentación | | ✓ | | Mantenimiento de código personalizado | ✓ | | | Infraestructura de implementación | ✓ | | | Sincronización con la versión ascendente | ✓ | | | Pruebas después de las actualizaciones | ✓ | | Supervise el repositorio para conocer las versiones que contienen correcciones de errores, parches de seguridad y funcionalidades. Pruebe sus personalizaciones después de las actualizaciones antes de implementarlas en producción. {% hint style="info" %} #### Soporte y asistencia Para obtener soporte técnico y asistencia con IoT Query, contacte a nuestro equipo de soporte en . {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://navixy.com/docs/analytics/es/dashboard-studio/open-source-studio.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.