Personnaliser davantage votre première application
Dans ce tutoriel, vous découvrirez des fonctionnalités avancées du visual app builder pour personnaliser les aspects visuels d'une application simple
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.
Ce tutoriel contient un contenu étendu pour la section Démarrage intitulée Créer et déployer une application front-end.
Prérequis
Ce tutoriel suppose que vous avez suivi les cinq sections du tutoriel de Démarrage. 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é.
Dans le second panneau, cliquez sur l'icône ➕ et sélectionnez HTML. Nommez-le Top 7 Stations avec le style H1.
Dans le second panneau, cliquez sur l'icône ➕ et sélectionnez Chart. Choisissez le type Recharts - Bar Horizontal.
Dans l'onglet Request, choisissez le mode Request et saisissez rides comme data (Sum et Descending) et station_name comme scale.
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" :
Jusqu'ici, votre dashboard devrait ressembler à ceci. N'oubliez pas de sauvegarder.
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.
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.
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.
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).
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.
Voici le résultat :
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.
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.
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
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 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 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.