Dans ce tutoriel, nous allons apprendre à importer un agenda d'événements et à configurer une application pour afficher une frise chronologique des événements à venir sur notre territoire.

Voici les 4 étapes à suivre :

1. Créez votre compte et recherchez un agenda sur le site OpenAgenda
2. Configurez un traitement JSON pour importer les données
3. Modifiez le schéma de votre jeu de données
4. Configurez l'application Chronologie

OpenAgenda est un site qui recense et diffuse divers agendas d'événements.

Vous pouvez rechercher directement sur le site un agenda qui vous intéresse. Dans notre exemple, nous allons rechercher un agenda pour Bordeaux. Une fois que vous avez trouvé un agenda, accédez à sa page.

Pour notre exemple, nous avons sélectionné l'agenda de Bordeaux Métropole : Agenda de Bordeaux Métropole. L'identifiant de cet agenda se trouve à la fin de l'adresse URL, ici il s'agit de bordeaux-metropole. Cet identifiant sera nécessaire pour configurer le traitement JSON lors de l'étape suivante.

Nous allons utiliser l'API du site pour importer les données sur votre compte Data Fair.

Pour utiliser l'API, vous devez avoir un compte surOpenAgenda. Créez et validez votre compte via l'email de confirmation, puis connectez-vous. Une fois connecté, accédez à la page des paramètres du site.

Cliquez sur Voir vos clés API et copiez la clé publique. Cette clé sera nécessaire pour configurer le traitement JSON à l'étape suivante.

Vous disposez maintenant de l'identifiant de l'agenda qi vous intéresse (bordeaux-metropole) ainsi que de la clé d'API de votre compte.

Nous allons configurer le traitement JSON pour importer les données d'OpenAgenda dans le format souhaité.

Sur votre compte Data Fair, cliquez sur la page des traitements, puis sur le bouton Créer un traitement. Choisissez le traitement Import depuis une API JSON.

Finalisez la création du traitement en choisissant un titre et un propriétaire.

La page de configuration du traitement s'affiche avec trois onglets : Jeu de données, Source de données et Champs à récupérer. Nous allons détailler chacun de ces onglets.

Dans l'onglet Jeu de données, sélectionnez Créer un jeu de données [1] et indiquez le titre du jeu de données [2], par exemple Agenda Bordeaux Métropole.

Dans l'onglet Source de données, renseignez l'URL de l'API en incluant l'identifiant de votre agenda et la clé d'API créée précédemment [1]. Par exemple, l'URL utilisée est : https://api.openagenda.com/v2/agendas/bordeaux-metropole/events?key=ma-clé-numérique. Remplacez la valeur ma-clé-numérique par votre clé d'API.

Pour la pagination, sélectionnez l'option Paramètres dans l'URL [2] et indiquez from comme nom du paramètre [3].

Pour la limite des pages, utilisez size comme nom du paramètre [4] et définissez 200 comme nombre d'éléments par page [5].

Dans l'onglet Champs à récupérer, nous allons créer les colonnes de notre jeu de données. Nous allons créer 15 colonnes.

Dans la section du Chemin des résultats, renseignez events [1].

Ajoutez un élément [2] et renseignez le titre de la colonne de votre jeu de données title [3] ainsi que le chemin de l'API pour récupérer les données title.fr [4].

À l'exécution du traitement, la colonne title sera créée dans notre jeu de données sur Data Fair en utilisant les données de l'API de title.fr.

De la même manière, nous allons ajouter 14 nouveaux éléments pour créer un total de 15 colonnes :

• ID colonne : description et Chemin de la colonne : description.fr
• ID colonne : begin et Chemin de la colonne : firstTiming.begin
• ID colonne : end et Chemin de la colonne : lastTiming.end
• ID colonne : next_date et Chemin de la colonne : nextTiming.begin
• ID colonne : next_begin_hour et Chemin de la colonne : nextTiming.begin
• ID colonne : next_end_hour et Chemin de la colonne : nextTiming.end
• ID colonne : image_filename et Chemin de la colonne : image.filename
• ID colonne : image_base et Chemin de la colonne : image.base
• ID colonne : keywords et Chemin de la colonne : keywords.fr
• ID colonne : address et Chemin de la colonne : location.address
• ID colonne : city et Chemin de la colonne : location.city
• ID colonne : location_name et Chemin de la colonne : location.name
• ID colonne : latitude et Chemin de la colonne : location.latitude
• ID colonne : longitude et Chemin de la colonne : location.longitude

Une fois les 15 colonnes configurées, activez le traitement puis exécutez-le.

Le jeu de données est créé et les données sont importées.

Dans ce paragraphe, nous allons compléter le Schéma de notre jeu de données en utilisant des concepts, des colonnes calculées et des transformations.

Le Schéma du jeu de données que nous avons créé à l'aide du traitement est composé de 15 colonnes :

Nous allons :

1. Créez la colonne Lien image
2. Renseignez les concepts , libellés et séparateurs sur les colonnes
3. Transformez les valeurs des colonnes d'heure de début et d'heure de fin

Les colonnes image_filename et image_base contiennent les éléments du lien de l'image. À partir de ces deux colonnes, nous allons créer la colonne image correspondant aux liens des images que nous souhaitons afficher.

Cliquez sur l'onglet Enrichissement [1], puis sur le bouton Ajouter une colonne calculée [2]. Ensuite, renseignez le nom de la clé de la colonne [3] ainsi que son type [4], puis validez l'ajout de la colonne [5].

La fiche de la colonne est alors disponible. Cliquez sur l'icône de crayon de la fiche pour éditer la formule de la colonne.

À l'aide de la formule CONCATENATE(image_base, image_filename) nous allons concaténer les valeurs des colonnes image_base et image_filename. Renseignez la formule CONCATENATE(image_base, image_filename) dans le champ de l'Expression [1], les résultats des valeurs sont disponibles dans Résultats [2]. Cliquez sur la croix [3].

À l'aide de la formule CONCATENATE(image_base, image_filename), nous allons concaténer les valeurs des colonnes image_base et image_filename. Renseignez la formule CONCATENATE(image_base, image_filename) dans le champ de l'Expression [1]. Les résultats des valeurs sont disponibles dans Résultats [2]. Cliquez sur la croix [3].

Appliquez l'ajout de la formule pour finaliser l'ajout de la colonne image [4].

La colonne image est maintenant disponible dans le tableau et contient les liens des images des événements.

Les concepts permettent de mieux définir les colonnes de vos jeux de données. Nous allons renseigner les concepts de nos colonnes ainsi que les libellés et les séparateurs pour que les données soient mieux représentées dans la visualisation Chronologie.

Cliquez sur une colonne dans un schéma [1], renseignez un libellé [2], renseignez le concept associé à la colonne [3] et le séparateur si besoin.

Nous avons renseigné les libellés, concepts et séparateurs suivants pour les colonnes :

• titre : Libellé = Titre et Concept = Libellé
• description : Libellé = Description et Concept = Description
• begin : Libellé = Date de début et Concept = Date de début
• end : Libellé = Date de fin et Concept = Date de fin
• next_date : Libellé = Prochaine date et Concept = Date d'évènement
• next_begin_hour : Libellé = Heure de début
• next_end_hour : Libellé = Heure de fin
• image_filename : Libellé = Nom image
• image_base : Libellé = Emplacement image
• keywords : Libellé = Mots clés et séparateur ; (point virugule)
• address : Libellé = Adresse et Concept = Adresse
• city : Libellé = Commune et Concept = Commune
• location_name : Libellé = Lieu et Concept = Libellé
• latitude : Libellé = Latitude et Concept = Latitude
• longitude : Libellé = Longitude et Concept = Longitude
• image : Libellé = Lien image et Concept = Image

Appliquez les modifications au Schéma [4].

Les colonnes Heure de début et Heure de fin contiennent des valeurs de type date et heure comme 7 avr. 2025 17:30.

Nous allons transformer le contenu des valeurs. D'une valeur 7 avr. 2025 17:30, nous souhaitons garder uniquement l'horaire 17:30.

Cliquez sur la colonne Heure de début [1], puis cliquez sur le bouton de transformation des données [2].

Nous allons surcharger le type des données pour avoir un type Texte [3]. Dans l'expression, renseignez la formule SUBSTRING(value, 11, 5) [4]. Cette formule conservera uniquement les 5 caractères après la 11e lettre, ce qui correspond à l'horaire dans les données brutes. Les valeurs des données brutes de cette colonne sont sous la forme 2025-04-03T20:00:00+02:00. Vous pouvez renseigner cette valeur dans les exemples [5] pour visualiser le résultat de votre transformation.

Vous pouvez utiliser la même formule pour la colonne Heure de fin, puis appliquez les modifications au Schéma [6].

Les valeurs des colonnes Heure de début et Heure de fin n'affichent plus que les horaires.

Votre jeu de données est désormais prêt à être utilisé sur la visualisation Chronologie.

Sur la page des applications, cliquez sur le bouton Configurer une application.

Choisissez l'application Chronologie, renseignez le nom et le propriétaire, puis finalisez la création de l'application.

Cliquez ensuite sur le bouton Éditer la configuration.

Dans la section Données, sélectionnez le jeu de données que vous souhaitez afficher.

Dans la section Options générales, choisissez le tri Chronologique, la position Alternée, et la couverture temporelle Futur pour afficher les événements à venir.

Dans la section des éléments, nous avons trois onglets : Date, Détails et Icône et Couleur.

Dans la section Date, sélectionnez le champ de temporalité Prochaine date, puis cochez la case pour la valeur en gras si vous souhaitez u affichage en gras.

L'onglet Détails permet de configurer les éléments de la fiche.

Nous allons configurer une vignette avec un Réglage manuel et la colonne Titre dans le champ de la barre d'outils.

Nous allons configurer deux sections dans la fiche : une section pour l'image et une section pour le texte avec l'ensemble des champs à afficher.

Cliquez sur le bouton + pour ajouter une section.
Dans cette section, ajoutez un élément, puis choisissez l'élément Image [1] ainsi que le champ Lien image [2], et cliquez sur OK [3].
Vous pouvez modifier le rapport de forme si vous souhaitez obtenir une image plus grande.

Créez une nouvelle section qui contiendra l'ensemble des champs à afficher. Nous allons afficher les valeurs des colonnes Description, Lieu, Adresse, Heure de début et Heure de fin dans un champ Texte Libre, ainsi que les Mots clés.

Dans la nouvelle section, nous allons ajouter un élément par champ.
Dans le premier élément, sélectionnez le champ Description [1], décochez la case Afficher le libellé [2], et cochez la case pour Tronquer le texte [3].
Cliquez sur OK pour valider cet élément.

Pour ajouter l'élément du Lieu, suivez la même procédure que précédemment. Sélectionnez le champ Lieu, puis cochez la case Valeur en gras pour mettre en évidence le texte. Assurez-vous de ne pas cocher la case Tronquer le texte afin que l'intégralité du contenu soit affichée.

Pour l'élément de l'Adresse, les options telles que Valeur en gras ou Tronquer le texte ne sont pas activées.

Nous allons ensuite configurer un Texte libre et valeurs de champs [1] ayant le contenu De {next_begin_hour} à {next_end_hour} [2] pour afficher les valeurs des colonnes Heure de début et Heure de fin.

Enfin, nous allons configurer les mots clés [1] sous forme de badges [2] avec une couleur bleue [3] [4]

L'onglet Icônes et couleurs vous permet d'ajouter une icône ou une couleur en fonction d'un champ spécifique ou d'une valeur constante. Par exemple, vous pouvez attribuer une icône particulière à chaque type d'événement ou utiliser une couleur spécifique pour mettre en évidence certaines informations.

Dans notre cas, nous avons choisi de ne pas ajouter d'icône et de conserver une couleur constante.

Ce tutoriel vous a permis de visualiser l'agenda des événements à venir sur une frise chronologique. En suivant les étapes décrites, vous avez appris à configurer une application pour afficher des données temporelles de manière claire et organisée. La frise chronologique est un outil puissant pour représenter des événements dans le temps, facilitant ainsi la compréhension des données.