--- title: "Créer et déployer une application front-end" description: "Dans ce tutoriel, vous apprendrez à créer et déployer votre première application. Pour vous faciliter la tâche, vous ne partirez pas de zéro" url: https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/getting-started-visualize-data 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. # Créer et déployer une application front-end ## Objectif Dans ce tutoriel, vous allez **apprendre à créer et déployer votre première application**. Pour vous faciliter la tâche, vous ne partirez pas de zéro. Nous avons préparé un modèle pour accélérer le processus, grâce à des graphiques préconstruits. Initiez votre application depuis **Application Services** en cliquant sur **Create an application**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/homepage-api.png) Sélectionnez le modèle _ReactJS - Getting Started_ depuis le store. Ce modèle produit un dashboard BI complet. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/apps-store-new.png) Remplissez les différents champs comme indiqué dans la capture d'écran ci-dessous et appuyez sur **Confirm**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/apps-settings-new.png) Cliquez sur **Confirm**, votre application va automatiquement se construire et se déployer. Le processus devrait prendre quelques minutes, entre-temps n'hésitez pas à lire les prérequis ci-dessous. ## Prérequis Toutes les étapes précédentes du guide de démarrage doivent avoir été terminées : - L'API est en fonctionnement. - Les requêtes dans l'Analytics Manager interrogent correctement votre entrepôt de données. - Le Lakehouse Manager affiche un schéma logique correctement construit. Les attributs virtuels sont créés et les tables liées. - Votre workflow Data Processing Engine a été correctement exécuté. Créons votre premier dashboard. ## Configurer votre canvas Cliquez sur le menu **Dashboard**. Dans une application, les dashboards sont ses pages. Un premier dashboard, _Rides Analytics_, a été ajouté par défaut lorsque vous avez sélectionné le modèle au début. Il est livré avec des styles et des logos ! ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/createdashboard-empty.png) Cliquez sur l'icône **house** pour le définir comme page d'accueil par défaut de votre application. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/createdashboard.png) ### Configurer un en-tête Rendez-vous dans le menu **Menus**. C'est la page où vous pouvez définir des éléments comme les menus d'en-tête et les filtres pour l'ensemble de votre application. Elle a déjà été pré-remplie avec plusieurs pages et éléments en raison du modèle que vous avez utilisé pour initier l'application. Vous devriez arriver sur la page d'en-tête. Cela signifie que chaque élément que vous ajoutez ici sera intégré dans l'en-tête de votre application (c'est-à-dire la partie supérieure). Vous pouvez basculer vers la page de barre latérale (pour intégrer des éléments dans la barre latérale gauche de votre application) en haut à droite. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/header-v-sidebar.png) Revenez à la page d'en-tête. Développez **tabs** pour voir les éléments du conteneur. Cliquez sur _Add an item_ pour ajouter un onglet dans votre en-tête. Sélectionnez **link**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-menu.png) Remplissez les champs comme indiqué ci-dessous. Vous pouvez également définir une icône de logo pour l'en-tête de votre application ! ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/createmenu2.png) ### Configurer un paramètre dynamique Les paramètres dynamiques sont des widgets permettant de **filtrer vos données sur vos pages**. Ici, vous allez ajouter un paramètre dynamique pour filtrer sur la date. Cliquez sur **Sidebar** en haut à droite et créez un conteneur. :::info Si vous n'êtes pas familier avec les [conteneurs](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/app-services-apps-menus.md), pensez-y comme à des dossiers pour les éléments. ::: ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-sidebar.png) Faites glisser le nouveau conteneur au-dessus du pied de page (qui doit rester en bas). ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-sidebar2.png) Ouvrez le conteneur puis ajoutez un élément : sélectionnez **Parameters**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-sidebar3.png) Choisissez celui appelé _Select box_, puis rendez-vous dans les **options** du nouveau paramètre. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/createparameters.png) Remplissez les options comme indiqué dans la capture d'écran ci-dessous. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/parameters-options.png) Dans l'onglet **Infos**, donnez-lui le nom suivant : _select\_stations_, et appuyez sur Confirm. :::info Notez que chaque paramètre dynamique, comme le sélecteur de date et les select boxes, peut être personnalisé. Pour apprendre comment faire cela, rendez-vous dans la documentation technique des composants d'application ! ::: [ En savoir plus sur les paramètres dynamiques](https://docs.dataplatform.ovh.net/#/en/technical/sdk/app/dynamic_parameters/index). La configuration de votre canvas est maintenant terminée. Avec un menu et un filtre, vous pouvez maintenant créer votre premier graphique. ## Configurer un graphique Allez dans l'onglet **Dashboard** et cliquez sur l'icône **Edit** de votre dashboard _Ride Analytics_. Vous pouvez voir que le menu et le filtre que nous venons de créer sont bien configurés ici ! ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/empty-app-new.png) #### Étape 1. Créer un panneau Cliquez sur l'icône ➕ pour créer un panneau (**Containers > Panel**). ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-panel-new.png) Une fois créé, vous pouvez le redimensionner pour qu'il s'étende sur tout l'écran. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-panel-new2.png) #### Étape 2. Donner un titre à votre graphique **À l'intérieur de votre nouveau panneau**, cliquez sur l'icône ➕ et sélectionnez **Basic UI > HTML**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-html-new.png) Nommez-le _Rides history_ et appliquez le style H1 en cliquant sur le bouton H. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/create-html-new2.png) #### Étape 3. Générer votre graphique À l'intérieur de votre panneau, cliquez sur l'icône ➕ et sélectionnez **Chart**. Choisissez le type _Recharts - Bar_. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/recharts-area-new.png) Cliquez sur **Request**, et sélectionnez **Query selector** pour choisir la requête _rides\_per\_month_ que vous avez créée dans l'Analytics Manager. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/area-chart-query.png) Pour finaliser la configuration, vous devez connecter ce graphique au filtre que nous avons déjà créé. Allez dans l'onglet **Infos**, dans la section **Linked dynamic parameters**, et ajoutez _select\_stations_. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/area-chart-parameters.png) Vous pouvez maintenant tester si votre filtre fonctionne correctement. Passez en mode lecture seule en cliquant sur l'icône **Play**, et modifiez les dates ou le type de jour férié pour voir comment vos données changent. Votre premier graphique est terminé ! ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/chart-readonly-new.png) :::info Votre premier dashboard est maintenant terminé. Vous pouvez également en améliorer l'apparence. Dans notre _série de guides Getting Further_, nous avons publié d'autres tutoriels à découvrir : [cliquez ici pour en savoir plus sur les capacités du constructeur d'applications](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/tutorials-customize-first-app.md) ! ::: ## Construire et déployer la nouvelle version de votre application Dernière étape : mettez votre dashboard en production. Tout d'abord, n'oubliez pas de **Save** votre dashboard pour vous assurer que toutes vos modifications sont bien sauvegardées (icône dans la barre supérieure centrale). ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/save-app.png) Retournez ensuite à l'onglet **Overview** de l'Application Manager. Les changements apportés à votre application depuis sa création **doivent être construits** afin d'être visibles par vos utilisateurs finaux. Vous pourriez arrêter la version actuellement déployée pour construire ces changements, mais la Platform vous permet également de le faire [sans interruption de service](https://en.wikipedia.org/wiki/Blue-green_deployment).\ Tout d'abord, **Copy** la version actuellement déployée de l'application. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/copy-app.png) Ensuite, vous devez nommer la nouvelle version (_v2_ dans la capture d'écran ci-dessous). ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/enter-tag-name.png) Maintenant, cliquez sur **Build**, puis **Deploy**. ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/build-app2.png) :::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 **en ligne** et est désormais accessible ! Le lien peut être obtenu dans l'onglet Overview en cliquant sur **Open**. :::info L'[Identity Access Manager](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/landing-page-iam.md) vous permet de configurer les droits d'accès à votre application et à l'administration de votre Projet. ::: ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/open-app.png) ![Application Services](/images/public-cloud/data-platform/getting-started/app-init/picts/dashboard-final-new.png) C'est terminé ! Votre dashboard est en ligne et accessible par vos utilisateurs. Ses données sont actualisées automatiquement chaque jour, stockées dans le cloud et seront toujours fiables. **Vous avez terminé le tutoriel de démarrage de la Platform !** Vous êtes maintenant prêt à passer en production sur la platform, à explorer par vous-même et à mener vos propres Projets. 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 lorsque nécessaire. La prochaine étape consistera à découvrir des fonctionnalités avancées du constructeur d'applications. [Personnaliser davantage votre première application](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/tutorials-customize-first-app.md) Aussi, 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 les applications IA que vous avez en tête. ## 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/).