Websites monitoren doe je zo
Leveringsproblemen zijn helaas aan de orde van de dag, waardoor we onze geliefde gadgets maar moeilijk te bestellen zijn. Vooral videokaarten en spelconsoles zijn lastig te krijgen. Door slimme tools te gebruiken, zorg je dat je als eerste op de hoogte wordt gebracht zodra een product beschikbaar is. In dit artikel laten we zien welke tools er zijn en hoe je ze gebruikt! Kortom: websites monitoren doe je zo.
Code downloaden
In dit artikel worden wat voorbeelden van stukken code gegeven. Omdat overtikken van code erg foutgevoelig is, kun je die code ook downloaden en daarna bekijken of kopiëren. Zie het bestand code-webmonitor.txt, beschikbaar via www.bit.ly/webmoncode.
Het lukt de gadgetliefhebbers maar niet om hun zuurverdiende geld uit te geven. Misschien wacht je al een jaar op een (betaalbare) videokaart uit de RTX 30-serie van Nvidia, maar zijn de Ethereum-miners je telkens voor. Of je bent de Sony PlayStation 5 misgelopen, omdat je bijvoorbeeld de voorraadmelding te laat ontving. Misschien zit je te wachten op de nieuwe iPhone, maar dat lijkt direct al een uitdaging. Webwinkels slagen er niet in hun voorraden op peil te brengen. In het verleden werd zulke schaarste vaak kunstmatig gecreëerd, om het verlangen naar een product aan te wakkeren. Vanwege de coronapandemie hebben veel sectoren hier nu ook noodgedwongen mee te maken, onder andere door wereldwijde chiptekorten. Je kunt natuurlijk wat dieper in de buidel tasten en een product overnemen van één van de gelukkigen. Of herhaaldelijk alle productpagina’s verversen om te zien of er voorraad is. Maar je kunt het ook slimmer spelen dan de rest en dit proces automatiseren. In deze masterclass leer je met allerlei scripts hoe je dat doet.
01 Welke tools
Wil je op de hoogte blijven van nieuwe voorraad bij webshops, dan kun je bepaalde kanalen in Discord of Telegram volgen, of forums op sites als Tweakers.net. Op https://alerts.laagst.nl vind je voorraadbots voor bekende spelconsoles en videokaarten. Heb je weinig tijd, dan kun je een geautomatiseerde aanpak kiezen. In deze masterclass laten we zien hoe je met Distill.io websites kunt monitoren op veranderingen. Je kunt lokaal monitoren, via een extensie in je browser, maar ook op afstand via de servers van Distill.io. Daarna laten we zien hoe je webpagina’s met de hulp van eigen scripts kunt monitoren.
Voordat we beginnen geven we wat uitleg over XPath, een krachtige tool om delen van een internetpagina te selecteren. Je komt XPath vaak tegen bij het monitoren van veranderingen, zeker als je zelf scripts gaat maken. In het tweede deel van dit artikel laten we een voorbeeld daarvan zien. We gaan een voorbeeldtoepassing starten binnen Node.JS die pushnotificaties of een melding via Gmail stuurt bij veranderingen aan een of meer pagina’s.
©PXimport
02 Selecties op webpagina’s
Om veranderingen in delen van een website te kunnen monitoren, is het nodig om die specifieke gedeeltes van een pagina aan te kunnen wijzen. Alleen dan kunnen door de inhoud te vergelijken bepaalde veranderingen worden opgemerkt en gemeld. Voor het aanwijzen gebruik je een zogenoemde selector. Dit kan om te beginnen op basis van css, de opmaaktaal waarmee je stijlen voor html-elementen aangeeft. Een krachtigere selector is XPath. Daar gaan we hoofdzakelijk mee werken. Het is ontwikkeld voor xml-documenten, maar is bruikbaar voor html-documenten. De syntax is heel krachtig en flexibel, maar het zelf opstellen van een selector is daardoor niet altijd eenvoudig. Gelukkig zijn er tools die je kunnen helpen. We zullen enkele eenvoudige voorbeelden geven zodat je een idee hebt hoe de syntax voor XPath eruitziet, hoe je XPath gebruikt en welke tools je kunnen helpen.
03 Voorbeeld XPath
Je kunt eenvoudig experimenteren met XPath in Chrome om bepaalde elementen op een pagina te selecteren. Als voorbeeld maken we een html-pagina met slechts de volgende basisinhoud:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Dit is een header</h1>
<p>Dit is een paragraaf.</p>
</body>
</html>
De elementen in xml- en html-documenten volgen een boomstructuur. De XPath voor de eerste header kun je schrijven als /html/body/h1. Dat noemen we een absoluut pad. Je kunt dit vergelijken met de paden in een bestandssystemen. De eerste enkele slash (/) duidt de root aan, voor dit html-document is dat html. Elke volgende slash duidt een lager niveau aan, in dit voorbeeld body gevolgd door h1. Een XPath kan ook met een relatief pad beginnen. Die herken je aan een dubbele slash (//). Zo’n relatief pad is vaak veel korter. Op https://devhints.io/xpath vind je een handige cheatsheet met tips. We zullen hieronder een eenvoudig voorbeeld van zowel een absoluut als relatief pad geven.
©PXimport
XPath achterhalen in Chrome
In Chrome kun je de XPath voor elk html-element op een bepaalde webpagina simpel achterhalen. Open daarvoor een webpagina, bijvoorbeeld met ons html-voorbeeld. Klik dan met rechts op een bepaald element, zoals de header, en kies Inspecteren. Je komt op het tabblad Elements, waar je de volledig inhoud van het document ziet. Hierin wordt het geselecteerde element uitgelicht, maar je kunt ook een ander element selecteren. Klik met rechts op het gewenste element en kies Copy / Copy XPath om het relatieve pad te kopiëren naar je klembord. Of kies Copy full XPath om het absolute pad te kopiëren. Dit kun je plakken in bijvoorbeeld Kladblok.
©PXimport
04 XPath via console
De inspectietool die we zojuist hebben gebruikt, valt onder de hulpprogramma’s voor ontwikkelaars. Deze kun je in Chrome eenvoudig openen via het menu of met Ctrl+Shift+I. Als je naar het tabblad Console gaat, kun je experimenteren met XPath. Wil je bijvoorbeeld de tekst van de eerste header uit ons voorbeelddocument selecteren, dan gebruik je de XPath-selector /html/body/h1/text(). In de console geef je daarvoor de volgende opdracht (gevolgd door Enter):
$x("/html/body/h1/text()")
Na de opdracht bekijk je het resultaat. Je kunt ook wat experimenteren met de geavanceerdere selectors van XPath. Zo wijs je de inhoud van de eerste header van het type <h1> in een html-document aan met de opdracht:
$x("(//h1)[1]/text()")
En ook deze opdracht voer je uit met Enter.
©PXimport
Distill.io
05 Installatie
Distill.io is een van de makkelijkste manieren om content op websites te monitoren. Deze tool geeft een melding als een pagina is veranderd of als er veranderingen in geselecteerde delen van die pagina worden opgemerkt. Het is daarom heel breed inzetbaar. Je gebruikt Distill.io via een browserextensie, beschikbaar voor onder meer Chrome, Firefox en Opera.
Klik nadat je de extensie hebt geïnstalleerd op het icoontje. We raden je aan om eerst in te loggen via Sign In of een account te maken. Dan kun je taken op de servers van Distill.io laten draaien en meldingen ontvangen bij veranderingen, bijvoorbeeld via een e-mail, sms-bericht of een notificatie. Bij de gratis versie is het aantal controles en meldingen overigens wat beperkt. Zo kun je slechts tot dertig e-mailmeldingen per maand ontvangen. Bij veel valse meldingen zit je daar snel aan. Het goedkoopste abonnement op deze dienst kost 15 dollar per maand of 12 dollar per maand als je gelijk een jaarabonnement afsluit.
©PXimport
06 Elementen selecteren
Wil je een bepaalde productpagina van een webshop monitoren, dan open je die webpagina gewoon eerst in je browser. Klik vervolgens op het icoontje van Distill.io en kies Select parts of page. Kies op de webpagina zelf het element dat je wil monitoren. Je kunt ook nog andere elementen selecteren. Een element kun je ook weer verwijderen, op de plek waar je het element hebt geselecteerd, door het menu te openen en op het prullenbakicoontje te klikken. Voor elke selectie wordt een XPath-expressie toegevoegd. Rechts daarvan zie je de tekst van de geselecteerde elementen. Onder Text filter kun je eventueel filteren op een bepaalde tekst. Wees creatief! Voor de productpagina van de PlayStation 5 selecteren we bijvoorbeeld het veld Tijdelijk uitverkocht en filteren onder Text filter op diezelfde tekst. Klik op Save selections als je klaar bent.
07 Opties aanpassen
Als je een webpagina hebt toegevoegd, wordt deze in de zogenoemde watchlist gezet en kun je ook direct enkele opties aanpassen. Bij Device kies je of de controle in je huidige browser moet worden gedaan of op de servers van Distill.io. Bij Schedule checks geef je aan hoe vaak de bron moet worden gecontroleerd. Als voorbeeld nemen we een interval van 45 seconden. Als je een bepaalde productpagina te vaak opent, zou je door de betreffende webshop kunnen worden geweerd, dus maak het niet te bont. Eventueel gebruik je de optie Random voor een willekeurig interval. Bij Actions geef je aan wat er moet gebeuren als er een verandering wordt gedetecteerd. Zo kun je bijvoorbeeld een geluid laten afspelen. Achter Conditions kies je bepaalde condities, zoals een bepaalde tekst die wel of niet is gedetecteerd of een prijs die onder een bepaald niveau is gedoken. Klik onderaan op Save om de wijzigingen te bewaren.
©PXimport
08 Watchlist bekijken
Als je via het menu naar je watchlist gaat, zie je een overzicht van alle toegevoegde webpagina’s. Als de betreffende taak al een keer is gestart, zie je ook een preview van het resultaat. Vanuit de watchlist kun je ook enkele opties aanpassen of de geschiedenis bekijken. Je kunt met Distill.io tot 25 pagina’s lokaal monitoren. Zo kun je een gewild product dus bij verschillende webshops monitoren en heb je alle resultaten in één overzicht. De dienst is ook goed bruikbaar om bijvoorbeeld prijzen te monitoren. Eventueel kun je de conditie toevoegen om alleen een melding te krijgen als de prijs onder een bepaald niveau is gekomen. Je zult vaak de filters en opties wat moeten tweaken om de resultaten te krijgen die je zoekt.
©PXimport
Eigen scripts
09 Node.JS-installatie
Node.JS is een zogenoemde JavaScript-runtime-omgeving waarmee je JavaScript buiten een browser kunt uitvoeren. Er zijn enorm veel handige bibliotheken voor beschikbaar die je via de pakketbeheerder npm (Node Package Manager) gemakkelijk kunt downloaden en installeren, zodat je ze in je programma kunt gebruiken. Het uiteindelijke programma blijft dan compact en overzichtelijk. In de volgende paragraaf gebruiken we een voorbeeldprogramma in Node.JS als basis. Eerst moeten we de nodige tools installeren. We gaan uit van een systeem met de Linux-versie Ubuntu. Je installeert Node.JS en de pakketbeheerder npm met de opdracht:
sudo apt install nodejs npm
Daarnaast gaan we ook Git gebruiken (een managementtool voor software-broncode) en die installeer je met:
sudo apt install git
We gebruiken Git om in de volgende paragraaf een project vanaf GitHub op ons systeem te installeren.
©PXimport
10 Projectbestanden installeren
We gaan de zogenoemde Stock Checker installeren, waarmee je de voorraad van producten in webshops kunt controleren. Dit is een vrij flexibel inzetbare tool. Je geeft op welke webpagina moet worden bezocht. Ook geef je via een XPath aan welk element op die pagina gecontroleerd moet worden. Je weet inmiddels hoe je die kunt achterhalen. Als laatste geef je aan met welke waarde het resultaat moet worden vergeleken. Je kunt vervolgens bij veranderingen een melding ontvangen. Om het project te installeren, geef je de opdracht:
git clone https://github.com/jaydlawrence/stock-checker/
Je maakt nu eigenlijk een lokale kloon van de repository op GitHub. Hiermee plaats je alle bestanden op je systeem in het mapje stock-checker. Blader naar deze map met:
cd stock-checker
Geef nu de opdracht:
npm install
©PXimport
11 Websites toevoegen
Het project heeft twee configuratiebestanden. De eerste (sites.json) bevat de sites die je wilt monitoren. Een voorbeeld vind je in sites.json.template. Kopieer dit bestand naar sites.json met de opdracht:
cp sites.json.template sites.json
Bewerk het daarna met de opdracht:
nano sites.json
Als voorbeeld voegen we één site toe, maar je kunt er ook meerdere toevoegen. Wij kiezen als voorbeeld een pagina van de webshop Azerty (zie afbeelding 11, maar inmiddels bestaat deze pagina niet meer). We kopiëren via Chrome de XPath voor de tekst met levertijd, waar op het moment van schrijven stond meer dan 10 werkdagen. De XPath blijkt als volgt:
//*[@id="detail"]/div/div/div[2]/div[2]/div[1]/div/div[2]/span/text()
In het bestand sites.json vul je de url en XPath in bij respectievelijk url en xPath. Bij expected vul je de waarde in die je verwacht (meer dan 10 werkdagen). Je krijgt straks een melding als de gevonden waarde afwijkt van wat hier staat. Achter description vul je een omschrijving voor jezelf in. Let er op dat je elk dubbel aanhalingsteken (") in het configuratiebestand moet aanpassen naar \". We noemen dat ook wel ‘escapen’. De configuratie voor deze site ziet er dan als volgt uit:
[
{
"url": "https://azerty.nl/product/gigabyte/4570235/geforce-rtx-3080-eagle-rev2-0-lhr-vid>
"xPath": "//*[@id=\"detail\"]/div/div/div[2]/div[2]/div[1]/div/div[2]/span/text()",
"expected": "meer dan 10 werkdagen",
"description": "RTX 3080 op Azerty"
}
]
©PXimport
12 Pushover installeren
Bij veranderingen kun je een pushnotificatie ontvangen via de app Pushover, een melding per Gmail of beide. In deze masterclass gebruiken we Pushover. Details vul je in het bestand config.json in. Kopieer eerst het voorbeeld met de opdracht:
cp config.json.template config.json
We installeren eerst de Pushover-app op een Android-smartphone. Open de app en maak een account met gebruikersnaam en wachtwoord. In de volgende stap geef je de smartphone een naam. Ga dan naar www.pushover.net en log in met je gebruikersaccount. Hier vind je de User Key, die je overneemt in het configuratiebestand (config.json). Onderaan volg je de link naar Create an Application/API Token. Voer hier minimaal een (korte) naam in en zet een vinkje om akkoord te gaan met de voorwaarden. Vul ook deze token in het configuratiebestand in. Je hebt nu alles ingesteld om het script te starten.
13 Script uitvoeren
We gaan het script handmatig starten, maar je kunt het natuurlijk ook automatisch op gezette tijden draaien via een cronjob. Voor het starten, voer je deze opdracht in:
npm link
Daarna start je het script met:
npx check-stock
De projectpagina van Stock Checker op GitHub geeft allerlei extra tips. Als je bij de uitvoering een foutmelding krijgt, mis je mogelijk enkele bibliotheken. Die kun je installeren met:
sudo apt-get install libpangocairo-1.0-0 libx11-xcb1 libxcomposite1 libxcursor1 libxdamage1 libxi6 libxtst6 libnss3 libcups2 libxss1 libxrandr2 libasound2 libatk1.0-0 libgtk-3-0 libgbm-dev
Als er een verandering op de gemonitorde site(s) wordt gedetecteerd, zie je daar in de console geen melding van, maar je ontvangt (als alles goed is ingesteld) wel een pushnotificatie!
