Modificación de datos en directo en pantalla - Spectre Console Series

Introducción a Live Display

Tim comienza explicando Spectre.Console y cómo hace que tus aplicaciones de consola sean visualmente atractivas. En esta serie, cada lección es un breve ejemplo, y el código fuente está enlazado en la descripción.

Explica que esta lección se centra en cómo utilizar la función de visualización en vivo para modificar los datos existentes en la pantalla y actualizarlos en tiempo real. Tim también anima a los espectadores a suscribirse y visitar iamtimcorey.com para obtener más recursos de formación.

Creación de una nueva tabla de datos

Tim muestra que ya ha creado una nueva tabla con las columnas de título, lecciones y horas. Esta tabla se utilizará para presentar información sobre cursos extraída de una API.

También introduce un tipo de registro llamado CourseInfo con propiedades fuertemente tipadas para el nombre del curso, el número de lecciones y la duración del curso en horas. Esto refleja la estructura de la API y le permite dar salida fácilmente al texto de una forma fuertemente tipada.

La tabla tiene activados los pies de página para poder mostrar los totales más adelante. Tim señala que este diseño es uno de los muchos widgets arbitrarios que Spectre admite para aplicaciones de consola hermosas.

Inicio de la visualización en directo

Tim utiliza el método AnsiConsole.Live(table).StartAsync(...) para iniciar la visualización en directo. Señala que también hay una función Start() no asíncrona si no necesitas esperar a que se ejecuten tareas largas.

Envuelve su código en un contexto asíncrono para que la consola pueda actualizarse a medida que llegan nuevas filas. Esto demuestra las capacidades del terminal actual para redibujar la salida sin borrar la pantalla.

Obtención de datos y visualización del progreso

Dentro del contexto en vivo, Tim escribe un bucle for utilizando un índice int de 1 a 31 porque la API de muestra enumera 31 cursos. Para cada índice, llama a un método de la clase helpers para obtener los datos de la API.

Este ayudante convierte la cadena JSON sin procesar en un objeto CourseInfo de tipado fuerte. Tim llama intencionadamente a la API curso a curso en lugar de en bloque para mostrar cómo se produce el progreso de la visualización en directo: un gran ejemplo de simulación de tareas de larga duración en un entorno de consola.

Señala que si hubiera querido una sola petición, podría haber eliminado el /i en la URL, pero está haciendo varias llamadas "para mostrar las cosas que llegan con el tiempo"

Añadir filas y actualizar resultados

Con cada instancia CourseInfo devuelta, Tim llama a table.AddRow(...) para crear una nueva fila con el título del curso, el número de lecciones y la duración en horas. Utiliza la interpolación de cadenas con el formato $ y llama a .ToString() cuando sea necesario para convertir valores que no sean cadenas.

Esto representa la tabla con nuevas filas en cada pasada, mostrando cómo Spectre puede actualizar filas dinámicamente. También demuestra cómo detectar posibles problemas, como desajustes de tipo, siendo explícito sobre las conversiones.

Pies de página y totales personalizados

A continuación, Tim muestra cómo añadir pies de página personalizados a las columnas. Establece table.Columns[0].Footer para mostrar el recuento de cursos descargados hasta el momento. Repite esta operación para la segunda y la tercera columna, pero esta vez suma el número de lecciones y el total de horas de todos los cursos.

De este modo, el usuario puede ver de un vistazo cuántas lecciones y cuántas horas ha acumulado. Este es un ejemplo real del uso de los controles de Spectre para mostrar totales de valores junto con datos en directo.

Tim ha "descolgado" brevemente la ventana para que puedas ver el diseño completo a medida que crecen los números. Explica que los pies de página forman parte de los estilos integrados que ofrece Spectre, al igual que los bordes, las marcas y los temas.

Refrescar el contexto después de cada acción

Tim hace hincapié en la "cosa crítica" sobre las visualizaciones en vivo: llamar siempre a context.Refresh() después de hacer cambios. Esto garantiza que el terminal realmente redibuje su salida con los nuevos datos. Sin esto, sus filas, pies de página o incluso colores diferentes no aparecerían hasta que finalice la sesión en directo.

Depuración y manejo de excepciones

La primera vez que ejecuta el código, Tim se encuentra con una excepción de índice fuera de rango. Repasa su error -contar mal los índices de las columnas (son 0,1,2 y no 0,2,3)- y lo corrige.

Se trata de un amable recordatorio de que, incluso en Spectre.Console, debes detectar errores y asegurarte de que tus índices y args son correctos.

Ver la pantalla en directo

Tim ejecuta el código corregido y muestra la visualización en vivo: filas que se añaden, totales que se actualizan y el pie de página que muestra los valores combinados.

Puedes ver "1.652 lecciones", "403,5 horas" y "31 cursos en total" a medida que llegan los datos. Este es exactamente el tipo de acción que hace que la visualización en vivo de Spectre Console se sienta como un tablero dentro de su terminal actual.

Centrarse solo en los pies de página

Para que los cambios sean más visibles, Tim comenta el código de adición de filas para que sólo se actualicen los pies de página. Esto muestra cómo, incluso sin desplazar los datos, se pueden seguir los totales en directo.

También señala que Spectre ajusta automáticamente la anchura de las columnas cuando los números crecen (por ejemplo, de 9 a 10). Este es un pequeño pero potente ejemplo de la detección automática de anchos y formatos de la biblioteca.

Más allá de las tablas - Widgets y temas arbitrarios

Tim explica que la visualización en directo no se limita a tablas. Puede aplicarse a widgets arbitrarios como paneles, entradas de usuario o incluso un gráfico de barras. Puede actualizar el texto, resaltar diferentes colores, aplicar temas personalizados con códigos de color o añadir spinners.

Menciona que se pueden cambiar estilos como el azul, el verde o el gris para adaptarlos a los temas, e incluso se puede trabajar con diseños anidados o widgets. Esta flexibilidad es lo que hace que Spectre esté "fuertemente inspirado" en herramientas de consola enriquecidas de otros ecosistemas (algunas incluso escritas en Python), pero adaptadas for .NET.

Inicio de visualización en vivo de Async vs. Sync

Tim aclara por qué utilizó la versión asíncrona: porque estaba esperando llamadas a la API. Si tus actualizaciones no son asíncronas, puedes simplemente llamar a Start() sin await.

Esta opción le ayudará a crear aplicaciones de consola atractivas que mantengan su capacidad de respuesta incluso con tareas de larga duración.

Conclusión

En su vídeo, Tim acaba de mostrar cómo construir una visualización en vivo de la Consola Spectre que puede actualizar, sumar y refrescar datos directamente dentro de la consola.

Se trata de una base ideal para solicitar información al usuario, añadir widgets o crear cuadros de mando con diferentes colores y temas personalizados codificados por colores. Combinado con la capacidad de Spectre para generar texto fácilmente, utilizar marcas y crear controles como paneles o árboles, puedes crear aplicaciones .NET dinámicas directamente en tu terminal.

La demostración de Tim muestra que con Spectre.Console no sólo se pueden crear cuadros de mando, sino también tablas de actualización en directo, spinners y otros widgets. Es un ejemplo práctico de cómo convertir una simple consola en una herramienta interactiva en tiempo real, y una buena forma de decir "feliz programación" a tus usuarios.