Comment structurer des données web non-structurées et les exposer sous forme d'API ?

À l'aide d'une fonction, vous pouvez extraire des données d'une page web et construire un tableau de données structurées que vous pourrez ensuite exploiter dans votre workflow pour, par exemple, afficher des cartes de résultats.

Nous allons afficher les postes disponibles à Toulouse chez Pole emploi en quelques étapes et un peu de code JavaScript.

Créer une fonction

Nous allons tout d'abord créer une fonction dans notre store. Vous trouverez le bouton pour créer une nouvelle fonction dans le menu des assistants. Il vous sera demandé de choisir quel type de ressource vous voulez créer, vous choisirez "Fonction".

Après avoir créé la ressource, vous découvrez l'éditeur de code JavaScript qui peut être inquiétant si vous n'êtes pas développeur. Nous allons découvrir ensemble comment récupérer les données qui nous intéressent.

Récupérer la page web

La première étape consiste à récupérer le contenu de la page web. Pour notre exemple, nous allons extraire les données de cette page. L'éditeur de code met à votre disposition une fonction nommée fetch dont le rôle est de charger une adresse web grâce au code suivant :

const res = await fetch('https://candidat.pole-emploi.fr/offres/emploi/toulouse/v4');
return await res.text();

En cliquant sur le bouton "RUN" (la fléche verte), vous exécuterez votre fonction qui affichera le contenu texte de la page web. Première étape réussie.

Extraire les données

Nous mettons à votre disposition un autre outil pour vos scripts qui permet de construire un arbre DOM qui vous permettra de naviguer dans tous les éléments de la page et ainsi de trouver ceux qui nous intéressent. La fonction DOM prendra le texte de la page web en paramètre et vous donnera un objet proposant une API complète de navigation dans la page.

const res = await fetch('https://candidat.pole-emploi.fr/offres/emploi/toulouse/v4');
const text = await res.text();

return DOM(text)

En exécutant le script, vous verrez que vous avez à disposition un objet sur lequel vous pourrez utiliser des fonctions d'accès au DOM de la page.

Cibler les données

Allons consulter notre page et explorons son DOM à la main grâce à l'inspecteur de votre navigateur favori. Il sera accessible avec F12 ou alt+option+i sur la plupart des navigateurs. Cet inspecteur vous permet de consulter l'arbre DOM de la page web en cours et donc des indices pour cibler les éléments que vous voulez extraire de cette page. Dans notre cas, nous pouvons constater que chaque résultat est affiché dans un élément de classe "result". Dans chacun de ces éléments, nous avons une balise a contenant l'URL, une balise h2 contenant le titre et une balise de classe "description" pour le contenu de l'annonce. Nous avons tout ce qu'il nous faut pour extraire les données avec dom-parser :

const res = await fetch('https://candidat.pole-emploi.fr/offres/emploi/toulouse/v4');
const text = await res.text();

// Tableau de tous les éléments dont la classe est "result"
const results = DOM(text).getElementsByClassName('result')

// On retourne un tableau d'objets construit à partir de chaque nœud de résultat
// pour lesquel on récupère les 3 éléments sus-cités
return results.map(node => ({
  title: node.getElementsByTagName('h2')[0].textContent.trim(),
  description: node.getElementsByClassName('description')[0].textContent.trim(),
  link: node.getElementsByTagName('a')[0].getAttribute('href')
}))

La fonction retournera enfin un tableau d'objets proposant tous un title, une description un un link.

Usage dans le workflow

Il ne reste plus qu'à sauvegarder la fonction et à l'utiliser dans un workflow.

Dans votre éditeur d'assistant, insérez une action Fonction et choisissez votre ressource dans le menu déroulant. Donnez un nom au paramètre de sortie pour l'utiliser dans la suite du workflow.

Enchainez avec un bloc de répétition sur la variable que vous avez utilisé dans votre fonction. Chaque élément du tableau de résultat exécutera le workflow spécifié dans ce bloc de répétition. Nous allons par exemple afficher une carte par résultat. Nous ajoutons donc un bloc Carte pour lequel le titre sera la variable $title et la description $description tels que nous l'avons structuré dans notre fonction.

Et pour chaque carte, nous ajoutons un bouton de type lien pointant vers la variable $link de notre structure.

Sauvegardez, et testez votre assistant :

Et voilà ! Bon chat !