# Studio open source Dashboard Studio propose une option open source (licence MPL-2.0) destinée aux équipes techniques qui ont besoin d’une personnalisation du frontend au-delà de la configuration standard. Modifiez l’interface utilisateur, intégrez-la aux applications existantes ou mettez en œuvre des systèmes de conception personnalisés tout en conservant l’ensemble des fonctionnalités d’analyse. ### Cas d’utilisation Scénarios courants dans lesquels l’approche open source peut être utile : * Image de marque personnalisée et intégration de systèmes de conception * Flux de travail spécialisés propres à un secteur * Analyse intégrée dans des applications propriétaires * Implémentations en marque blanche pour les partenaires ### Prérequis | Composant | Exigence | | ---------------------------------- | ---------------------------------------------------------------- | | **Accès à IoT Query** | Instance active avec des identifiants de base de données valides | | **Authentification** | Jeton JWT provenant de Navixy Authentication Gateway | | **Environnement de développement** | Node.js 18+, npm, Git | | **Compétences techniques** | React, TypeScript, PostgreSQL, développement web moderne | {% hint style="info" %} Voir [App Connect](/docs/navixy-api/user-api/backend-api/resources/commons/user/applications/app-connect.md) dans notre documentation développeur pour les détails de mise en œuvre de l’authentification. {% endhint %} ## Composants open source L’implémentation open source de Dashboard Studio se compose de trois composants principaux : ### Dépôt GitHub **Emplacement :** Le dépôt contient l’application frontend React complète, les services backend Node.js, les fichiers de configuration et une documentation exhaustive. Clonez le dépôt pour un développement local ou pour examiner l’architecture avant l’implémentation. ### Package npm Distribution simplifiée pour l’intégration dans des projets JavaScript. Le package reflète la base de code GitHub avec le flux de travail d’installation npm standard. Consultez le dépôt [README](https://github.com/SquareGPS/navixy-iot-query-dashboard?tab=readme-ov-file#navixy-iot-query-dashboard) pour les instructions d’installation et le versionnement. ### Passerelle d’authentification Génération de jetons JWT via la passerelle d’authentification Navixy. Le backend gère la session de manière transparente. Voir [App Connect](/docs/navixy-api/user-api/backend-api/resources/commons/user/applications/app-connect.md) dans notre documentation développeur pour les détails de mise en œuvre. ## Pour commencer **Étapes de configuration :** 1. Consultez le dépôt [README](https://github.com/SquareGPS/navixy-iot-query-dashboard) 2. Assurez-vous d’avoir un accès IoT Query actif 3. Installez Node.js 18+ et npm 4. Suivez le guide [Quick Start](https://github.com/SquareGPS/navixy-iot-query-dashboard) du dépôt pour le déploiement local 5. Consultez la [documentation d’architecture](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) avant de personnaliser ### Documentation dans le dépôt Le dépôt comprend des guides complets pour travailler avec la base de code : | Document | Contenu | | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | [**ARCHITECTURE.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) | Conception du système, structure des composants, flux de données | | [**DEVELOPMENT.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/DEVELOPMENT.md) | Configuration locale, normes de codage, tests, flux de travail | | [**API.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/API.md) | Points de terminaison backend, formats de requête/réponse, authentification | | [**DEPLOYMENT.md**](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/DEPLOYMENT.md) | Hébergement en production pour divers environnements | Tous les fichiers de documentation sont situés dans le [`/docs`](https://github.com/SquareGPS/navixy-iot-query-dashboard/tree/main/docs) du dépôt. La base de code utilise TypeScript de bout en bout pour garantir la sécurité des types et des interfaces de composants claires. ### Options de personnalisation L’implémentation open source offre un accès complet au frontend pour les modifications : {% columns %} {% column %} **Interface utilisateur et conception** * Bibliothèque de composants (couleurs, typographie, espacement, modèles d’interface) * Intégration d’un système de conception personnalisé * Modifications du thème **Éditeur de tableau de bord** * Algorithmes de mise en page personnalisés * Méthodes alternatives d’agencement des panneaux * Flux de travail simplifiés pour des groupes d’utilisateurs spécifiques {% endcolumn %} {% column %} **Visualisations** * Remplacer les composants de graphiques existants par des composants personnalisés * Ajouter de nouveaux types de visualisation * Modifier le comportement de rendu des graphiques **Intégration** * Mise en œuvre de l’authentification unique * Navigation partagée avec les applications existantes * Vues d’analyse intégrées {% endcolumn %} {% endcolumns %} Consultez la [`ARCHITECTURE.md`](https://github.com/SquareGPS/navixy-iot-query-dashboard/blob/main/docs/ARCHITECTURE.md) fichier dans le dépôt avant d’apporter des modifications importantes afin de comprendre les relations entre les composants et les changements requis. ### Parité fonctionnelle avec la version standard La version open source de Dashboard Studio conserve une parité fonctionnelle complète avec la version hébergée par Navixy : | Fonctionnalité | Open source | Standard | | -------------------------------------------------------------- | ----------- | -------- | | Éditeur de tableau de bord (glisser-déposer, panneaux, lignes) | ✓ | ✓ | | Exécution SQL (sécurité, délais d’attente, mise en cache) | ✓ | ✓ | | Visualisations (barres, camembert, tableau, stat) | ✓ | ✓ | | Organisation des menus (sections, réorganisation) | ✓ | ✓ | | Mises à jour et nouvelles fonctionnalités | ✓ | ✓ | Le dépôt reçoit des mises à jour régulières alignées sur les versions de l’hébergement. Les nouveaux types de visualisation, les capacités de l’éditeur et les améliorations de performances apparaissent simultanément dans les deux modèles de déploiement. ### Modèle de support et de maintenance | Responsabilité | Votre équipe | Navixy | | -------------------------------------------- | ------------ | ------ | | Mises à jour principales de Dashboard Studio | | ✓ | | Correctifs de sécurité | | ✓ | | Compatibilité avec l’API IoT Query | | ✓ | | Mises à jour de la documentation | | ✓ | | Maintenance du code personnalisé | ✓ | | | Infrastructure de déploiement | ✓ | | | Synchronisation avec la version amont | ✓ | | | Tests après les mises à jour | ✓ | | Surveillez le dépôt pour les versions contenant des corrections de bugs, des correctifs de sécurité et des fonctionnalités. Testez vos personnalisations après les mises à jour avant de les déployer en production. {% hint style="info" %} #### Support et assistance Pour obtenir une assistance technique concernant IoT Query, contactez notre équipe d’assistance à . {% 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/fr/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.