Farbe und Bewegung auf der Kommandozeile

Node.js-Module: Chalk, Emoji und Progress
Keine Kommentare

Bis vor einiger Zeit bedeutete eine Kommandozeilenapplikation meist, dass das User Interface vernachlässigt werden kann und dass es ausreicht, lediglich Debug-Ausgaben auf die Konsole zu schreiben. Dass es auch anders geht, zeigen allen voran die Paketmanager.

Ein typisches Beispiel hierfür ist npm in der Version 3, in der sämtliche heruntergeladenen und installierten Pakete in einer potenziell langen Liste angezeigt wurden. Wird die Ausgabe nicht in ein Textbetrachtungswerkzeug umgeleitet, besteht kaum eine Möglichkeit, sie sinnvoll weiter zu verwenden. Dass es auch anders geht, zeigen auch wieder allen voran die Paketmanager. Mittlerweile hat beispielsweise npm die Ausgabe angepasst. Statt endloser Ausgaben wird lediglich eine Zeile mit einem Fortschrittsbalken und der aktuellen Aufgabe ausgegeben. Nur Warnungen und Befehle, die durch npm-Skripte ausgeführt werden, werden noch zusätzlich angezeigt. Eine noch übersichtlichere Ausgabe erzeugt der Yarn-Paketmanager von Facebook. Auch hier wird mit einem Fortschrittsbalken gearbeitet, zusätzlich erhält der Benutzer aber zu jedem Zeitpunkt im Prozess eine Übersicht, wie viele Pakete noch verarbeitet werden müssen. Am Ende der Installation gibt Yarn eine Zusammenfassung der erledigten Arbeiten aus. Aufgewertet wird das Ganze durch die Anzeige von Emojis auf der Kommandozeile. Sowohl Yarn als auch npm basieren auf Node.js, das bedeutet, dass Sie ebenfalls auf diese Hilfsmittel zurückgreifen können.

Chalk – Farbe für die Konsole

Bei Chalk handelt es sich um ein Paket, mit dessen Hilfe Sie komfortabel die Konsolenausgabe Ihrer Applikation stylen können. Die Möglichkeiten umfassen jedoch nicht nur das Setzen der Schriftfarbe, sondern auch die Konfiguration der Hintergrundfarbe und die Anpassung des Schriftstils selbst, wie beispielsweise unterstrichen. Chalk verwendet standardisierte Steuerzeichen, um die Styles zu setzen, maskiert diese allerdings durch lesbare Kommandos. Installiert wird Chalk mit dem Kommando npm install chalk in Ihrer Applikation. Chalk arbeitet mit einer Objekt- und Methodenstruktur, um die gewünschten Styles anzuwenden. Das bedeutet, dass Sie bei einer Konsolenausgabe wie gewohnt console.log verwenden, aber statt einer normalen Zeichenkette die Methoden von Chalk zur Ausgabeformatierung verwenden. Nachfolgend sehen Sie, wie Sie einen Teil der Ausgabe rot einfärben können:

const chalk = require('chalk');

console.log('Hello ' + chalk.red('World') + '!');

Neben dieser einfachen Form der Ausgabeformatierung bietet Ihnen Chalk noch weitere hilfreiche Features:

  • Verschachtelung: Sie können auch mehrere Chalk-Aufrufe ineinander verschachteln, so können Sie beispielsweise einen Teil einer gefärbten Zeichenkette unterstreichen.
  • Mehrere Styles kombinieren: Sollen mehrere Styles gleichzeitig auf eine Zeichenkette angewendet werden, können Sie diese durch Punktnotation miteinander kombinieren. Ein chalk.red.bold sorgt dafür, dass die Zeichenkette fett und rot dargestellt wird.

Emojis – die Kommandozeile auflockern

Was speziell bei der Verwendung von Yarn ins Auge sticht, ist der Einsatz von Emojis bei der Ausgabe. Dafür verantwortlich ist das Paket node-emoji. Das Paket wird über das Kommando npm install node-emoji installiert. Der Funktionsumfang umfasst die Anzeige, das Auffinden und die Auflösung von Emojis in den entsprechenden Code. Eine Liste der unterstützten Emojis mit den jeweiligen Codes finden Sie auf GitHub. Nachfolgend zeigt Ihnen ein einfaches Beispiel die Verwendung von Emojis bei der Konsolenausgabe:

const emoji = require('node-emoji');

console.log(emoji.emojify(':white_check_mark: Task completed'));
console.log(emoji.emojify(':x: Task still open'));

Die Emoji-Codes werden in Doppelpunkte eingefasst. Die emojify-Funktion ersetzt alle bekannten Codes und ruft für alle unbekannten Codes eine optional übergebene Callback-Funktion auf. Das Gegenstück zur emojify-Funktion bildet die unemojify-Funktion. Sie akzeptiert eine Zeichenkette mit Emojis und löst diese in den jeweiligen Code auf. Weitere Funktionen beispielsweise zum Auffinden eines bestimmten Codes finden Sie ebenfalls auf GitHub.

Progress – wo stehen wir?

Gerade bei länger dauernden Operationen ist es hilfreich, dem Benutzer den aktuellen Status der Verarbeitung anzuzeigen. Eine hierfür häufig verwendete Lösung ist ein Fortschrittsbalken. Doch bevor Sie anfangen, ihn selbst zu programmieren, sollten Sie besser auf das progress-Paket zurückgreifen. Nach der Installation mit npm install progress können Sie den Balken in Ihre Applikation einbinden. Bei der Initialisierung geben Sie in einer Zeichenkette an, was angezeigt werden soll. Hierbei steht Ihnen eine Reihe von Tokens zur Verfügung, die durch das progress-Paket ersetzt werden. So steht das Token :bar beispielsweise für den Fortschrittsbalken selbst. Die Tokens :current und :total geben den aktuellen Index beziehungsweise die Gesamtanzahl der Schritte an.

Python Summit 2018

Advanced Flow Control in Python

mit Oz Tiram (derico – web development & consulting)

Azure in Action: Pragmatische Cloud-Lösungen für alle

mit Thorsten Hans und Christian Weyer (Thinktecture AG)

Der zweite Parameter der Funktion ist das Konfigurationsobjekt des Balkens. Hier müssen Sie mit der total-Eigenschaft angeben, wie viele Schritte der Fortschrittsbalken aufweisen soll. Weitere Optionen sind beispielsweise complete und incomplete, mit denen Sie das Aussehen des Balkens beeinflussen können. Nachfolgend sehen Sie ein Beispiel für einen Fortschrittsbalken, der über zehn Schritte verfügt:

const progress = new Progress(':bar :current / :total', { total: 10});
const interval = setInterval(() => {
  progress.tick();
  if (progress.complete) {
    clearInterval(interval);
  }
}, 100)

Im Beispiel wird die tick-Methode alle 100 Millisekunden aufgerufen, um den Balken zu füllen. Sie sind jedoch nicht auf zeitliche Funktionen beschränkt, Sie können diese Methode an jeder beliebigen Stelle in Ihrer Applikation ausführen und so den Abschluss bestimmter Arbeitsschritte anzeigen.

Fazit

In Webapplikationen wird Usability schon seit längerer Zeit großgeschrieben. Auf der Kommandozeile wird sie jedoch immer noch stark vernachlässigt. Dabei lässt sich mit nur wenig Aufwand und ein paar zusätzlichen Paketen die Benutzererfahrung deutlich verbessern und der Blick des Benutzers auf die wesentlichen Aspekte der Ausgabe lenken. Die größte Stärke der Node.js-Pakete für die Kommandozeile ist, dass sie sich nur auf einen bestimmten Aspekt konzentrieren und sich dadurch hervorragend kombinieren lassen.

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -