LinuxFr.org : les journaux  -  Demerdification de prévisions météo avec Puppeteer

 -  24 octobre - 

Bonsoir journal,
je te partage ce soir mon expérience sur un petit projet de démerdification de l'accès aux données de prévision météo (« la vraie » hein, pas juste « soleil » ou « nuage »; plutôt la position et déplacement des fronts pour la prévision à quelques jours; les images radar et carte des vents pour les heures à venir, voire le 1/4h à venir). La motivation était une activité de plein air itinérante avec besoin de prévoir la météo, depuis un terminal mobile qui n'est plus tout jeune et un forfait données très limité.

En rêvant un peu, ce serait bien de pouvoir rassembler sur une page des infos de 3 sites différents, complémentaires. Un premier site qui a des bonnes cartes mais ne les fournit seulement sous forme d'une image HD de 5 Mo. OK, un coup de wget et convert ça va le faire. Un second sur lequel c'est des quelques infos texte précises noyées dans une page énorme qui m'intéressent. J'ai des restes de PHP, en parsant la page, identifiant le bon XPath (voir plus bas), ça ne doit pas être trop compliqué. Et le 3e ? Ça se gâte !

Ce téléphone, ayant pourtant moins de 10 ans, souffre gravement lorsqu'on accède à des sites qui contiennent des infos pourtant très utiles : fonctionnellement une carte avec différents calques animés en JS ça consomme un peu coté client, mais quand en plus ces sites sont bourrés de popup d'acceptation des cookies, vidéos, autres animations JS dans tous les sens… chaque consultation consomme des dizaines de Mo, rame (voire freeze) et fait chauffer le téléphone furieusement… alors qu'en pratique, j'aurais besoin seulement d'une 20aines d'images de 600px pour faire mon analyse.

Ni une ni deux, je regarde comment faire en sorte que mon serveur fasse le sale boulot de se connecter à ce 3e site, et me mette à disposition seulement ce dont j'ai besoin.
Je découvre donc puppeteer qui permet précisément faire tourner sur un serveur un navigateur et de contrôler celui (dans notre cas, cliquer sur des boutons et exporter le rendu du site dans une image).

Tout ça fonctionne en Javascript / node, pas trop ma tasse de thé au départ, mais au final ça fait bien le boulot sans avoir à plonger trop les mains dans le cambouis. Voici les grandes lignes pour un serveur tournant sous Debian 12 :

• Installer node-puppeteer : le paquet n'étant dispo que dans Unstable, il faut télécharger le paquet à la main et l'installer via apt install ./node-puppeteer_13.4.1+dfsg-2_all.deb. Y'a du lourd dans les dépendances (espace disque requis ~600 Mo). Par défaut c'est chromium qui est utilisé, j'ai cru voir que c'était possible avec Firefox mais pas creusé cette option.

• Si pas déjà fait, installer et configurer un serveur graphique via apt-get install xvfb xorg xvfb gtk2-engines-pixbuf dbus-x11 xfonts-base xfonts-100dpi xfonts-75dpi xfonts-scalable imagemagick x11-apps. Configurer via Xvfb -ac :99 -screen 0 1280x1024x16 & export DISPLAY=:99.

• Un exemple de base pour illustrer : charger https://linuxfr.org et exporter dans une image PNG : mettre dans test_linuxfr.js

const puppeteer = require('puppeteer-core');
(async () => {
const browser = await puppeteer.launch({
executablePath: '/usr/bin/chromium',
headless: false
});
const page = await browser.newPage();
await page.goto('https://linuxfr.org');
await page.screenshot({path: 'example.png'});

await browser.close();
})();

puis en tant qu'utilisateur il suffit de lancer le bouzin avec :
DISPLAY=:99 node test_linuxfr.js
et après un petit pic de CPU, on récupère une jolie grosse image example.png.

• Préciser ce qu'on veut exporter
  • en pratique, il est souvent inutile d'exporter toute la page mais seulement une partie
  • on peut avoir à interagir (cliquer sur des boutons) après le chargement pour afficher ce qui nous intéresse vraiment : typiquement boutons +/-1h, modifier le fond de carte, etc.

Pour ces 2 problématiques, le mode Deboggage de Firefox (accessible via F12, onglet Inspection) permet de localiser dans le code les boutons utiles. Une fois identifié la portion du code correspondant au bouton qui vont intéresse, il faut récupérer son XPath (clic droit sur la portion du code, Copier > XPath).

Par exemple, /html/body/div/div[2]/div[1]/div[2]/div/a[2].
Alors il suffit d'ajouter, éventuellement après une petite tempo pour être sur que la page soit finie de chargée, l'action correspondante au clic sur ce XPath via :

await page.waitForTimeout(2000);
const elements = await page.$x('//html/body/div/div[2]/div[1]/div[2]/div/a[2]')
await elements[0].click()
await page.waitForTimeout(2000);
await page.screenshot({path: SITE_PATH + 'precipitations_1.webp'});

• Automatisation
  Une fois satisfait du résultat, une petite ligne cron permet d'automatiser cette génération, dans mon cas matin, midi et soir :
  10 07,12,19 * * * bash -c "DISPLAY=:99 node /var/www/my_webapp/meteo_proxy/scripts/meteo.js"

• Interface
  Pour consulter les images générées, un simple morceau de HTML statique pointant vers les images est alors suffisant.
  A noter, par défaut mon navigateur mobile met en cache les images, souvent c'est pratique, parfois ça induit en erreur ! On doit pouvoir forcer à rafraîchir le cache quand la source change (?) mais je n'ai pas creusé cette piste. En attendant, j'utilise un onglet de navigation privée quand on veut absolument éviter le cache.

• Le cas des images à réduire (site 1)
  Quand l'image est déjà disponible, un simple script utilisant l'excellent ImageMagick fait l'affaire:
  wget https://sitemeteo/avec/des/images/pas/optimisees/du_tout.png -O /tmp/prevision_europe.png
convert /tmp/prevision_europe.png -resize 600 $MODE "$SITE_PATH""prevision_europe.webp"

• Le cas des infos textes à extraire (site 2)
  Une extraction du texte venant d'une balise (à identifier via le XPath comme vu plus haut) via un bout de PHP :

<?php

if (ob_get_level() == 0) ob_start();

$context = stream_context_create(
    array(
        "http" => array(
            "header" => "User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML,>
        )
    )
);

//liste des stations
$stations = array(
    "code1" => "Station 1",
    "code2" => "Station 2",
    "code3" => "Station 3"
);

echo "<table>";

foreach ($stations as $k => $v) {
    echo "<tr><td>".$v." (".$k."):td>\n";

$html = file_get_contents("https://sitemeteo/n3/".$k, false, $context);

$doc = new DomDocument();
$doc->loadHtml($html);
$xpath = new DomXPath($doc);

foreach ($xpath->query('/html/body/div[2]/div/div/div[4]/div[2]/div[2]/code') as $node) {
  echo "<td>", $node->nodeValue, "td>";
}
...

• Pour le fun
  Les prévisions 3x par jour c'est généralement suffisant, mais à l'automne quand le temps change rapidement ça peut être utile de forcer un rafraîchissement à un autre moment sans avoir à sortir SSH avec mes gros doigts sur mon petit téléphone. En PHP il suffit d'un :
  exec('bash -c "DISPLAY=:99 node /var/www/my_webapp/meteo_proxy/scripts/meteo.js"', $output, $retval);
  ça c'est juste parce que c'est rigolo via du PHP de faire tourner du Javascript sur un serveur (en tout cas l'occasion d'une première pour moi).

• Quelques considérations a posteriori

  • En passant quelques heures de dev j'ai pu générer une interface rassemblant les infos utiles issues de 3 sites, pesant quelques centaines de ko contre des dizaines de Mo, très rapidement actualisables et sans exploser mon téléphone.
  • C'était une utilisation pas très critique, surtout une bonne occasion de bidouiller du web :) je m'attendais à ce qu'en plein milieu de la brousse mes images ne soient plus rafraîchies, que mon serveur s'envoie un CPU en l'air, … mais au final ça tourne rond sans exception (au moins tant que les sites ne modifient pas leurs chemins).
  • La génération des images via pupperteer consomme beaucoup coté serveur (on ne fait que déplacer la cochonerie en amont ;) au moins 600Mo de RAM à l'exécution, CPU à fond pendant ~2-3min pour générer une 30aine d'images), donc ça n'a du sens que dans certains cas d'usage (terminal avec capacités limitées, données très limitées, plusieurs utilisateurs utilisant les même images).
  • Malgré plusieurs articles vu ici je n'avais pas encore eu l'occasion de comparer moi-même, l'export des images au format webp permet bien d'économiser ~30% de données par rapport au jpeg, vraiment bon à prendre pour ce cas d'application !

Voilà c'est un petit journal rapide, pour garder une trace des grandes lignes et peut-être vous donner envie de tester ou au moins savoir ce qui est faisable :) (une recherche rapide semble indiquer que Puppeteer n'a pas souvent été évoqué ici !)

Commentaires : voir le flux Atom ouvrir dans le navigateur

par anubis