# Estúdio de código aberto O Dashboard Studio oferece uma opção de código aberto (licença MPL-2.0) para equipes técnicas que precisam de personalização do frontend além da configuração padrão. Modifique a interface, integre com aplicativos existentes ou implemente sistemas de design personalizados, mantendo todos os recursos analíticos. ### Casos de uso Cenários comuns em que a abordagem de código aberto pode ser útil: * Branding personalizado e integração com sistema de design * Fluxos de trabalho de interface especializados por setor * Análises incorporadas em aplicativos proprietários * Implementações white-label para parceiros ### Pré-requisitos | Componente | Requisito | | ------------------------------- | ---------------------------------------------------------- | | **Acesso ao IoT Query** | Instância ativa com credenciais válidas do banco de dados | | **Autenticação** | Token JWT do Navixy Authentication Gateway | | **Ambiente de desenvolvimento** | Node.js 18+, npm, Git | | **Habilidades técnicas** | React, TypeScript, PostgreSQL, desenvolvimento web moderno | {% hint style="info" %} Veja [App Connect](/docs/navixy-api/user-api/backend-api/resources/commons/user/applications/app-connect.md) em nossa documentação de desenvolvedor para detalhes de implementação da autenticação. {% endhint %} ## Componentes de código aberto A implementação de código aberto do Dashboard Studio consiste em três componentes principais: ### Repositório GitHub **Localização:** O repositório contém a aplicação frontend completa em React, os serviços backend em Node.js, os arquivos de configuração e documentação abrangente. Clone o repositório para desenvolvimento local ou para revisar a arquitetura antes da implementação. ### Pacote npm Distribuição simplificada para integração em projetos JavaScript. O pacote espelha a base de código do GitHub com o fluxo padrão de instalação do npm. Veja o repositório [README](https://github.com/SquareGPS/navixy-iot-query-dashboard?tab=readme-ov-file#navixy-iot-query-dashboard) para instruções de instalação e versionamento. ### Gateway de autenticação Geração de token JWT por meio do gateway de autenticação da Navixy. O backend gerencia a sessão de forma transparente. Veja [App Connect](/docs/navixy-api/user-api/backend-api/resources/commons/user/applications/app-connect.md) em nossa documentação de desenvolvedor para detalhes de implementação. ## Primeiros passos **Etapas de configuração:** 1. Revise o repositório [README](https://github.com/SquareGPS/navixy-iot-query-dashboard) 2. Certifique-se de que você tem acesso ativo ao IoT Query 3. Instale o Node.js 18+ e o npm 4. Siga o guia [Início rápido](https://github.com/SquareGPS/navixy-iot-query-dashboard) do repositório para implantação local 5. Revise a [documentação da arquitetura](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) antes de personalizar ### Documentação no repositório O repositório inclui guias abrangentes para trabalhar com a base de código: | Documento | Conteúdo | | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | [**ARCHITECTURE.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) | Design do sistema, estrutura dos componentes, fluxo de dados | | [**DEVELOPMENT.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/DEVELOPMENT.md) | Configuração local, padrões de codificação, testes, fluxos de trabalho | | [**API.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/API.md) | Endpoints de backend, formatos de requisição/resposta, autenticação | | [**DEPLOYMENT.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/DEPLOYMENT.md) | Hospedagem em produção para vários ambientes | Todos os arquivos de documentação estão localizados na pasta [`/docs`](https://github.com/SquareGPS/navixy-iot-query-dashboard/tree/main/docs) do repositório. A base de código usa TypeScript em toda a sua extensão para garantir segurança de tipos e interfaces de componentes claras. ### Opções de personalização A implementação de código aberto oferece acesso completo ao frontend para modificações: {% columns %} {% column %} **Interface e design** * Biblioteca de componentes (cores, tipografia, espaçamento, padrões de interface) * Integração com sistema de design personalizado * Modificações de tema **Editor do painel** * Algoritmos de layout personalizados * Métodos alternativos de organização dos painéis * Fluxos de trabalho simplificados para grupos específicos de usuários {% endcolumn %} {% column %} **Visualizações** * Substitua os componentes de gráfico existentes por componentes personalizados * Adicione novos tipos de visualização * Modifique o comportamento de renderização dos gráficos **Integração** * Implementação de login único * Navegação compartilhada com aplicativos existentes * Visões de análises incorporadas {% endcolumn %} {% endcolumns %} Revise a [`ARCHITECTURE.md`](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) arquivo no repositório antes de modificações significativas para entender as relações entre os componentes e as alterações necessárias. ### Paridade de recursos com a versão padrão O Dashboard Studio de código aberto mantém paridade completa de recursos com a versão hospedada pela Navixy: | Recurso | Código aberto | Padrão | | ------------------------------------------------------ | ------------- | ------ | | Editor de painéis (arrastar e soltar, painéis, linhas) | ✓ | ✓ | | Execução de SQL (segurança, timeouts, cache) | ✓ | ✓ | | Visualizações (barra, pizza, tabela, estatística) | ✓ | ✓ | | Organização do menu (seções, reordenação) | ✓ | ✓ | | Atualizações e novos recursos | ✓ | ✓ | O repositório recebe atualizações regulares alinhadas aos lançamentos da versão hospedada. Novos tipos de visualização, recursos do editor e melhorias de desempenho aparecem simultaneamente nos dois modelos de implantação. ### Modelo de suporte e manutenção | Responsabilidade | Sua equipe | Navixy | | ------------------------------------------- | ---------- | ------ | | Atualizações principais do Dashboard Studio | | ✓ | | Correções de segurança | | ✓ | | Compatibilidade com a API do IoT Query | | ✓ | | Atualizações da documentação | | ✓ | | Manutenção do código personalizado | ✓ | | | Infraestrutura de implantação | ✓ | | | Sincronização com a versão upstream | ✓ | | | Testes após as atualizações | ✓ | | Monitore o repositório em busca de versões que contenham correções de bugs, patches de segurança e novos recursos. Teste suas personalizações após as atualizações antes de implantá-las em produção. {% hint style="info" %} #### Suporte e assistência Para suporte técnico e assistência com o IoT Query, entre em contato com nossa equipe de suporte em . {% 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/pt-br/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.