Personnaliser davantage votre première application

Objectif

Ce tutoriel reprend l'application que vous avez construite dans le guide Premiers pas et lui ajoute deux éléments : un graphique qui classe vos 7 stations les plus fréquentées, et un format de nombre qui affiche le nombre de trajets en millions de passagers plutôt qu'en longues suites de chiffres.

Vous construisez les deux dans le Visual Editor du template Mosaic, comme dans Exposer et visualiser vos données, puis vous les déployez dans une nouvelle version de votre application.

Prérequis

Pour suivre ce tutoriel, vous devez disposer de l'application analytics créée dans Exposer et visualiser vos données, avec sa version v2 en cours d'exécution.

Ce que vous allez construire

En pratique

Étape 1 : ouvrir le Visual Editor

Ouvrez Applications & APIs, puis votre application analytics, puis sa version v2, et accédez à l'onglet Visual Editor.

L'éditeur s'ouvre sur Home, la page que le template Mosaic crée dans chaque application. Elle contient deux conteneurs : Filters en haut, et un conteneur vide en dessous. Ce tutoriel remplit le conteneur vide. La page Rides analytics que vous avez construite dans le guide Premiers pas reste inchangée.

Étape 2 : déclarer un format de nombre

Le nombre de vos trajets se compte en millions, et un graphique qui affiche 25833640 est difficile à lire. Un format de nombre règle ce problème pour toute l'application, en une seule fois.

Cliquez sur Formats dans la barre d'outils. La boîte de dialogue Number and date formats liste les formats dont l'application dispose déjà, comme les pourcentages et les nombres abrégés.

Sous Measures, saisissez Rides dans le champ du nom et cliquez sur Add. Remplissez ensuite la nouvelle entrée :

Laissez Shorten above et Suffixes vides. À côté du nom de l'entrée, un aperçu affiche une valeur d'exemple dans ce format, 1.23Mpax : vérifiez-la avant d'enregistrer.

Cliquez sur Save, puis sur Close.

Étape 3 : ajouter un titre

Survolez le conteneur vide sous Filters et cliquez sur son bouton + Add, puis sélectionnez Basic > HTML.

Le panneau HTML options s'ouvre à droite. Dans HTML, saisissez :

<h1 class='text-xl'>Top 7 Stations</h1>

Le bouton + Add du conteneur n'apparaît que lorsque votre pointeur survole le conteneur.

Étape 4 : ajouter le graphique de classement

Cliquez à nouveau sur + Add dans le même conteneur et sélectionnez Charts > Bar horizontal.

Dans l'onglet General, nommez le graphique Top 7 stations.

Ouvrez l'onglet Data. Laissez Data source sur Query builder, puis décrivez le classement :

• Sous Measures, cliquez sur + Add et sélectionnez rides avec l'agrégation sum.
• Sous Group by, cliquez sur + Add et sélectionnez station_name.
• Sous Order by, cliquez sur + a criterion et sélectionnez rides, descending.
• Dans Row limit, saisissez 7 pour ne garder que les 7 stations les plus fréquentées.

Ouvrez l'onglet Format. Il liste les champs du graphique. Sur la ligne rides, sélectionnez le format Rides que vous avez déclaré à l'étape 2 : l'aperçu affiche 1.23Mpax. L'axe et les infobulles du graphique l'utilisent désormais.

Cliquez sur Apply. Le graphique interroge vos données via votre API et affiche les 7 stations les plus fréquentées, avec un axe en Mpax.

Cliquez sur Save dans la barre d'outils. Le compteur à côté revient à no changes.

Étape 5 : déployer une nouvelle version

L'enregistrement écrit vos modifications dans les sources de v2, mais vos utilisateurs reçoivent toujours le build réalisé avant ces modifications. Pour les publier, copiez la version en cours d'exécution :

1. Revenez à la vue d'ensemble de votre application.

2. Dans la carte Deployed version, ouvrez le menu … et sélectionnez Copy.

3. Nommez la copie v3, cochez Auto Build et Auto Deploy, puis cliquez sur CREATE.

   

v2 continue de servir vos utilisateurs pendant que v3 est construite et déployée. La Data Platform bascule sur v3 dès que cette version est prête, puis arrête v2.

Le build prend quelques minutes. Pour le suivre, ouvrez l'onglet Builds de la version et cliquez sur l'icône des logs. La boîte de dialogue Build Logs affiche l'état du build, son temps d'attente dans la file et chaque étape au fur et à mesure de son exécution.

Étape 6 : ouvrir votre application

Une fois v3 en cours d'exécution, ouvrez votre application et connectez-vous avec Data Platform. La page Home affiche désormais le titre Top 7 Stations et le graphique de classement, avec ses chiffres en millions de passagers.

Ce que vous avez construit

Votre application dispose d'un format de nombre partagé par tous ses graphiques et d'un graphique de classement sur sa page Home, déployés dans la version v3 sans interruption pour vos utilisateurs. Vous pouvez réutiliser ce format dans chaque graphique qui affiche des trajets.

Besoin de plus de flexibilité ?

Le Visual Editor est le moyen le plus rapide de construire une application. Si vous êtes développeur et recherchez un contrôle total sur le code de votre application, la Data Platform propose aussi des templates construits avec des frameworks front-end modernes.

Ces templates se connectent à la même API et vous permettent de construire des applications entièrement personnalisées avec votre propre workflow de développement.

Créer une Front App personnalisée avec React, Vite et Shadcn

Aller plus loin

Pour une formation ou une assistance technique sur la mise en œuvre de nos solutions, contactez votre commercial ou consultez la page Professional Services pour obtenir un devis et faire analyser votre projet par nos experts.

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 dédié.

Si vous avez besoin d'une assistance concernant vos services OVHcloud, créez une demande depuis notre centre d'aide.

Rejoignez notre communauté d'utilisateurs.