Server-Side Visualisering Med Mareritt

0
44

Dette er et utdrag fra kapittel 11 av Ashley Davis ‘ bok Data Krangel med JavaScript nå tilgjengelig på Bemanning Early Access Program. Jeg absolutt elsker denne ideen som det er så mye data visualisering ting på nettet som er avhengig av fullt fungerende klientsiden JavaScript og potensielt mer API-kall. Det er ikke på langt nær så robust, tilgjengelig, eller syndicatable som det kunne være. Hvis du samler at data visualisering tilbake til serveren, kan du bringe progressive enhancement til festen. Alle eksempel kode og data kan bli funnet på GitHub.

Når du gjør utforskende koding eller data analyse i Node.js det er veldig nyttig å være i stand til å gjengi en visualisering fra våre data. Hvis vi jobbet i nettleseren-basert JavaScript vi kunne velge ett av de mange kartlegging, grafikk og visualisering biblioteker. Dessverre, under Node.js vi har ikke noen levedyktige alternativer, så hvor ellers kan vi oppnå dette?

Vi kunne prøve noe som falsk DOM under Node.js men jeg fant en bedre måte. Vi kan gjøre vårt nettleser-basert visualisering biblioteker arbeid for oss under Node.js ved hjelp av en hodeløs nettleser. Dette er en nettleser som ikke har brukergrensesnitt. Du kan tenke på det som en nettleser som er usynlig.

Jeg bruker Mareritt under Node.js for å fange opp effekter til PNG og PDF-filer og det fungerer veldig bra!

Den hodeløse nettleser

Når vi tenker på en web-leseren vi pleier å tenke på det grafiske programvare som vi samarbeider med på en dag til dag basis når du surfer på internett. Normalt vi samhandler med slik en nettleser direkte, ser det med våre øyne og kontrollere det med våre mus og tastatur som vist i Figur 1.

Figur 1: normal tilstand: vår visualisering gjør i en nettleser, og brukeren samhandler direkte med nettleser

En hodeløs nettleseren på den annen side er en web-browser som ikke har et grafisk brukergrensesnitt, og ingen direkte betyr for oss å kontrollere det. Du kan spørre hva er det bruk av en nettleser som vi ikke kan direkte se eller gjøre noe med.

Vel, som utviklere ville vi bruker vanligvis en hodeløs nettleser for å automatisere og testing av nettsteder. La oss si at du har opprettet en web-side, og du ønsker å kjøre en suite av automatiserte tester mot det for å bevise at det fungerer som forventet. Test suite er automatisert, noe som betyr at det er kontrollert fra kode og dette betyr at vi må kjøre nettleseren fra koden.

Vi bruker en hodeløs nettleser for automatisert testing fordi vi ikke trenger å se direkte eller samhandle med web-side som blir testet. Visning slik en automatisert test pågår er unødvendig, alt vi trenger å vite er om testen godkjennes eller ikke — og hvis det mislyktes vi ønsker å vite hvorfor. Faktisk, å ha en GUI for leseren under test ville faktisk være en hindring for en kontinuerlig integrasjon, eller kontinuerlig-deployment server, hvor mange slike tester kan kjøres i parallell.

Så hodeløse nettlesere er ofte brukt for automatisert testing av våre nettsider, men de er også utrolig nyttig for å fange nettleser-basert effekter og gi ut dem til PNG-bilder eller PDF-filer. For å gjøre dette arbeidet trenger vi en web-server og en visualisering, deretter må vi skriver kode for eksempel en hodeløs nettleser og peker det på vår web-server. Våre koden deretter instruerer hodeløse nettleser for å ta et skjermbilde av web-side og lagre den til fil-systemet som en PNG eller PDF-fil.

Figur 2: Vi kan bruke en hodeløs nettleser under Node.js for å fange vår visualisering til et statisk bilde, fil

Mareritt er min hodeløse nettleseren av valget. Det er en Node.js bibliotek (installert via npm) som er bygget på Elektron. Elektronet er et rammeverk som vanligvis brukes for å bygge cross-platform desktop programmer som er basert på web-teknologi.

Hvorfor Mareritt?

Det heter Mareritt, men det er definitivt ikke et Mareritt å bruke. Faktisk, det er den enkleste og mest praktiske hodeløse nettleser som jeg har brukt. Det automatisk inkluderer Elektron, så for å få startet vi bare installere Mareritt i vår Node.js prosjektet som følger:

npm installere –spare mareritt

Det er alt vi trenger å installere Mareritt, og vi kan begynne å bruke den umiddelbart fra JavaScript!

Mareritt leveres med nesten alt vi trenger: En scripting library med en innebygd hodeløse nettleser. Det omfatter også kommunikasjon mekanisme for å kontrollere hodeløse nettleseren Node.js. For det meste det er sømløs og godt integrert til Node.js.

Elektronet er bygget på Node.js og Krom og vedlikeholdt av GitHub og er grunnlaget for en rekke populære desktop-applikasjoner.

Her er grunnene til at jeg velger å bruke Mareritt over alle andre hodeløse nettleser:

  • Elektronet er veldig stabil.
  • Elektronet har god ytelse.
  • API-et er enkel og lett å lære.
  • Det er ingen komplisert konfigurasjon (bare begynne å bruke det).
  • Det er veldig godt integrert med Node.js.

Mareritt og Electron

Når du installerer Mareritt via npm det kommer automatisk med en innebygd versjon av Elektron. Så, kan vi si at Marerittet er ikke bare et bibliotek for å kontrollere en hodeløse nettleser, er det effektivt, er det hodeløse nettleser. Dette er en annen grunn til at jeg liker Mareritt. Med noen av de andre hodeløse nettlesere, kontroll bibliotek er separat, eller det er verre enn som så, og at de ikke har en Node.js kontroll bibliotek i det hele tatt. I verste fall må du rulle din egen kommunikasjon mekanisme for å kontrollere hodeløse nettleser.

Mareritt oppretter en forekomst av Elektronet prosessen ved hjelp av Node.js child_process modul. Det bruker da inter-prosess kommunikasjon og en tilpasset protokoll for å styre Electron eksempel. Forholdet er vist i Figur 3.

Figur 3: Mareritt gjør det mulig for oss å kontrollere Electron kjører som en hodeløs nettleser

Vår prosess: å Fange effekter med Mareritt

Så hva er prosessen med å ta opp en visualisering til en image-fil? Dette er hva vi tar sikte på å:

  1. Skaffe data.
  2. Starte en lokal web-serveren som er vert for våre visualisering
  3. Injisere våre data inn på web-serveren
  4. Eksempel en hodeløs nettleser og peker det på vår lokale web-server
  5. Vent til visualisering som skal vises
  6. Ta en skjermdump av visualisering til en image-fil
  7. Avslutning den hodeløse nettleser
  8. Avslutning det lokale web-server

Forberede en visualisering til å gjengi

Det første vi trenger er å ha en effekt. Figur 4 viser kartet vi skal jobbe med. Dette er et diagram av New York årlige gjennomsnittlige temperaturen for de siste 200 år.

Figur 4: Gjennomsnittlig årlig temperatur i New York de siste 200 år

For å kjøre denne koden trenger du Node.js installert. For dette første eksemplet vi vil også bruke live-server (web-server vil gjøre) for å teste visualisering (fordi vi ikke har opprettet vår Node.js web server ennå), kan du installere live-serveren som følger:

npm installere -g live-server

Deretter kan du klone eksempelet koden repo for denne bloggen:

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

Nå går inn i repo, installere avhengigheter og kjøre eksempel ved hjelp av live-server

cd nodejs-visualisering-eksempel/grunnleggende-visualisering
stua installere
live-server

Når du kjører live-serveren din nettleser bør åpnes automatisk, og du bør se figur fra Figur 4.

Det er en god idé å sjekke at visualisering fungerer direkte i en nettleser før du prøver og ta det i en hodeløs nettleser; det kan lett være noe galt med det, og problemene er mye lettere å feilsøke i et ekte nettleser enn i den hodeløse nettleser. live-serveren har live laste innebygd, så nå har du en fin liten oppsett her når du kan redigere og forbedre kart interaktivt før du prøver å fange den under Node.js.

Dette enkle linje-diagrammet ble bygget med C3. Vennligst ta en titt i løpet eksempelet kode og kanskje se på noen av eksemplene i C3 galleri for å lære mer om C3.

Du starter web server

Å være vert for våre visualisering, vi trenger en web-server. Det er ikke nok at vi har en web-server, må vi også være i stand til å dynamisk starte og stoppe det. Listing 1 viser koden for vårt web-server.

Liste 1 – Koden for en enkel web-server som du kan startes og stoppes
const express = kreve(‘express’);
const path = kreve(‘bane’);

modul.eksport = {
start: () => { // Eksport-en start-funksjon, slik at vi kan starte web-server på forespørsel.
tilbake nye Lover((løse, avvis) => {
const app = express();

const staticFilesPath = bane.bli med(__dirname, “offentlig”); // Gjør vår ‘offentlig’ sub-katalogen tilgjengelig via HTTP.
const staticFilesMiddleWare = express.statisk(staticFilesPath);
appen.bruk(‘/’, staticFilesMiddleWare);

const server = app.lytt(3000, err => { // Start web server!
if (err) {
avvis(err); // det oppstod en Feil mens du starter web-server.
}
else {
løse(server); // Web-serveren startet ok.
}
});
});
}
}

Koden modul i liste 1 eksporterer en start-funksjon som vi kan ringe til kickstart vår web-server. Denne teknikken, blir i stand til å starte og stoppe vår web-server, er også svært nyttig for å gjøre automatisert integrasjon testing på et web-område. Tenk deg at du ønsker å starte din web server, kjører noen tester mot det, og da stopper det på slutten.

Så nå har vi vår nettleser-basert visualisering og vi har en web-server som du kan startes og stoppes etter behov. Dette er de råstoffene vi trenger for å ta vare server-side-effekter. La oss blande den opp med Mareritt!

Gjengivelse web-side til et bilde

La oss nå kjøttet ut koden for å ta en skjermdump av visualisering med Mareritt. Liste 2 viser koden som forekomster Mareritt, peker det på vår web-server, og deretter tar screenshot.

Liste 2 – Fange vår diagrammet til en bilde-fil ved hjelp av Mareritt
const webServer = kreve(‘./web-server.js’);
const Mareritt = kreve(‘nightmare’);

webServer.start() // Start web-server.
.deretter(server => {
const outputImagePath = “./utgang/nyc-temperaturer.png”;

const mareritt = new Nightmare(); // Oppretter Mareritt eksempel.
tilbake mareritt.goto(“http://localhost:3000”) // Pek nettleseren på web server-vi har nettopp begynt.
.vent(“svg”) // Vent til diagrammet vises på skjermen.
.skjermbilde(outputImagePath) // Fange et skjermbilde til en image-fil.
.end() // Slutt Mareritt økt. Noen står i kø operasjoner er fullført, og hodeløse nettleseren er avsluttet.
.deretter(() => server.close()); // Stopp web-serveren når vi er ferdig.
})
.deretter(() => {
– konsollen.logg(“Alle gjort :)”);
})
.catch(err => {
– konsollen.feil(“Noe gikk galt :(“);
– konsollen.feil(err);
});

Merk bruk av goto-funksjon, dette er hva som faktisk leder nettleser for å kunne laste vår visualisering.

Web-sidene vanligvis ta litt tid å laste. Det er sannsynligvis ikke kommer til å bli veldig lange, særlig ettersom vi kjører en lokal webserver, men likevel står vi i fare for å ta et skjermbilde av den hodeløse nettleseren før eller i løpet av sin første maling. Det er derfor vi må samtale venter-funksjonen for å vente til figur <svg – > – element vises i nettleseren DOM før vi kaller skjermbilde funksjon.

Til slutt, avslutter funksjonen kalles. Opp til nå har vi effektivt laget en liste over kommandoer som skal sendes til den hodeløse nettleser. Slutten funksjonen faktisk sender kommandoer til nettleseren, som tar screenshot og utganger filen nyc-temperaturer.png. Etter bildefil har blitt fanget vi ender opp ved å stenge ned web server.

Du kan finne den ferdige koden under fangst-visualisering sub-katalogen i repo. Gå inn i sub-katalogen og installere avhengigheter:

cd nodejs-visualisering-eksempel/ta-visualisering
cd offentlig
stua installere
cd ..
npm installere
live-server

Nå kan du prøve koden for deg selv:

node index.js

Dette har vært et utdrag fra kapittel 11 av Data Krangel med JavaScript nå tilgjengelig på Bemanning Early Access Program. Vennligst bruk denne rabattkoden fccdavis3 for 37% rabatt. Vennligst sjekk Data Wrangler for nye oppdateringer på boken.

SHARE
Previous articleJAMstack Kommentarer
Next articleJAMstack Kommentare