Server-Side Visualisatie Met De Nachtmerrie

0
21

Dit is een uittreksel van hoofdstuk 11 van Ashley Davis boek Gegevens Ruzie met JavaScript nu beschikbaar op de Manning Early Access Programma. Ik hou van dit idee, omdat er zo veel data visualisatie dingen op het web, dat is gebaseerd op het volledig functioneren van client-side JavaScript en mogelijk meer API-aanroepen. Het is niet zo robuust, toegankelijk, of syndicatable als het zou kunnen worden. Als u dat data visualisatie terug naar de server, kunt u brengen progressieve uitbreiding van de partij. Alle voorbeeld-code en data kunt u vinden op GitHub.

Bij het doen van verkennend codering of data-analyse in Node.js het is zeer nuttig te kunnen maken van een visualisatie van onze gegevens. Als we aan het werk waren in browser-based JavaScript we konden kiezen voor een van de vele diagrammen, afbeeldingen en visualisatie bibliotheken. Helaas, onder Node.js we hebben geen haalbare opties, dus hoe kunnen we dat bereiken?

We kunnen proberen iets van het vervalsen van de DOM onder Node.js maar ik vond een betere manier. Kunnen We onze browser-gebaseerde visualisatie bibliotheken voor ons werken onder Node.js met behulp van een headless browser. Dit is een browser die geen user interface. Je kunt het zien als een browser die onzichtbaar is.

Ik gebruik Nachtmerrie onder Node.js vastleggen visualisaties naar PNG en PDF-bestanden en het werkt echt goed!

De headless browser

Wanneer we denken aan een web-browser die wij gewoonlijk denken van de grafische software die we met elkaar samenwerken op een dagelijkse basis bij het surfen op het web. Normaal gesproken worden we omgaan met zo ‘ n browser, bekijken het met onze ogen en deze bedienen met de muis en het toetsenbord zoals is weergegeven in Figuur 1.

Figuur 1: De normale gang van zaken is: onze visualisatie wordt in een browser en de gebruiker communiceert rechtstreeks met de browser

Een headless browser aan de andere kant is een web-browser die geen grafische user interface en er is geen directe betekent voor ons om het te controleren. U vraagt zich misschien af wat is het gebruik van een browser die wij niet direct kunnen zien of gebruiken.

Nou, als ontwikkelaars we gebruik meestal een headless browser voor het automatiseren en het testen van web-sites. Laten we zeggen dat u hebt gemaakt van een web-pagina en u wilt een suite van geautomatiseerde tests tegen het te bewijzen dat het werkt zoals verwacht. De test suite is geautomatiseerd, wat betekent dat het wordt geregeld van de code en dit betekent dat we nodig hebben om te rijden de browser van de code.

We maken gebruik van een headless browser voor geautomatiseerd testen omdat we niet nodig om direct te zien of interactie met de webpagina die wordt getest. Het bekijken van dergelijke een geautomatiseerde test in uitvoering is overbodig, alles wat wij moeten weten is dat als de test geslaagd is of mislukt is — en als het mislukt zouden we graag willen weten waarom. Inderdaad, het hebben van een grafische gebruikersinterface voor de browser te testen zou eigenlijk een belemmering vormen voor een continu-integratie of continuous deployment server, waar veel van dergelijke tests kunnen worden uitgevoerd in parallel.

Zo onthoofde browsers worden vaak gebruikt voor het geautomatiseerd testen van onze webpagina ‘ s, maar ze zijn ook ongelooflijk handig voor het vastleggen van browser-based visualisaties en uitvoeren van de hen naar PNG-afbeeldingen of PDF-bestanden. Om dit te laten werken moeten we een web server en een visualisatie, moeten we vervolgens code schrijven om bijvoorbeeld een headless browser en ga naar onze web-server. Onze code, dan geeft de headless browser om een screenshot van de webpagina te gebruiken en opslaan in onze file-systeem op als een PNG of PDF bestand.

Figuur 2: We kunnen gebruik maken van een headless browser onder Node.js voor het vastleggen van onze visualisatie naar een statisch beeld bestand

Nightmare is mijn headless browser naar keuze. Het is een Node.js bibliotheek (geïnstalleerd via npm) dat is gebouwd op een Electron. Electron is een framework die normaal worden gebruikt voor het bouwen van cross-platform desktop apps die gebaseerd zijn op web-technologieën.

Waarom Nachtmerrie?

Het heet Nachtmerrie, maar het is zeker niet een Nachtmerrie te gebruiken. In feite, het is de eenvoudigste en meest comfortabele headless browser die ik heb gebruikt. Het omvat automatisch Electron, dus aan de slag te gaan we gewoon installeren Nachtmerrie in onze Node.js project als volgt:

npm install –opslaan nachtmerrie

Dat is alles wat we nodig hebben voor het installeren Nachtmerrie en kunnen we beginnen dan onmiddellijk met het gebruik van JavaScript!

Nachtmerrie komt met bijna alles wat we nodig hebben: Een scripting library met een ingesloten headless browser. Het omvat ook de communicatie mechanisme voor de controle van de headless browser Node.js. Voor het grootste deel het naadloze en goed-geïntegreerde Node.js.

Electron is gebouwd op Node.js en Chroom en onderhouden door GitHub en is de basis voor een aantal populaire desktop-applicaties.

Hier zijn de redenen die ik kies gebruiken Nachtmerrie over een andere headless browser:

  • Electron is zeer stabiel.
  • Elektron heeft goede prestaties.
  • De API is eenvoudig en gemakkelijk te leren.
  • Er is geen ingewikkelde configuratie (gewoon gaan gebruiken).
  • Het is zeer goed geïntegreerd met Node.js.

Nachtmerrie en Electron

Wanneer u installeren Nachtmerrie via het npm komt automatisch met een embedded versie van Electron. Dus kunnen we zeggen dat de Nachtmerrie is niet alleen een bibliotheek voor het bedienen van een headless browser, het effectief is de headless browser. Dit is een andere reden dat ik het een Nachtmerrie. Met een aantal van de andere onthoofde browsers, de controle bibliotheek is gescheiden, of het is erger dan dat ze het niet meer hebben van een Node.js controle bibliotheek. In het slechtste geval hebt u uw eigen rol communicatie mechanisme voor de controle van de headless browser.

Nachtmerrie wordt een exemplaar van het Elektron proces met behulp van de Node.js child_process module. Vervolgens wordt een inter-proces communicatie en een eigen protocol voor de controle van de Elektron-exemplaar. De relatie is weergegeven in Figuur 3.

Figuur 3: Nachtmerrie stelt ons in staat om de controle Electron draait als een headless browser

Ons proces: het Vastleggen van visualisaties met de Nachtmerrie

Dus wat is het proces van het vastleggen van een visualisatie naar een image-bestand? Dit is wat we zijn gericht op:

  1. Het verwerven van gegevens.
  2. Start een lokale web server voor het hosten van onze visualisatie
  3. Het injecteren van onze gegevens in de web server
  4. Bijvoorbeeld een headless browser en richt deze naar onze lokale web server
  5. Wachten voor de visualisatie worden weergegeven
  6. Een screenshot van de visualisatie naar een image-bestand
  7. Afsluiten van de headless browser
  8. Afsluiten van de lokale web server

Het bereiden van een visualisatie te maken

Het eerste wat we nodig hebben, is een visualisatie. Figuur 4 toont de grafiek kunnen we in overleg. Dit is een grafiek van New York City met een gemiddelde jaarlijkse temperatuur in de afgelopen 200 jaar.

Figuur 4: Gemiddelde jaarlijkse temperatuur in New York City in de afgelopen 200 jaar

Dit is de code die je nodig hebt Node.js geïnstalleerd. Voor dit eerste voorbeeld zullen we ook gebruik maken van live-server (een server van het web zal doen) testen van de visualisatie (omdat we nog niet gemaakt Node.js web server) te installeren live-server als volgt:

npm installeren -g live-server

Dan kunt u deze klonen de voorbeeld code repo voor dit blog:

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

Ga nu naar de repo, dependencies installeren en uitvoeren van het voorbeeld met de live-server

cd nodejs-visualisatie-voorbeeld/basic-visualisatie
bower installeren
live-server

Wanneer u live-server die uw browser automatisch openen en je ziet het diagram van Figuur 4.

Het is een goed idee om te controleren of uw visualisatie werkt direct in een browser voordat u probeert en deze vast te leggen in een headless browser; er kan gemakkelijk iets mis met de problemen en zijn veel gemakkelijker op te lossen in een echte browser dan in de headless browser. live-server is live herladen built-in, dus nu heb je een leuk stel hier in wanneer u het kunt bewerken en verbeteren van de grafiek interactief voordat u probeert om het te vangen onder Node.js.

Deze eenvoudige regel grafiek werd gebouwd met de C3. Neem een kijkje op de voorbeeld-code en misschien kijken naar een aantal van de voorbeelden in de C3 gallery om meer te leren over de C3.

Het starten van de webserver

Voor het hosten van onze visualisatie, we hebben een web-server. Het is niet genoeg dat wij een web server, we moeten ook in staat zijn om dynamisch te starten en te stoppen. Lijst 1 bevat de code voor onze web-server.

Aanbieding 1 – Code voor een eenvoudige web-server die kan worden gestart en gestopt
const express = (‘express’);
const path = (‘pad’);

de module.export = {
start: () => { // Exporteren van een start-functie, zodat we kunnen beginnen met de webserver op de vraag.
terug nieuwe Belofte((lossen, weigeren) => {
const app = express();

const staticFilesPath = pad.join(__dirname, “publiek”); // Maak ons ‘publiek’ sub-directory die toegankelijk zijn via HTTP.
const staticFilesMiddleWare = express.statisch(staticFilesPath);
app.gebruik(‘/’, staticFilesMiddleWare);

const server = app.luisteren(3000, err => { // Start de web server!
if (err) {
weigeren(err); // Fout opgetreden bij het starten van de web server.
}
anders {
het oplossen van(server); // Web-server gestart ok.
}
});
});
}
}

De code van de module in de aanbieding 1 uitvoer van een start-functie die we kunnen bellen naar de kickstart die onze web-server. Deze techniek, de mogelijkheid om te beginnen en stoppen onze web-server, is ook erg handig voor het doen van geautomatiseerde integratie testen op een website. Stel dat u wilt starten uw web server, een aantal testen uitvoeren tegen en stoppen aan het einde.

Dus nu hebben we onze browser-gebaseerde visualisatie en we hebben een web-server die kan worden gestart en gestopt op de vraag. Dit zijn de ingrediënten die we nodig hebben voor het vastleggen van server-side visualisaties. Laat de mix it up met de Nachtmerrie!

De weergave van de web pagina van een afbeelding

Laten we nu het vlees uit de code om een schermafbeelding te maken van de visualisatie met de Nachtmerrie. Lijst 2 bevat de code die gevallen Nachtmerrie, punten op onze web server en vervolgens wordt de screenshot.

Aanbieding 2 – het Vastleggen van onze grafiek om een image-bestand met behulp van Nightmare
const webServer = require(‘./web-server.js’);
const Nachtmerrie = (‘nachtmerrie’);

webServer.start() // Begin van de web server.
.vervolgens(server => {
const outputImagePath = “./uitgang/nyc-temperaturen.png”;

const nachtmerrie = new Nightmare(); // Maak de Nachtmerrie exemplaar.
terug nachtmerrie.goto(“http://localhost:3000”) // Point de browser aan de webserver we zijn net begonnen.
.wachten(“svg”) // Wachten tot de grafiek wordt weergegeven op het scherm.
.screenshot(outputImagePath) // een screenshot te maken van een image bestand.
.end() // Einde van de Nachtmerrie sessie. In de wachtrij bewerkingen zijn voltooid en de headless browser is beëindigd.
.dan(() => de server.sluiten()); // Stop de webserver wanneer we klaar zijn.
})
.dan(() => {
console.log(“Alles gedaan :)”);
})
.catch(err => {
console.fout(“er ging Iets mis :(“);
console.foutmelding(err);
});

Let op het gebruik van de goto-functie, dit is wat eigenlijk verwijst de browser te laden onze visualisatie.

Webpagina ‘ s meestal duurt het enige tijd om te laden. Dat is waarschijnlijk niet van plan om heel lang, vooral als we met een lokale web server, maar nog steeds worden we geconfronteerd met het gevaar van het nemen van een screenshot van de headless browser voor of tijdens de eerste verf. Dat is waarom we moeten bellen met de wait functie om te wachten totdat de grafiek <svg> element wordt weergegeven in de browser DOM voordat we noemen de screenshot-functie.

Uiteindelijk, op het einde van de functie wordt aangeroepen. Tot nu toe hebben we effectief gebouwd een lijst van commando ‘ s te verzenden naar de headless browser. Het einde functie daadwerkelijk stuurt de commando ‘ s naar de browser neemt de screenshot en uitgangen van het bestand nyc-temperaturen.png. Na het image-bestand is opgenomen maken we het af door het afsluiten van de web server.

U kunt de ingevulde code onder de capture-visualisatie sub-directory in de repository. Ga naar de sub-directory en installeren afhankelijkheden:

cd nodejs-visualisatie-voorbeeld/capture-visualisatie
cd openbaar
bower installeren
cd ..
npm installeren
live-server

Nu kunt u proberen de code voor jezelf:

knooppunt index.js

Dit is een uittreksel van hoofdstuk 11 van de Gegevens Ruzie met JavaScript nu beschikbaar op de Manning Early Access Programma. Gebruik deze kortingscode fccdavis3 voor een 37% korting. Controleer De Gegevens Wrangler voor nieuwe updates op het boek.

SHARE
Previous articleJAMstack Opmerkingen
Next articleJAMstack Kommentarer