Automatisieren Sie Ihren Workflow mit Knoten

0
15

Sie kennen den langweiligen Aufgaben, die Sie haben zu tun in der Arbeit: Update-Konfiguration-Dateien, kopieren und einfügen von Dateien, aktualisieren von Jira tickets.

Die Zeit summiert sich nach einer Weile. Das war sehr viel der Fall, wenn ich arbeitete für eine online-Spiele-Unternehmen wieder im Jahr 2016. Der Auftrag könnte sehr lohnend sein, zu Zeiten, wenn ich hatte zu bauen, konfigurierbare Vorlagen für Spiele, aber etwa 70% meiner Zeit aufgewendet für das erstellen von Kopien von Vorlagen und das bereitstellen von re-skinned-Implementierungen.

Was ist ein reskin?

Die definition einer reskin bei der Firma war mit der gleichen Spielmechanik, Bildschirme und Positionierung von Elementen, aber die änderung der visuellen ästhetik wie Farben und Vermögenswerte. Also in dem Zusammenhang von einem einfachen Spiel wie “Stein-Schere-Papier,” wir hätten eine Vorlage erstellen, mit grundlegenden Werten wie unten.

Aber wenn wir es schaffen, ein reskin von dieser würden wir verwenden verschiedene Vermögenswerte, und das Spiel würde immer noch funktionieren. Wenn man sich Spiele wie Candy Crush oder Angry Birds, Sie werden feststellen, dass Sie haben viele Sorten, das gleiche Spiel. Normalerweise Halloween, Weihnachten oder Ostern-releases. Aus betriebswirtschaftlicher Sicht macht es durchaus Sinn.

Nun… zurück zu unserer Einführung. Jedes unserer Spiele teilen die gleichen gebündelt JavaScript-Datei, und laden Sie in eine JSON-Datei, die hatten verschiedene content-und asset-Pfade. Das Ergebnis?

Die gute Sache über die Extraktion von konfigurierbaren Werten in eine JSON-Datei ist, können Sie die Eigenschaften ändern, ohne neu zu kompilieren/bauen das Spiel wieder. Mit Node.js und das original breakout-Spiel von Mozilla erstellt wurde, werden wir ein sehr einfaches Beispiel, wie Sie erstellen können Sie eine konfigurierbare Vorlage, und stellen Sie Versionen, indem Sie über die Befehlszeile.

Unser Spiel

Dies ist das Spiel, das wir werden machen. Reskins von MDN Breakout, basierend auf dem vorhandenen source-code.

Gameplay-Bildschirm aus dem Spiel MDN Breakout, wo Sie können, verwenden Sie Ihre Paddel, um bounce den ball und Zerstöre die Ziegel-Feld, mit dem halten der Kerbe und lebt.

Die primäre Farbe wird die Farbe der text, Paddel, ball und blockiert, und die sekundäre Farbe wird die Farbe der hintergrund. Wir gehen mit einem Beispiel von einem dunklen blauen hintergrund und ein Licht Himmel blau für Objekte im Vordergrund.

Voraussetzungen

Sie müssen sicherstellen, dass die folgenden:

  • Haben Sie Git installiert – https://git-scm.com/downloads
  • Haben Sie Knoten installiert – https://nodejs.org/en/download
  • Sie haben einen GitHub-account – https://github.com
  • Sie haben geklonte repository lokal – https://github.com/smks/nobot-examples.git
  • Sie lief npm install im Stammverzeichnis der nobot-Beispiele Projekt.
  • Schließlich führen Sie den lokalen server durch ausführen von npm führen gameServe in der root des Projekts über ein terminal.

Wir haben gezwickt die original-Firefox-Implementierung, so dass wir das erste Lesen in der JSON-Datei und erstellen Sie dann das Spiel mit einem HTML-Canvas. Das Spiel wird gelesen in einer Grundfarbe und einer sekundären Farbe, die von unserem Spiel.json – Datei.

{
“primaryColor”: “#fff”,
“secondaryColor”: “#000”
}

Wir werden mit Beispiel 20 aus dem Buch Automatisieren mit Node.js. Der Quellcode kann hier gefunden werden.

Öffnen Sie eine neue Befehlszeile (CMD für Windows, Terminal unter Unix-artigen Betriebssystemen), und ändern Sie Sie in das folgende Verzeichnis haben Sie erst einmal geklonte repository lokal.

$ cd nobot-Beispiele/examples/020

Denken Sie daran, die Spiel-server laufen sollten in einem separaten terminal.

Unsere JSON-Datei liegt neben einem index.html Datei in einem Verzeichnis mit dem Namen template. Dies ist das Verzeichnis, kopieren wir aus, Wann immer wir wollen, zu tun, eine neue Version/Kopie.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<Titel>Paddel-Spiel</title>
<style>
* {
padding: 0;
margin: 0;
}
Leinwand {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id=”game” width=”480″ height=”320″></canvas>
<script type=”text/javascript” src=”../../core/game-1.0.0.js”></script>
</body>
</html>

Sie sehen vor, dass jedes Spiel, das wir ein release auf den gleichen core bundle JavaScript-Datei. Wir haben Sie einen Blick auf unsere JavaScript-Implementierung unter dem core-Verzeichnis.

Schau nicht zu viel in die mechanik, wie das Spiel funktioniert, um so mehr, wie wir injizieren Werte in das Spiel zu machen konfigurierbar.

(Funktion boot(Dokument) {
Funktion runGame(config) {
const canvas = document.getElementById(‘Spiel’);
canvas.Stil.backgroundColor = config.secondaryColor;
// rest des Spiels-source-code wird ausgeführt… versteckt für die Kürze
// Quellcode kann hier gefunden werden: https://git.io/vh1Te
}

die Funktion loadConfig() {
fetch(‘Spiel.json’)
.(Antwort => Antwort.json())
.dann(runGame);
}

Dokument.addEventListener(‘DOMContentLoaded’, () => {
loadConfig();
});
}(document));

Der source-code ist mit ES6-features und funktioniert nicht in älteren Browsern. Führen Sie durch Babel, wenn das ein problem für Sie.

Sie sehen, wir warten auf die DOM-Inhalte zu laden, und dann sind wir den Aufruf einer Methode namens loadConfig. Das wird ein AJAX-request-Spiel.json, fetch JSON-Werte, und sobald es abgerufen wurde, wird das Spiel starten, und weisen Sie die Formatvorlagen in den source-code.

Hier ist ein Beispiel für die Konfiguration, Einstellung der Hintergrundfarbe.

const canvas = document.getElementById(‘Spiel’);
canvas.Stil.backgroundColor = config.secondaryColor; // überschreiben von color hier

So, jetzt, dass wir eine Vorlage haben, können konfiguriert werden, bewegen wir uns auf das erstellen einer Node.js Skript, das dem Benutzer zu ermöglichen, entweder übergeben Sie den Namen des Spiels und die Farben als Optionen, um unser neues Skript, oder fordert den Benutzer: der name des Spiels, in der Grundfarbe und dann die sekundäre Farbe. Unser Skript wird die Durchsetzung der Validierung, um sicherzustellen, dass beide Farben in das format der hex-code (z.B. #101b6b).

Wenn wir möchten, erstellen Sie ein neues Spiel reskin, wir sollten in der Lage sein, um diesen Befehl ausführen zu generieren:

$ Knoten new-reskin.js –gameName=’blue-reskin’ –gamePrimaryColor=’#76cad8′ –gameSecondaryColor=’#10496b’

Der obige Befehl bauen das Spiel sofort, denn es hat die drei Werte, die es braucht, um lassen Sie die reskin.

Wir erstellen dieses Skript new-reskin.jsund diese Datei führt die folgenden Schritte aus:

  1. Es wird gelesen in den Optionen in der Befehlszeile übergeben und speichert Sie als Variablen. Optionen können gelesen werden, indem Sie in der Prozess-Objekt (Prozess -.argv).
  2. Es wird überprüft, die Werte, die sicherstellen, dass der name des Spieles, und die Farben sind nicht undefiniert.
  3. Wenn es irgendwelche Problemen bei der überprüfung, wird der Benutzer aufgefordert, zu re-geben Sie es richtig, bevor Sie fortfahren.
  4. Nun, es hat die Werte, es wird eine Kopie von dem template-Verzeichnis und legen Sie eine Kopie davon in die releases-Verzeichnis und nennen Sie das neue Verzeichnis mit dem Namen des Spiels Gaben wir es.
  5. Es wird dann Lesen Sie die JSON-Datei erst vor kurzem erstellt im Rahmen der Veröffentlichungen Verzeichnis und überschreiben Sie die Werte mit den Werten, die wir übergeben (die Farben).
  6. Am Ende, wird der Benutzer aufgefordert, um zu sehen, wenn Sie möchten, öffnen Sie das Spiel in einem browser. Es fügt einige Bequemlichkeit, anstatt uns versuchen zu erinnern, was die URL ist.

Hier ist das vollständige Skript. Gehen wir durch Sie danach.

require(‘Farben’);
const argv = require(‘minimist’) (- Prozess.argv.slice(2));
const Pfad = require(‘Pfad’);
const readLineSync = require(‘readline-sync’);
const fse = require(‘fs-extra”);
const open = require(‘opn’);
const GAME_JSON_FILENAME = ‘Spiel.json’;

lassen Sie { gameName, gamePrimaryColor, gameSecondaryColor } = argv;

wenn (gameName === undefined) {
gameName = readLineSync.Frage(‘Was ist der name des neuen reskin? ‘, {
limit: input => input.trim().Länge > 0,
limitMessage: “Das Projekt muss einen Namen haben, versuchen Sie es erneut”
});
}

const confirmColorInput = (Farbe, colorType = ‘primary’) => {
const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
wenn (hexColorRegex.test(color)) {
return Farbe;
}
zurück readLineSync.Frage(`Geben Sie einen Hex-Code für das Spiel ${colorType} color `, {
limit: hexColorRegex,
limitMessage: ‘Geben Sie eine gültige hex-code: #efefef’
});
};

gamePrimaryColor = confirmColorInput(gamePrimaryColor, ‘primary’);
gameSecondaryColor = confirmColorInput(gameSecondaryColor, ‘zweiter’);

console.log (“Erstellen eines neuen reskin ‘${gameName}’ mit der Haut Farbe: Primary: ‘${gamePrimaryColor}’ Sekundarschule: ‘${gameSecondaryColor}”);

const src = Pfad.join(__dirname, ‘template’);
const Ziel = Pfad.join(__dirname, ‘Versionen’, gameName);
const configurationFilePath = Pfad.join(Ziel, GAME_JSON_FILENAME);
const projectToOpen = Pfad.join(‘http://localhost:8080’, ‘Versionen’, gameName, ‘index.html’);

fse.copy(src, Ziel)
.dann ist(() => {
console.log (“Erfolgreich erstellt ${destination}`.green);
zurück fse.readJson(configurationFilePath);
})
.dann((config) => {
const newConfig = config;
newConfig.primaryColor = gamePrimaryColor;
newConfig.secondaryColor = gameSecondaryColor;
zurück fse.writeJson(configurationFilePath, newConfig);
})
.dann ist(() => {
console.log(`Aktualisierte Konfigurationsdatei ${configurationFilePath}`green);
openGameIfAgreed(projectToOpen);
})
.catch(Konsole.Fehler);

const openGameIfAgreed = (fileToOpen) => {
const isOpeningGame = readLineSync.keyInYN(‘möchten Sie auf das Spiel zu öffnen? ‘);
wenn (isOpeningGame) {
open(fileToOpen);
}
};

Am Anfang des Skripts, benötigen wir die Pakete, die nötig sind, um diesen Prozess durchzuführen.

  • Farben werden verwendet, um zu bedeuten Erfolg oder Misserfolg mit grünen oder roten text.
  • minimist um es einfacher zu machen, um Argumente an das Skript und analysieren Sie Optional. Pass-Eingang ohne Aufforderung zu betreten.
  • Pfad zu konstruieren, die Pfade zu den template-und den Zielordner für das neue Spiel.
  • readline-sync, Benutzer auffordern, für Informationen, wenn es fehlt.
  • fs-extra, wir können kopieren und fügen Sie unsere Spiel-Vorlage. Eine Erweiterung des nativen fs-Modul.
  • opn ist eine Bibliothek, die ist cross-Plattform und eröffnen unser Spiel in einem browser nach der Fertigstellung.

Die Mehrzahl der Module oben wäre schon heruntergeladen/installiert, wenn Sie lief npm install im Stammverzeichnis der nobot-Beispiele-repository. Der rest sind native zu Knoten.

Wir überprüfen, ob das Spiel dem Namen übergeben wurde, als eine option über die Befehlszeile ein, und falls nicht, werden wir den Benutzer auffordern, für Sie.

// Namen der JSON-Datei. Wir speichern es als eine Konstante
const GAME_JSON_FILENAME = ‘Spiel.json’;

// Werden aus der Befehlszeile –gameName=’mein Spiel’ usw.
lassen Sie { gameName, gamePrimaryColor, gameSecondaryColor } = argv;

// war die gameName übergeben?
wenn (gameName === undefined) {
gameName = readLineSync.Frage(‘Was ist der name des neuen reskin? ‘, {
limit: input => input.trim().Länge > 0,
limitMessage: “Das Projekt muss einen Namen haben, versuchen Sie es erneut”
});
}

Da zwei unserer Werte sein müssen, hex-codes, erstellen wir eine Funktion, die das tun, die überprüfung für Farben: die primäre und die sekundäre. Wenn die Farbe geliefert, die der Benutzer nicht an unserer Validierung haben wir die Eingabeaufforderung für die Farbe, bis es funktioniert.

// Ist die Farbe übergeben, treffen Sie unsere die Validierung der Anforderungen?
const confirmColorInput = (Farbe, colorType = ‘primary’) => {
const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
wenn (hexColorRegex.test(color)) {
return Farbe;
}
zurück readLineSync.Frage(`Geben Sie einen Hex-Code für das Spiel ${colorType} color `, {
limit: hexColorRegex,
limitMessage: ‘Geben Sie eine gültige hex-code: #efefef’
});
};

Wir verwenden die obige Funktion zu erhalten, sowohl die primären und sekundären Farben.

gamePrimaryColor = confirmColorInput(gamePrimaryColor, ‘primary’);
gameSecondaryColor = confirmColorInput(gameSecondaryColor, ‘zweiter’);

Im nächsten block von code, wir drucken nach standard-output (Konsole.Protokoll), um die Werte zu bestätigen, die verwendet werden in den Prozess des Aufbaus das Spiel. Die Anweisungen, die Folgen, bereiten sich die Pfade zu den entsprechenden Dateien und Verzeichnisse.

Der src auf das template-Verzeichnis. Das Ziel-die zeigen wird, ein neues Verzeichnis unter releases. Die Konfigurationsdatei an, werden Ihre Werte aktualisiert wird, befinden sich unter diesem neuen Spiel-Verzeichnis, das wir erstellen. Und schließlich, um eine Vorschau unserer neuen Spiel konstruieren wir die URL mit dem Pfad zu dem lokalen server, den wir hochgefahren früher auf.

console.log (“Erstellen eines neuen reskin ‘${gameName}’ mit der Haut Farbe: Primary: ‘${gamePrimaryColor}’ Sekundarschule: ‘${gameSecondaryColor}”);
const src = Pfad.join(__dirname, ‘template’);
const Ziel = Pfad.join(__dirname, ‘Versionen’, gameName);
const configurationFilePath = Pfad.join(Ziel, GAME_JSON_FILENAME);
const projectToOpen = Pfad.join(‘http://localhost:8080’, ‘Versionen’, gameName, ‘index.html’);

In der folgende code diese Erklärung wir:

  • Kopieren Sie die Vorlage-Dateien in den releases-Verzeichnis.
  • Nachdem dieser erstellt ist, Lesen wir die JSON-der original-Vorlage-Werte.
  • Mit der neuen Konfigurations-Objekt, überschreibt man die bestehenden primär-und Sekundär-Farben durch die Eingabe des Benutzers.
  • Schreiben wir die JSON-Datei, damit es die neuen Werte.
  • Wenn der JSON-Datei wurde aktualisiert, wir bitten Sie den Benutzer, wenn Sie möchten, öffnen Sie das neue Spiel in einem browser.
  • Wenn etwas schief ging, wir fangen den Fehler und melden Sie es aus.

fse.copy(src, Ziel)
.dann ist(() => {
console.log (“Erfolgreich erstellt ${destination}`green);
zurück fse.readJson(configurationFilePath);
})
.dann((config) => {
const newConfig = config;
newConfig.primaryColor = gamePrimaryColor;
newConfig.secondaryColor = gameSecondaryColor;
zurück fse.writeJson(configurationFilePath, newConfig);
})
.dann ist(() => {
console.log(`Aktualisierte Konfigurationsdatei ${configurationFilePath}`green);
openGameIfAgreed(projectToOpen);
})
.catch(Konsole.Fehler);

Unten ist die Funktion, die aufgerufen wird, wenn das kopieren abgeschlossen ist. Es wird dann den Benutzer auffordern, um zu sehen, wenn Sie möchten, zu öffnen, bis das Spiel im browser. Der Benutzer antwortet mit J oder n

const openGameIfAgreed = (fileToOpen) => {
const isOpeningGame = readLineSync.keyInYN(‘möchten Sie auf das Spiel zu öffnen? ‘);
wenn (isOpeningGame) {
open(fileToOpen);
}
};

Lassen Sie uns sehen Sie es in Aktion, wenn wir nicht weitergeben, Argumente. Sie können sehen, es nicht zu brechen, und stattdessen der Benutzer aufgefordert, die Werte, die es braucht.

$ Knoten new-reskin.js
Was ist der name des neuen reskin? blau-reskin
Geben Sie einen Hex-Code für das Spiel primäre Farbe #76cad8
Geben Sie einen Hex-Code für das Spiel sekundäre Farbe #10496b
Erstellen Sie einen neuen reskin “blue-reskin” mit Haut Farbe: Primary: ‘#76cad8’ Sekundarschule: ‘#10496b’
Erfolgreich erstellt nobot-BeispieleBeispiele20releasesblau-reskin
Aktualisierte Konfigurationsdatei nobot-BeispieleBeispiele20releasesblau-reskingame.json
Sie möchten auf das Spiel zu öffnen? [y/n]: y
(öffnet ein Spiel im browser)

Mein Spiel öffnet sich auf meinem localhost-server automatisch und das Spiel beginnt, mit den neuen Farben. Süß!

Oh… ich habe ein Leben schon. Nun, wenn Sie navigieren Sie zu dem Verzeichnis releases, sehen Sie ein neues Verzeichnis namens blue-reskin Diese enthält die Werte, die in der JSON-Datei, die wir eingegeben, während der Skript-Ausführung.

Unten sind ein paar mehr releases, den ich durch ausführen des gleichen Befehls. Können Sie sich vorstellen, wenn Sie die Freigabe-Spiele, könnten Sie unterschiedliche: Bilder, sounds, labels, Inhalte und Schriftarten, die Sie würde haben eine umfangreiche Bibliothek von spielen basiert auf der gleichen mechanik.

Noch besser, wenn die beteiligten und Designer war, alle diese Informationen in einem Jira-ticket, Sie könnte integrieren die Jira-API in den Knoten Skripts zu injizieren, diese Werte, ohne dass der Nutzer irgendwelche Eingaben. Gewinnen!

Dies ist eines der vielen Beispiele, die gefunden werden können in die Automatisierung mit Node.js. In diesem Buch werden wir uns ein umfassenderes Beispiel mit “Stein-Schere-Papier” als basis eines build-tool von Grund auf neu erstellt.

  • Farbe Print: http://amzn.eu/aA0cSnu
  • Kindle: https://amzn.zu/2JPTk7q
  • Kobo: https://www.kobo.com/gb/en/ebook/automating-with-node-js
  • Leanpub: https://leanpub.com/automatingwithnodejs