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 de notre territoire.

Nous allons procéder en 4 étapes :

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 cas, nous allons rechercher un agenda pour Bordeaux. Une fois que vous avez trouvé un agenda, cliquez sur la page de cet agenda.

Pour notre exemple, nous avons sélectionné l'agenda de Bordeaux Métropole : https://openagenda.com/fr/bordeaux-metropole. L'identifiant de cet agenda se trouve à la fin de l'adresse URL, ici il s'agit de bordeaux-metropole. Nous en aurons besoin pour la prochaine étape de configuration du traitement JSON.

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 sur OpenAgenda. 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 la prochaine étape de configuration du traitement JSON.

Vous disposez maintenant de l'identifiant de l'agenda qui vous intéresse ainsi que de la clé d'API de votre compte.

Nous allons configurer le traitement JSON qui va permettre d'importer les données d'OpenAgenda dans le format qui nous intéresse.

Sur votre compte Data fair, cliquez sur la page des traitements puis sur le bouton Créer un traitement. Choisissez la 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].

Sur 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 aller chercher les données title.fr [4].

À l'execution du traitement, la colonne title sera créée dans notre jeu de données sur Data fair à l'aide des données de l'API dans title.fr

De la même façon, nous allons ajouter 14 nouveaux éléments pour créer 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 à l'aide 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 :

1. Créez la colonne Lien image
2. Renseignez les concepts , libellés et séparateurs
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.

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

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

La colonne image est 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 sur 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 que 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] et dans l'expression, renseignez la formule SUBSTRING(value, 11, 5). [4] Cette formule ne va garder que 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 avont 3 onglets Date, Détails ainsi qu'Icône et Couleur.

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

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.