Modifier des données en direct à l'écran - Spectre Console Series

Introduction à l'affichage en direct

Tim commence par expliquer Spectre.Console et comment il rend vos applications de console visuellement attrayantes. Dans cette série, chaque leçon est un court exemple, et le code source est lié dans la description.

Il explique que cette leçon porte sur l'utilisation de la fonction d'affichage en direct pour modifier les données existantes à l'écran en vue d'une mise à jour en temps réel. Tim encourage également les téléspectateurs à s'abonner et à visiter iamtimcorey.com pour d'autres ressources de formation.

Création d'un nouveau tableau de données

Tim montre qu'il a déjà créé un nouveau tableau avec les colonnes titre, leçons et heures. Ce tableau sera utilisé pour rendre les informations de cours tirées d'une API.

Il présente également un type d'enregistrement appelé CourseInfo avec des propriétés fortement typées pour le nom du cours, le nombre de leçons et la durée du cours en heures. La traduction doit rester professionnelle et préserver l'exactitude technique tout en expliquant les caractéristiques et les avantages de ces outils de développement.

Les pieds de page du tableau sont activés pour que les totaux puissent être affichés ultérieurement. Tim note que cette mise en page est l'un des nombreux widgets arbitraires que Spectre prend en charge pour de superbes applications de console.

Démarrer l'affichage en direct

Tim utilise la méthode AnsiConsole.Live(table).StartAsync(...) pour commencer l'affichage en direct. Il souligne qu'il existe également une fonction Start() non asynchrone si vous n'avez pas besoin d'attendre de longues tâches en cours d'exécution.

Il intègre son code dans un contexte asynchrone afin que la console puisse se rafraîchir au fur et à mesure que de nouvelles lignes arrivent. Cela démontre les capacités du terminal actuel à redessiner la sortie sans effacer l'écran.

Récupération de données et affichage de la progression

Dans le contexte réel, Tim écrit une boucle for en utilisant un index int de 1 à 31 parce que l'API de l'échantillon répertorie 31 cours. Pour chaque index, il appelle une méthode de la classe d'aide pour récupérer les données de l'API.

Cette aide convertit la chaîne JSON brute en un objet CourseInfo fortement typé. Tim appelle intentionnellement l'API un cours à la fois plutôt qu'en bloc pour montrer comment la progression de l'affichage se produit en direct - un excellent exemple de simulation de tâches de longue durée dans un environnement de console.

Il note que s'il n'avait voulu qu'une seule demande, il aurait pu supprimer le /i dans l'URL, mais il fait plusieurs appels "pour montrer les choses qui arrivent au fil du temps"

Ajouter des lignes et mettre à jour les résultats

Pour chaque instance CourseInfo renvoyée, Tim appelle table.AddRow(...) pour créer une nouvelle ligne avec le titre du cours, le nombre de leçons et la durée en heures. Il utilise l'interpolation de chaînes avec le format $ et fait appel à .ToString() lorsque cela est nécessaire pour convertir des valeurs qui ne sont pas des chaînes.

Cela rend le tableau avec de nouvelles lignes à chaque passage, montrant comment Spectre peut mettre à jour les lignes de manière dynamique. Il démontre également qu'il est possible d'éviter les problèmes potentiels tels que les erreurs de type en étant explicite sur les conversions.

Pieds de page personnalisés et totaux courants

Tim montre ensuite comment ajouter des pieds de page personnalisés aux colonnes. Il définit table.Columns[0].Footer pour afficher le nombre de cours téléchargés jusqu'à présent. Il fait de même pour les deuxième et troisième colonnes, mais cette fois en additionnant le nombre de leçons et le nombre total d'heures pour l'ensemble des cours.

L'utilisateur peut ainsi voir en un coup d'œil le nombre de leçons et d'heures qu'il a accumulées. Il s'agit d'un exemple concret d'utilisation des contrôles Spectre pour afficher des totaux de valeurs à côté de données en direct.

Tim a brièvement "épinglé" la fenêtre pour que vous puissiez voir la mise en page complète au fur et à mesure que les chiffres augmentent. Il explique que les pieds de page font partie des styles intégrés offerts par Spectre, au même titre que les bordures, le balisage et les thèmes.

Rafraîchir le contexte après chaque action

Tim insiste sur la "chose critique" concernant les affichages en direct : il faut toujours appeler context.Refresh() après avoir apporté des modifications. Cela permet de s'assurer que le terminal redessine effectivement votre sortie avec les nouvelles données. Sans cela, vos lignes, pieds de page ou même couleurs différentes n'apparaîtraient qu'à la fin de la session en direct.

Débogage et gestion des exceptions

Lorsqu'il exécute le code pour la première fois, Tim se heurte à une exception de type Index Out of Range. Il explique son erreur - il a mal compté les indices des colonnes (il s'agit de 0,1,2 et non de 0,2,3) - et la corrige.

Ceci est un petit rappel que même dans Spectre.Console, vous devez détecter les erreurs et vous assurer que vos indices et args sont corrects.

Voir l'affichage en direct en action

Tim exécute le code corrigé et montre l'affichage en direct : les lignes sont ajoutées, les totaux sont mis à jour et le pied de page affiche les valeurs combinées.

Vous pouvez voir "1 652 leçons", "403,5 heures" et "31 cours au total" au fur et à mesure que les données affluent. C'est exactement le type d'action qui fait que l'affichage en direct de la console Spectre ressemble à un tableau de bord à l'intérieur de votre terminal actuel.

Se concentrer uniquement sur les pieds de page

Pour rendre les changements plus visibles, Tim commente le code d'ajout de lignes afin que seuls les pieds de page soient mis à jour. Ceci montre comment, même sans faire défiler les données, vous pouvez suivre les totaux en direct.

Il note également que Spectre ajuste automatiquement la largeur des colonnes lorsque les nombres augmentent (par exemple, de 9 à 10). Il s'agit d'un petit mais puissant exemple de la détection automatique des largeurs et des formats par la bibliothèque.

Au-delà des tableaux - Widgets et thèmes arbitraires

Tim explique que l'affichage en direct ne se limite pas aux tableaux. Vous pouvez l'appliquer à des widgets arbitraires tels que des panneaux, une invite à la saisie de l'utilisateur ou même un diagramme à barres. Vous pouvez mettre à jour le texte, mettre en évidence des couleurs différentes, appliquer des thèmes de couleurs codées personnalisées ou ajouter des filtres.

Il mentionne que vous pouvez changer les styles tels que le bleu, le vert ou le gris pour correspondre à vos thèmes, et que vous pouvez même travailler avec des mises en page imbriquées ou des widgets. Cette flexibilité est ce qui rend Spectre "fortement inspiré" par des outils de console riches dans d'autres écosystèmes (certains ont même été écrits en python) mais adaptés à .NET.

Démarrage de l'affichage en direct asynchrone vs synchrone

Tim précise pourquoi il a utilisé la version asynchrone : parce qu'il attendait des appels d'API. Si vos mises à jour ne sont pas asynchrones, vous pouvez simplement appeler Start() sans attendre.

Ce choix vous aide à créer de belles applications de console qui restent réactives, même avec des tâches de longue durée.

Conclusion

Dans sa vidéo, Tim vient de montrer comment construire un affichage en direct de la console Spectre qui peut mettre à jour, additionner et rafraîchir des données directement à l'intérieur de la console.

Il s'agit d'une excellente base pour inviter l'utilisateur à entrer des données, ajouter des widgets ou créer des tableaux de bord avec différentes couleurs et des thèmes personnalisés codés par couleur. Combiné à la capacité de Spectre de produire facilement du texte, d'utiliser des balises et de créer des contrôles tels que des panneaux ou des arbres, vous pouvez créer des applications .NET dynamiques directement dans votre terminal.

La démonstration de Tim montre qu'avec Spectre.Console, vous pouvez créer non seulement des tableaux de bord, mais aussi des tableaux de mise à jour en direct, des spinners et d'autres widgets. Il s'agit d'un exemple pratique de transformation d'une simple console en un outil interactif en temps réel, et d'une manière agréable de dire "bon codage" à vos utilisateurs.