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.

Sélectionnez le modèle ReactJS - Getting Started depuis le store. Ce modèle produit un dashboard BI complet.

Remplissez les différents champs comme indiqué dans la capture d'écran ci-dessous et appuyez sur Confirm.

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 !

Cliquez sur l'icône house pour le définir comme page d'accueil par défaut de votre application.

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.

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.

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 !

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.

Faites glisser le nouveau conteneur au-dessus du pied de page (qui doit rester en bas).

Ouvrez le conteneur puis ajoutez un élément : sélectionnez Parameters.

Choisissez celui appelé Select box, puis rendez-vous dans les options du nouveau paramètre.

Remplissez les options comme indiqué dans la capture d'écran ci-dessous.

Dans l'onglet Infos, donnez-lui le nom suivant : select_stations, et appuyez sur Confirm.

↪ En savoir plus sur les paramètres dynamiques.

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 !

Étape 1. Créer un panneau

Cliquez sur l'icône ➕ pour créer un panneau (Containers > Panel).

Une fois créé, vous pouvez le redimensionner pour qu'il s'étende sur tout l'écran.

É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.

Nommez-le Rides history et appliquez le style H1 en cliquant sur le bouton H.

É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.

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.

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.

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é !

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).

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.
Tout d'abord, Copy la version actuellement déployée de l'application.

Ensuite, vous devez nommer la nouvelle version (v2 dans la capture d'écran ci-dessous).

Maintenant, cliquez sur Build, puis Deploy.

Votre application est en ligne et est désormais accessible ! Le lien peut être obtenu dans l'onglet Overview en cliquant sur Open.

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

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 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.