Seien wir ehrlich: Von nun an wird das Datenvolumen im Internet immer weiter ansteigen. Dagegen können wir eigentlich nichts tun. Hier kommen Web-Scraper ins Spiel.
Im folgenden Artikel zeigen wir Ihnen, wie Sie Ihren eigenen Web-Scraper mit JavaScript als Hauptprogrammiersprache erstellen können.
Ein Web-Scraper ist eine Software, die Ihnen hilft, den mühsamen Prozess des Sammelns nützlicher Daten von Websites Dritter zu automatisieren. In der Regel umfasst dieser Vorgang das Senden einer Anfrage an eine bestimmte Webseite, das Auslesen des HTML-Codes und das Aufschlüsseln dieses Codes, um bestimmte Daten zu gewinnen.
Nehmen wir an, Sie möchten eine Preisvergleichsplattform erstellen. Sie benötigen die Preise mehrerer Artikel aus verschiedenen Online-Shops. Ein Web-Scraping-Tool kann Ihnen dabei helfen, dies in wenigen Minuten zu erledigen.
Vielleicht versuchen Sie, neue Leads für Ihr Unternehmen zu gewinnen oder sogar die günstigsten Flug- oder Hotelpreise zu finden. Während wir für diesen Artikel im Internet recherchierten, stießen wir auf Brisk Voyage.
Brisk Voyage ist eine Webanwendung, die ihren Nutzern hilft, günstige Last-Minute-Wochenendtrips zu finden. Mithilfe einer Art Web-Scraping-Technologie gelingt es ihnen, Flug- und Hotelpreise ständig zu überprüfen. Wenn der Web-Scraper eine Reise findet, die ein preisgünstiger Ausreißer ist, erhält der Nutzer eine E-Mail mit den Buchungsanweisungen.
Entwickler nutzen Web-Scraper für alle Arten der Datenbeschaffung, doch die häufigsten Anwendungsfälle sind die folgenden:
Kennst du diese kleinen Kontrollkästchen, mit denen du bestätigen musst, dass du kein Roboter bist? Tja, sie schaffen es nicht immer, die Bots fernzuhalten.
Meistens tun sie es jedoch, und wenn Suchmaschinen herausfinden, dass Sie versuchen, ihre Website ohne Erlaubnis zu scrapen, schränken sie Ihren Zugriff ein.
Ein weiteres Hindernis für Web-Scraper sind Änderungen an der Struktur einer Website. Eine kleine Änderung in der Struktur der Website kann dazu führen, dass wir viel Zeit verschwenden. Web-Scraping-Tools erfordern häufige Updates, um sich anzupassen und ihre Aufgabe zu erfüllen.
Eine weitere Herausforderung für Web-Scraper ist das sogenannte Geo-Blocking. Je nach deinem physischen Standort kann eine Website deinen Zugriff komplett sperren, wenn Anfragen aus nicht vertrauenswürdigen Regionen kommen.
Um diese Herausforderungen zu bewältigen und Ihnen zu helfen, sich auf die Entwicklung Ihres Produkts zu konzentrieren, haben wir WebScrapingAPI entwickelt. Es handelt sich um eine benutzerfreundliche, skalierbare API auf Unternehmensniveau, die Ihnen hilft, HTML-Daten zu sammeln und zu verwalten. Wir legen größten Wert auf Geschwindigkeit, nutzen ein globales rotierendes Proxy-Netzwerk und haben bereits mehr als 10.000 Kunden, die unsere Dienste nutzen. Wenn Sie das Gefühl haben, keine Zeit zu haben, den Web-Scraper von Grund auf selbst zu entwickeln, können Sie WebScrapingAPI mit der kostenlosen Version ausprobieren.
Die meisten Webanwendungen stellen eine API bereit, die es Nutzern ermöglicht, auf ihre Daten auf eine vorgegebene, strukturierte Weise zuzugreifen. Der Nutzer sendet eine Anfrage an einen bestimmten Endpunkt, und die Anwendung antwortet mit allen Daten, um die der Nutzer konkret gebeten hat. In den meisten Fällen sind die Daten bereits als JSON-Objekt formatiert.
Bei der Verwendung einer Anwendungsprogrammierschnittstelle (API) müssen Sie sich normalerweise keine Gedanken über die zuvor genannten Hindernisse machen. Allerdings können auch APIs aktualisiert werden. In diesem Fall muss der Nutzer die von ihm verwendete API stets im Auge behalten und den Code entsprechend anpassen, um die Funktionalität nicht zu verlieren.
Darüber hinaus ist die Dokumentation einer API von großer Bedeutung. Wenn die Funktionalität einer API nicht klar dokumentiert ist, verschwendet der Benutzer viel Zeit.
Ein gutes Verständnis des Internets erfordert viel Wissen. Lassen Sie uns eine kurze Einführung in alle Begriffe geben, die Sie benötigen, um Web-Scraping besser zu verstehen.
HTTP oder HyperText Transfer Protocol ist die Grundlage jedes Datenaustauschs im Web. Wie der Name schon sagt, handelt es sich bei HTTP um ein Client-Server-Protokoll. Ein HTTP-Client, wie beispielsweise ein Webbrowser, baut eine Verbindung zu einem HTTP-Server auf und sendet eine Nachricht, etwa: „Hey! Wie geht’s? Könntest du mir bitte diese Bilder schicken?“ Der Server gibt in der Regel eine Antwort in Form von HTML-Code zurück und schließt die Verbindung.
Nehmen wir an, du möchtest Google besuchen. Wenn du die Adresse in den Webbrowser eingibst und die Eingabetaste drückst, sendet der HTTP-Client (der Browser) die folgende Nachricht an den Server:
GET / HTTP/1.1
Host: google.com
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/web\p,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch, br
Connection: keep-aliveUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36Die erste Zeile der Nachricht enthält die Anforderungsmethode (GET), den Pfad, an den wir die Anfrage gesendet haben (in unserem Fall ist das einfach „/“, da wir nur auf www.google.com zugegriffen haben), die Version des HTTP-Protokolls und mehrere Header wie „Connection“ oder „User-Agent“.
Lassen Sie uns über die wichtigsten Header-Felder für diesen Vorgang sprechen:
Eine Serverantwort kann wie folgt aussehen:
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu) Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>The content of the document</body>
</html>Wie Sie sehen können, steht in der ersten Zeile der HTTP-Antwortcode: **200 OK. Das bedeutet, dass das Scraping erfolgreich war.
Hätten wir die Anfrage nun über einen Webbrowser gesendet, hätte dieser den HTML-Code geparst, alle anderen Assets wie CSS-, JavaScript-Dateien und Bilder abgerufen und die endgültige Version der Webseite gerendert. In den folgenden Schritten werden wir versuchen, diesen Prozess zu automatisieren.
JavaScript wurde ursprünglich entwickelt, um Nutzern zu helfen, dynamische Inhalte auf Websites einzubinden. Anfangs konnte es nicht direkt mit einem Computer oder dessen Daten interagieren. Wenn Sie eine Website aufrufen, wird das JavaScript vom Browser gelesen und in einige Zeilen Code umgewandelt, die der Computer verarbeiten kann.
Hier kommt Node.js ins Spiel, das Tool, mit dem JavaScript nicht nur clientseitig, sondern auch serverseitig ausgeführt werden kann. Node.js lässt sich als kostenloses Open-Source-JavaScript für die serverseitige Programmierung definieren. Es hilft seinen Nutzern, Netzwerk-Anwendungen schnell zu erstellen und auszuführen.
const http = require('http');
const port = 8000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello world!');
});
server.listen(port, () => {
console.log(`Server running on port 8000.`);
});Wenn Sie Node.js noch nicht installiert haben, finden Sie im nächsten Schritt die entsprechenden Anweisungen. Andernfalls erstellen Sie eine neue Datei „index.js“ und führen Sie sie aus, indem Sie in einem Terminal „node index.js“ eingeben, öffnen Sie einen Browser und navigieren Sie zu localhost:8000. Sie sollten die folgende Zeichenfolge sehen: „Hello world!“.
Chrome – Bitte befolge die Installationsanleitung hier.
Nach Abschluss der Installation können Sie überprüfen, ob Node.js installiert ist, indem Sie in einem Terminalfenster „node -v“ und „npm -v“ ausführen. Die Version sollte höher als v14.15.5 sein. Falls bei diesem Vorgang Probleme auftreten, gibt es eine alternative Methode zur Installation von Node.js.
Erstellen wir nun ein neues NPM-Projekt. Erstellen Sie einen neuen Ordner für das Projekt und führen Sie „npm init -y“ aus. Nun installieren wir die Abhängigkeiten.
Um Cheerio zu installieren, führen Sie bitte „npm install cheerio“ im Projektordner aus.
Um Puppeteer zu verwenden, müssen Sie es mit einem ähnlichen Befehl installieren: npm install puppeteer. Beachten Sie, dass bei der Installation dieses Pakets auch eine aktuelle Version von Chromium installiert wird, die garantiert mit Ihrer Version von Puppeteer kompatibel ist.
Zunächst müssen Sie die Website, die Sie scrapen möchten, über Chrome oder einen anderen Webbrowser aufrufen. Um die benötigten Daten erfolgreich zu scrapen, müssen Sie die Struktur der Website verstehen.
Sobald du die Website aufgerufen hast, nutze sie so, wie es ein normaler Nutzer tun würde. Wenn du den Subreddit /r/dundermifflin aufgerufen hast, kannst du dir die Beiträge auf der Hauptseite ansehen, indem du darauf klickst, die Kommentare und die Upvotes überprüfst und die Beiträge sogar nach der Anzahl der Stimmen innerhalb eines bestimmten Zeitraums sortierst.
Wie du sehen kannst, enthält die Website eine Liste von Beiträgen, und jeder Beitrag hat einige Upvotes und einige Kommentare.
Man kann viele Daten einer Website allein anhand ihrer URL verstehen. In diesem Fall stellt https://www.old.reddit.com/r/DunderMifflin die Basis-URL dar, den Pfad, der uns zur Reddit-Community „The Office“ führt. Wenn Sie beginnen, die Beiträge nach der Anzahl der Stimmen zu sortieren, sehen Sie, dass sich die Basis-URL in https://www.old.reddit.com/r/DunderMifflin/top/?t=year ändert.
Die Abfrageparameter sind Erweiterungen der URL, die dazu dienen, bestimmte Inhalte oder Aktionen auf der Grundlage der übermittelten Daten zu definieren. In unserem Fall steht „?t=year“ für den ausgewählten Zeitraum, für den wir die Beiträge mit den meisten Upvotes sehen möchten.
Solange du dich noch in diesem spezifischen Subreddit befindest, bleibt die Basis-URL unverändert. Das Einzige, was sich ändert, sind die Abfrageparameter. Wir können sie als Filter betrachten, die auf die Datenbank angewendet werden, um die gewünschten Daten abzurufen. Du kannst den Zeitraum ändern, um nur die Beiträge mit den meisten Upvotes des letzten Monats oder der letzten Woche anzuzeigen, indem du einfach die URL änderst.
In den folgenden Schritten erfahren Sie mehr darüber, wie die Informationen auf der Seite organisiert sind. Dies ist notwendig, um besser zu verstehen, welche Daten wir tatsächlich aus unserer Quelle extrahieren können.
Die Entwicklertools helfen dir dabei, das Document Object Model (DOM) der Website interaktiv zu erkunden. Wir werden die Entwicklertools in Chrome verwenden, aber du kannst jeden Webbrowser nutzen, mit dem du vertraut bist. In Chrome kannst du sie öffnen, indem du mit der rechten Maustaste auf eine beliebige Stelle auf der Seite klickst und die Option „Untersuchen“ auswählst.
Wählen Sie im neuen Menü, das auf dem Bildschirm erscheint, bitte die Registerkarte „Elemente“ aus. Dadurch wird die interaktive HTML-Struktur der Website angezeigt.
Sie können mit der Website interagieren, indem Sie ihre Struktur bearbeiten, Elemente ein- und ausblenden oder sogar löschen. Beachten Sie, dass diese Änderungen nur für Sie sichtbar sind.
Reguläre Ausdrücke, auch als RegEx bekannt, helfen dir dabei, Regeln zu erstellen, mit denen du verschiedene Zeichenfolgen finden und verwalten kannst. Wenn du jemals große Mengen an Informationen auswerten musst, kann dir die Beherrschung der Welt der regulären Ausdrücke viel Zeit sparen.
Wenn man anfängt, Regex zu verwenden, scheint es zunächst etwas zu kompliziert zu sein, aber in Wahrheit sind sie ziemlich einfach zu benutzen. Nehmen wir das folgende Beispiel: \d. Mit diesem Ausdruck kannst du ganz einfach jede Ziffer von 0 bis 9 erfassen. Natürlich gibt es auch viel komplexere Ausdrücke, wie zum Beispiel: ^(\(\d{3}\)|^\d{3}[.-]?)?\d{3}[.-]?\d{4}$. Dieser Ausdruck passt auf eine Telefonnummer, mit oder ohne Klammern um die Vorwahl oder mit oder ohne Punkte zur Trennung der Ziffern.
Wie du siehst, sind reguläre Ausdrücke ziemlich einfach zu verwenden und können sehr leistungsstark sein, wenn du dir genügend Zeit nimmst, sie zu beherrschen.
Nachdem Sie alle zuvor vorgestellten Abhängigkeiten erfolgreich installiert und das DOM mit den Entwicklertools untersucht haben, können Sie mit dem eigentlichen Scraping beginnen.
Eine Sache, die Sie beachten sollten, ist, dass Cheerio möglicherweise nicht die beste Lösung ist, wenn die Seite, die Sie scrapen möchten, eine SPA (Single Page Application) ist. Der Grund dafür ist, dass Cheerio nicht wirklich wie ein Webbrowser denken kann. Aus diesem Grund werden wir in den folgenden Schritten Puppeteer verwenden. Aber bis dahin wollen wir herausfinden, wie leistungsstark Cheerio ist.
Um die Funktionalität von Cheerio zu testen, versuchen wir, alle Beitragstitel aus dem zuvor vorgestellten Subreddit /r/dundermifflin zu sammeln.
Erstellen wir eine neue Datei namens index.js und geben wir die folgenden Zeilen ein oder kopieren wir sie einfach:
const axios = require("axios");
const cheerio = require("cheerio");
const fetchTitles = async () => {
try {
const response = await axios.get('https://old.reddit.com/r/DunderMifflin/');
const html = response.data;
const $ = cheerio.load(html);
const titles = [];
$('div > p.title > a').each((_idx, el) => {
const title = $(el).text()
titles.push(title)
});
return titles;
} catch (error) {
throw error;
}};
fetchTitles().then((titles) => console.log(titles));Um den oben geschriebenen Code besser zu verstehen, erklären wir, was die asynchrone Funktion fetchTitles() tut:
Zunächst senden wir mithilfe der Axios-Bibliothek eine GET-Anfrage an die alte Reddit-Website. Das Ergebnis dieser Anfrage wird dann in Zeile 10 von Cheerio geladen. Mithilfe der Entwicklertools haben wir herausgefunden, dass die Elemente, die die gewünschten Informationen enthalten, einige Anker-Tags sind. Um sicherzustellen, dass wir nur die Anker-Tags auswählen, die den Titel des Beitrags enthalten, wählen wir auch deren übergeordnete Elemente mit dem folgenden Selektor aus: $('div > p.title &g;t; a')
Um jeden Titel einzeln zu erhalten und nicht nur einen großen Block aus Buchstaben, der keinen Sinn ergibt, müssen wir mit der Funktion each() durch jeden Beitrag schleifen. Schließlich liefert der Aufruf von text() für jedes Element den Titel des jeweiligen Beitrags.
Um das Skript auszuführen, gib einfach node index.js im Terminal ein und drücke die Eingabetaste. Du solltest ein Array sehen, das alle Titel der Beiträge enthält.
Da das DOM einer Webseite für Node.js nicht direkt verfügbar ist, können wir JSDOM verwenden. Laut Dokumentation ist JSDOM eine reine JavaScript-Implementierung vieler Webstandards, insbesondere der WHATWG-DOM- und HTML-Standards, zur Verwendung mit Node.js.
Mit anderen Worten: Mit JSDOM können wir ein DOM erstellen und es mit denselben Methoden bearbeiten, die wir auch für das DOM eines Webbrowsers verwenden würden.
JSDOM ermöglicht es Ihnen, mit einer Website zu interagieren, die Sie crawlen möchten. Wenn Sie mit der Manipulation des Webbrowser-DOM vertraut sind, wird Ihnen das Verständnis der JSDOM-Funktionalität nicht viel Mühe bereiten.
Um besser zu verstehen, wie JSDOM funktioniert, installieren wir es, erstellen eine neue Datei „index.js“ und geben den folgenden Code ein oder kopieren ihn hinein:
const { JSDOM } = require('jsdom')
const { document } = new JSDOM(
'<h1 class="string">Dunder mifflin, the people person\'s paper people!</h2>'
).window
const string = document.querySelector('.string')
console.log(string.innerHTML)
string.textContent = 'Hello world'
console.log(string.innerHTML)Wie du sehen kannst, erstellt JSDOM ein neues Document Object Model, das mit denselben Methoden bearbeitet werden kann, die wir zur Bearbeitung des Browser-DOMs verwenden. In Zeile 3 wird ein neues h1-Element im DOM erstellt. Mithilfe der der Überschrift zugewiesenen Klasse wählen wir das Element in Zeile 7 aus und ändern dessen Inhalt in Zeile 10. Du kannst den Unterschied erkennen, indem du das DOM-Element vor und nach der Änderung ausgibst.
Um das Programm auszuführen, öffne ein neues Terminal, gib „node index.js“ ein und drücke die Eingabetaste.
Natürlich kannst du mit JSDOM auch viel komplexere Aktionen ausführen, wie zum Beispiel eine Webseite öffnen und mit ihr interagieren, Formulare ausfüllen und auf Schaltflächen klicken.
JSDOM ist zwar eine gute Option, aber Puppeteer hat in den letzten Jahren stark an Bedeutung gewonnen.
Mit Puppeteer können Sie die meisten Dinge tun, die Sie manuell in einem Webbrowser ausführen können, wie das Ausfüllen eines Formulars, das Erstellen von Screenshots von Seiten oder das Automatisieren von UI-Tests.
Versuchen wir, die Funktionsweise besser zu verstehen, indem wir einen Screenshot der Reddit-Community /r/dundermifflin erstellen. Wenn Sie die Abhängigkeit bereits installiert haben, fahren Sie mit dem nächsten Schritt fort. Falls nicht, führen Sie bitte npm i puppeteer im Projektordner aus. Erstellen Sie nun eine neue Datei index.js und geben Sie den folgenden Code ein oder kopieren Sie ihn hinein:
const puppeteer = require('puppeteer')
async function takeScreenshot() {
try {
const URL = 'https://www.old.reddit.com/r/dundermifflin/'
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(URL)
await page.pdf({ path: 'page.pdf' })
await page.screenshot({ path: 'screenshot.png' })
await browser.close()
} catch (error) {
console.error(error)
}
}
takeScreenshot()Wir haben die asynchrone Funktion takeScreenshot() erstellt.
Wie du sehen kannst, wird zunächst mit dem Befehl puppeteer.launch() eine Instanz des Browsers gestartet. Dann erstellen wir eine neue Seite und durch den Aufruf der Funktion goto() mit der URL als Parameter wird die zuvor erstellte Seite zu dieser spezifischen URL weitergeleitet. Die Methoden pdf() und screenshot() helfen uns dabei, eine neue PDF-Datei und ein Bild zu erstellen, das die Webseite als visuelle Komponente enthält.
Schließlich wird die Browser-Instanz in Zeile 13 geschlossen. Um das Skript auszuführen, gibst du im Terminal „node index.js“ ein und drückst die Eingabetaste. Du solltest nun zwei neue Dateien im Projektordner sehen, die „page.pdf“ und „screenshot.png“ heißen.
Wenn du dich mit Puppeteer nicht wohlfühlst, kannst du jederzeit eine Alternative wie NightwatchJS, NightmareJS oder CasperJS verwenden.
Nehmen wir zum Beispiel Nightmare. Da es Electrons anstelle von Chromium verwendet, ist die Bundle-Größe etwas kleiner. Nightmare kann durch Ausführen des Befehls „npm install nightmare“ installiert werden. Wir werden versuchen, den zuvor erfolgreichen Vorgang der Erstellung eines Screenshots der Seite mit Nightmare anstelle von Puppeteer zu wiederholen.
Erstellen wir eine neue Datei „index.js“ und geben wir den folgenden Code ein oder kopieren wir ihn hinein:
const Nightmare = require('nightmare')
const nightmare = new Nightmare()
return nightmare.goto('https://www.old.reddit.com/r/dundermifflin')
.screenshot('./nightmare-screenshot.png')
.end()
.then(() => {
console.log('Done!')
})
.catch((err) => {
console.error(err)
})Wie du in Zeile 2 sehen kannst, erstellen wir eine neue Nightmare-Instanz, leiten den Browser auf die Webseite, von der wir einen Screenshot machen wollen, erstellen und speichern den Screenshot in Zeile 5 und beenden die Nightmare-Sitzung in Zeile 6.
Um das Programm auszuführen, geben Sie im Terminal „node index.js“ ein und drücken Sie die Eingabetaste. Sie sollten zwei neue Dateien namens „nightmare-screenshot.png“ im Projektordner sehen.
Wenn Sie noch dabei sind, herzlichen Glückwunsch! Sie haben nun alle Informationen, die Sie benötigen, um Ihren eigenen Web-Scraper zu erstellen. Lassen Sie uns kurz zusammenfassen, was Sie bisher gelernt haben:
Wir hoffen, die Anleitung war verständlich und du hast alle notwendigen Informationen für dein nächstes Projekt erhalten. Wenn du es dennoch nicht selbst machen möchtest, kannst du jederzeit WebScrapingAPI ausprobieren.
Vielen Dank, dass Sie bis zum Ende durchgehalten haben!
Robert Sfichi ist Teammitglied bei WebScrapingAPI, wo er an der Produktentwicklung mitwirkt und dabei hilft, zuverlässige Lösungen zu entwickeln, die die Plattform und ihre Nutzer unterstützen.
Schließen Sie sich den über 2.000 Unternehmen an, die WebScrapingAPI nutzen, um Webdaten im Unternehmensmaßstab ohne zusätzlichen Infrastrukturaufwand zu extrahieren.
