--- title: "Personnaliser davantage votre première application" description: "Dans ce tutoriel, vous découvrirez des fonctionnalités avancées du visual app builder pour personnaliser les aspects visuels d'une application simple" url: https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/tutorials-customize-first-app lang: fr lastUpdated: 2026-09-14 --- > For AI agents: the complete documentation index is available at https://docs.ovhcloud.com/fr/llms.txt, the full documentation bundle is available at https://docs.ovhcloud.com/fr/llms-full.txt. # Personnaliser davantage votre première application ## Objectif Dans ce tutoriel, vous découvrirez des fonctionnalités avancées du visual app builder pour **personnaliser les aspects visuels** d'une application simple. :::info Ce tutoriel contient un contenu étendu pour la section _Démarrage_ intitulée [Créer et déployer une application front-end](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/getting-started-visualize-data.md). ::: ## Prérequis Ce tutoriel suppose que vous avez suivi **les cinq sections** du [tutoriel de Démarrage](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/landing-page-getting-started.md). Votre Data Processing Engine, votre Lakehouse Manager, votre Analytics Manager ont été configurés comme décrit sur leurs pages respectives, et vous avez déployé une API ainsi qu'une APP que vous allez personnaliser. ## Créer un chart plus avancé Tout d'abord, découvrons un nouveau type de chart : un chart à barres horizontales pour afficher les 7 stations les plus fréquentées en termes de trafic total. Plutôt que de choisir une query déjà préparée dans l'Analytics Manager, vous pouvez aussi **créer de nouvelles queries à la volée** lors de la création d'un chart. Pour cela, réduisez le premier panneau et **créez** un second panneau à côté. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-panel.png) Dans le second panneau, cliquez sur l'icône ➕ et sélectionnez **HTML**. Nommez-le _Top 7 Stations_ avec le style **H1**. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-html.png) Dans le second panneau, cliquez sur l'icône ➕ et sélectionnez Chart. Choisissez le type _Recharts - Bar Horizontal_. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-chart.png) Dans l'onglet Request, choisissez le mode _Request_ et saisissez _rides_ comme data (Sum et Descending) et _station\_name_ comme scale. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-chart2.png) ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-chart3.png) Une dernière étape ! Les queries peuvent être entièrement personnalisées à l'aide de l'éditeur JSON avancé. Plus précisément, vous devez ajouter un paramètre personnalisé pour **limiter le nombre** de stations à 7. Pour cela, passez en mode avancé de votre query comme indiqué ci-dessous et ajoutez simplement `"limit":7,` sous la ligne 2 de l'objet JSON "data" : ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/query-advanced.png) Jusqu'ici, votre dashboard devrait ressembler à ceci. N'oubliez pas de **sauvegarder**. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/chart-intermediate-new.png) ## Aller plus loin dans la personnalisation Il y a beaucoup de choses que vous pouvez faire dans l'app builder pour concevoir votre application exactement comme vous le souhaitez. ### Unités Cliquez sur le bouton **play** en haut du dashboard pour passer en mode lecture seule. Survolez les barres du chart _Top 7 stations_. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/show-units.png) Ces unités pourraient être formatées en millions pour plus de clarté. Pour cela, allez dans l'onglet **Formatter**. Une measure appelée _RIDES_ a déjà été ajoutée en choisissant le template de Démarrage. :::info Plus généralement, si vous devez ajouter une nouvelle measure, elle doit porter le **même nom que l'attribut** que vous essayez de formater. ::: ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/new-formatter.png) Concernant les paramètres de formatage, saisissez _Mpax_ pour unit, _0_ pour round (pour afficher des entiers), et _0.000001_ pour multiplicator (pour afficher des millions). :::info Le Formatter fonctionne en mode autosave : vos modifications sont enregistrées au fil de la saisie, il n'y a donc pas de bouton d'enregistrement à cliquer. ::: ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/formatter-round.png) Voici le résultat : ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/formatter-round2.png) ## Reconstruire et déployer la nouvelle version de votre application Dernière étape : publiez les changements récents du dashboard en production. Pour cela, n'oubliez pas de sauvegarder puis retournez à l'onglet **Overview** de l'Application Manager. Vous devez d'abord cliquer sur **Stop** pour arrêter l'application actuellement déployée. Dès qu'elle s'est arrêtée, cliquez sur **Build**, puis sur **Deploy**. :::info Le processus de **build** prend généralement quelques minutes. Si vous êtes curieux de savoir ce qui se passe ou si le build échoue : ouvrez la console de logs en développant le panneau de version et inspectez les logs. N'hésitez pas à envoyer les logs à notre équipe support si vous ne savez pas comment résoudre le problème vous-même ! ::: Votre application est **live** et peut désormais être accédée en ligne !\ Le lien peut être obtenu dans l'onglet Overview en cliquant sur **Open**. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/open-app.png) ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/dashboard-final-new.png) Vos données sont maintenant disponibles dans l'application. **Vous avez terminé le tutoriel avancé de l'application builder !** Vous êtes désormais prêt à créer des applications de données complexes sur la Platform. Bien sûr, vous pouvez revenir à ce tutoriel à tout moment ! Nous vous encourageons à consulter le reste de la documentation pour approfondir un composant spécifique du produit si besoin. De plus, n'hésitez pas à **nous contacter** si vous avez besoin de quoi que ce soit, notre équipe support & produit se consacre à vous aider à livrer plus rapidement toutes les applications d'IA que vous avez en tête. ## À la recherche de plus de flexibilité ? Le visual app builder est idéal pour démarrer rapidement, mais si vous êtes développeur et recherchez un **contrôle total sur le code de votre application**, nous proposons des templates supplémentaires construits avec des frameworks front-end modernes. Ces templates se connectent à la même Front API et vous permettent de créer des applications entièrement personnalisées avec votre propre workflow de développement. [Créer une application personnalisée avec React, Vite & Shadcn](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/tutorials-app-development-react-shadcn.md) ## Aller plus loin Si vous avez besoin d'une formation ou d'une assistance technique pour la mise en oeuvre de nos solutions, contactez votre commercial ou cliquez sur [ce lien](https://www.ovhcloud.com/fr/professional-services/) pour obtenir un devis et demander une analyse personnalisée de votre projet à nos experts de l’équipe Professional Services. Posez vos questions, faites-nous part de vos commentaires et interagissez directement avec l’équipe qui développe la Data Platform sur le [canal Discord](https://discord.gg/ovhcloud) dédié. Si vous avez besoin d'une assistance concernant vos services OVHcloud, créez une demande depuis notre [centre d'aide](https://help.ovhcloud.com/csm?id=csm_get_help). Rejoignez notre [communauté d'utilisateurs](https://community.ovhcloud.com/).