Objectif

Une API expose les données de votre Projet au monde extérieur, et une application les transforme en un dashboard que vos utilisateurs peuvent ouvrir. Dans cette dernière étape du guide Premiers pas, vous déployez les deux, l'une après l'autre :

1. Déployer une API, l'interface entre le monde extérieur et le reste de votre Projet, pour que les applications puissent exécuter vos requêtes en HTTP.
2. Construire l'application qui la lit, le site qu'ouvrent vos utilisateurs, avec un dashboard et deux graphiques tirés de vos propres données.

Vous n'écrivez aucun code, ni pour l'une ni pour l'autre. La Data Platform fournit un template pour chacune :

• Query API crée une Front API, un service qui expose les données de votre Projet en HTTP. Vos applications lui envoient leurs requêtes, y compris celles enregistrées dans votre Analytics Manager, et elle peut conserver les résultats dans un cache.
• Mosaic crée une Front App, l'application web que vos utilisateurs ouvrent, avec un menu, une mise en page et une bibliothèque de graphiques. Ses pages sont décrites dans des fichiers de configuration plutôt qu'écrites en code : vous les construisez dans le Visual Editor, un éditeur que l'application elle-même sert dans la console.

Il ne vous reste qu'à nommer les éléments et à décrire ce que vous voulez voir. Pour une vue d'ensemble des API et des applications au-delà de ce guide, consultez Application APIs et Applications de la Data Platform.

Prérequis

Réalisez d'abord les étapes précédentes du guide Premiers pas : vos sources sont connectées, votre schéma Lakehouse Manager est construit, votre workflow s'est exécuté et vos requêtes renvoient des données. Le deuxième graphique de cette page réutilise la requête rides_per_cat_temperature que vous avez enregistrée lors de cette dernière étape.

Prévoyez un peu d'attente en cours de route : cette page lance 3 builds et 3 déploiements, qui prennent chacun quelques minutes.

Partie 1 : exposer vos données via une API

Créer l'API

Depuis votre Projet, ouvrez Applications & APIs. La liste affiche chaque application et chaque API déployées dans le Projet, avec leur type, leur URL et leur statut.

Cliquez sur + ADD.

La boîte de dialogue Choose application type propose trois types d'application :

• Front App : une application front-end qui utilise les données exposées par vos API.
• Front API : une API qui expose les données des services de votre Projet.
• Apache Superset : une instance Apache Superset prête à l'emploi.

Sélectionnez Front API, puis cliquez sur NEXT.

Configurer sa première version

Dans Application name, saisissez rides. La Data Platform en déduit le nom technique et l'URL : votre API est servie sur /rides-api/.

Laissez Source sur From Template. Il n'y a pas de nom de version à choisir : la première version d'une application est toujours v1. Une version est un instantané déployable de votre API : vous pourrez ajouter une v2 plus tard sans jamais arrêter la v1.

Sous Select a template, choisissez Query API (Node + Express). Ce template permet à vos applications d'exécuter des requêtes sur vos données en HTTP, y compris les requêtes enregistrées dans votre Analytics Manager.

Cochez ensuite les 3 options :

• Enable cache : déployer un cache en mémoire (Valkey) à côté de l'API, pour que les appels répétés n'interrogent pas de nouveau votre entrepôt de données. Les valeurs par défaut de Engine & version et Allocated DPU (%), Valkey 8.1.10-alpine et 20 %, suffisent pour ce guide.
• Auto Build : lancer un build dès la création de la version.
• Auto Deploy : déployer la version dès que le build réussit.

Avec les deux dernières options, un seul clic télécharge, construit et déploie votre API. Cliquez sur CREATE.

Laisser le build s'exécuter

La Data Platform ouvre la vue d'ensemble de votre nouvelle API. À gauche, Versions liste v1 avec le build qu'Auto Build vient de lancer : aucune version n'est encore déployée. À droite, Information affiche le nom technique, rides-api, et l'application IAM qui protège votre API. Le build prend quelques minutes.

Lorsque le build réussit, Auto Deploy prend le relais. Lorsque vous revenez dans Applications & APIs, votre API apparaît avec le statut Running.

Vérifier que votre API répond

Ouvrez votre API : cliquez sur son URL dans la colonne URL de la liste, ou sur Open app dans la carte Deployed version de sa vue d'ensemble. Votre API répond avec une page d'accueil.

Votre API est déployée et accessible.

L'application que vous créez ensuite se connecte à cette URL : son formulaire la propose dans le champ API URL.

Partie 2 : visualiser vos données dans une application

Créer l'application

De retour dans Applications & APIs, cliquez sur + ADD, sélectionnez Front App et cliquez sur NEXT.

Remplissez le formulaire :

• Application name : analytics. La Data Platform en déduit l'URL : votre application est servie sur /analytics-app/.
• API URL : sélectionnez l'URL de l'API rides que vous venez de déployer. C'est ce champ qui connecte votre application à votre API.
• Select a template : Mosaic.
• Cochez Auto Build et Auto Deploy, pour que la version soit construite et mise en ligne d'elle-même.

Comme pour votre API, la première version s'appelle v1. Une Front App ne propose pas de cache : elle sert les pages qu'ouvrent vos utilisateurs, tandis que les données et leur cache restent du côté de l'API.

Cliquez sur CREATE.

La Data Platform ouvre la nouvelle application pendant le build de sa première version. Le build prend quelques minutes.

Lorsque le build réussit, Auto Deploy prend le relais. Dans la vue d'ensemble, la carte Deployed version affiche maintenant v1 en cours d'exécution, avec les boutons qui agissent sur elle : Open app, Edit et Visual Editor.

Ouvrir le Visual Editor

Cliquez sur Visual Editor dans la carte Deployed version.

La Data Platform ouvre l'onglet Visual Editor de v1, avec votre application dans la console, connectée en tant qu'administrateur. La barre d'outils en haut n'apparaît que dans le Visual Editor : vos utilisateurs ne la voient jamais. À partir de maintenant, vous construisez tout (pages, graphiques, filtres, menus, formats de nombre) dans l'application elle-même.

Créer une page

Dans une application, les dashboards sont des pages. Le template Mosaic en inclut une, servie sur /home : c'est la page actuellement affichée.

Cliquez sur Dashboards dans la barre d'outils, puis sur l'onglet + New, et renseignez :

• Name : Rides analytics
• Route : /rides-analytics

Laissez la description vide, et laissez Add a link to it in the "sidebar" menu coché : vos utilisateurs doivent pouvoir atteindre cette page, et cette option ajoute le lien à la barre latérale pour vous.

Cliquez sur Create, puis sur Close.

Cela crée trois éléments à la fois : la page elle-même, son entrée dans la configuration de l'application et le lien dans la barre latérale. Créer la page depuis cette boîte de dialogue garantit la cohérence des trois.

Cliquez sur Rides analytics dans la barre latérale pour ouvrir votre nouvelle page, encore vide.

Construire votre premier graphique

Créer un panel

Cliquez sur + Add dans la barre d'outils et sélectionnez Containers > Panel. Un panel est un conteneur pour les autres composants. Redimensionnez-le en faisant glisser son coin inférieur droit.

Ajouter le graphique

Dans le panel, cliquez sur son bouton + et sélectionnez Charts > Semi donut.

Dans l'onglet General, nommez le graphique Rides per temperature.

Ouvrez ensuite l'onglet Data, où vous décrivez les données à afficher plutôt que leur représentation graphique. Laissez Data source sur Query builder, qui construit la requête directement ici, puis :

• sous Measures, cliquez sur + Add et sélectionnez rides avec l'agrégation sum.
• sous Group by, cliquez sur + Add et sélectionnez cat_temperature.

Cliquez sur Apply. Le graphique interroge vos données via l'API déployée dans la partie 1 et affiche une part par catégorie de température : le nombre total de trajets dans chacune.

Ajouter un graphique à partir d'une requête enregistrée

Un total montre comment les trajets se répartissent entre les catégories de température, pas l'effet de la température sur la fréquentation : certaines catégories couvrent simplement plus de jours que d'autres. La requête rides_per_cat_temperature que vous avez enregistrée dans l'Analytics Manager répond à cette seconde question, avec le nombre moyen de trajets par jour et par station dans chaque catégorie de température. Un graphique peut la réutiliser telle quelle.

Cliquez de nouveau sur le bouton + du panel et sélectionnez Charts > Bar : il s'agit de moyennes, pas des parts d'un tout.

Dans l'onglet General, nommez le graphique Average daily rides per station.

Dans l'onglet Data, réglez Data source sur Saved query (Analytics Manager), puis sélectionnez rides_per_cat_temperature dans Saved query. Il n'y a rien d'autre à renseigner : les champs, le regroupement et l'ordre d'une requête enregistrée sont définis dans l'Analytics Manager, et c'est là que vous les modifiez.

Cliquez sur Apply. Le graphique se place sous le premier, là où le panel n'a plus de place pour lui. Placez-le plutôt à côté du semi donut : dans les options du graphique à droite, sous Layout, réglez Column sur 45 et Row sur 0.

Les barres affichent la moyenne de chaque catégorie de température, dans l'ordre de tri de la requête enregistrée.

Ajouter un filtre

Un filtre permet à vos utilisateurs d'affiner les graphiques. Cliquez de nouveau sur le bouton + du panel et sélectionnez Filters > Select.

Le filtre est ajouté immédiatement et ses options s'ouvrent à droite. Réglez Field sur station_name, la colonne sur laquelle porte le filtre.

Les options de chaque graphique indiquent All filters on the page sous Filters : les deux graphiques réagissent donc à ce filtre sans autre réglage. Une requête enregistrée le reçoit sous forme de paramètre dynamique.

Cliquez sur Save dans la barre d'outils. Le compteur à côté revient à no changes : votre dashboard est enregistré dans les sources de la version.

Faire un essai

Cliquez sur le bouton ▶ à l'extrémité droite de la barre d'outils pour quitter le mode édition. La barre d'outils se réduit à un seul bouton Edit, et vous voyez votre application comme vos utilisateurs la voient.

Sélectionnez une station dans le filtre : les deux graphiques se redessinent pour cette station uniquement.

Votre dashboard est prêt.

Déployer une nouvelle version

Revenez à la vue d'ensemble de votre application. La carte Deployed version indique que the configuration has been modified since the last build : vos utilisateurs reçoivent toujours la version déployée plus tôt, qui ne contient pas le dashboard que vous venez de construire.

La carte propose de reconstruire cette version sur place. Copiez-la plutôt, pour que v1 reste telle quelle, une version vers laquelle vous pouvez revenir : ouvrez le menu … de la carte Deployed version et sélectionnez Copy.

Dans la boîte de dialogue Copy Version, nommez la copie v2, cochez Auto Build et Auto Deploy, puis cliquez sur CREATE.

Le build prend quelques minutes. Pour le suivre, ou pour analyser un build en échec, 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, avec un lien vers le Control Center pour un filtrage avancé.

Ouvrir votre application en ligne

Une fois v2 construite, la Data Platform bascule sur cette version et arrête v1. La bascule peut prendre un moment : tant qu'elle n'est pas terminée, vos utilisateurs reçoivent toujours la version précédente, si bien que personne ne subit d'interruption.

Ouvrez votre application avec le bouton Open app de sa carte Deployed version. Contrairement au Visual Editor, que la console ouvre pour vous, votre application est un site autonome et protégé : elle vous demande donc de vous connecter. Connectez-vous avec Data Platform.

Votre application s'ouvre. Rides analytics, l'entrée de menu que vous avez ajoutée, figure dans la barre latérale et mène à vos deux graphiques, en direct et filtrables.

Votre dashboard est en ligne et lit ses données via votre propre API. Rien ne se rafraîchit à intervalle régulier : chaque graphique interroge l'API à l'ouverture d'une page et à chaque changement de filtre.

Vous avez terminé le guide Premiers pas de la Data Platform. Vous êtes maintenant prêt à explorer la Data Platform par vous-même et à démarrer de nouveaux projets.

L'étape suivante approfondit les possibilités du Visual Editor.

Personnaliser davantage votre première application

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.