# Studio de código abierto 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, intégrela con 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 el enfoque de código abierto puede ser útil: * Marca personalizada e integración de sistema de diseño * Flujos de trabajo de interfaz de usuario especializados y específicos del sector * Analítica integrada 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** | Node.js 18+, npm, Git | | **Habilidades técnicas** | React, TypeScript, PostgreSQL, desarrollo web moderno | {% hint style="info" %} Consulte [App Connect](/docs/navixy-api/user-api/backend-api/resources/commons/user/applications/app-connect.md) en nuestra documentación para desarrolladores para obtener detalles de 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 frontend completa en React, los servicios backend en Node.js, los archivos de configuración y documentación completa. Clone el repositorio para el desarrollo local o para revisar la arquitectura antes de la implementación. ### Paquete npm Distribución simplificada para la integración en proyectos JavaScript. El paquete refleja la base de código de GitHub con el flujo de instalación estándar de npm. Consulte el [README](https://github.com/SquareGPS/navixy-iot-query-dashboard?tab=readme-ov-file#navixy-iot-query-dashboard) del repositorio para obtener instrucciones de instalación y control de versiones. ### Pasarela de autenticación Generación de token JWT a través de la pasarela de autenticación de Navixy. El backend gestiona la sesión de forma transparente. Consulte [App Connect](/docs/navixy-api/user-api/backend-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/SquareGPS/navixy-iot-query-dashboard) 2. Asegúrese de tener acceso activo a IoT Query 3. Instale Node.js 18+ y npm 4. Siga la guía de [Inicio rápido](https://github.com/SquareGPS/navixy-iot-query-dashboard) del repositorio para la implementación local 5. Revise el [documentación de arquitectura](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) antes de personalizar ### Documentación en el repositorio El repositorio incluye guías completas para trabajar con la base de código: | Documento | Contenido | | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | [**ARCHITECTURE.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) | Diseño del sistema, estructura de componentes, flujo de datos | | [**DEVELOPMENT.md**](https://github.com/SquareGPS/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/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/API.md) | Puntos finales del backend, formatos de solicitud/respuesta, autenticación | | [**DEPLOYMENT.md**](https://github.com/SquareGPS/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 [`/docs`](https://github.com/SquareGPS/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 de componentes claras. ### Opciones de personalización La implementación de código abierto proporciona acceso completo al frontend para realizar modificaciones: {% columns %} {% column %} **IU y diseño** * Biblioteca de componentes (colores, tipografía, espaciado, patrones de interfaz de usuario) * Integración de sistema de diseño personalizado * Modificaciones del tema **Editor del panel** * 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 otros personalizados * Añada nuevos tipos de visualización * Modifique el comportamiento de renderizado de los gráficos **Integración** * Implementación de inicio de sesión único * Navegación compartida con aplicaciones existentes * Vistas analíticas integradas {% endcolumn %} {% endcolumns %} Revise el [`ARCHITECTURE.md`](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) archivo en el repositorio antes de realizar modificaciones significativas para comprender las relaciones entre los componentes y los cambios necesarios. ### Paridad funcional con la versión estándar Dashboard Studio de código abierto mantiene paridad funcional completa con la versión alojada por Navixy: | Función | Código abierto | Estándar | | ------------------------------------------------------------------------ | -------------- | -------- | | Editor del panel (arrastrar y soltar, paneles, filas) | ✓ | ✓ | | Ejecución de SQL (seguridad, tiempos de espera, almacenamiento en caché) | ✓ | ✓ | | Visualizaciones (barra, circular, tabla, estadística) | ✓ | ✓ | | Organización del menú (secciones, reordenación) | ✓ | ✓ | | Actualizaciones y nuevas funciones | ✓ | ✓ | El repositorio recibe actualizaciones periódicas alineadas con las versiones de la edición alojada. 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 la documentación | | ✓ | | Mantenimiento de código personalizado | ✓ | | | Infraestructura de implementación | ✓ | | | Sincronización con upstream | ✓ | | | Pruebas después de las actualizaciones | ✓ | | Supervise el repositorio en busca de versiones que contengan correcciones de errores, parches de seguridad y nuevas funciones. 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, póngase en contacto con nuestro equipo de soporte en . {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://navixy.com/docs/analytics/es/dashboard-studio/open-source-studio.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.