Introduction

‍

La plupart des CMS comme Wordpress, Joomla, Wix ou autres vous permette de très facilement enrichir le contenu de votre site, et ce contenu est bien souvent structuré de façon très précise dans le HTML final, celui qui sera généré par votre CMS pour être correctement affiché par le navigateur de vos utilisateurs.

En apprenant à reconnaître l'organisation de ce HTML directement depuis son navigateur, on peut alors cibler la manière avec laquelle accéder à certaines parties du contenu, en utilisant ce qu'on appelle des sélecteurs CSS.

Une fois ces sélecteurs CSS trouvés, ils peuvent être utilisés directement depuis le workflow de votre assistant, en appelant une fonction qui ira extraire les données voulues.

Enfin, une fois ces informations extraites, elles pourront être traitées ou affichées par toutes les étapes habituelles de votre workflow.

‍

Dans cet article, nous apprendrons donc à :

1. Repérer la structure HTML affichant l'information voulue
2. En extraire les sélecteurs CSS pertinents
3. Les utiliser depuis un assistant Prisme.ai pour automatiquement extraire les données voulues du site

‍

Comme exemple, nous allons construire une intention "Agenda culturel" affichant les événements culturels programmés sur la Haute Garonne en allant directement les chercher sur la page https://www.hautegaronnetourisme.com/agendas/grands-rendez-vous/.

‍

C'est parti !

‍

Repérer la structure HTML affichant l'information voulue

Pour ce faire, nous allons utiliser l'outil "Inspecter" présent sur tous les navigateurs récents tels que Google Chrome ou Firefox, disponible depuis le menu du clic-droit.

‍

‍

‍

La zone HTML contenant le bloc survolé par votre souris s'ouvrira automatiquement dans un panel latéral, alors prenez bien soin de faire le clic droit sur la zone qui vous intéresse ! Dans notre cas, il s'agit de n'importe quel carré présentant un événement.

‍

Sur cette nouvelle capture d'écran, j'ai déjà pris un peu d'avance : en survolant de haut en bas le panel HTML, j'ai pu repérer quel bloc précis correspond au carré de l'événement. En effet, lorsque vous survolez le code HTML depuis le panel Inspecter, les zones correspondantes dans le navigateur sont automatiquement surlignées en bleu.

Différents blocs HTML peuvent correspondre à la même zone dans votre navigateur : assurez-vous de cibler le bloc le plus "haut" dans le panel.

Dans notre cas, le code HTML correspondant est le suivant, une fois entièrement déplié :

Pas d'inquiétude, nous allons maintenant découvrir comment extraire des informations précises de ce bloc HTML.

‍

Cibler des informations précises grâce aux sélecteurs CSS

Les sélecteurs CSS ne sont rien de plus qu'une manière de cibler un bloc précis dans une page HTML, utilisé par exemple pour modifier son apparence. Nous allons les utiliser pour indiquer à notre fonction Prisme.ai quelles données extraire.

‍

Ces sélecteurs sont très puissants et peuvent cibler des blocs HTML de bien des manières, mais pour nos besoins, seuls 2 suffiront :

• par type de bloc
• par nom de classe

‍

Le type de bloc

Le type de bloc est le premier mot qu'on peut voir au début de chaque ligne sur la dernière capture d'écran, situé juste après un signe <‍

Par exemple, la ligne <div class="card" ...> affiche un bloc de type div

La ligne <noscript> affiche un bloc de type noscript

La ligne <h2 class="card-title">L'ETE DE SAVEURS & SENTEURS</h2> affiche un bloc de type h2

‍

Nous n'avons pas besoin de savoir à quoi servent ces différents types, tant que nous savons quels sont les types des blocs qui nous intéressent. Et sur les 3 exemples ci-dessus, tous ces blocs vont nous intéresser.

‍

Les classes

Sur 2 des exemples donnés ci-dessus, on peut voir une partie class="...". Entre les guillements, on peut trouver la ou les classes du bloc en question.

C'est grâce à ces classes que l'administrateur du site peut personnaliser l'affichage de chaque bloc. Nous, nous allons simplement noter ces identifiants qui nous permettront de cibler les données voulues.

‍

Les 2 combinés dans un sélecteur CSS

Dans un sélecteur CSS, une classe est toujours préfixée d'un point.

Un sélecteur CSS peut être composé d'autant de classes et types de bloc que vous voulez, séparés par des espaces.

Chaque nouvel espace signifie qu'on cible un nouveau bloc à l'intérieur du bloc précédemment indiqué.

Le plus possible, les classes sont à préférer aux types de bloc, car beaucoup plus précis.

‍

Pour construire nos différents sélecteurs CSS, commençons donc par cibler le premier bloc contenant toutes nos données, donc une des deux premières lignes tout en haut de notre capture d'écran. Par exemple : .card

Ce simple .card est un sélecteur CSS ciblant le bloc entier de l'événement. Nommons ce bloc le "conteneur"

‍

Ciblons maintenant les différentes informations affichées par le site :

• Date: .date
• Image : .media noscript img
• Lien de la page: a
• Titre: .card-body .card-title
• Description: .card-body .resume
• Commune: .commune

‍

Tous ces sélecteurs sont à considérer dans le cadre du premier sélecteur .card. En effet, a l'appel de notre fonction, celui-ci sera spécifié séparément, pour permettre à la fonction de trouver l'ensemble des événements disponibles.

‍

Extraire les données ciblées depuis un assistant

Le terrain est bien préparé, il est maintenant temps de passer à l'assistant lui-même ! Mais rassurez-vous, le plus dur est déjà derrière nous.

Depuis l'assistant de votre choix, vous allez donc créer une intention "Agenda culturel". Dans cette intention, vous allez glisser une action "Fonction", que vous configurerez comme suit :

• Choisissez une fonction : rechercher et sélectionner la fonction "HTML Scrapper", déjà disponible sur le Store publique.
• Paramètre url: https://www.hautegaronnetourisme.com/agendas/grands-rendez-vous/
• Paramètre output : events

Et enregistrez !

‍

Dernière étape, la configuration du paramètre selectors, à faire depuis l'ongle Manifeste.

Ouvrez donc l'onglet Manifeste, et sélectionnez votre intention Agenda culturel depuis la liste déroulante d'intentions située en haut à droite.

‍

Juste en dessous de la ligne URL, nous allons maintenant ajouter les différents sélecteurs précédemment ciblés :

‍

Parmi ces différents sélecteurs, seul le sélecteur container est requis et demandé par la fonction HTML Scrapper. C'est ce container qui permettra de repérer chaque événement individuel et de tous les renvoyer dans une liste.

Ensuite, la fonction HTML Scrapper permet d'ajouter autant de sélecteur que l'on veut, sans restriction sur la façon de les nommer.

Ainsi, lorsque cette fonction sera exécutée, elle stockera dans events une liste contenant autant d'objet qu'il y a d'événements, et chaque objet contiendra 6 variables date, img, url, title, description et commune : toutes les informations que nous avons pu extraire de la page.

‍

A présent, pourquoi ne pas les afficher ? 

Commencez par ajouter un bloc Répétition (situé dans Logique) en indiquant cette variable events, qui sera automatiquement complétée :

Ceci fait, un nouveau bloc "Répéter sur events" apparaîtra automatiquement sur votre Design.

Il ne manquera alors plus que d'y glisser une réponse Carte (Objets), en affichant les variables que vous voulez :

Enregistrez, et testez !