Server-Seitige Visualisierung Mit Nightmare

0
53

Dies ist ein Auszug aus Kapitel 11 von Ashley Davis ‘ s Buch Daten Gerangel mit JavaScript jetzt auf das Manning Early Access Program. Ich Liebe diese Idee, da es so viel Datenvisualisierung Sachen auf dem web, die sich auf eine voll funktionsfähige client-side JavaScript und potenziell mehr API-Aufrufe. Es ist nicht annähernd so robust, zugänglich, oder syndicatable, wie es sein könnte. Wenn Sie bringen, die Visualisierung von Daten zurück an den server, Sie bringen das progressive enhancement, um die Partei. Alle Beispiel-code und Daten, die auf GitHub zu finden.

Wenn dabei unsystematische Codierung oder Analyse von Daten in Node.js es ist sehr nützlich, um in der Lage sein, um das Rendern einer Visualisierung von Daten unserer. Wenn wir arbeiteten in der browser-basierten JavaScript konnten wir wählen, eine der vielen charting -, Grafik-und Visualisierungs-Bibliotheken. Leider unter Node.js wir haben noch keine praktikable Möglichkeiten, so wie sonst können wir das erreichen?

Wir könnten versuchen, so etwas wie das vortäuschen der DOM unter Node.js aber ich fand einen besseren Weg. Wir können unsere browser-basierte Visualisierungs-Bibliotheken, die für uns arbeiten, unter Node.js mit einem headless browser. Dies ist ein browser, der hat keine Benutzeroberfläche. Sie können denken, es als ein browser, der unsichtbar ist.

Ich benutze Alptraum unter Node.js zum erfassen von Visualisierungen als PNG-und PDF-Dateien, und es funktioniert wirklich gut!

Die headless-browser

Wenn wir denken, ein web-browser normalerweise denken wir bei der grafischen software, mit der wir interagieren mit auf einer täglichen basis, wenn das surfen im web. Normalerweise interagieren wir mit so einem browser direkt anzeigen es mit unseren Augen und controlling es mit unserer Maus und Tastatur, wie in Abbildung 1 dargestellt.

Abbildung 1: Der normale Stand der Dinge: unsere Visualisierung macht in einem browser, und der Benutzer interagiert direkt mit dem browser

Ein headless browser auf der anderen Seite ist ein web-browser, der hat keine grafische Benutzeroberfläche und keinen direkten bedeutet für uns, es zu kontrollieren. Sie Fragen sich vielleicht, was ist die Verwendung von einem browser, den wir nicht direkt sehen oder mit Ihnen interagieren.

Naja, als Entwickler, die wir in der Regel verwenden ein headless browser für die Automatisierung und Test von web-sites. Lassen Sie uns sagen, dass Sie haben eine Webseite und möchten Sie ausführen eine suite von automatisierten tests gegen Sie zu beweisen, dass es funktioniert wie erwartet. Die test-suite ist automatisiert, was bedeutet, es wird gesteuert von code und das bedeutet, dass wir das Auto benötigen, das browser-code.

Wir verwenden ein headless browser für das automatisierte testen, da brauchen wir nicht direkt sehen oder die Interaktion mit der web-Seite, die getestet wird. Betrachten wie einen automatisierten test ist überflüssig, alles, was wir wissen müssen, ist, ob der test erfolgreich war oder nicht — und wenn es fehlgeschlagen ist, würden wir gerne wissen, warum. In der Tat, dass eine GUI für den browser unter test würde tatsächlich ein Hindernis für eine continuous-integration oder continuous-deployment-server, wo viele solche tests können parallel ausgeführt werden.

Also headless-Browser werden Häufig verwendet, für die automatisierte Prüfung unserer web-Seiten, aber Sie sind auch unglaublich nützlich für die Erfassung browser-basierte Visualisierungen und Ausgabe Sie PNG-Bilder oder PDF-Dateien. Um diese Arbeit zu machen brauchen wir einen Webserver und eine Visualisierung, dann müssen wir code schreiben, um z.B. einen headless browser und verweisen Sie auf unseren web-server. Unser Kodex weist dann die headless-browser um einen screenshot der web-Seite und speichern Sie es in unserem Datei-system als PNG-oder PDF-Datei.

Abbildung 2: können Wir mit einem headless browser unter Node.js zur Erfassung unserer Visualisierung ein statisches Bild Datei

Nightmare ist mein headless-browser der Wahl. Es ist ein Node.js Bibliothek (installiert über npm), das auf Elektron. Elektron ist ein Rahmen, der üblicherweise für die Erstellung von cross-Plattform-desktop-Anwendungen, basierend auf web-Technologien.

Warum Alptraum?

Es heißt Alptraum, aber es ist definitiv nicht ein Alptraum zu verwenden. In der Tat, es ist die einfachste und bequemste headless browser, die ich verwendet habe. Es schließt automatisch Elektron, also um begonnen zu erhalten, die wir installieren Sie einfach in unser Albtraum Node.js Projekt wie folgt:

npm install –save-Alptraum

Das ist alles, was wir brauchen, um zu installieren Albtraum und wir können beginnen, es sofort von JavaScript!

Nightmare kommt mit fast alles, was wir brauchen: Eine scripting-Bibliothek mit einem embedded-headless-browser. Es beinhaltet auch die Kommunikation Mechanismus zur Kontrolle der kopflose browser aus Node.js. Zum größten Teil ist es der nahtlosen und gut integriert Node.js.

Elektronen aufgebaut ist Node.js und Chrom und wird gepflegt von GitHub und ist die Grundlage für eine Reihe von gängigen desktop-Anwendungen.

Hier sind die Gründe, die ich wählen zu verwenden Albtraum über alle anderen headless-browser:

  • Elektron ist sehr stabil.
  • Elektron hat gute Leistung.
  • Die API ist einfach und leicht zu lernen.
  • Es ist keine komplizierte Konfiguration (nur beginnen, es zu verwenden).
  • Es ist sehr gut integriert mit Node.js.

Alptraum und Elektron

Wenn Sie installieren Alptraum über npm automatisch kommt mit einer embedded-version von Elektron. Wir können also sagen, der Alptraum ist nicht nur eine Bibliothek für die Steuerung von ein headless browser, es effektiv ist, den headless-browser. Dies ist ein weiterer Grund ich mag Nightmare. Mit einigen der anderen headless Browsern, die control-Bibliothek getrennt ist, oder es ist noch schlimmer als das, und Sie haben nicht ein Node.js control-Bibliothek. Im schlimmsten Fall müssen Sie Rollen Sie Ihre eigenen Kommunikations-Mechanismus zur Kontrolle der kopflose browser.

Nightmare wird eine Instanz der Elektronen-Prozess, der die Node.js child_process Modul. Anschließend wird inter-Prozess-Kommunikation und ein benutzerdefiniertes Protokoll zur Steuerung der Elektronen-Instanz. Die Beziehung ist in Abbildung 3 dargestellt.

Abbildung 3: Albtraum ermöglicht uns zu kontrollieren, Elektron läuft als headless-browser

Unser Prozess: Erfassung von Visualisierungen mit Nightmare

Also, was ist der Prozess der Erfassung einer Visualisierung in eine image-Datei? Dies ist, was wir anstreben:

  1. Daten zu erfassen.
  2. Starten Sie einen lokalen web-server zu hosten unsere Visualisierung
  3. Spritzen Sie unsere Daten in den web-server
  4. Etwa ein headless browser, und zeigen Sie es an unserem lokalen web-server
  5. Warten Sie, bis der Visualisierung angezeigt werden
  6. Erfassen Sie einen screenshot der Visualisierung, um eine image-Datei
  7. Herunterfahren der kopflose browser
  8. Herunterfahren des lokalen web-server

Vorbereitung einer Visualisierung zu Rendern

Das erste, was wir brauchen, ist eine Visualisierung. Abbildung 4 zeigt das Diagramm arbeiten wir mit. Diese ein Diagramm des New York City Jahresmittel der Temperatur für die letzten 200 Jahre.

Abbildung 4: Durchschnittliche jährliche Temperatur in New York City für die letzten 200 Jahre

Um diesen code auszuführen, benötigen Sie Node.js installiert. In diesem ersten Beispiel verwenden wir auch live-server (beliebigen web-server) zu testen, die Visualisierung (weil wir noch nicht erstellt unsere Node.js web-server), installieren Sie live-server wie folgt:

npm install-g live-server

Dann können Sie Klonen das Beispiel-code-repo für dieses blog-post:

git clone https://github.com/Data-Wrangling-with-JavaScript/nodejs-visualization-example

Gehen Sie jetzt in das repo installieren Sie die Abhängigkeiten und führen Sie das Beispiel mit den live-server

cd nodejs-Visualisierung-Beispiel/basic-Visualisierung
bower installieren
live-server

Wenn Sie führen Sie live-server sollte in Ihrem browser automatisch geöffnet, und Sie sollten sehen Sie das Diagramm von Figur 4.

Es ist eine gute Idee zu überprüfen, dass Ihre Visualisierung läuft direkt im browser, bevor Sie versuchen, und erfassen es in einem headless browser-Software verhindern; es könnte leicht etwas falsch mit ihm und die Probleme sind viel leichter zu beheben, in einem echten browser als in den headless-browser. live-server-live-reload eingebaut, so jetzt haben Sie eine nette kleine Einrichtung hier, wenn Sie können Bearbeiten und verbessern Sie das Diagramm interaktiv, bevor Sie versuchen, es zu erfassen, unter Node.js.

Dieser einfache line-chart wurde erstellt mit C3. Bitte nehmen Sie einen Blick auf den Beispiel-code und vielleicht einen Blick auf einige der Beispiele, die in die C3-Galerie, um mehr zu erfahren über C3.

Starten des web-Servers

Zum hosten der Visualisierung, wir brauchen einen web-server. Es ist nicht genug, wir haben ein web-server, müssen wir auch in der Lage sein, dynamisch starten und stoppen. Listing 1 zeigt den code für unser web-server.

Listing 1 – Code für eine einfache web-server kann gestartet und gestoppt werden
const express = require(‘express’);
const Pfad = require(‘Pfad’);

– Modul.Exporte = {
start: () => { // Exportieren-start-Funktion, so können wir beginnen, die web-server-on-demand.
return new Promise((auflösen, ablehnen) => {
const app = express();

const staticFilesPath = Pfad.join(__dirname, “public”); // unsere “öffentlichen” sub-directory den Zugriff über HTTP.
const staticFilesMiddleWare = express.statische(staticFilesPath);
app.verwenden(‘/’, staticFilesMiddleWare);

const server = app.listen(3000, err => { // Starten Sie den web-server!
if (err) {
ablehnen(err); // Fehler beim Aufruf von web-server.
}
else {
resolve(server); // Web server gestartet, ok.
}
});
});
}
}

Das code-Modul in listing 1 exportiert eine Funktion starten, die wir anrufen können, um kickstart unseren web-server. Diese Technik, in der Lage zu starten und zu stoppen unsere web-server, ist auch sehr hilfreich beim automatisierten Integrationstests auf einer Website. Vorstellen, dass Sie möchten, starten Sie Ihren web-server, führen Sie einige tests gegen es und dann stoppen Sie es am Ende.

So, jetzt haben wir unsere browser-basierte Visualisierungs-und wir haben ein web-server gestartet und beendet werden können-on-demand. Dies sind die Zutaten, die wir brauchen für die Erfassung von server-side-Visualisierungen. Let ‘ s mix it up mit Alptraum!

Das Rendering der web-Seite als Bild

Jetzt lassen Sie das Fleisch, den code zu erfassen ein screenshot der Visualisierung mit Nightmare. Listing 2 zeigt den code, der Alptraum Instanzen, Punkte auf unserem web-server und nimmt dann den screenshot.

Liste 2 – die Aufnahme unserer Grafik in eine image-Datei mit Alptraum
const webServer = require(‘./web-server.js’);
const Alptraum = require(‘nightmare’);

webServer.start() // Starten Sie den web-server.
.dann(server => {
const outputImagePath = “./Ausgabe/nyc-Temperaturen.png”;

const Alptraum = new Nightmare(); // Erstellen der Alptraum-Instanz.
zurück zum Albtraum.goto(“http://localhost:3000”) // Punkt der browser an den web-server, den wir gerade begonnen.
.warten(“svg”) // Warten, bis das Diagramm auf dem Bildschirm angezeigt wird.
.screenshot(outputImagePath) // ein Bildschirmfoto zu erstellen, um eine image-Datei.
.end() // Ende der Alptraum-Sitzung. Alle Nachrichten in der Warteschlange Vorgänge abgeschlossen sind und die headless-browser beendet wird.
.dann ist(() => server.schließen()); // Stoppen des web-server, wenn wir fertig sind.
})
.dann ist(() => {
console.log(“Alle fertig :)”);
})
.catch(err => {
console.Fehler(“Etwas ging schief :(“);
console.error(err);
});

Beachten Sie die Verwendung der goto-Funktion, das ist, was tatsächlich leitet den browser zum laden unserer Visualisierung.

Web-Seiten in der Regel einige Zeit dauern, um zu laden. Das ist wahrscheinlich nicht gehen, um sehr lange, vor allem, da wir nur mit einem lokalen web-server, aber noch stehen wir vor der Gefahr, einen screenshot von den headless-browser vor oder während der ersten Farbe. Das ist, warum wir müssen rufen Sie die Funktion ” warten (warten, bis der chart das <svg> – element angezeigt wird, im browser den DOM, bevor wir uns die screenshot-Funktion.

Schließlich, die Ende-Funktion aufgerufen wird. Bis jetzt haben wir effektiv erstellten eine Liste von Befehlen senden, um den headless-browser. Die end-Funktion tatsächlich sendet die Befehle an den browser, der die screenshot-und Ausgänge der Datei nyc-Temperaturen.png. Nachdem die image-Datei erfasst wurden wir beenden durch Herunterfahren des web-Servers.

Sie finden die fertige code, der unter der capture-Visualisierung sub-Verzeichnis im repo. Gehen Sie in das Unterverzeichnis und installieren Sie die Abhängigkeiten:

cd nodejs-Visualisierung-Beispiel/capture-Visualisierung
cd der öffentlichkeit
bower installieren
cd ..
npm installieren
live-server

Nun können Sie versuchen, den code für dich:

Knoten index.js

Dies war ein Auszug aus Kapitel 11 Daten Gerangel mit JavaScript jetzt auf das Manning Early Access Program. Verwenden Sie bitte diesen Rabatt-code fccdavis3 für einen 37% Rabatt. Bitte überprüfen Sie Die Data Wrangler für neue updates auf das Buch.

SHARE
Previous articleJAMstack Kommentare
Next articleJAMstack Comments