Daten live auf dem Bildschirm ändern - Spectre Console Series

Einführung in Live Display

Tim beginnt mit einer Erläuterung von Spectre.Console und erklärt, wie es Ihre Konsolenanwendungen optisch ansprechend gestaltet. In dieser Reihe ist jede Lektion ein kurzes Beispiel, und der Quellcode ist in der Beschreibung verlinkt.

Er erklärt, dass sich diese Lektion auf die Verwendung der Live-Anzeigefunktion konzentriert, um vorhandene Daten auf dem Bildschirm für Echtzeit-Updates zu ändern. Tim ermutigt die Zuschauer auch, sich zu abonnieren und iamtimcorey.com für weitere Schulungsressourcen zu besuchen.

Eine neue Tabelle für Daten erstellen

Tim zeigt, dass er bereits eine neue Tabelle mit den Spalten Titel, Lektionen und Stunden erstellt hat. Diese Tabelle wird verwendet, um Kursinformationen aus einer API zu rendern.

Er führt auch einen Datensatztyp namens CourseInfo mit stark typisierten Eigenschaften für Kursname, Anzahl der Lektionen und Kurslänge in Stunden ein. Dies spiegelt die API-Struktur wider und ermöglicht ihm eine einfache Ausgabe von Text in einer stark typisierten Form.

In der Tabelle sind die Fußzeilen aktiviert, damit später Summen angezeigt werden können. Tim merkt an, dass dieses Layout eines von vielen willkürlichen Widgets ist, die Spectre für schöne Konsolenanwendungen unterstützt.

Starten der Live-Anzeige

Tim verwendet die Methode AnsiConsole.Live(table).StartAsync(...), um die Live-Anzeige zu starten. Er weist darauf hin, dass es auch eine nicht asynchrone Start()-Funktion gibt, wenn Sie nicht auf lange laufende Aufgaben warten müssen.

Er wickelt seinen Code in einen asynchronen Kontext ein, damit die Konsole aktualisiert werden kann, wenn neue Zeilen ankommen. Dies demonstriert die Fähigkeiten des aktuellen Terminals, die Ausgabe neu zu zeichnen, ohne den Bildschirm zu löschen.

Daten abrufen und Fortschritt anzeigen

Innerhalb des Live-Kontexts schreibt Tim eine for-Schleife mit einem int-Index von 1 bis 31, da die Beispiel-API 31 Kurse auflistet. Für jeden Index ruft er eine Methode der Hilfsklasse auf, um API-Daten abzurufen.

Dieses Hilfsmittel konvertiert den rohen JSON-String in ein stark typisiertes CourseInfo-Objekt. Tim ruft die API absichtlich einen Kurs nach dem anderen auf, um zu zeigen, wie der Anzeigefortschritt live erfolgt - ein großartiges Beispiel für die Simulation von lang laufenden Aufgaben in einer Konsolenumgebung.

Er merkt an, dass er das /i in der URL hätte entfernen können, wenn er nur eine Anfrage hätte stellen wollen, aber er macht mehrere Aufrufe, "um zu zeigen, was im Laufe der Zeit hereinkommt"

Zeilen hinzufügen und Ausgabe aktualisieren

Mit jeder zurückgegebenen CourseInfo-Instanz ruft Tim table.AddRow(...) auf, um eine neue Zeile mit dem Titel des Kurses, der Anzahl der Lektionen und der Länge in Stunden zu erstellen. Er verwendet String-Interpolation mit dem $-Format und ruft bei Bedarf .ToString() auf, um Werte zu konvertieren, die keine Strings sind.

Dadurch wird die Tabelle bei jedem Durchlauf mit neuen Zeilen gerendert, was zeigt, wie Spectre Zeilen dynamisch aktualisieren kann. Er demonstriert auch, wie man potenzielle Probleme wie Typinkongruenzen erkennt, indem man explizit auf Konvertierungen eingeht.

Benutzerdefinierte Fußzeilen und laufende Summen

Als nächstes zeigt Tim, wie man benutzerdefinierte Fußzeilen zu den Spalten hinzufügt. Er stellt table.Columns[0].Footer so ein, dass die Anzahl der bisher heruntergeladenen Kurse angezeigt wird. Er dupliziert dies für die zweite und dritte Spalte, summiert aber diesmal die Anzahl der Lektionen und die Gesamtstunden für alle Kurse.

Auf diese Weise kann der Benutzer auf einen Blick sehen, wie viele Lektionen und wie viele Stunden sich angesammelt haben. Dies ist ein praktisches Beispiel für die Verwendung der Spectre-Steuerelemente zur Anzeige von Gesamtwerten neben Live-Daten.

Tim hat das Fenster kurz "entpinnt", damit Sie das gesamte Layout sehen können, während die Zahlen wachsen. Er erklärt, dass Fußzeilen zu den integrierten Stilen von Spectre gehören, ähnlich wie Rahmen, Markierungen und Themen.

Auffrischung des Kontexts nach jeder Aktion

Tim betont die "kritische Sache" bei Live-Anzeigen: Rufen Sie immer context.Refresh() auf, nachdem Sie Änderungen vorgenommen haben. Dadurch wird sichergestellt, dass das Terminal Ihre Ausgabe tatsächlich mit den neuen Daten neu zeichnet. Andernfalls würden Ihre Zeilen, Fußzeilen oder sogar unterschiedliche Farben erst am Ende der Live-Sitzung erscheinen.

Debugging und Ausnahmebehandlung

Als er den Code zum ersten Mal ausführt, stößt Tim auf eine Index Out of Range-Ausnahme. Er geht seinen Fehler durch - er hat die Spaltenindizes falsch gezählt (sie lauten 0,1,2 und nicht 0,2,3) - und korrigiert ihn.

Dies ist eine sanfte Erinnerung daran, dass Sie auch in Spectre.Console Fehler erkennen und sicherstellen sollten, dass Ihre Indizes und Args korrekt sind.

Die Live-Anzeige in Aktion sehen

Tim führt den korrigierten Code aus und zeigt die Live-Anzeige in Aktion: Zeilen werden hinzugefügt, Summen werden aktualisiert und in der Fußzeile werden die kombinierten Werte angezeigt.

Sie können "1.652 Lektionen", "403,5 Stunden" und "31 Kurse insgesamt" sehen, während die Daten hereinströmen. Dies ist genau die Art von Aktion, die dafür sorgt, dass sich die Spectre Console Live-Anzeige wie ein Dashboard in Ihrem aktuellen Terminal anfühlt.

Nur auf die Fußzeilen konzentrieren

Um Änderungen besser sichtbar zu machen, kommentiert Tim den Code zum Hinzufügen von Zeilen aus, sodass nur die Fußzeilen aktualisiert werden. Dies zeigt, wie man auch ohne Scrollen der Daten die Summen live verfolgen kann.

Er weist auch darauf hin, dass Spectre die Spaltenbreite automatisch anpasst, wenn Zahlen wachsen (z. B. von 9 auf 10). Dies ist ein kleines, aber wirkungsvolles Beispiel für die automatische Erkennung von Breiten und Formaten durch die Bibliothek.

Beyond Tables - Beliebige Widgets und Themes

Tim erklärt, dass die Live-Anzeige nicht auf Tabellen beschränkt ist. Sie können es auf beliebige Widgets wie Panels, Eingabeaufforderungen oder sogar ein Balkendiagramm anwenden. Sie können Text aktualisieren, verschiedene Farben hervorheben, benutzerdefinierte farbkodierte Themen anwenden oder Spinner hinzufügen.

Er erwähnt, dass Sie Stile wie Blau, Grün oder Grau ändern können, um sie an Ihre Themen anzupassen, und Sie können sogar mit verschachtelten Layouts oder Widgets arbeiten. Durch diese Flexibilität ist Spectre stark von reichhaltigen Konsolentools in anderen Ökosystemen inspiriert" (einige sogar in Python geschrieben), aber auf .NET zugeschnitten.

Asynchroner vs. synchroner Live-Anzeigestart

Tim stellt klar, warum er die asynchrone Version verwendet hat: weil er auf API-Aufrufe wartete. Wenn Ihre Aktualisierungen nicht asynchron sind, können Sie einfach Start() ohne await aufrufen.

Diese Wahl hilft Ihnen, schöne Konsolenanwendungen zu erstellen, die auch bei lang laufenden Aufgaben reaktionsschnell bleiben.

Abschluss

In seinem Video hat Tim gerade gezeigt, wie man eine Spectre Console Live-Anzeige erstellt, die Daten direkt in der Konsole aktualisieren, summieren und auffrischen kann.

Dies ist eine großartige Grundlage für die Aufforderung zur Benutzereingabe, das Hinzufügen von Widgets oder die Erstellung von Dashboards mit verschiedenen Farben und benutzerdefinierten farbcodierten Themen. In Kombination mit der Fähigkeit von Spectre, einfach Text auszugeben, Markup zu verwenden und Steuerelemente wie Panels oder Bäume zu erstellen, können Sie dynamische .NET-Anwendungen direkt in Ihrem Terminal erstellen.

Tims Demonstration zeigt, dass Sie mit Spectre.Console nicht nur Dashboards, sondern auch live aktualisierte Tabellen, Spinner und andere Widgets erstellen können. Es ist ein praktisches Beispiel dafür, wie eine einfache Konsole in ein interaktives Echtzeit-Tool verwandelt werden kann - und eine nette Art, Ihren Benutzern "Happy Coding" zu sagen.